Mejore la Experiencia de Usuario (UX) en WordPress con bloques personalizados de Gutenberg

El año pasado, el 6 de diciembre, WordPress 5.0 lanzó una gran actualización de la interfaz de usuario del editor de contenido, Gutenberg Block Editor llegó para mejorar la experiencia de WordPress con una interfaz extensible de diseño de contenido de arrastrar y soltar basada en React.

Sin embargo, este tipo de editores no son nuevos en WordPress, los complementos populares como Page Builder por Site Origin, Elementor o Beaver Builder han existido durante muchos años. Y es comprensible por qué se hicieron tan populares, puede crear hermosas páginas de forma rápida y fácil sin saber nada sobre programación. Pero, por supuesto, si sabe cómo codificar, puede personalizar la interfaz para que se alinee aún mejor con sus necesidades específicas del proyecto.

Gutenberg viene con muchos tipos diferentes de contenido o bloques, como encabezados, controles deslizantes, columnas y muchos más. Pero también, la API de bloque nos permiten insertar nuevos bloques, así que veamos cómo hacerlo.

Registre el bloque

En la mayoría de los constructores, para registrar un bloque solo necesita PHP, por ejemplo, lea aquí cómo insertar nuevos bloques en Beaver Builder. Sin embargo, en Gutenberg, es una historia diferente, además de la configuración de PHP, también se debe hacer una configuración de Javascript. Recuerde, los bloques son componentes de reacción.

La forma más rápida que he encontrado para registrar nuevos bloques es mediante el uso del kit de herramientas create-guten-block. Tenga en cuenta que Node> = 8 y npm> = 5.3 son necesarios en su máquina de desarrollo local. Entonces, el script funciona así:

In wp-content/plugins folder run:

$ npx create-guten-block my-block   

Esto generará la base de código para el complemento que contiene el nuevo bloque, también configura React, Webpack, ES6 / 7/8 / Next, ESLint, Babel y otras características. Ahora, navegue a la nueva carpeta de complementos «my-block» y compile/mire la fuente con npm start:

$ cd my-block
$ npm start

En este punto, un nuevo complemento llamado «my-block – CGB Gutenberg Block Plugin» debería estar visible en WordPress Plugins, siga adelante y actívelo.

Ahora, vaya al editor y si ve el nuevo bloque en el editor, ¡felicidades, ha creado su primer bloque!

Se ve así en el Editor:

U así en el front-end:

Personalizando el Bloque

Ahora, aquí es donde comienza la diversión, los archivos que necesita modificar son:

• src/block/block.js – Configuración del bloque.
• src/block/style.scss – Estilo del bloque.
• src/block/editor.scss – Estilos únicamente del Editor.

El archivo block.js contiene un componente React que define los métodos edit () y save (). Estos son obligatorios

Edit(): Este método define qué es mostrado en ele editor.
Save(): Este método define qué es mostrado en el front-end.

Digamos que queremos que nuestro bloque tenga la opción de agregar texto, para este propósito podemos usar el componente RichText, que es un editor de texto mínimo similar al antiguo Editor clásico. En block.js haz estos 4 cambios:

1. Importe el componente RichText en nuestro bloque añadiendo
   const { RichText } = wp.editor;
2. Defina el atributo donde los datos de RichText serán almacenados, yo le llamé «content».
3. Dentro de edit() defina la constante «updateContent» tpara manejar la entrada del usuario, invoca el método Block API setAttributes () para establecer el valor del atributo «content» al guardar.
4. Y finalmente, use el compenente RickText en ambos retornos, en edit() y save().

Todos los comentarios fueron eliminados para una mejor legibilidad. El block.js debería verse así ahora:

 
import "./editor.scss";
import "./style.scss";
 
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;
 
registerBlockType("cgb/block-my-block", {
 title: __("my-block - CGB Block"),
 icon: "shield",
 category: "common",
 keywords: [
   __("my-block — CGB Block"),
   __("CGB Example"),
   __("create-guten-block")
 ],
 attributes: {
   content: {
     type: "array",
     source: "children",
     selector: ".block-content"
   }
 },
 edit: props => {
   const updateContent = value => {
     props.setAttributes({ content: value });
   };
   return (
     <div className={props.className}>
       <p>— Hello from the backend.</p>
       <RichText
         tagName="div"
         className={"block-content"}
         onChange={updateContent}
         value={props.content}
       />
     </div>
   );
 },
 save: props => {
   return (
     <div className={props.className}>
       <p>— Hello from the frontend.</p>
       <RichText.Content
         tagName="div"
         value={ props.attributes.content }
         className="block-content"
       />
     </div>
   );
 }
});

Si todo salió bien, debería ver este Bloque en el Editor (Observe las opciones de formato anteriores):

Y en el front:

Publique el bloque compilado

Cuando termine de probar, implemente su código de producción con el cmd:

$ npm run build 

Se ejecuta una vez y produce 3 archivos dentro de dist /:

• blocks.build.js
• blocks.editor.build.css
• blocks.style.build.css

Conclusión

Entender cómo extender la API de Gutenberg Blocks fue un poco difícil para mí al principio porque no estaba familiarizado con React y su sintaxis JSX. Me di cuenta de que otros desarrolladores están teniendo la misma lucha, por lo que, además de la API de Javascript/PHP/Wordpress a la que están acostumbrados los desarrolladores de WordPress, también es fundamental tener una buena experiencia en React si desea hacer una personalización más compleja al Editor de bloques.

¡Feliz codificación!