¿Cómo agregar opciones a tu bloque?
Contenido del curso
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:
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;
Jose Pinto
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
ProfesorHola 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
¿Como se podria cambiar una imagen en vez de el texto input ?
Lucio Negrello
ProfesorHola Mateo, cómo estás? En esta lectura se explica cómo hacer un campo de imagen. Espero que te sirva. Saludos!
Mateo Lopez
¿Como se podria modificar una imagen en vez de hacer la modificacion al input ?
Lucio Negrello
ProfesorHola 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
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
ProfesorHola 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!
