Consejos que deberías tener en cuenta si vas a desarrollar bloques para Gutenberg

Aunque no soy muy fan de cómo se ha decidido la implantación de Gutenberg, en realidad sí estoy muy interesado en el desarrollo en sí del nuevo editor de WordPress.

Es por ello que, como ando metido en harina para prepararme a lo que vendrá, voy a compartir contigo algunas de las cosas que he estado aprendiendo a la hora de desarrollar bloques para el nuevo editor Gutenberg de WordPress, así como la adaptación de los temas a Gutenberg.

Solo recordarte que ni soy programador de carrera ni un experto en Gutenberg (aún), simplemente voy aprendiendo a crear bloques para el editor.

Los siguientes trucos son cosas que he ido aprendiendo enredando e investigando en recursos como el mismo plugin Gutenberg el tema de base para Gutenberg, Gutenberg Best Practicesesta joya llamada Create Guten Block.

¿Nos ponemos?

¿Dónde incluyo los bloques, en el tema o en plugins?

Ya lo hemos comentado alguna vez, cuando hablábamos de si es mejor editar el functions.php o usar un plugin, y la regla base es que si algo afecta a la visualización piensa en el tema, y si añades funcionalidades usa un plugin.

Así que cuando pensamos en bloques aplicamos el mismo principio, y visto que la mayoría de los bloques añaden funcionalidades a WordPress en su conjunto, en una utilidad clave y base como es el editor, creo que tienen más sentido como plugins.

Es más, piensa por un momento… ¿Si cambio de tema perderé la funcionalidad que hace el bloque en mi contenido? La respuesta casi siempre será sí. WordPress ya no sabrá qué hacer con la información del bloque, guardada en la base de datos, pero asociada a un tema activo que ya no está.

Por el contrario, si tu bloque está en un plugin, o lo desactivas, o será agnóstico del tema activo, funcionará con todos.

Estructura de archivos de un bloque

Aunque siempre variará de desarrollador a desarrollador, y no hay una estructura de archivos estándar, sí que hay patrones a la hora de desarrollar bloques para Gutenberg.

Un plugin de bloques típico consiste de un archivo mi-plugin-de-bloques.php, utilizado para hacer enqueue de los bloques, y un directorio /bloques en el que alojar todos tus bloques.

Dentro del directorio /bloques puedes hacer subcarpertas para bloques específicos, como por ejemplo /bloque-personalizado. Y dentro del directorio /bloque-personalizado estarían tus archivos index.jseditor-styles.css y styles.css de tu bloque.

Visto lo anterior, para verlo más claro, hablamos de una estructura de este estilo:

Poniendo nombre a los bloques / namespace

Cuando registras un bloque, el nombre tienes que estructurarlo como namespace/nombre-del-bloque, y en nombre-del-bloque solo puedes usar minúsculas, números y guiones simples, además de que siempre debe empezar por una letra.

Por otro lado, namespace es el nombre de tu plugin. Luego en el ejemplo anterior namespace/nombre-del-bloque en realidad debería ser algo como mi-plugin-de-bloques/bloque-personalizado.

Traducciones

Si ya has publicado algún plugin o tema en WordPress.org ya deberías saber cómo prepararlos para traducción.

Al trabajar con bloques se hace prácticamente igual, a pesar de que los bloques se crean principalmente con JavaScript. Básicamente ten en cuenta que siempre debes hacer traducibles tus bloques, igual que tus plugins y temas, y además es fácil de hacer.

Ojo con los temas

Lo principal que debes recordar es que los bloques pueden incluir sus propios estilos, necesarios para que funcionen correctamente. Pero los temas pueden sobrescribir los estilos de los bloques, como en el ejemplo que vimos hace unos días.

Hay pocas cosas en Gutenberg que requieran compatibilidad con los temas, principalmente debido a la naturaleza de cómo está programado Gutenberg, y a la propia dificultad de los bloques de facilitar los estilos adecuados.

Los nuevos alineamientos ancho y completo

A este respecto lo más destacado que debes tener en cuenta son las nuevas opciones de alineamiento de imágenes alignfull y alignwide. Se pueden usar para imágenes, y también para bloques.

El problema a la hora de añadirlos a los bloques es que puede que no funcionen en algunos temas, especialmente en los que tengan barras laterales.

Añadir al tema activo la compatibilidad con los nuevos alineamientos es tan fácil como llamar a la función add_theme_support( 'align-wide' ); en el archivo functions.php de tu tema, así:

Luego no te olvides de añadirle estilos a los nuevos alineamientos en la hoja de estilos de tu tema.

Paletas de color de los bloques

Una de las cosas más chulas de Gutenberg es el selector de colores, que ofrece al desarrollador de temas control total sobre a qué colores puede cambiar el usuario para así ofrecer una paleta de colores consistente al crear el contenido.

Para incorporar compatibilidad de tu tema con esta funcionalidad, puedes añadirla, con tu paleta de colores personalizada, al tema activo añadiendo algo así al archivo functions.php:

E incluso puedes ir más allá y desactivar el selector de colores personalizados de Gutenberg, para solo mostrar las opciones por defecto. Para lograrlo añade esto a tu archivo functions.php:

Advertencia: Si añades todas estas opciones puedes hacerlo en la misma función. No definas 3 veces ayudawp_setup_theme_supported_features o tendrás un feo error de PHP.

Resumiendo

Sé que no es mucho lo que te he contado, pero espero que hayas aprendido algo nuevo sobre Gutenberg y cómo crear tus propios bloques e integrarlos con tus temas.

Ya iremos viendo más guías y trucos para Gutenberg, y por supuesto siempre puedes dejar tus propios trucos y consejos para Gutenberg en los comentarios.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (6 votos, promedio: 4,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This