Los temas basados en bloques

Introducción

Como hemos visto en el capítulo Introducción a WordPress sección Apariencia - Temas, WordPress dispone de distintos temas. En este capítulo vamos a ver cómo funcionan los temas basados en bloques, llamados block themes en inglés.

Desde la integración de Gutenberg, WordPress pone a disposición nuevas herramientas y una forma de diseñar un sitio, integrando el Full Site Editing (edición completa del sitio) que permite, al igual que un constructor de páginas, diseñar un sitio gracias a un sistema de bloques para modificar y personalizar todas sus partes.

De esta manera, puede usar bloques en las plantillas proporcionadas por un tema o una extensión, por ejemplo, una página de archivo o una página 404. Por último, tiene la posibilidad de crear sus propias plantillas.

Es una manera novedosa de pensar que cambia por completo lo que se hacía hasta ahora en WordPress: tiene un archivo nuevo theme.json y una interacción distinta con los archivos.

Para saber cómo están estructurados los archivos dentro de los temas basados en bloques, vaya al capítulo WordPress y PHP - Los archivos y carpetas de los temas basados en bloques.

WordPress le permite elegir con los métodos antiguos de diseño de páginas web que todavía representan una buena parte del mercado. De hecho, todo este sistema sigue siendo...

¿Qué es un tema basado en bloques?

Un tema de WordPress basado en bloques funciona con plantillas que están completamente formadas por bloques con Gutenberg, de manera que el editor se puede usar para modificar tanto el contenido de las publicaciones (páginas, entradas, etc.) como todas las zonas del sitio: encabezado, pie de página, barras laterales, etc. Es lo que se conoce como Full Site Editing.

Como ha podido comprobar en el capítulo WordPress y PHP, en la sección Los archivos y carpetas de los temas basados en bloques, la estructura de los archivos es distinta. La diferencia principal con los temas clásicos reside en el hecho de que las plantillas y los elementos de las plantillas relacionados con la jerarquía clásica de WordPress están en formato HTML, en lugar de estar en formato PHP, y están completamente formados por bloques.

Otro aspecto que también habrá observado es que no se puede acceder a la herramienta de personalización con un tema basado en bloques, salvo que use un plugin o un tema que requiera el uso de dicha herramienta. De hecho, los bloques propuestos en el editor de plantillas o el editor de sitios permiten realizar las mismas modificaciones. Por ejemplo, en la actualidad existen los bloques Título del sitio, Descripción corta del sitio y Logo del sitio. También puede seleccionar los colores para su sitio en el panel...

¿Qué es una plantilla de bloque?

Una plantilla de bloque está compuesta por una lista de bloques. Todos los bloques de WordPress se pueden usar en una plantilla. Las plantillas también pueden compartir partes de su contenido usando los «elementos de plantillas». Por ejemplo, todas las plantillas de bloques pueden usar el mismo encabezado incluyendo un elemento de plantilla distinto header.html o footer.html.

El siguiente comentario llama al archivo header.html contenido en la carpeta Parts:

<!-- wp:template-part {"slug":"header","tagName":"header"} /--> 

Estos comentarios diferentes se parecen a comentarios HTML y tienen una función específica: delimitar bloques. Los delimitadores de bloques le indican a WordPress qué bloque debe mostrar en pantalla. También proporcionan valores para las propiedades del bloque dentro de un objeto JSON. Estas propiedades determinan la manera en la que se debe mostrar el bloque en la pantalla.

He aquí algunos ejemplos para comprender el código del ejemplo siguiente: 

<!-- wp:group --> corresponde a un bloque grupo.

<!-- wp:query --> corresponde a un bloque bucle de consulta.

<!-- wp:post-title /--> corresponde a un bloque encabezado.

<!-- wp:post-excerpt /--> corresponde a un bloque resumen.

<!-- wp:post-date /--> corresponde a un bloque fecha.

<!-- wp:spacer --> corresponde...

Escribir y modificar plantillas

Para escribir, modificar o exportar plantillas, hay que hacerlo mediante la administración del sitio. Para ello, es necesario acceder a la modificación de las plantillas a través del menú Apariencia - Editor. Puede añadir los bloques que desee y crear la página que necesite. Para obtener información detallada sobre todos los bloques, consulte el capítulo Introducción a WordPress, sección La administración y los menús, subsección Entradas, y dentro de esta, vaya al apartado Gutenberg y el sistema de bloques.

Tiene la posibilidad de pasar al modo editor de código para recuperar el código HTML del módulo. También puede hacer clic en la herramienta Exportar, a la que se accede mediante el botón Opciones (tres puntos verticales), situado a la derecha de la barra superior del editor del tema.

De esta maner,a podrá descargar un archivo ZIP que contiene todas las plantillas y elementos de plantillas que ha creado con el editor y que podrá colocar en la carpeta de su tema.

También podrá crear temas con plantillas personalizadas y sus propias plantillas para las carpetas Templates y Parts, si su tema dispone de estas carpetas.

Observe que cuando se realiza esta exportación, el etiquetado del bloque Elemento de plantilla incluye un identificador de publicación (postID) que se puede...

Estructura principal

El archivo theme.json tiene una estructura principal:

{ 
   "version": 2, 
   "settings": {}, 
   "styles": {}, 
   "customTemplates": {}, 
   "templateParts": {} 
} 

version permite especificar la versión de la estructura del archivo. La versión actual es la 2, que se introdujo con la versión 5.9 de WordPress. Esta versión permite especificar el formato de la estructura del archivo theme.json. Si ya ha utilizado la v1, no necesita actualizar la versión del archivo v1 a la v2, porque se actualizará automáticamente. Es importante incluir el atributo version. En caso contrario, los datos se analizarán como "version 0" y existe el peligro de que no se interpreten correctamente.

settings permite definir los parámetros para configurar el editor y activar o desactivar funciones como los tamaños de fuente personalizados, los márgenes personalizados y los colores. Este parámetro define valores como paletas de colores que generan propiedades personalizadas CSS que puede utilizar en el tema. Es posible definir preajustes a nivel global o a nivel del bloque. Los ajustes definidos a nivel superior afectan a todos los bloques, pero los bloques pueden sustituir los ajustes...

Estructura de los preajustes

La sección settings define la configuración a nivel global y a nivel del bloque.

La sección de los preajustes settings tiene la siguiente estructura:

{ 
   "version": 2, 
   "settings": { 
       "border": { 
           "radius": false, 
           "color": false, 
           "style": false, 
           "width": false 
       }, 
       "color": { 
           "custom": true, 
           "customDuotone": true, 
           "customGradient": true, 
           "duotone": [], 
           "gradients": [], 
           "link": false, 
           "palette": [], 
           "text": true, 
           "background": true, 
           "defaultGradients": true, 
           "defaultPalette": true 
       }, 
       "custom": {}, 
       "layout": { 
           "contentSize": "800px", 
           "wideSize": "1000px" 
       }, ...

Colores

Veamos cómo configurar settings para añadir colores con el archivo theme.json.

Puede abarcar a la vez el sitio web y los bloques con parámetros y estilos, ya sea colocando los parámetros globales del sitio en el nivel raíz de una sección o colocando los parámetros de bloque dentro de blocks, seguidos del nombre del bloque:

{ 
   "version": 2, 
   "settings": { 
           "color": { ... }, // Ajustes generales 
           "blocks": { 
                  "core/group": { 
                           "color": { ... }, //ajustes de color 
para el bloque 
                           "typography": { ... } //ajustes de la 
tipografía para el bloque 
                   } 
           } 
   } 
} 

WordPress utiliza los datos del archivo theme.json para añadir parámetros al bloque y crear propiedades personalizadas CSS, como con la paleta de colores. Los valores se utilizan para ofrecerle al usuario opciones de paleta de colores y para generar propiedades CSS que puede usar en otros lugares dentro del archivo theme.json o en el CSS del tema.

Este ejemplo muestra una paleta de colores con un único color negro:

{ 
   "version": 2, 
   "settings": { 
       "color": { 
           "palette": [ 
               { 
                   "name":...

Tipografías

El control de la familia de fuentes permite a los usuarios modificar el estilo de fuente de un bloque. Este parámetro solo está disponible para bloques específicos y no está activado por defecto. El tema debe definir familias de fuentes para que aparezca este elemento de interfaz.

Para añadir fuentes, hay que usar el parámetro fontFamilies, que acepta tres valores: name, slug y fontFamily.

{ 
   "version": 2, 
       "settings": { 
            "typography": { 
                  "fontFamilies": [ 
                        { 
                        "fontFamily": "sans-serif", 
                        "name": "Sans Serif", 
                        "slug":...

{ 
       "version": 2, 
       "settings": { 
               "layout": { 
                       "contentSize": "840px", 
                       "wideSize": "1100px" 
               } 
       } 
} 

Espaciados

Puede activar la gestión de los márgenes externos e internos:

{ 
       "version": 2, 
       "settings": { 
                  "spacing": { 
                         "padding": true, 
                         "margin": true 
                  } 
       } 
} 

Puede activar las unidades de los márgenes externos, de los márgenes internos y del espaciado personalizadas con ayuda del código:

{ 
       "version": 2, 
       "settings": { 
               "spacing": { 
                       "padding":...

{ 
       "version": 2, 
       "settings": { 
                  "border": { 
                         "color": true, 
                         "radius": true, 
                         "style": true, 
                         "width": true 
                  } 
       } 
} 

Activar y desactivar parámetros

En el archivo theme.json, puede activar o desactivar los controles de bloque y de esta manera activar únicamente las funciones que necesita su tema.

Las siguientes funciones están activadas de manera predeterminada:

Para desactivarlos, tiene que definir el valor del parámetro como false.

Este ejemplo desactiva el selector de colores personalizado para la paleta de colores y los degradados:

{ 
       "version": 2, 
       "settings": { 
               "color": { 
                       "custom": false, 
                       "customGradient": false 
                } 
        } 
} 

Es posible desactivar ciertas...

Estructura de los estilos

Los temas definen los estilos predeterminados de los bloques y los elementos en la sección styles.

La sección de los estilos styles tiene la siguiente estructura:

{ 
   "version": 2, 
   "styles": { 
       "border": { 
           "radius": "value", 
           "color": "value", 
           "style": "value", 
           "width": "value" 
       }, 
       "filter": { 
           "duotone": "value" 
       }, 
       "color": { 
           "background": "value", 
           "gradient": "value", 
           "text": "value" 
       }, 
       "spacing": { 
           "blockGap": "value", 
           "margin": { 
               "top": "value", 
               "right": "value", 
               "bottom":...

Hacer referencia a un estilo

Observará que las propiedades personalizadas CSS se pueden utilizar en las declaraciones de propiedades. Así, se puede utilizar la referencia a una clase definida en settings de la siguiente manera:

{ 
      "version": 2, 
       "settings": { 
                "color": { 
                         "palette": [ 
                        { 
                               "name": "Primary", 
                               "slug": "primary", 
                               "color":...

Elementos

Los bloques pueden tener varios elementos HTML como encabezados (H1-H6) y enlaces para darles estilo mediante colores, fondo, espaciados, etc. En este ejemplo, el color de fondo y el relleno se han añadido al enlace Leer más en el interior del bloque de extracto de mensaje:

{ 
   "version": 2, 
   "settings": { ... }, 
   "styles": { 
       "blocks": { 
           "core/post-excerpt": { 
               "elements": { 
                   "link": { 
                       "color": { 
                           "background": "var(--wp--preset 
--color--light-grey)" 
                       }, ...