Cómo crear un tema con bloques desde el editor – La revolución llega por fin a WordPress

Hay aún mucho debate sobre cómo va a cambiar el desarrollo de temas cuando funcionalidad de Edición completa del sitio de Gutenberg, todavía en desarrollo, se haga realidad incorporándose en WordPress. Mi visión es que los temas WordPress como los conocemos van a desaparecer.

Mi visión es que los temas #WordPress como los conocemos van a desaparecer Clic para tuitear

Las plantillas de bloques son también, de momento, una característica experimental de Gutenberg (al menos en la versión 7.2.0), y su uso para crear temas basados en bloques está en este momento en una etapa de desarrollo temprano.

Un tema basado en bloques es un tema WordPress con plantillas totalmente compuestas de bloques para que, sumados al contenido de la publicación  (páginas, entradas, etc.), también se pueda usar el editor de bloques para editar todas las áreas del sitio: cabeceras, widgets, pies de página, etc.

Gutenberg Handbook

De hecho, la fase 2 del proyecto Gutenberg de WordPress, que será la que nos ocupará todo 2020, está centrada precisamente en esto, en llevar los bloques a todas partes, así que no estamos hablando de un futuro lejano sino de un inminente presente.

En 2020, la fase 2 del proyecto #Gutenberg de #WordPress va a permitir crear sitios completos con bloques Clic para tuitear

Así que, si no me equivoco, dentro de muy poco, el ecosistema de los temas WordPress va a desaparecer o cambiar totalmente, una vez que WordPress incorpore todo el sistema de selección de plantillas y modificación del diseño mediante bloques.

Como mucho, los temas aportarán estilos de bloques, esquemas de colores y poco más. Y eso de momento, con el tiempo todo eso, por lógica, debería ir en la personalización de WordPress.

Así que este artículo va a comprender principalmente de dos partes. En la primera vamos a ver lo fácil que es crear un tema basado en bloques con WordPress y Gutenberg, y en la segunda debatiremos sobre las implicaciones de esta auténtica revolución en el desarrollo de WordPress.

Así que, visto lo que nos espera, ¡empecemos! ¿vemos cómo se hace un tema basado en bloques?

Crea el proyecto del tema

En su estado más simple, la estructura de un tema basado en bloques sería algo así:

Esto es agradablemente más simple que la mayoría de las plantillas de temas de WordPress. Aquí tienes una visión general de lo que hace cada archivo y directorio:

  • block-templates/: plantillas de páginas compuestas de bloques. Siguen la misma jerarquía de plantillas que los temas tradicionales (nótese el uso de la palabra «tradicionales»).
    • index.html: la plantilla principal con la que generar una entrada o página. (Lo que sería el index.php en las plantillas de temas tradicionales.)
  • block-template-parts/: las colecciones comunes de bloques que se usarán en las plantillas de bloques.
    • header.html: la cabecera global, en HTML generado para Gutenberg.
    • footer.html: el pie de página global, en HTML generado para Gutenberg.
  • functions.php: la configuración habitual del tema, así como otras funciones útiles reutilizables.
  • index.php: suele ser un archivo vacío. Puedes borrarlo pero suele ser una buena costumbre incluirlo en cada directorio.
  • style.css: contiene los estilos del tema, como siempre.

Luego habrá temas que requieran hojas de estilos adicionales, pero esa sería la estructura básica.

Crea las plantillas de bloques y las partes de las plantillas de bloques

En realidad solo hay dos que hay que crear desde cero para que funcionen con bloques: la cabecera y el pie de página. El proceso de convertir estas áreas en plantillas de bloques pasaría por lo siguiente:

  1. Tratar de crear las partes de la plantilla en el editor de bloques
    • Esto lo puedes hacer en una entrada o  página en borrador. Si ya has activado el experimento en fase de desarrollo de «Edición completa del sitio» del plugin Gutenberg verás una nueva área en el panel de administración Apariencia/Partes de plantilla — un área en la que en el futuro se creará, almacenará y editarán las partes de la plantilla del tema basado en bloques.
  2. Aplicarle estilos lo más parecidos posibles usando el editor
  3. Añadir variaciones de estilo de bloques y CSS adicional del tema para solucionar cualquier carencia del editor de WordPress
    • La mayoría de estos estilos ya están presentes, por ejemplo, en el CSS del tema Twenty Twenty, así que si partes de este tema solo tendrías que hacer pequeñas modificaciones para asignarlas a los nuevos bloques.

Guardar las plantillas de bloques y partes de plantilla como archivos distintos

Cuando está activa la «Edición completa del sitio» en el panel  Gutenberg > Experimentos, Gutenberg esperará que tu tema ofrezca plantillas de bloques, omitiendo el comportamiento normal de las plantillas:

Una vez hayas diseñado las partes de la plantilla a tu gusto en el editor de bloques, cambia a la visualización del editor de código, y copia todo el HTML generado y pégalo en el archivo correspondiente de la estructura de tu tema, como en la  carpeta block-template-parts.

Añadir contenido demo al tema

Para que el tema tenga algo de contenido es buena idea añadirle textos demo para páginas y los principales bloques de la plantilla.

Si quieres puedes usar el contenido demo oficial del tema TwentyTwenty.

Este paso no es del todo necesario, pero sí muy recomendable, pues siempre será más visible lo que tu tema ofrece si los distintos bloques tienen algo de contenido, aunque sea de demostración, especialmente en webs nuevas, con WordPress recién instalado.

¿En qué es mejor esto que lo que tenemos ahora?

Los cambios estructurales de los temas basados en bloques generalmente no son obvios en la parte visible de la web, para el visitante. Y el proceso de cambiar entre el editor de código, un archivo de plantilla, y la vista previa del sitio para lograr el diseño deseado puede ser tedioso.

Sin embargo, este es sólo un paso intermedio antes de que podamos crear y editar nuestro tema (y todo el sitio) a través del editor de bloques Gutenberg.

El beneficio final será más visible cuando el usuario pueda modificar cualquier parte de una página usando el editor de bloques, pudiendo crear, gestionar y reutilizar partes de tu tema, todo dentro de una sencilla interfaz visual, fácil de comprender y real para cualquier tipo de usuario.

El otro aspecto emocionante de este proceso es que requiere saber muy poco de PHP, solo unas pocas declaraciones de estilos en los bloques y el registro estándar de compatibilidad del tema de siempre.

Todo lo demás es CSS y HTML generado por el editor, como has podido ver en el ejemplo de arriba. Y creo que es un paso enorme en la dirección correcta, reduciendo las barreras de entrada para todo aquél que quiera empezar en el desarrollo de temas para WordPress.

En un futuro cercano casi no habrá que saber PHP para hacer temas #WordPress, todo el CSS y HTML lo generaremos con bloques Clic para tuitear

Esto abre un mundo de posibilidades enormes para que mucha gente que no se plantearía a priori crear un tema desde cero, la opción de hacerlo con el editor de bloques, les facilitaría muchísimo iniciarse en el mundo de la creación y desarrollo web, para posteriormente aprender cada vez más, y ser los programadores del futuro.

Siempre he dicho que a WordPress le falta un sistema de diseño sencillo de la web, siendo muy eficiente ya en la parte de creación de contenidos, y por eso durante años he promocionado temas y plugins que ayudasen a este propósito, como Divi o Elementor.

Y ahora ha llegado el momento en que, por fin, WordPress va a tener una herramienta de diseño y creación de temas accesible, sencilla, democrática, y es a lo que tenemos que orientar nuestros esfuerzos, y de ahí el propósito de esta guía.

Aún no es momento de abandonar los maquetadores visuales pero ya deberías estar aprendiendo a crear temas #WordPress basados en bloques y partes de plantilla Clic para tuitear

Esto no significa que haya que abandonar ya el uso de maquetadores visuales como los antes citados, aún falta mucho camino por recorrer, pero debes ser inteligente, y previsor, y empezar a aprender a utilizar los bloques, las partes de plantilla, y todo lo que ofrece Gutenberg.

Y sí, he sido muy crítico con 2 aspectos del proyecto Gutenberg:

  • El hecho de meterlo a la fuerza sin el suficiente acuerdo ni complicidad por parte de la comunidad. De hecho, a espaldas de la comunidad.
  • Que la primera fase introdujese elementos de diseño en el editor de entradas.

¿POR QUÉ ESTA FOTO? SIGUE EL ENLACE AL VÍDEO A PARTIR DEL MINUTO 27

Pero por otra parte, la filosofía, el objetivo final del proyecto, está totalmente alineado con lo que siempre he defendido, y promocionado, que WordPress tiene que ofrecer una interfaz de diseño de la web visual, que no dependa de cada tema, y de ahí mi apuesta durante años por los maquetadores visuales, que ofrecen justo esa carencia de WordPress, y justo eso es el secreto de su innegable éxito, desde Visual Composer hasta hoy.

Dicho lo cual, y para no enrollarme más…

¿Qué te parece este cambio inminente que va a haber en WordPress?

¿Te animarás a crear un tema basado en bloques? 

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(13 votos, promedio: 5)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

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. Mi último libro es WordPress - La guía completa. 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. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido