Los fundamentos del desarrollo para WordPress Gutenberg para principiantes

Esta publicación tiene como objetivo ayudarlo a comprender los conceptos clave para desarrollar para el nuevo editor en WordPress; Gutenberg. Gutenberg todavía es bastante nuevo al momento de escribir esto. Y como ocurre con todas las nuevas tecnologías en su fase de nacimiento, lamentablemente falta un poco la documentación y los estándares.

El sitio de documentación de WordPress tiene una gran sección dedicada a Gutenberg para desarrolladores; llamado el manual del editor de Gutenberg. Ya contiene bastante información. Pero puede ser un poco confuso o intimidante para alguien que es nuevo en tecnologías basadas en Javascript. Para los desarrolladores centrados en PHP que pueden tener conocimientos básicos de Javascript/jQuery, las nuevas tecnologías de WordPress pueden parecer intimidantes. Pero confía en mí, una vez que aprendas los conceptos clave, verás qué nuevas posibilidades tienes ahora como desarrollador de WordPress.

Comencemos con los conceptos básicos absolutos. ¿Qué lenguaje(s) de programación y herramientas necesitaría usar o aprender para desarrollar mejor para Gutenberg?

El idioma y las bibliotecas que necesitará saber

La respuesta corta a qué lenguaje necesita usar para desarrollar Gutenberg es: Javascript. Sin embargo, dentro del mundo de Javascript, existen bastantes conceptos, extensiones y herramientas que debe tener en cuenta.

En primer lugar, hay una cuestión de versión de Javascript. Hay una estandarización oficial de Javascript; ECMAScript. ECMAScript 5 (a menudo abreviado como ES5) salió hace unos 10 años y es la versión de Javascript con la que la mayoría de los desarrolladores estamos familiarizados. Luego tenemos ECMAScript 6 (a menudo abreviado como ES6) que salió en 2015. Algunas personas se refieren a esta versión como ES2015. Y finalmente está ESNext, que es un nombre dinámico que cubre la próxima versión, que contiene propuestas que esperamos se incluyan en cualquier próxima versión estandarizada de Javascript.

Es posible que esté pensando en la línea de «así que todo está bien y todo, las versiones más nuevas de Javascript solo significan más funciones. Así que usaré el más nuevo." Pero hay algo muy importante que debes saber sobre las versiones de Javascript y es esto: la mayoría de los navegadores de hoy solo pueden entender ES5.

Esto significa que si desea escribir Javascript en ES6 o ESNext, debe configurar herramientas que transformen su código en ES5 para que los navegadores puedan entenderlo. Pero antes de que empieces a pensar en saltarte el aprendizaje de ES6 y ESNext por completo, recuerda que ES5 tiene 10 años. Y requerirá que escribas mucho más código. También será mucho menos legible y más complejo que si lo escribiera en ES6 o ESNext.

Además, para los conceptos de Gutenberg, también querrá usar JSX, una extensión de sintaxis para Javascript. JSX también es un lenguaje que los navegadores no pueden entender sin transformarlo.

Entonces, ¿por qué molestarse con ES6, ESNext o JSX?

Si aún no está convencido de que ES6/ESNext vale la pena el paso adicional para transformarlo, permítame mostrarle una comparación de código. Con ES6 y JSX puede escribir esto para devolver un párrafo simple; con una clase y salida dinámica de una variable;

return <p className="example">Hello, my name is {name}</p>;

Para aquellos de ustedes que son nuevos en esto y piensan que he olvidado las citas, no, no lo he hecho. Esta es la simpleza de JSX. Comparemos lo anterior con cómo escribiría con ES5 y las bibliotecas Javascript de WordPress:

return wp.element.createElement(
    'p',
    { className: 'example' },
    'Hello, my name is ' + name
);

¡Todo el código anterior es necesario para generar lo que ES6 y JSX pueden hacer en una sola línea muy fácil de leer! Imagine crear una interfaz de usuario más compleja con eventos y condicionales, cuando solo un párrafo simple requiere este engorroso fragmento de código.

¿Convencido? ¡Bueno!

Herramientas de transformación y React JS

La herramienta más común, y la que usa WordPress, para transformar ES6/ESNext es Babel. Por lo general, usaría Babel como un complemento para Webpack, que es una herramienta que agrupa y minimiza sus archivos Javascript. Ambas herramientas usan Node.js, que le brinda algunas herramientas para ejecutar scripts para Webpack y Babel en la línea de comandos. Si todo esto suena confuso, tengo una publicación que explica en profundidad cómo configurar todas estas herramientas para el desarrollo de Gutenberg.

Lo segundo que debe saber sobre las tecnologías es que Gutenberg se basa en una capa de abstracción sobre React JS. React JS es una biblioteca Javascript de código abierto mantenida por Facebook y se lanzó alrededor del año 2013. Debido a que React ha existido por un tiempo, hay muchos tutoriales, guías y documentación para esta biblioteca. El sitio oficial de React tiene un buen tutorial detallado para los nuevos en React. Definitivamente no necesita ser un experto en React para desarrollar para Gutenberg, pero los conceptos básicos de cómo funciona con componentes y estados lo ayudarán mucho a comprender Gutenberg.

Para concluir:

• Aprender React JS contribuirá en gran medida a comprender cómo desarrollar para Gutenberg. Especialmente si desea crear sus propios bloques personalizados o personalizar los existentes.
• Puede hacerlo usando solo ES5 Javascript, pero definitivamente se recomienda aprender ES6, ESNext y JSX.
• Familiarícese con las herramientas necesarias para que pueda transformar su código ES6 / ESNext / JSX. Esas herramientas son npm, Webpack y Babel.

La nueva forma de almacenar el contenido de las publicaciones y por qué

Uno de los mayores beneficios de Gutenberg es alejarse del HTML fijo en el contenido de las publicaciones. WordPress, antes de Gutenberg, y la mayoría de los CMS basados ​​en web almacenan el contenido de los artículos en HTML puro. Esto generalmente no es un problema con contenido simple (títulos y párrafos). Pero podría ser un problema mayor con contenido enriquecido más complejo y dinámico.

Cualquier CMS que permita contenido dinámico dentro del contenido del artículo tendrá problemas para guardarlo como HTML válido. Esto podría ser cualquier cosa, desde una imagen que hace referencia a su ID dentro del sistema en lugar de la URL completa. O un widget que muestra dinámicamente las últimas publicaciones dentro de una categoría determinada. Normalmente, esto se resolverá generando HTML críptico personalizado que no tiene sentido que se emita normalmente. Y luego deje que el analizador CMS maneje la transformación de esas piezas HTML en algo significativo o dinámico. La desventaja de esto es que si transfiere su contenido a otro CMS, a menudo resultará en un HTML feo. El contenido se llenaría con HTML sin analizar que debe limpiar manualmente. Este problema es lo que Gutenberg pretende resolver.

Con Gutenberg, WordPress ha optado por guardar información adicional y dinámica como comentarios HTML. Los comentarios HTML nunca son visibles para los usuarios en el sitio web y, básicamente, todo está permitido dentro del bloque de comentarios. Un comentario HTML comienza <!--y termina con -->, y Gutenberg almacena los datos en una determinada estructura con formato JSON. Cada bloque en Gutenberg está envuelto por un comentario HTML de inicio y un comentario HTML de cierre después de él.

La nueva forma de almacenar el contenido de las publicaciones

No entraré en detalles sobre cómo se estructuran los bloques de comentarios; encontrará una guía detallada sobre esto en el Manual del editor de WordPress. Pero como ejemplo, un párrafo simple en el contenido de una publicación de Gutenberg se guardará en la base de datos como:

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
<!-- /wp:paragraph -->

En cuanto al contenido dinámico, normalmente no se generará ningún HTML. Toda la información que WordPress necesita para comprender lo que hace este bloque se encuentra dentro de los comentarios HTML. Así almacena Gutenberg un bloque de «Últimas publicaciones":

<!-- wp:latest-posts {"categories":"17","displayPostContent":true,"excerptLength":30,"postLayout":"grid"} /-->

Dado que todo es un comentario HTML, la transferencia de sus publicaciones a otro WordPress sin Gutenberg u otro CMS asegurará que no se escupe HTML feo sin analizar. Simplemente será ignorado y salteado.

Como probablemente ya se haya dado cuenta, los bloques de comentarios comienzan con el nombre del bloque, con el prefijo ‘ wp‘. Si hay alguna configuración personalizada, se generará después del nombre en JSON, como puede ver en el ejemplo del bloque Últimas publicaciones. Gutenberg se refiere a estos como atributos, y este concepto es algo con lo que te familiarizarás cuando comiences a aprender a desarrollar para Gutenberg.

Útil para saber:
si desea una mirada más profunda a cómo se guarda el contenido de la nueva publicación, puede buscar en su wp_poststabla en su base de datos. Existe otro método más sencillo para ver el valor completo de la base de datos, desde las plantillas de WordPress. En su plantilla única dentro del ciclo, simplemente use " echo get_the_content()". El uso del " " normal the_content()generará el contenido de la publicación analizada, pero repetir el valor del contenido generará exactamente lo que está almacenado en la base de datos. Puede usar la herramienta Inspeccionar o ver la fuente en Chrome o Firefox para ver los bloques de comentarios.

Lo que usted como desarrollador puede hacer en Gutenberg

Tiene un par de opciones sobre cómo personalizar sus temas o complementos para Gutenberg. A continuación se enumeran las personalizaciones más comunes que probablemente haría como desarrollador.

Ampliar y personalizar bloques existentes

WordPress Gutenberg viene con un gran paquete de tipos de bloques, y puede extender cualquiera de estos. También puede eliminar algunos de ellos, o decidir para ciertos casos permitir o eliminar solo algunos de ellos.

El método más común para extender un bloque es agregar estilos de bloque personalizados, que son variaciones de estilo de un bloque. Los estilos de bloque no son tan comunes en WordPress por defecto, pero hay algunos. Eche un vistazo al bloque Citar. En el editor de Gutenberg, tendrá un cuadro en la barra lateral derecha llamado "Estilos".

Otra forma de personalizar los bloques existentes es mediante el uso de filtros. Probablemente esté familiarizado con los filtros que usan PHP en WordPress, pero con Gutenberg ahora hay filtros basados ​​en Javascript en bloques. Por ejemplo, puede agregar sus propios atributos personalizados (configuraciones) a todos o tipos específicos de bloques o filtrar cómo se guardan o generan.

También puede manipular las categorías de bloques, así como eliminar o permitir ciertos bloques en ciertas situaciones. O puede, por ejemplo, asegurarse de que solo se permitan un puñado de tipos de bloque para un tipo de publicación personalizada.

Crea tus propios bloques personalizados

Crear bloques personalizados es quizás el primer pensamiento que tienen la mayoría de los desarrolladores de WordPress. Los bloques predeterminados en WordPress pueden ser muy útiles, pero si está creando un tema o complemento más complejo, probablemente tenga necesidades específicas. Por ejemplo, usar Gutenberg para crear una portada atractiva con accesos directos al contenido y al contenido dinámico. Es posible lograr la mayor personalización utilizando la opción de clase CSS que existe para todos los bloques. Pero esto no es particularmente fácil de usar.

Escribir sus propios bloques personalizados es probablemente lo más difícil para personalizar su tema o complemento para Gutenberg. ¡Pero también puede ser el más gratificante! No solo podrá crear bloques que se vean exactamente como usted quiere, sino que también es una excelente manera de aprender rápidamente sobre la nueva tecnología basada en Javascript.

Asegurarse de que su tema esté listo para Gutenberg

Si es un desarrollador de temas de WordPress, debe tener en cuenta que hay una gran cantidad de configuración que su tema podría necesitar para Gutenberg, especialmente en forma de add_theme_support(). El manual de WordPress tiene una buena descripción general de todos los soportes de temas que debe considerar para que su tema esté listo para Gutenberg.

Como predeterminado, WordPress manejará la mayoría de los estilos de los bloques predeterminados, por lo que no debería preocuparse demasiado por diseñarlos en su tema. Pero los desarrolladores de temas suelen ser más exigentes con su diseño y estilo. Por lo tanto, es probable que deba ajustar o agregar un estilo de bloque. Puede agregar estilos de editor solo al frontend, solo al editor o ambos. El manual de WordPress Gutenberg proporciona una descripción general de los estilos del editor y los estilos de bloque predeterminados.

También hay un concepto de plantillas de bloques donde puedes predefinir qué bloques deben aparecer en las publicaciones. Las plantillas de bloque se pueden usar como marcador de posición para ayudar al editor a completar los bloques. Pero también se puede utilizar para definir un conjunto fijo de bloques y posiciones.

Y finalmente, hay funciones disponibles para trabajar con el analizador de Gutenberg y cómo extraer bloques de las publicaciones. Debido a que todo el contenido se guarda con información completa sobre el tipo de contenido, puede extraer fácilmente partes específicas del contenido de la publicación. Un buen ejemplo es extraer el primer párrafo de las publicaciones para mostrarlo como extracto. Una función de PHP muy útil para este concepto es [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), que utiliza el analizador de Gutenberg en el contenido de la publicación proporcionado y, a cambio, obtendrá una matriz de PHP con toda la información y el contenido del bloque.

Conclusión

Espero que esta publicación no solo te haya enseñado algo sobre el desarrollo para Gutenberg, sino que también te haya despertado la curiosidad y el interés por aprender más. Como desarrollador de WordPress centrado en PHP que inicialmente se resistió a la idea de cambiar a la tecnología basada en Javascript, puedo decirle que una vez que haya dado el paso para aprender sobre la "nueva forma", se alegrará de haberlo hecho. Gutenberg se abre a nuevas formas de personalizar, diseñar y mostrar contenido de WordPress sin la necesidad de creadores de páginas o temas con bibliotecas pesadas para permitir contenido de publicación flexible y atractivo. ¡Solo tenemos que aprender a trabajar con él de manera óptima!