Cómo crear un tema secundario de Blockbase

En este post veremos cómo crear un tema secundario de Blockbase.

Blockase es un tema de bloques universal creado por Automattic.

Un tema de bloques universal es un tema de bloques (ver FAQ) que se puede personalizar mediante el método clásico (a través del personalizador) o con el editor del sitio (Full Site Editing).

Un tema secundario es un tema que puede heredar las definiciones CSS y de las funcionalidades, pero que posee sus propias peculiaridades por ejemplo a nivel de CSS. De esa manera es posible crear versiones diferentes de un tema determinado sin necesidad de realizar cambios en sus archivos de configuración. Por ejemplo, podemos crear un tema secundario de Blockbase cuyo front-end (la interfaz, lo que ve el usuario) sea totalmente diferente al original. Se respetarían así ciertas definiciones de CSS (o no) y el funcionamiento interno del tema original.

El tema de bloques universal Blockbase es la apuesta de Automattic para proporcionar un recurso que sirva de partida para crear sin código cualquier tema de bloques usando la edición del sitio y el personalizador clásico.

Automattic ya lanzó un tema clásico llamado Blank-Canvas que era un tema hijo de Seedlet con el mismo propósito.

Blockbase está destinado a servir como base para que, a partir de la función de estilos y la edición de las plantillas y partes de plantilla, se pueda crear sin código y fácilmente el front-end de un sitio web de WordPress.  

Ese es, ni más ni menos, que el propósito de la Full Site Editing (FSE).

Algunos temas necesitan personalizaciones más allá de lo que sería posible con los estilos globales. Estos estilos más precios continúan estando definidos en el archivo CSS del tema.

En Blogpocket, se creó el tema de bloques Blogpocket Twenty 3.0 para probar la Edición del sitio (FSE).

WordPress 5.9 se lanzó en enero de 2022 e integró de manera nativa la edición completa del sitio. Antes de esa fecha, para probar la FSE había que instalar el plugin Gutenberg y un tema de bloques (por ej. Blogpocket Twenty 3.0).

Blogpocket Twenty 3.0 nos valdría experimentalmente para probar la FSE. Sin embargo, Blockbase es un punto de partida mucho más interesante. Porque es un tema de bloques universal y porque Automattic ha creado un plugin para crear temas secundarios con un clic.

De esta manera, podemos personalizar el tema de bloques de partida, mediante la función de estilos, cambiando los colores. La tipografía se puede cambiar a través del personalizador clásico (de ahí que a este tipo de temas se los denomine «universales»). Y para la estructura de las páginas se utiliza el editor del sitio.

Crear un tema secundario de Blockbase

Paso 1: Configuración

Instala y active Blockbase y el plugin Create Blockbase Theme.

Paso 2: Estilos globales

Realiza cambios en tu sitio utilizando el editor de estilos globales. Por ejemplo, cambia el color del fondo, el de los textos y el de los enlaces. Acude a nuestro curso de Full Site Editing para aprender el funcionamiento del Editor del sitio.

Para los tipos de fuentes ve al personalizador.

Paso 3: Plantillas

Edita tus plantillas y partes de plantilla usando el Editor del sitio.

Paso 4: Exportar

Una vez que hayas personalizado el tema. En Apariencia habrá una nueva página llamada «Crear tema de Blockbase». Puedes agregar los detalles del tema secundario antes de crearlo. Estos se utilizarán en el archivo style.css. Al hacer clic en el botón «Crear tema de Blockbase», se descargará un archivo zip, que contiene todos los archivos para tu tema secundario. La imagen screenshot del tema secundario debes incluirla manualmente dentro del directorio raíz correspondiente antes de subirlo a tu WordPress (para ello deberás descomprimir el zip y luego comprimirlo otra vez).

Paso 5: Prueba

Sube el archivo zip a tu WordPress y actívalo. El front-end de tu sitio debería verse igual que antes de activar el nuevo tema.

[Vía Create A Blockbase Child Theme]

Ejercicio práctico

El front-end de mi blog personal antoniocambronero.com se implementó con la Edición completa del sitio personalizando el tema de bloques Tove.

El ejercicio siguiente fue clonar el front-end de antoniocambronero.com a partir de Blockbase.

Aquí tienes el resultado:

Y aquí el sitio original (antoniocambronero.com):

Obsérvese que el sitio original posee una parte de plantilla para el footer que el tema secundario de Blockbase no tiene. Trata de completar el ejercicio práctico añadiendo el footer de antoniocambronero.com en tu sitio con el tema secundario de Blockbase.

Encontrarás algunas diferencias debido a que Tove y Bockbase tienen distintos CSS. Por ejemplo, el ancho del contenido en Tove abarca el 100% de la pantalla, mientras que en Blockbase no.

Blueprint

Descarga aquí el blueprint para la aplicación Local. Con este blueprint puedes implementar un entorno de pruebas directamente con los siguiente elementos ya instalados y preparados:

• Plugin Gutenberg. Obligatorio para acceder al Editor del sitio.
• Plugin Create Blockbase theme. Con esto puedes crear un tema secundario de Blockbase con un clic a partir de las modificaciones que hayas hecho al tema de inicio Blockbase.
• Tema Blockbase. Con las plantillas y partes de plantillas configuradas con el tema de bloques Tove.

Más información

En el curso de Full Site Editing podrás encontrar los videotutoriales en los que se explica en detalle el funcionamiento de los estilos globales, el editor del sitio y la creación de un tema secundario con Blockbase.

Aquí un generador de temas secundarios de los temas del repositorio: Generate FSE child theme.