Clase 6 de 15 • Curso de Creación de Bloques en Gutenberg para WordPress
Contenido del curso
Juanito Ortega Guzmán
Andrés Felipe Patiño Vallejo
Lucio Negrello
Jose Pinto
Lucio Negrello
Mateo Lopez
Lucio Negrello
Mateo Lopez
Lucio Negrello
Jose Alfredo Cordoba Cadavid
Lucio Negrello
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;
Excelente!! Muy bien ese desafío! Saludos
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..
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!
¿Como se podria cambiar una imagen en vez de el texto input ?
Hola Mateo, cómo estás? En esta lectura se explica cómo hacer un campo de imagen. Espero que te sirva. Saludos!
¿Como se podria modificar una imagen en vez de hacer la modificacion al input ?
Hola Mateo, cómo estás? En esta lectura se explica cómo hacer un campo de imagen. Espero que te sirva. Saludos!
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
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!
