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:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?