Crea la vista de tu bloque para el editor
Contenido del curso
Henry Alcaraz
Ramiro Contreras León
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
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
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 (
<div className={wp-block-pzl-register ${className}}>
{/* 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;
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.  En mi teclado la encontra combinando la tecla Alt-Gr+}. Espero le sirva ya que fue lo que a mi me hizo ruido.
