Reutilice los componentes React de Gutenberg en sus complementos de WordPress

Hace unos días, David completó una serie de cuatro publicaciones de blog que presentaban React. Allí te explicó cómo empezar con React para crear fácilmente interfaces de usuario en WordPress. Específicamente, en la parte 2 de esta serie de publicaciones, David explicó cómo preparar el entorno de desarrollo y cómo crear un componente React simple. Hoy veremos que además de crear tus propios componentes de React, es muy buena idea reutilizar componentes existentes.

Desde que apareció Gutenberg en WordPress, JavaScript y el marco React se han convertido en una parte clave en la pila de desarrollo de WordPress. Por eso, si no está acostumbrado a estas tecnologías, debe aprenderlas lo antes posible. Lo hicimos y recodificamos por completo nuestros complementos premium usando React. Esto implicó transformar todas las interfaces de usuario que ya teníamos con los componentes de React.

Como los programadores no deben reinventar la rueda, y dentro del mundo del desarrollo de software menos es siempre más, hoy vamos a ver cómo reutilizar componentes React existentes en WordPress.

Los componentes React incluidos en WordPress

WordPress proporciona más de 80 componentes React que puede reutilizar en su desarrollo, a través del paquete @wordpress/components de Gutenberg:

En cada una de las carpetas de componentes que encontrarás aquí en el Github del proyecto Gutenberg tienes el código fuente JavaScript de cada componente así como sus estilos CSS, y documentación para saber cómo y cuándo usarlos.

Entre los componentes que hemos utilizado en Nelio para nuestras nuevas interfaces de React, cabe destacar Button y ButtonGroup para definir botones. Todos los controladores para campos y opciones como CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl o TextControl . O incluso TabPanel para interfaces con pestañas o Popover y Modal para cuadros de diálogo flotantes. Y hay muchos más…

Si tuviéramos que desarrollar estos componentes desde cero, seguramente todavía estaríamos programando las nuevas interfaces React de nuestros complementos premium ahora. Reutilizar componentes existentes es lo mejor que puede hacer como desarrollador para ahorrar tiempo. Y los proporcionados por Gutenberg para WordPress son perfectos para sus complementos.

Cómo reutilizar los componentes de WordPress React

Imagina que quieres usar un botón en tu interfaz desarrollada en React. Gracias a los componentes existentes en Gutenberg podrías usar el componente Button directamente como puedes ver en el siguiente ejemplo:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

Quizás se pregunte si para un botón no necesitaría usar el componente Gutenberg y, en su lugar, usar una etiqueta <button> directamente. Y tú estarías bien.

Sin embargo, al usar el Button Gutenberg, lo que obtiene es que su botón tiene el mismo estilo CSS que los otros botones en la interfaz de WordPress. Además, si se actualiza el componente y sus estilos, algo que ha sucedido en casi todas las nuevas versiones de WordPress, como desarrollador no tendrás que hacer nada. La responsabilidad de actualizar el Button de Gutenberg no es suya. Si usaste tu propio botón, eso es algo de lo que tendrías que ocuparte.

Para reutilizar un componente de Gutenberg existente, solo tiene que verificar si este componente existe e importarlo a su código a través del paquete @wordpress/components . Como puede ver en el fragmento de código anterior, hemos importado el componente Button de este paquete. Y para tener el paquete disponible dentro de su proyecto, debe instalarlo usando el comando npm install @wordpress/components en la terminal. Pero esto ya fue explicado por David en sus publicaciones, así que no voy a cubrir esto nuevamente.

Lo que debe tener en cuenta es que para que estos componentes tomen los estilos de WordPress, debe configurar wp-components como una dependencia de su archivo de estilo CSS cuando lo pone en cola en WordPress con la función PHP wp_enqueue_style .

A menos que sus necesidades no estén cubiertas por esos componentes React proporcionados por Gutenberg, no reinvente la rueda y utilícelos. Los beneficios de reutilizar componentes existentes son extremadamente mayores que usar sus propios componentes.

Libro de cuentos de componentes React de Gutenberg

Una de las novedades de Gutenberg es el Storybook que podemos encontrar en Github. Storybook es una herramienta de código abierto que proporciona una zona de pruebas para desarrollar y ver componentes de forma aislada. En el caso de WordPress, sirve como documentación de los componentes, entre otras cosas.

Entre las diversas opciones que incluye Gutenberg Storybook tenemos la posibilidad de probar el editor de bloques a través del menú Playground . Pero la opción más interesante es poder ver la documentación de los componentes de Gutenberg de forma amigable.

Solo tienes que abrir el menú Componentes y allí encontrarás la lista de componentes que proporciona WordPress a través del paquete @wordpress/components . Puede explorar cada componente de React y ver ejemplos de uso con su código JavaScript completo.

Por ejemplo, en la siguiente captura de pantalla ves ejemplos del componente Button con las diferentes propiedades que pueden tener los botones. Luego, en la pestaña Historia tienes el código fuente del ejemplo completo:

Además, algunos componentes específicos incluyen opciones dentro de la pestaña Knobs para modificar las propiedades del componente y previsualizar los cambios que provocan en su interfaz.

Uno de estos componentes es TextControl , que se utiliza para agregar un campo de texto. En la siguiente captura de pantalla vemos la pestaña Knob con diferentes opciones para ocultar la etiqueta del componente o cambiar los textos tanto de la etiqueta como de la ayuda. Entonces podemos ver cómo se verá el componente con los cambios y decidir cómo queremos usarlo en nuestras interfaces de React:

No todos los componentes del paquete @wordpress/components tienen una documentación completa en el Storybook, por lo que tendrás que ir a la sección de paquetes de componentes en Github para ver la última versión del estado de los componentes de React en Gutenberg.

Sin embargo, a medida que se complete la documentación de Gutenberg Storybook, se volverá cada vez más interesante para los desarrolladores. Tener documentación de este tipo en WordPress es un lujo. Su utilidad está fuera de discusión.

Ya has visto todo lo que los componentes React de Gutenberg pueden aportar para tus desarrollos WordPress. En lugar de reinventar la rueda y desarrollar sus propios componentes básicos, primero eche un vistazo a los componentes React de Gutenberg para lograr la coherencia con el resto de la interfaz de WordPress y ahorrar tiempo de desarrollo y mantenimiento. La reutilización de software es la clave para ser más eficientes como desarrolladores de WordPress.

Imagen destacada de Morning Brew en Unsplash.