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í:

tema
|__ block-templates
    |__ index.html
|__ block-template-parts
    |__ header.html
    |__ footer.html
|__ functions.php
|__ index.php
|__ style.css

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…
(17 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

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

  1. Hola Fernando.
    Como siempre, gracias por tus reflexiones. Siempre ayudan a ir un par de pasos por delante —bueno, igual solo medio en mi caso—
    A mi, Gutenberg de momento, acostumbrado a Divi o Elementor, sinceramente me resulta aún muy frustante o poco productivo. Ya he dejado de instalar el Classic Editor, así que algo es algo 😉

    Dices que 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 ¿recomiendas algún contenido concreto, blog, canal de YouTube donde ir aprendiendo sobre ello?
    (Claro está aparte de tus píldoras y artículos sobre el tema).

    Saludos y un abrazo desde Xixón.

  2. No me convence mucho que digamos, supongo que por el miedo al cambio o algo así, o simplemente no me gustan los bloques, aunque hay que ver como evoluciona, sobrevive el que se adapta!
    gracias x todo Fernando!

  3. Miguel Bustos

    Vaya, por lo que cuentas lo que están haciendo es fusionar la experiencia de usuario que tenemos en Divi y Elementor para hacerlo parte del código base de WordPress, gratuito y 100% GPL. La verdad es que al principio era muy muy reacio a Gutenberg, pero reconozco que esta orientación me está gustando mucho. Voy a tener que hacerte caso (y a tu autobombo jajajaja) y aprender a crear temas con Gutenberg.

  4. Orlando Ferreras

    Fernando, ante todo te felicito por tu blog, es un sitio súper útil con información actualizada y de vanguardia.
    Este artículo sobre la posibilidad de crear temas completos con bloques de WordPress es fascinante. El mundo está cambiando cada día y no podemos quedarnos atrás.
    Creo definitivamente que tu visión de este tema es acertada y que dentro de poco será más fácil trabajar con WordPress. Actualmente trabajo con Elementor (Tengo cerca de 2 años con él) y gracias a tu artículo comenzaré a experimentar con temas #Wordpress. Un abrazo, hermano.

  5. Guillermo Stancanelli

    Hola Fernando, gracias por tu aporte y es claro que WordPress recogió el guante y se puso los largos para incorporar aquello que dejo en manos de DIVI o Elementor por ejemplo.
    En la primera parte de tu análisis que es la creación de temas, está girando entonces de programadores a diseñadores gráficos. Creo que es bueno en la usabilidad, UI y UX; pero algo de código por atrás siempre habrá.
    Respecto de los maquetadores visuales es claro que ya saben la movida y DIVI Blocks va camino de esa integración.
    Mi experiencia personal es que si bien hace 6 años que trabajo con DIVI, experimente con Elementor y en el último tiempo los Blocks como Atomics, Kadence o el buenísimo Stackeable me hicieron replantear la construcciones de algunos sitios.
    Todo como siempre dependerá de presupuestos y tiempos.

    Un saludo.
    Guillermo

  6. Hola Fernando.
    Antes me costaba pillar Guterberg, no era capaz de hacer click para crear algo, pero desde un tiempo hasta ahora ya he ido haciendo más cosas y me alegro de que se esté avanzando y lo anuncies.

    Yo también empezé con Visual Composer y en varios casos lo he metido pero cada vez utilizo más Gutenberg y lo estoy ya utilizando para webs de algunos clientes y para las necesidades que se han presentado he visto que me daba la solución. Por eso he visto que me va dando más confianza utilizarlo.
    Me ha gustado mucho EditorsKit y lo que explicas en tu canal de youtube. Aportas mucho y ayudas.

    Por cierto, el cabezón que saca la foto con el móvil soy yo, es en la WordCamp de Irun 2018, fue la última ponencia.

    Un saludo desde Irun, te sigo.

  7. Excelente artículo Fernando. Y muy aclarador. Creo que Gutenberg puede ser muy beneficioso para la «democratización» de wordpress ya que va a dar una interfaz mucho más intuitiva y práctica para muchos usuarios y, como bien dices, prácticamente sin conocimientos de programación, un usuario va a poder crearse una página web con cierta facilidad.

    Y ahí lanzo la duda que me viene asaltando desde hace unos meses. ¿Cómo deberíamos afrontar un proyecto web desde el punto de vista de un desarrollador? Hasta hace bien poco los proyectos que realizaba para mis clientes se basaban en temas personalizados en los que se maquetaban las distintas plantillas de la web (a la «vieja» usanza, con php, html, css, javascript…). ¿Dónde deja Gutenberg este enfoque de trabajo?. Es cierto que si Gutenberg tiende a ser un maquetador visual la facilidad que te ofrece para maquetar una página es enorme, pero ¿es lo mejor o lo más óptimo?. ¿Queda desfasado el enfoque más «purista» en el que metemos casi todo en el código? ¿Piensas que debemos acogernos a este nuevo paradigma sin excepción o dependerá del proyecto y del cliente (o del presupuesto…)?.

    Ya he desarrollado algunos proyectos con Gutenberg y, pese a que es cierto que se maqueta de forma «relativamente» simple, cuando tengo que afrontar aspectos como el responsive a veces es un calvario, o cuando necesitas una funcionalidad en concreto y no encuentras un bloque que lo haga, o el bloque que encuentras no hace exáctamente lo que necesitas o incluso tienes que instalar toda una galería de bloques para algo muy concreto con lo que acabas haciendo tú mismo un bloque personalizado… al final me da la impresión de estar construyendo un Frankenstein a base de pedacitos cada uno de un padre y de una madre. En fin quería saber tu opinión al respecto.

    Saludos!

    1. Yo creo que nada está desfasado, simplemente tenemos que adaptar nuestros métodos de trabajo para ofrecer lo más óptimo y escalable para el cliente.

      Cada vez está más orientado el negocio hacia el servicio, no hacia el código.

      Es como si nos aferrásemos a editar contenidos en html cuando hay editores visuales, procesadores de texto, nos puede gustar más o menos pero sería anacrónico, y todos hemos adoptado que es mejor y más rápido poner negritas con Comando+b que con < strong >texto< /strong >

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido