Crea la vista de tu bloque para el editor

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

Erasmo Hernández

student•

Importante: Para ver los cambios deben tener activo el servidor con el

npm run start:register

de lo contrario no verán los cambios.

Juanito Ortega Guzmán

student•

Para VSCode pueden instalar esta extensión que les convierte HTML a JSX: Link

Henry Alcaraz

student•

Para los que tienen problema con el codigo del archivo edit.js en el wordpress en el 2025, le comparto como quedaria el codigo de este archivo.

const Edit = (props) => {
    const {className} = props;
    return (
        <div className={`signin ${className}`}>            
            <div className="signin__container">
                <h1 className="signin__titulo">Register</h1>
                <form className="signin__form" id="signup">
                    <div className="signin__name name--campo">
                        <label for="Name">Name</label>
                        <input name="name" type="text" id="Name" />
                    </div>
                    <div className="signin__email name--campo">
                        <label for="email">Email</label>
                        <input name="email" type="email" id="email" />
                    </div>
                    <div className="signin__pass name--campo">
                        <label for="password">Password</label>
                        <input name="password" type="password" id="password" />
                    </div>
                    <div className="signin__submit">
                        <input type="submit" value="Create" />
                    </div>
                    <div className="msg"></div>
                </form>
            </div>            
        </div>
    );
}

export default Edit;
```el cambio fue la asignacion de class en el bloque principal del div. en la clase se asigana mediante el {className}, pero ahora para que funcione se asigna con {`signin ${className}`}, es importante que sean con comilla inversa para que se haga la interpolación de variables una alternativa es usar el concatenado que quedaria \<div className={"signin " + className}>, si endado caso no encuentran la comilla inversa.&#x20;

En mi teclado la encontra combinando la tecla Alt-Gr+}.

Espero le sirva ya que fue lo que a mi me hizo ruido.

Ramiro Contreras León

student•

Buenas, en el administrador me aparece todo bien pero cuando voy a ver la página en el frontend no aparece nada.

Lautaro Agustin Barrera

student•

Buenas, es porque estamos modificando el archivo edit, cuando modifiquemos el save vamos a poder ver los cambios en el frontend.

Nicolás Castro Cuervo

student•

En wordpress 6.52 "abril de 2024", no me cargan los estilos en el editor como muestra el instructor, si te pasa lo mismo debes hacer lo siguiente:

const edit = (props) => {

const { className } = props;

return (

{/* Contenido del bloque */}

</div>

);

}

Para que los estilos se apliquen correctamente, debes asegurarte de que la clase que estás asignando en tu componente de edición coincida exactamente con la clase a la que estás aplicando estilos en tu archivo CSS. Por ejemplo, si quieres que los estilos se apliquen a un contenedor con la clase .wp-block-pzl-register, debes asegurarte de asignar esa clase en tu componente de edición:

export default edit;