Una introducción a los temas de bloques de WordPress

Los componentes que conforman un tema típico de WordPress no han cambiado mucho a lo largo de los años. Tanto es así que el cofundador del proyecto, Matt Mullenweg, bromeó diciendo que el tema de la vieja escuela de Kubrick (lanzado en 2005) todavía funciona con las versiones modernas del sistema de gestión de contenido.

Claro, los desarrolladores de temas han agregado sus propias adiciones. Hemos visto de todo, desde interfaces de usuario de configuraciones complejas hasta creadores de páginas integrados. Pero en esencia, los temas han mantenido una estructura consistente. Es decir, hasta la introducción de temas de bloque.

Los temas de bloques están destinados a convertirse en el futuro de WordPress. Cambiarán la forma en que construimos y mantenemos sitios web. Además, están más estrechamente integrados con el editor de bloques de Gutenberg que sus contrapartes "clásicas".

¿Se pregunta de qué se trata todo este alboroto? Hoy, lo informaremos sobre los conceptos básicos de los temas de bloque de WordPress. En el camino, exploraremos cómo se comparan y contrastan con los temas tradicionales. ¡Empecemos!

¿Por qué bloquear temas?

Durante los primeros años de su existencia, el editor de bloques ha sido principalmente un medio para diseñar y crear contenido. Cuando se combina con un tema clásico, esto significa que las páginas y las publicaciones pueden diseñarse según los deseos de su corazón.

Cuando se trata de realizar cambios que impactan en todo el tema, el Personalizador de WordPress sigue siendo el recurso de referencia. Esta herramienta brinda acceso a las configuraciones de diseño y diseño que el autor del tema ha puesto a disposición. Si no está en el Personalizador, probablemente tendrá que profundizar en el código.

Sin embargo, uno de los principios clave del editor de bloques ha sido crear una interfaz más unificada dentro del panel de control de WordPress. Ya hemos visto que esto sucede con la pantalla Widgets moviéndose a una interfaz de usuario basada en bloques. El Personalizador simplemente no encaja en este molde.

La introducción de Full Site Editing (FSE) es el siguiente paso en este proceso. Va más allá de simplemente diseñar nuestras páginas y publicaciones. Ahora, todos los aspectos del diseño de un tema (encabezado, pie de página, plantillas de página, etc.) se pueden administrar directamente en WordPress.

Los temas de bloques sirven como puerta de entrada a esta funcionalidad. Como tal, están construidos exclusivamente con bloques en mente.

El funcionamiento interno de un tema de bloque de WordPress

No hay muchas similitudes entre los temas clásicos y los de bloques. Pero ambos tienen un conjunto de reglas básicas que guían su maquillaje. Si tuviera que descargar un tema de bloque y navegar por su estructura de archivos, pueden destacarse algunos contrastes clave.

Los archivos de plantilla son HTML, en lugar de PHP

En un tema clásico, encontrará archivos de plantilla con nombres como index.php y header.php . Los temas de bloque eliminan PHP y en su lugar llevan la extensión de archivo .html .

En el interior, un archivo de plantilla contiene una combinación de HTML y marcado de bloques. Por ejemplo, echemos un vistazo a esta plantilla de la documentación oficial de WordPress:

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

El marcado de bloque se parece mucho a los comentarios HTML. Pero incluye sintaxis para llamar bloques específicos a la plantilla. El sitio web de edición completa del sitio de WordPress tiene una referencia útil que incluye marcado para cada bloque predeterminado.

Y si este tipo de código te resulta familiar, es posible que hayas visto algo similar dentro de la vista del editor de código de Gutenberg.

El uso de carpetas

Los temas clásicos pueden almacenar plantillas dentro de carpetas, pero no es una necesidad. Los temas de bloque requieren un par de subcarpetas:

/parts
Contiene elementos reutilizables, como el encabezado, el pie de página y la barra lateral.

/templates
Contiene plantillas para varios tipos de contenido. Elementos como páginas, archivos de publicaciones y publicaciones singulares son ejemplos comunes. Tenga en cuenta que su convención de nomenclatura sigue la jerarquía de plantillas de WordPress, otra similitud con los temas clásicos.

Uno de los efectos secundarios positivos de este arreglo es que los temas estarán mejor organizados. Tener una estructura de carpetas estandarizada significa menos tiempo dedicado a buscar un archivo en particular.

Diseño Theme.json

El archivo theme.json se usa para asignar configuraciones predeterminadas al editor de bloques. Esto significa, entre otras cosas, que es posible establecer paletas de colores, tipografía y espaciado predeterminados. La configuración se puede aplicar en todo el sitio o en bloques específicos.

Dado que theme.json generará automáticamente el CSS adecuado en función de su configuración, es posible que no necesite llenar tanto el archivo style.css de un tema. En ese escenario, la hoja de estilo se usa para definir algunos conceptos básicos, mientras que todo lo demás se basa en este archivo novedoso.

Creación y edición de plantillas

WordPress ha brindado durante mucho tiempo la capacidad de editar los archivos de plantilla de un tema directamente dentro del tablero. Esto a menudo se desaconsejaba, ya que incluso un pequeño error de codificación podía hacer que un sitio web fuera inaccesible. Sin mencionar la posibilidad de que los cambios se sobrescriban cuando se actualiza un tema (por lo tanto, parte de la razón para usar un tema secundario). Algunos desarrolladores desactivan la función por completo para evitar incluso una posibilidad remota de catástrofe.

Pero los temas de bloque tienen que ver con la edición dentro del tablero. Las plantillas que se incluyen con un tema se pueden modificar a través del editor de bloques y también se pueden crear nuevas plantillas personalizadas.

Como era de esperar, el código es completamente opcional en este escenario. Todo se puede editar a través del nuevo Editor del sitio ( Apariencia > Editor ; se requiere WordPress 5.9 o superior ), que reemplaza al Personalizador heredado cuando se activa un tema de bloque. Y, al igual que las páginas o las publicaciones, el Editor del sitio utiliza la interfaz de usuario familiar del editor de bloques.

Y eso no es todo. Cualquier cambio que realice dentro de WordPress se puede exportar. Esto le permitiría usar su tema de bloque personalizado en múltiples sitios web.

Esto reduce la barrera de entrada para aquellos que desean personalizar o incluso crear temas. Ahora, un ojo básico para el diseño y un conocimiento práctico de los bloques pueden conducir a un sitio web personalizado.

Cosas a tener en cuenta

Antes de sumergirse y cambiar todos sus sitios web para usar temas de bloque, hay algunas cosas que debe saber.

En primer lugar, los temas de bloques son una tecnología incipiente . No se han finalizado todas las funciones y es necesario mejorar algunas prácticas recomendadas. Además, recién estamos comenzando a ver cómo funcionan estos temas en un entorno de producción. Espere varios cambios a medida que las cosas evolucionen.

Si crea sitios para clientes y desea mantener cierta flexibilidad futura, los temas híbridos pueden ser de su interés. Permiten el uso de funciones FSE mientras mantienen la estructura PHP de un tema clásico. Incluso puede adaptar un tema existente para usar esta funcionalidad.

Finalmente, los temas de bloque no significan el final de los temas clásicos, al menos no en el futuro previsible. Con eso, la transición a esta nueva forma de tematización no tiene por qué ser inmediata. Está bien, por ejemplo, experimentar con bloques en un entorno local y seguir confiando en sus temas clásicos favoritos en producción.

Recursos del tema del bloque

Si desea obtener más información sobre los temas de bloque de WordPress, hay algunos recursos destacados disponibles. Aquí están algunos de nuestros favoritos:

• Bloquear la documentación del tema de WordPress
• Tema Blockbase de Automattic
• Edición completa del sitio por Carolina Nymark
• La guía definitiva para las plantillas de bloques de WordPress en Gutenberg por Rich Tabor
• La revolución de temas de bloques de WordPress está cobrando impulso silenciosamente por Justin Tadlock
• Experimentos de temas de WordPress por WordPress