Hace unos días, David completó una serie de cuatro entradas en el blog de introducción a React. Allí te explicó cómo empezar a utilizar React para crear interfaces de usuario en WordPress de forma sencilla. Concretamente, en la parte 2 de esta serie de entradas David te explicaba cómo preparar el entorno de desarrollo y cómo crear un componente React sencillo. Pues bien, hoy veremos que además de crear tus propios componentes React es una muy buena idea reutilizar componentes ya existentes.
Desde que Gutenberg apareció en WordPress, JavaScript y el framework React han entrado con fuerza en el stack de desarrollo. Es por eso que si no estás habituado a estas tecnologías, deberías ponerte a ello lo antes posible. Nosotros así lo hicimos y reescribimos por completo nuestros plugins premium utilizando React en todas las interfaces. Esto implicó tener que transformar todas las interfaces de usuario que ya teníamos creadas a componentes React.
Como no hay que reinventar la rueda, y menos en el mundo del desarrollo de software, hoy vamos a ver cómo utilizar componentes React ya existentes en WordPress.
Los componentes React incluídos en WordPress
Actualmente, WordPress proporciona más de 80 componentes React que puedes reutilizar en tus desarrollos, a través del paquete @wordpress/components de Gutenberg:
En cada uno de los directorios de los 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 cuando usarlos.
Entre los componentes que nosotros en Nelio más hemos usado para nuestras nuevas interfaces en React cabe destacar Button y ButtonGroup para definir botones. Todos los controladores para campos y opciones tales como CheckboxControl, InputControl, NumberControl, RadioControl, RangeControl, SelectControl o TextControl. O incluso TabPanel para interfaces con pestañas o Popover y Modal para diálogos flotantes. Y seguro que me dejo muchos más…
Si hubiéramos tenido que desarrollar estos componentes desde cero, seguramente aún estaríamos programando las nuevas interfaces React de nuestros plugins premium. Reutilizar componentes existentes es lo mejor que puedes hacer como desarrollador para ganar tiempo. Y los que proporciona Gutenberg para WordPress son perfectos para tus plugins.
Cómo reutilizar componentes React de WordPress
Imagínate que quieres utilizar un botón en tu interfaz desarrollada en React. Gracias a los componentes existentes en Gutenberg podrías utilizar 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 te preguntes que para un botón no haría falta usar el componente de Gutenberg y en vez de ello, utilizar una etiqueta <button> directamente. Y tendrías razón.
Sin embargo, utilizando el Button de Gutenberg lo que consigues es que tu botón tenga el mismo estilo CSS que los demás botones de la interfaz de WordPress sin tener tú que pelearte con el CSS. Además, si se actualiza el componente y su estilo, algo que ha pasado casi en cada versión de WordPress nueva, como desarrollador no tendrás que hacer nada. La responsabilidad de actualizar el Button de Gutenberg no es tuya. Si utilizaras tu propio botón, eso es algo que tendrías que hacer tú.
Para reutilizar un componente existente de Gutenberg sólo has de ir a ver si este componente existe e importarlo en tu código a través del paquete @wordpress/components. Como puedes ver en el fragmento de código anterior, hemos importado el componente Button desde este paquete. Y para tener el paquete disponible dentro de nuestro proyecto, has de instalarlo mediante el comando npm install @wordpress/components en el terminal. Pero esto ya te lo explicó David en sus entradas, así que no me voy a repetir otra vez.
Lo que sí tienes que tener en cuenta es que para que estos componentes cojan los estilos de WordPress tienes que poner wp-components como dependencia de tu archivo de estilos CSS al encolarlo en WordPress con la función PHP wp_enqueue_style.
A menos que tus necesidades no estén cubiertas por las que proporcionan los componentes React ya existentes de Gutenberg, no reinventes la rueda y usa estos. Los beneficios de reusar componentes existentes son extremadamente mayors que el echo de usar tus propios componentes.
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
El Storybook 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 un sandbox para desarrollar y visualizar los componentes de forma aislada. En el caso de WordPress, nos sirve como documentación para los componentes, entre otras cosas.
Entre las diversas opciones que incluye el Storybook de Gutenberg 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.
Sólo tienes que desplegar el menú Components y allí encontrarás la lista de los componentes que WordPress proporciona a través del paquete @wordpress/components. Puedes explorar cada componente React y ver ejemplos de uso con el código JavaScript completo.
Por ejemplo, en la siguiente captura ves ejemplos del componente Button con las diferentes propiedades que los botones pueden tener. Así, en la pestaña Story tienes el código fuente del ejemplo completo:
Además, algunos componentes concretos incluyen opciones dentro de la pestaña Knobs para modificar las propiedades del componente y así ver los cambios que provocan en su interfaz en la previsualización.
Uno de estos componentes es el TextControl, que sirve para añadir un campo de texto. En la siguiente captura vemos la pestaña Knob con diferentes opciones modificables para ocultar la etiqueta (Label) del componente o para cambiar los textos tanto de la etiqueta como de la ayuda. Así podemos ver cómo se verá el componente con los cambios y poder decidir cómo queremos usarlo en nuestras interfaces React:
No todos los componentes del paquete @wordpress/components tienen toda la documentación completa en el Storybook, con lo que tendrás que ir a la sección del paquete components en Github para ver la última versión del estado de los componentes React de Gutenberg.
Sin embargo, a medida que se vaya completando la documentación del Storybook de Gutenberg, este será cada vez más interesante para los desarrolladores. Tener documentación de este tipo en WordPress es un lujo. Su utilidad está fuera de toda discusión.
Ya has visto todo lo que te pueden aportar los componentes React de Gutenberg para tus desarrollos sobre WordPress. En vez de reinventar la rueda y desarrollar tus propios componentes base, échale un ojo antes a los componentes React de Gutenberg para así conseguir uniformidad con el resto de la interfaz de WordPress y ahorro de tiempo de desarrollo y mantenimiento. Reutilizar es la clave para ser más eficientes como desarrolladores WordPress.
Imagen destacada de Morning Brew en Unsplash.
Deja una respuesta