¿Cómo usar RichText, componente para bloques de Gutenberg?

RichText Block Gutenberg

Siguiente tutorial en lo referente a Gutenberg, en esta ocasión sobre el uso del componente RichText. Este artículo tiene como base la herramienta create-guten-block“, para estructurar un bloque. Aunque también sirve como referencia para los que no lo usan. Si no estás informado sobre dicha herramienta, te invito a leer este otro artículo relacionado con ella.

Tutorial: RichText

Nota: Recuerda que al final del documento adjunto el resultado del archivo generado por este tutorial.

Como toda herramienta, declararemos los componentes que vamos a usar y añadiremos el atributo necesario. Como en el tutorial anterior, volveremos a usar el campo “content” para ello.

Después de explorar y buscando información sobre este componente, he visto que hay dos formas de estructurar esta funcionalidad en el código. La primera que mostraré es la forma más clásica o típica que he encontrado por las redes y la segunda, para mí, sería la más adecuada. La forma más básica para declarar el campo sería de la siguiente forma:

Primera opción:

Segunda opción:

Por último, para dar el formato adecuado para “save” sería de la siguiente manera (la mejor para mí):

Equivale al siguiente formato HTML:

Nota:

Si se quiere emplear el tag “p” por cada salto de línea (<br>), sería necesario añadir el parámetro multiline: ‘p’ en vez de tagName: ‘p’ (esta opción envuelve todo el campo en dicho tag).

Por defecto, las herramientas disponibles para el editor solo son tres: negrita, cursiva, enlace y tachado. Sin embargo, si se quiere usar las opciones de alineación se puede mostrar si hacemos uso de los componentes BlockControls y AlignmentToolbar. Por ejemplo:

Como todo componente, lo declararemos de la siguiente manera:

A diferencia de las herramientas anteriores, se tiene que guardar la alineación elegida en un atributo. Para ello lo declararemos de la siguiente manera:

Luego dentro del parámetro edit configuramos setAlignment cuando se elija la opción deseada y la renderización del mismo.

El resultado sería el siguiente:

RichText Gutenberg Alignment

Luego en el parámetro save haremos uso del atributo de esta manera:

Equivale al siguiente formato HTML:

Hasta aquí finalizamos el tutorial en el uso del componente RichText y espero que sea de ayuda para personalizar nuestros proyectos con Gutenberg. El siguiente tutorial será de cómo cargar imágenes con la herramienta de wordpress en nuestro bloque.

block.js final

Adjunto el aspecto de mi archivo hola-block/src/block/block.js por si algún dato no quedó claro. Si llegase haber algún error, hacérmelo saber en los comentarios.

 



¿Te gusta este post? Es solo un ejemplo de cómo podemos ayudar a tu empresa...
Sobre Victor Vargas

Desarrollador de aplicaciones web y móviles. Mi experiencia se extiende en el desarrollo de módulos, plugins, scripts y temas para diversas plataformas como Wordpress, Prestashop, Magento, MediaWiki, CRM, Odoo, etc.

1 Comentario

¿Por qué no comentas tú también?


  • […] Turno de un artículo para desarrolladores de bloques y es que en el blog de Irontech, Víctor Vargas nos explica ¿Cómo usar RichText, componente para bloques de Gutenberg? […]

    Aprende gutenberg #30 - Aprende gutenberg Hace 2 meses Responde


Queremos tu opinión :)