Compartir los componentes reaccionan con Gutenberg

El nuevo editor basado en WordPress Gutenberg pronto vendrá a WordPress. Aunque nadie ha definido dónde se continuará utilizando Gutenberg, ha sido bien diseñado para su reutilización, lo cual es excelente, porque los desarrolladores de arados ahora pueden usar estos componentes en otras interfaces, en el administrador de WordPress y más allá. Debido a que el equipo de Gutenberg actualmente está moviendo una gran parte del código que es más probable que se reutilice en los módulos NPM, esto hace que sea muy simple reutilizar los componentes de Gutenberg en una aplicación React, incluso si no está en WordPress. No es la única forma de importar componentes o utilidades de Gutenberg en su proyecto si está en WordPress, lo que discutiré en esta publicación.
Esta publicación mostrará cómo compartir los componentes React entre los bloques de Gutenberg, las pantallas WP-Admin no Gotenberg y las aplicaciones React. Esto se basa en el trabajo que hago hoy para hacer mi complemento de forma caldera Gutenberg y reescribir gran parte de la interfaz con el usuario en React. La introducción de los módulos de Gutenberg en el código de código de Gutenberg se divide en diferentes módulos, por ejemplo, “datos” para la gestión del estado o “componentes” para los componentes IU a partir de los cuales se construye el editor. Este modelo ayuda a navegar el código, porque cada módulo es un directorio de nivel superior. También nos ayuda a decirnos cómo importar un módulo o un componente. Por ejemplo, si queremos usar el componente SelectControl, lo accedemos por el módulo de componente – wp.components.selectControl.
Veamos tres opciones para acceder a estos módulos. El primero no requiere webpack. Los otros dos requieren Webpack o se adaptan a otro sistema de construcción. El uso de las bibliotecas Global WP todas las bibliotecas de Gutenberg es accesible por la variable global “WP”. Esto significa que la forma más fácil de traer componentes en el campo es acceder al WP global. Esto funciona bien si los activos se administran usando wp_enqueue_script y establece la adicción correcta a su script en este ejemplo, la función de rango de WordPress, el elemento de creación se accede por WP: es decir, funciona en un archivo js de un bloque o en cualquier lugar otro uno otro uno en WordPress si establece “elemento” como adicción cuando le pregunta a su script. Uso de WP como un paquete web externo Si observa la fuente de Gutenberg y debería, es una excelente lectura, verá importaciones de paquetes web como este.
Esto es en realidad lo mismo que el acceso a WP. Global Element. Gutenberg crea un paquete web externo para cada uno de los puntos de entrada y paquetes. Este es un buen modelo que sirve a WordPress tradicional y un paquete web más moderno. Puede configurar un paquete web similar para actuar como un alias en su enchufe. He creado un enchufe de bloqueo para los mensajes de alerta como código para mis discusiones de WordCamp. La configuración de Webpack tiene externalidades para configurar varios paquetes de Gutenberg.
Luego puede importar la forma de elementos con la misma sintaxis de Gutenberg y el uso de la documentación de Gutenberg.
Usando NPM, como dije anteriormente en esta publicación, los módulos de Gutenberg se instalarán o se instalarán a través del sistema de administración de adicciones de JavaScript NPM. Si instala un paquete de WordPress en un complemento de WordPress, probablemente debería instalarlo como adicción al desarrollo. De esta manera, puede usar importaciones de paquetes web, puede hacer que el módulo funcione en sus pruebas, pero no agregue el módulo a la versión de producción. En WordPress, la adicción se carga usando wp_enqueue_scripts. Si no se desarrolla para el entorno de WordPress, invierta el consejo. Por ejemplo, para instalar el módulo de elemento WordPress en un complemento de WordPress:
O para instalar para usar fuera del entorno de WordPress:
Luego, para traer adicción al campo, importárselo con Webpack:
Es lo mismo que los últimos ejemplos. Esta es realmente la idea. Esa línea de código funciona en cualquier contexto: bloques de gutenberg, otras pantallas WP -admin, aplicaciones implementadas de WordPress y con un poco más de atención, pruebas. WP Global WordPress Management utiliza la condición global. Esto complica las cosas, pero el uso de Gutenberg de la variable WP global es la condición global más manejable que he tenido como desarrolladores de WordPress. Veamos algunos problemas que encontramos debido a la imprevisibilidad del estado global y la forma en que solucionamos estos problemas.
Para las pantallas WP-Admin no Genberg en un complemento de WordPress, el uso de WordPress Babel tiene mucho significado para mí. Mantenga la configuración de Babel bastante simple:
{
“Preset”: [“@WordPress/Default”] } Una cosa que haces es usar el elemento de WordPress para compilar JSX. Eso está bien, siempre que la variable global WP. El elemento está establecido. Está en las pantallas de Gutenberg. Esto puede ser un problema si sus componentes importan reaccionando. Encontré este problema cuando utilicé los componentes React para una pantalla WP-Admin que comparte componentes con mi bloque Gutenberg. La solución, en el momento en que @wordpress/elemento no estaba en npm, era hacer lo que hace Gutenberg, definir WP. Restauraré este código para usar @wordpress/elemento como se describió anteriormente. Pero, este probablemente será un problema para cualquiera que mantenga el código React y WordPress juntos. En las pruebas, una excelente razón para usar React es broma. Amo la broma. Jest es la herramienta de prueba más simple que he usado. Este no es un tutorial sobre Jest, pero quiero cubrir la configuración de pruebas para componentes compartidos entre Gutenberg y otras aplicaciones React. Debido a que usamos broma en las formas de caldera, debemos asegurarnos de que el elemento esté definido. Actualmente, usamos una cuchilla, copiada de Gutenberg para evitar errores en nuestras pruebas. Aquí está:
global.wp = {
Código corto: {
},
apirequest: {
}
};
Objeto.defineProperty (global.wp, ‘elemento’, {
Get: () => requirir (‘reaccionar’),
}); Parece conocido, ¿no? Es lo mismo que hace WordPress. De hecho, hay módulos NPM publicados recientemente para proporcionar una solución simple y repetible para ello. Esté atento a lo que se publica en el NPM, en el campo de @wordpress.
Tenemos que decirle a Jest que use ese archivo de configuración. Aquí hay una configuración de Jest completa para agregar a Package.json: React y WordPress. Escribí bastante sobre la elección entre React y VueJS. Antes de Gutenberg, estaba en el equipo de Vuejs. Pero, aprender el desarrollo de Gutenberg me pidió que me sumergiera profundamente en React y reevalúe mis opiniones originales y negativas sobre JSX, el lenguaje de plantilla que generalmente se usa para los componentes React.
No tiene que saber React para desarrollar para Gutenberg, pero realmente ayuda. Tampoco tienes que usar React. Utilicé Vue para el bloque, usando Gutenberg para proporcionar la condición de los componentes VUE. De hecho, es bastante bueno, pero es una capa inútil de complicaciones que requerirían muchas buenas razones para mantener tanto a Vue como reaccionar en sus paquetes de Webpack y debe pensar en ambos cuadros. Vue y React gestionan el estado muy diferente, por lo que mantener las reglas de ambos y las diferentes sintaxis de los lenguajes de plantilla no se escala mentalmente. Redux State Management (similar) con los datos de WordPress, por lo que me gusta Vue, pero una vez que WordPress me hizo reconsiderar JSX y ver cómo podría usarse muy bien en un complemento de WordPress, me vendieron en React. Un punto doloroso para mí con Vue fue el manejo del estado. Sentí que Vuex, la solución de gestión del estado recomendada, requiere demasiada calderera y fue difícil de integrar con los componentes sin crear efectivamente la condición global. Probablemente estaba mal, pero Vuex nunca hizo clic para mí.
Redux, que es el estándar, por ahora, para la gestión estatal en aplicaciones React, tiene mucho más sentido para mí que Vuex. Esta es mi razón número 2 para moverse para reaccionar. Debido a que WordPress ahora usa una abstracción sobre Reaccionar para Gutenberg, el uso de Vue y React no parece práctico. Cuanto más integramos con Gutenberg, el uso más simple de React. También me gusta cómo el modelo de uso de componentes del contenedor y la presentación con React + Redux ayuda a mantener preocupaciones separadas y pruebas unitarias simples. La retracción de Gutenberg, disponible en NPM como @WordPress/Data, facilita a Redux. Al registrar un “almacén” con @WordPress/Data, las acciones y los descuentos están vinculados y hay utilidades para suscribirse a cambios, selección de datos, solicitudes de API y componentes de orden superior. En mi última publicación para Torque, cubrí los elementos básicos de la gestión estatal para Rodux con WordPress. El ejemplo del código se tomó de la biblioteca de procesadores de formularios de caldera para la que trabajo. Este es un ejemplo de un caso de uso que debe operar en el editor posterior, en otras pantallas WP-Admin y fuera de un entorno de WordPress, porque Caldera Forms Pro es una aplicación Laravel y Node. Por ejemplo, aquí hay un componente de presentación que encapsula toda la interfaz de uso del procesador, sin ninguna administración de estado.

Podemos llamar a este componente “controlado”. No es un estado consciente, su condición está completamente controlada por otro sistema. Este componente está “envuelto” en el componente de carrera superior, para que pueda acceder a los datos en el almacén. Este componente es un contenedor para los componentes que componen la interfaz de usuario. La responsabilidad es componer la interfaz de uso con componentes secundarios que usan los accesorios de contenedores. Tenga en cuenta que uso la biblioteca de tipos de prop-types para decir reaccionar qué tipos de accesorios deberían recibir el componente. Me gusta hacer esto. El uso de tipos PRO proporciona un teclado fuerte para los componentes React sin tener que aprender y configurar flujo o mecanografiado. Utilizo el flujo en algunos proyectos, pero sobre todo creo que los tipos de Pro son una validación más que suficiente. Lo que realmente me gusta de los tipos de accesorios es que si no respeto las reglas, mi broma de pruebas instantáneas no funcionará, y los errores que recaudan cuando fallan me dirán qué componente va con los accesorios incorrectos y dónde. Este componente de presentación está “envuelto” en el orden superior (HOC) con WithSect, para que pueda obtener datos de la tienda y proporcionarlos al componente de presentación. También debemos enviar cambios a la tienda. Hacemos esto empacando el componente con hoc withisPatch:
Aquí está el componente de embalaje completo, que puede seleccionar del estado y enviar cambios de estado:
No hay conexión entre Redux y Store. Las reglas de la conexión, para la cual el componente de envoltura tiene la responsabilidad exclusiva, se definen sobre la base de los accesorios del componente, que solo son argumentos transmitidos a una clase. El componente de presentación se pasa con la función de gestión de los cambios y lo llama. Lo que hace que esa función sea responsabilidad de un componente diferente. Mientras la API pública del componente y la función de gestión de funciones sigan siendo la misma, cualquier modificación puede tener lugar en el componente o función con esa responsabilidad. Las pruebas unitarias con broma detectan estos cambios. Con Jest, no queremos probar React. Queremos probar que nuestro componente tiene los accesorios correctos y, si hay cambios en los cambios, activan y emiten los datos correctos. Jest tiene una excelente herramienta de prueba instantánea. Este instrumento toca el componente y lo almacena como JSON. Luego, en la ejecución futura, el instante se recrea y se compara con la instantánea almacenada. Cualquier cambio y falla de prueba. Cuando estos tipos de pruebas fallan, esto indica que los diferentes elementos de los accesorios se han transmitido al componente o uno de sus hijos. Esto podría ser intencional y está bien, solo puede guardar un nuevo instante. O significa que la forma en que se conectan sus componentes juntos ha cambiado de manera involuntaria y se ha introducido un error de regresión. Esto no es nada elegante aquí. Configure los paquetes web importaciones y úselas, instalando adicciones según sea necesario.