¿Cómo agregar opciones a tu bloque?

Clase 6 de 15 • Curso de Creación de Bloques en Gutenberg para WordPress

Juanito Ortega Guzmán

student•

Completé las opciones para modificar Email y Password: Mi archivo index.js

import { registerBlockType } from "@wordpress/blocks";
import edit from "./edit";
import "./styles.scss";

registerBlockType("plz/register", {
    title: "Register",
    category: "widgets",
    icon: "admin-users",
    attributes: {
        title: {
            source: "html",
            selector: "h1",
            default: "Register"
        },
        nameLabel: {
            type: "string",
            default: "Name"
        },
        emailLabel: {
            type: "string",
            default: "Email"
        },
        passLabel: {
            type: "string",
            default: "Password"
        }
    },
    edit,
    save: () => <h3>Register</h3>
});

Mi archivo edit.js

import { InspectorControls, RichText } from '@wordpress/block-editor';
import { Panel, PanelBody, TextControl } from '@wordpress/components';

const Edit = (props) => {
    const { className, attributes, setAttributes } = props;
    const { title, nameLabel, emailLabel, passLabel } = attributes;
    return (
        <>
            <InspectorControls>
                <Panel>
                    <PanelBody title="Labels" initialOpen={true}>
                        <TextControl
                            label="Name Label"
                            value={nameLabel}
                            onChange={(newLabel) => setAttributes({ nameLabel: newLabel })}
                        />
                        <TextControl
                            label="Email Label"
                            value={emailLabel}
                            onChange={(newLabel) => setAttributes({ emailLabel: newLabel })}
                        />
                        <TextControl
                            label="Password Label"
                            value={passLabel}
                            onChange={(newLabel) => setAttributes({ passLabel: newLabel })}
                        />
                    </PanelBody>
                </Panel>
            </InspectorControls>
            <div className={className}>
                <div className="signin__container">
                    <RichText
                        tagName="h1"
                        placeholder="Escribe un título"
                        className="signin__titulo"
                        value={title}
                        onChange={(newTitle) => setAttributes({ title: newTitle })}
                    />
                    <form className="signin__form" id="signup">
                        <div className="signin__name name--campo">
                            <label htmlFor="Name">{nameLabel}</label>
                            <input name="name" type="text" id="Name" />
                        </div>
                        <div className="signin__email name--campo">
                            <label htmlFor="email">{emailLabel}</label>
                            <input name="email" type="email" id="email" />
                        </div>
                        <div className="signin__pass name--campo">
                            <label htmlFor="password">{passLabel}</label>
                            <input name="password" type="password" id="password" />
                        </div>
                        <div className="signin__submit">
                            <input type="submit" value="Create" />
                        </div>
                        <div className="msg" />
                    </form>
                </div>
            </div>
        </>
    );
}

export default Edit;

El resultado:

Andrés Felipe Patiño Vallejo

student•

Hola Lucio, a decir verdad soy nuevo en react, y me ha cautivado, me está gustando bastante!

Hice el ejercicio propuesto, adicionando el label para el botón submit.

Index.js

import {registerBlockType} from "@wordpress/blocks";

import edit from "./edit";
import "./styles.scss";

registerBlockType("plz/register", {
    title: "Register",
    category: "widgets",
    icon: "admin-users",
    attributes: {
        title: {
            source: "html",
            selector: "h1",
            default: "Register"
        }, 
        nameLabel: {
            type: "string",
            default: "Name"
        },
        emailLabel: {
            type: "string",
            default: "Email"
        },
        passwordLabel: {
            type: "string",
            default: "Password"
        },
        submitLabel: {
            type: "string",
            default: "Create"
        }

    },
    edit,
    save: () => <h3>Register</h3>
});

Edit.js

import {InspectorControls, RichText} from '@wordpress/block-editor';
import {Panel, PanelBody, TextControl} from '@wordpress/components';

const Edit = (props) => {

    const {className, attributes, setAttributes} = props;
    const {title, nameLabel, emailLabel, passwordLabel, submitLabel} = attributes;

    return (
        <>
        <InspectorControls>
            <Panel>
                <PanelBody title="Labels" initialOpen={true}>
                    <TextControl 
                        label="Name label"
                        value = {nameLabel}
                        onChange = {(newLabel) => setAttributes({nameLabel: newLabel})}
                    />
                    <TextControl 
                        label="Email label"
                        value = {emailLabel}
                        onChange = {(newLabel) => setAttributes({emailLabel: newLabel})}
                    />
                    <TextControl 
                        label="Password label"
                        value = {passwordLabel}
                        onChange = {(newLabel) => setAttributes({passwordLabel: newLabel})}
                    />
                    <TextControl 
                        label="Submit label"
                        value = {submitLabel}
                        onChange = {(newLabel) => setAttributes({submitLabel: newLabel})}
                    />
                </PanelBody>
            </Panel>
        </InspectorControls>

        <div className={className}>
            <div className="signin__container">
                <RichText
                    tagName="h1"
                    placeholder="Escribe un título"
                    className="signin__titulo"
                    value={title}
                    onChange={
                        (newTitle) => setAttributes({title: newTitle})
                    }
                />
                <form className="signin__form" id="signup">
                    <div className="signin__name name--campo">
                        <label for="Name"> {nameLabel} </label>
                        <input name="name" type="text" id="Name"/>
                    </div>
                    <div className="signin__email name--campo">
                        <label for="email"> {emailLabel} </label>
                        <input name="email" type="email" id="email"/>
                    </div>
                    <div className="signin__pass name--campo">
                        <label for="password"> {passwordLabel} </label>
                        <input name="password" type="password" id="password"/>
                    </div>
                    <div className="signin__submit">
                        <input type="submit" value={submitLabel}/>
                    </div>
                    <div className="msg"></div>
                </form>
            </div>
        </div> 
        </>       
    );
}

export default Edit;

Lucio Negrello

teacher•

Excelente!! Muy bien ese desafío! Saludos

Jose Pinto

student•

Hola profe, donde puedo ver todas las librerias y los bloques que wordpress tiene integrado con el ? los componentes que usted ysa, imagino que hay mucho mas, donde puedo encontrarlos, busque en internet pero no di con las librerias, ni wp-blocks, ni wp-element..

Lucio Negrello

teacher•

Hola José, cómo estás? Mirá, la mayoría de los componentes están documentados en este handbook: https://developer.wordpress.org/block-editor/reference-guides/components/ Sino también podés verlos en GitHub, en los repo de WP y Gutenberg. Saludos!

Mateo Lopez

student•

¿Como se podria cambiar una imagen en vez de el texto input ?

Lucio Negrello

teacher•

Hola Mateo, cómo estás? En esta lectura se explica cómo hacer un campo de imagen. Espero que te sirva. Saludos!

Mateo Lopez

student•

¿Como se podria modificar una imagen en vez de hacer la modificacion al input ?

Lucio Negrello

teacher•

Hola Mateo, cómo estás? En esta lectura se explica cómo hacer un campo de imagen. Espero que te sirva. Saludos!

Jose Alfredo Cordoba Cadavid

student•

Profe consulta, Si deseara agregarle opciones a bloques del core de wordpress esto lo podría hacer? si es así alguna documentación que pueda estudiar para poder hacerlo muchas gracias

Lucio Negrello

teacher•

Hola José, cómo estás? Para crear opciones de estilos (la opción más recomendable) se pueden incorporar muy fácilmente como se explica en el handbook del editor de bloques. En caso de querer agregar opciones más complejas, es necesario crear un bloque que funcione como un HOC y utilizando algunos hooks crear un nuevo bloque que contenga el bloque original y extienda sus opciones. Espero que te sirva esta info. Saludos!