Cómo se ve el futuro del desarrollo de WordPress con Gutenberg

En WordCamp Us este año, estaba muy satisfecho con las posibilidades que Gutenberg presentó para WordPress. Llegué a casa y comencé a hacer bloques. Después de construir algunos complementos de bloques personalizados, estoy aún más emocionado. Este no es un tutorial, pero es una reflexión sobre cómo se desarrolla para WordPress del futuro, comenzando con la versión Gutenberg 1.9.1. Sí, era escéptico cuando Gutenberg se lanzó por primera vez como “beta”. Creo que el nombramiento de Beta fue un error, porque lo que teníamos que trabajar hace seis meses no estaba completo. Incluso la versión 1.9 no está completa, pero llega allí.
Más importante aún, ¿por qué está claro y los resultados comienzan a mostrarse? En el pasado, preferí escribir en Google Docs que en WordPress. Esta es la primera vez que escribo artículos de torque en Google Docs y me hubiera gustado escribir en WordPress, pero con Gutenberg. ¿A dónde fue mi PHP? No hago un secreto que, por mucho que me guste escribir JavaScript en ES6, prefiero escribir un código de fondo que escribir el código frontal. Pero, aprender los cuadros front-end que JavaScript me hizo disfrutar del desarrollo front-end. Sin embargo, realmente me gusta PHP. El primer complemento de bloque completo, desde cero, que creé para el lanzamiento, casi no tiene código PHP. PHP está allí solo para cargar JavaScript, CSS y grabar el bloque. Supongo que escribiré una función reutilizable para encapsular toda esta funcionalidad.
Tenga en cuenta que algunos bloques, como este son bloques estáticos: el marcado HTML es creado por Gutenberg y se elimina como tal. Otros bloques usan la fila en el servidor, lo que le permite crear la marca HTML usando PHP. Estos tipos de complementos de bloques se basarán en más PHP. Además, así como complementos que requieren la API REST de puntos personales finales. Sin embargo, escribí un complemento completo de WordPress, prácticamente sin PHP, además de la configuración de JavaScript y CSS. El back-end de WordPress sigue siendo una aplicación PHP, pero con Gutenberg, la división entre Front-end y Backynd ahora está más claramente dividida por el lenguaje, mientras que antes del desarrollo con WordPress se trataba tanto de PHP como JavaScript. Creo que esto será Un paso clave para nosotros, como ecosistema, para mantenerse al día con los cambios web. Específicamente, la transición a aplicaciones web de una página, especialmente aquellas implementadas como aplicaciones web progresivas. Espero que hayas separado las preocupaciones que escribí mucho sobre las prácticas y principios de WordPress REST API y PHP. Una cosa que enfaticé es la forma en que la API de WordPress REST y WP CLI también cambian el desarrollo de WordPress es que el desacoplamiento del código de solicitud HTTP-End-End, pantallas de administración, admin-AJAX, etc. – Es tan importante que los sitios, aplicaciones y complementos modernos de WordPress deben poder proporcionar las mismas características a través de CLI, demanda de descanso y diferentes interfaces de uso.
Este consejo es aún más importante con un editor en el que el diseño se basa en la vista previa del lugar. Si no desea mantener dos interfaces totalmente diferentes (vista previa y actual, para lo mismo, sus interfaces deberán desconectarse. Aunque encuentro la creación de nuevos complementos basados ​​en la idea de un bloque una experiencia bastante simple, cuando creé un bloque para los formularios de caldera, mi primer bloque completo, pero también mi primera experiencia agregando un bloque a una base de código hereditaria: Tuve algunos problemas. Y, por supuesto, los problemas aparecieron en los que no tenía un desacoplamiento perfecto de la interfaz que reutilizamos, por ejemplo, donde era fácil, eche un vistazo a cómo funciona la representación de la forma front-end: caldera_forms_very_safe_string ($ atts [‘formid’])
)
);
}
} Ya tenía esa función simple para reproducir el formulario. La adición de jugar en el servidor del bloque fue fácil y no interfirió con mi código corto, que tiene su propio intermediario para llamar a la misma función de renderizado.
Por otro lado, obtener una vista previa en vivo de la forma de bloque fue un poco más de trabajo. La introducción del código HTML es fácil, pero el complemento supone que CSS y JavaScript se cargan en el encabezado y el sótano. Esto sucede cuando el tema requiere acciones WP_head y WP_Footer. Esto no sucede aquí, así que tuve que escribir un cliente mini-JavaScript para adjuntar esos recursos adicionales a DOM. Es más trabajo, pero ahora lo tengo, lo cual está bien.
No tiene que aprender a reaccionar mientras que Gutenberg usa reaccionar por muchas tareas pesadas, es importante tener en cuenta que si desarrolla bloques, no debe usar React. Hay algunas nuevas API de WordPress que actualmente se construyen sobre la API React. Por ejemplo, WP.ement.Createment es una abstracción sobre React.com. Pero es importante pensar en esta API como una API de WordPress, porque React no siempre puede usarse debajo del capó, pero debido a que es WordPress, podemos suponer que la interfaz pública de la API no cambiará. Además, puede escribir bloques con otros cuadros. Aquí hay un ejemplo de un bloque que creé usando VueJS. Ni siquiera tiene que usar un marco o esnext. Aquí hay un simple bloque de JavaScript que creé. Tal vez ni siquiera necesite saber que JavaScript soy un desarrollador de arado, no un desarrollador de temas. Pero, estoy muy satisfecho con qué temas se convertirán. Ahora que el núcleo de WordPress ofrece varias interfaces predeterminadas como bloques, los desarrolladores de temas realmente pueden centrarse en diseñar las presentaciones y colecciones únicas de esos bloques.
Si eres diseñador, sabes con CSS o ambos, el tema se volverá muy divertido y todo lo que necesitas es un buen diseño y buenas habilidades de CSS. Supongo que en los próximos años los temas de WordPress mejorarán mucho en calidad, porque los desarrolladores de temas pueden centrarse en el diseño y pasar menos tiempo. Ok, pero React es maravilloso Sí, no tienes que aprender a React o incluso a Esnext. Dicho esto, espero que hayas aprendido profundamente JavaScript según las instrucciones. Si lo ha sido, creo que realmente disfrutará del desarrollo de WordPress para Gutenberg. Todavía hay un gran fanático de Vuejs, pero utilicé a Gutenberg como una excusa para mejorar mi comprensión sobre React y me alegro de haberlo hecho. Cuando construye bloques simples, creo que el uso de ES5 está bien, pero una de las grandes ventajas de React o Vue es la modularidad de los componentes. En ese momento, es importante dividirlos en archivos separados. En el complemento de bloque social que construí, tengo un componente React que se utiliza para mostrar la vista previa y jugar al frente. Si eso fuera todo en el bloque en sí, entonces debería crear el segundo componente y mantener los dos sincronizados manualmente.

La introducción de un componente React en Gutenberg es muy simple en este momento. Si ya ha desarrollado con React, esta será una transición fácil para usted. Algunas de las cosas más importantes aún no están listas para escribir esto unos meses después del lanzamiento. Puedo crear algunos bloques muy fuertes. Se planean algunas cosas, pero todavía no estoy allí. Ya es muy divertido desarrollarse para Gutenberg, que no he dicho desde hace un tiempo sobre el desarrollo de WordPress. Pero, incluso sin todas las funciones orientadas al desarrollador, esta ya es una mejora masiva en la experiencia del desarrollador. Por ejemplo, los desarrolladores de complementos aún no tienen una buena manera de acceder al objeto de estado de Gutenberg. Esta mejora está planificada y abrirá algunas posibilidades realmente increíbles. Por ejemplo, cuando tenemos una manera simple de obtener el contenido de la publicación actual o el título o los términos de la taxonomía y reaccionar a sus cambios de tiempo real, podremos crear bloques más interactivos y dinámicos o ayudar a mejorar los Contenido basado en la realidad. Análisis de tiempo. Estoy emocionado de estar muy preocupado por WordPress. La API REST y WP CLI son los principales pasos hacia adelante en términos de experiencia del desarrollador, pero se debe hacer mucha más modernización. La transición al editor de Post tiene mucho significado para el avance de esta modernización. Gutenberg es una oportunidad para avanzar en la experiencia del desarrollador y el usuario final al mismo tiempo. Gutenberg comienza en el editor de publicaciones, pero está escrito de una manera que esta interfaz puede tomar más WordPress.