Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Cómo agregar opciones a tu bloque?

6/15
Recursos

Aportes 2

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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: () => <h2>Register</h2>
});

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:

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: () => <h2>Register</h2>
});

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;