En esta clase vas a poder mejorar la experiencia para la edición de tus bloques. Para eso aprenderás a utilizar el componente
<InspectorControls> que nos permitirá desplazar nuestros campos a la sidebar del editor y renderizar la vista previa en el espacio del bloque.
Para ello lo primero que tienes que hacer es importarlo con la siguiente línea:
import{InspectorControls}from'@wordpress/block-editor';// Esta librería está disponible desde que instalamos el paquete "wordpress/scripts desde NPM
Además, necesitarás tres componentes más para ordenar tus campos dentro del panel y renderizar el bloque desde el servidor. Estos son PanelBody, PanelRow y ServerSideRender.
Para esto modifica la importación de componentes del paquete @wordpress/components de la siguiente manera:
import{TextControl,PanelBody,PanelRow}from'@wordpress/components';// Esta librería está disponible desde que instalamos el paquete "wordpress/scripts desde NPM
y agregar este nuevo paquete:
importServerSideRenderfrom'@wordpress/server-side-render';// Esta librería está disponible desde que instalamos el paquete "wordpress/scripts" desde NPM
Ahora sólo necesitas modificar un poco el código que ya tenías armado en la función edit:
edit:(props)=>{const{attributes:{content}, setAttributes, className, isSelected}= props;// Función para guardar el atributo contentconsthandlerOnChangeInput=(newContent)=>{setAttributes({content: newContent})}return<><InspectorControls><PanelBody// Primer panel en la sidebar title="Modificar texto del Bloque Básico" initialOpen={false}><PanelRow><TextControl label="Complete el campo"// Indicaciones del campo value={ content }// Asignación del atributo correspondiente onChange={ handlerOnChangeInput }// Asignación de función para gestionar el evento OnChange/></PanelRow></PanelBody></InspectorControls><ServerSideRender// Renderizado de bloque dinámico block="pg/basic"// Nombre del bloque attributes={ props.attributes}// Se envían todos los atributos/></>}
Como se puede ver en el ejemplo, utilizamos el componente <></> (Fragment) para contener toda la UI. Dentro creamos el primer componente estructurándolo con InspectorControls, PanelBody y PanelRow. Dentro colocas el componente TextControl que ya habías utilizado previamente, sin aplicarle ningún cambio en su configuración.
Debajo del elemento InspectorControls, agregamos el componente ServerSideRender al que le pasamos el nombre del bloque y los atributos del mismo.
En el último paso para que se genere el renderizado también tienes que modificar la función PHP que creaste en el archivo functions.php para que el servidor sepa cuáles debe esperar. Para lograrlo modificamos la función de la siguiente manera:
// Asignación de la función de registro del bloque al Hook "init"add_action('init','pgRegisterBlock');// Función de registro del bloquefunctionpgRegisterBlock(){// Tomamos el archivo PHP generado en el Build$assets=include_onceget_template_directory().'/blocks/build/index.asset.php';wp_register_script('pg-block',// Handle del Scriptget_template_directory_uri().'/blocks/build/index.js',// Usamos get_template_directory_uri() para recibir la URL del directorio y no el Path$assets['dependencies'],// Array de dependencias generado en el Build$assets['version']// Cada Build cambia la versión para no tener conflictos de caché);register_block_type('pg/basic',// Nombre del bloquearray('editor_script'=>'pg-block',// Handler del Script que registramos arriba'attributes'=>array(// Repetimos los atributos del bloque, pero cambiamos los objetos por arrays'content'=>array('type'=>'string','default'=>'Hello world')),'render_callback'=>'pgRenderDinamycBlock'// Función de callback para generar el SSR (Server Side Render)));}
De esta forma, construiste un panel de edición en la sidebar y una vista previa del render, en el espacio que ocupará el bloque, dándole al usuario una mejor experiencia para construir sus webs.
Para conocer más sobre los componentes que la comunidad de WordPress pone a tu disposición, puedes ingresar a este link.
Recuerda que siempre que hagas cambios en tu código JS tienes que volver a compilar o tienes que tener activado el comando npm run start para que cada vez que guardes compile nuevamente tu bloque.
Para instalar wordpress/scripts en la carpeta blocks en el terminar del vs code poner el comando en el terminal npm install @wordpress/scripts --save-dev
para abrir el terminal en Vs code es con CTRL + ñ en Windows
Esto es una belleza!
Hola! Cómo están? yo tengo un problema cuando quise realizar esta parte, me da un error que me dice:
"Fatal error: Uncaught ArgumentCountError: Too few arguments to function pgRenderDinamicBlock(), 1 passed in {function pgRenderDinamicBlock}"
A propósito no tiene el mismo nombre que el del profe.
Mi función es la siguiente:
Entiendo que le está llegando un atributo de los dos, está bien que está función esté declarada así? Si es así, y confirmando que todos pgRegisterBlock y el edit de la función RegisterBlockType en index.js están iguales, que me puede estar faltando?
function pgRenderDinamicBlock($attributes, $content){
return '<h3>'.$attributes['content'].'</h3>';
}
add_action('init','pgRenderDinamicBlock');
Hola Facundo, cómo estás?
Por lo que veo el error, en principio, sería que estás asignando al hook la función de render cuando en realidad tendrías que asignar la función de registro del bloque.
La lógica sería que en la función de registro pongas como render_callback la función de render y en el hook la función de register.
Espero que esto te sirva.
Saludos!
Hermoso y practico.
Ya me imagino construyendo un editor en bloques al estilo DIVI 😲😲
Hola Juan, cómo estás?
Esa es la idea! WP trae bloques y componentes apra que puedas usar, pero la posibilidad de crear los tuyos propios te permite armar tu propio editor visual con todas las herramientas que necesitás para trabajar y/o para tu web personal.
Es lo mejor que trae Gutenberg.
Saludos!
Hola Lucio, compañeros.
Al incorporar estos ultimos cambios, tengo este problema:
TypeError: wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1_ is undefined
Agradeceria su ayuda...
Hola Ricardo, cómo estás?
Debés tener algún error de sintaxis. Puede ser una coma, un error en un nombre de paquete o algo por el estilo porque el error es de compilación de webpack.
Saludos!
Profe consulta, este sistema de SSR lo puedo implementar para el lado del front de wordpress?
Actualmente tengo un bloque, que al usarlo lo que hace es agregar id="app" y con react desde el bloque renderizo unos respectivos filtros.
La consulta es, ¿Es posible aplicar este componente desde el front y lograr que ese componente se genere con SSR, (similar a lo que hace NEXT.js)?
Hola José, cómo estás?
En realidad si utilizas React en el front, no vas a estar haciendolo con SSR, ya que podrías utilizar toda la lógica pero la respuesta sel servidor solo sería el div con el id "app".
Si se puede utilizar React en el Front, pero sería independiente del server.
Saludos!
Hola Profe y compañeros, tengo un problema con el renderizado, cuando modifico el texto del bloque básico me sale el siguiente error "Error al cargar el bloque: Bloque no válido." he seguido los pasos a como esta en la guía, pero no me está funcionando. ¡También verifique si aparecen los cambios en la vista previa y tampoco se reflejan! ¿Alguien sabe porque será?
Hola Juan Carlos, cómo estás?
Para poder ver cuál es el problema, es necesario que nos comaprtas tu código, ya que este error puede aparecer por un error PHP o un error en JS.
Te recomiendo subir todo a un repo y que nos compartas el enlace si todavía tenés el error.
Saludos!
Los bloques de Gutenberg junto a los custom post types y taxonomías puede permitir construir maquetadores personalizados según los tipos de post. Esto facilitaría el desarrollo de LMS o sistemas de reserva a medida.
Todo clarísimo. Gracias
WOOOOOOOOOOOW!!! D=
Exelente
Gutenberg de WordPress 5.0 es el editor visual de la herramienta para gestionar contenidos WordPress mediante bloques de forma sencilla e intuitiva.
Es importante destacar que la versión antigua de WordPress no desaparecerá y por tanto no es obligatorio la implementación de Gutenberg, se puede utilizar como pluging.
El editor Gutenberg es un plugin que va a permitir la maquetación de páginas para que podamos construir nuevos proyectos web en la plataforma de WordPress 5.0.
Entendemos los bloques de Gutenberg como un conjunto de contenidos que dan lugar a los elementos de los cuales se compone una página web, y pueden contener títulos, textos, párrafos, imágenes, etcétera.
