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 han reaccionado. Allí explicó cómo comenzar 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 simple. Hoy veremos que, además de crear sus propios componentes, es una muy buena idea reutilizar los componentes existentes.

El reinvente de la rueda no tiene sentido. Aproveche el trabajo existente realizado con Gutenberg para reutilizar los componentes React que ofrece en sus interfaces de WordPress.
Desde que Gutenberg apareció en WordPress, JavaScript y el marco React se han convertido en una parte clave en la pila de desarrollo de WordPress. Por lo tanto, si no está acostumbrado a estas tecnologías, debe aprenderlas lo antes posible. Hicimos esto y recodificamos por completo nuestros complementos premium usando React. Esto implicó la transformación de todas las interfaces de usuario que ya tenía con los componentes React.
Debido a que los programadores no deben reinventar la rueda, y en el mundo del desarrollo de software, siempre significa más, hoy veremos cómo reutilizar los componentes existentes en WordPress. Los componentes reaccionados en WordPress WordPress ofrecen más de 80 componentes React que puede reutilizar en su desarrollo, a través del paquete @WordPress/Components de Gutenberg:

La lista de componentes React Gutenberg es muy completa y útil para ser reutilizadas. Para saber cómo y cuándo usarlos. Entre los componentes que nosotros, Nelio, utilizamos para nuestras nuevas interfaces React, que vale la pena resaltar el botón y el longroup para definir los botones. Todos los controladores para campos y opciones como checkbocontrol, inputControl, numberControl, radiocontrol, rangecontrol, selectControl o TextControl. O incluso tabpanel para interfaces con pestañas o popover y modal para diálogos flotantes. Y hay muchos más … si desarrollemos estos componentes desde cero, ciertamente tenemos que programar las nuevas interfaces de nuestros complementos premium. La reutilización de los 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 WordPress Componentes React Imagine que desea usar un botón en la interfaz desarrollada en React. Gracias a los componentes existentes en Gutenberg, puede usar el componente del botón directamente, como puede ver en el siguiente ejemplo:/** * Dependencias de WordPress */import {botón} desde ‘@WordPress/Components’; Exportar función predeterminada myComponent () {return haga clic en mí! ; } Es posible que se pregunte que para un botón no debe usar el componente Gutenberg y, en su lugar, usar una etiqueta directamente. Y tendrías razón. Con todo esto, usando Button Gutenberg, lo que obtienes es que tu botón tiene el mismo estilo CSS que los otros botones en la interfaz de WordPress. Además, si se actualizan sus componentes y estilos, lo que ha sucedido en casi todas las nuevas versión de WordPress, como desarrollador, no tendrá que hacer nada. La responsabilidad de actualizar el botón de Gutenberg no es tuya. Si usó su propio botón, debe encargarse de él.
Estilos CSS definidos en el componente del botón de Gutenberg. Para reutilizar un componente Gutenberg existente, simplemente verifique si este componente existe e importarlo en su código a través del paquete @WordPress/Components. Como puede ver en el fragmento de código anterior, importamos el componente del botón de este paquete. Y para tener el paquete disponible dentro del proyecto, debe instalarlo utilizando el NPM instalación @WordPress/Componentes en el terminal. Pero esto ya ha sido explicado por David en sus publicaciones, por lo que no lo cubriré nuevamente.
Lo que debe recordar es que, para que estos componentes tomen estilos de WordPress, debe establecer componentes WP como dependencia de estilo CSS cuando lo coloca en WordPress con la función PHP WP_ENQUEUE_STYLE. A menos que sus necesidades no estén cubiertas por aquellos componentes React proporcionados por Gutenberg, no reinventen la rueda y las use. Los beneficios de reutilizar los componentes existentes son extremadamente mayores que usar sus propios componentes. El libro de cuentos de Gutenberg React Componentes Una de las noticias de Gutenberg es el libro de cuentos que encontramos en Github. Storybook es una herramienta de código abierto que ofrece una caja de arena para el desarrollo y la visualización de componentes aislados. En el caso de WordPress, sirve como documentación para componentes, entre otros. La historia de Gutenberg. Entre las diversas opciones incluidas en Gutenberg Storybook tenemos la oportunidad de probar el editor de bloques a través del menú de juegos. Pero la opción más interesante es poder ver la documentación de los componentes de Gutenberg de manera amigable. Solo tiene que abrir el menú de componentes y allí encontrará la lista de componentes que WordPress ofrece a través del paquete @WordPress/Components. Puede explorar cada componente React y ver ejemplos de uso con el código completo de JavaScript. Por ejemplo, en la siguiente captura de pantalla verá ejemplos del componente del botón con diferentes propiedades que los botones pueden tener. Luego, en la pestaña, tiene el código fuente del ejemplo completo:

El libro de cuentos de Gutenberg le permite explorar los componentes incluidos y ver cómo reutilizarlos. Además, algunos componentes específicos incluyen opciones en la pestaña Botones para cambiar las propiedades del componente y previsualizar los cambios que causan en su interfaz. Uno de estos componentes es TextControl, que se usa para agregar un campo de texto. En la siguiente captura de pantalla vemos la pestaña del perno con diferentes opciones para ocultar la etiqueta del componente o para cambiar los textos de la etiqueta y la ayuda. Por lo tanto, podemos ver cómo se verá el componente con los cambios y podemos decidir cómo queremos usarlo en nuestras interfaces reaccionar: la pestaña de libros de cuentos de Gutenberg le permite jugar con las propiedades de los componentes para ver qué efecto tienen sobre su visión.. No todos los componentes del paquete @wordpress/componentes tienen una documentación completa en el libro de cuentos, por lo que tendrá que ir al paquete de componentes GitHub para ver la última versión del estado de componente React en Gettenberg. Sin embargo, a medida que se complete la documentación de Gutenberg Storybook, se volverá cada vez más interesante para los desarrolladores. Tener dicha documentación en WordPress es un lujo. Su utilidad está más allá de cualquier discusión.