Crear un child theme para un tema de bloques de WordPress

Aprende en este tutorial cómo crear un tema hijo (child theme) en un tema de bloques de WordPress.

Con la llegada de los temas de bloques a WordPress es posible que pienses ¿sigue teniendo sentido los child themes en temas de bloques? 

Recordemos el principal motivo para crear un tema hijo es el de poder realizar modificaciones que no se pierdan al actualizar el tema padre.

Por eso es una reflexión interesante, ya que los cambios que se realizan en el editor del sitio se guardan en la base de datos. Así que esa parte de las modificaciones no se perderían cuando se actualizara el tema.

Pero esto no cubre todos los escenarios, por eso crear un child theme de un tema de bloques puede ser interesante si:

• Quieres modificar directamente ficheros (theme.json, style.css u otros ficheros HTML, PHP, o JS)
• Quieres bloquear algunos bloques
• Quieres crear paleta de colores personalizadas, modificar espaciados, aplicar tipografía fluida, añadir nuevas plantillas o partes de plantilla…
• Quieres desregistrar patrones y/o estilos de bloques.

Así que, como ves, todavía hay varios escenarios en los que puede ser interesante crear un child theme para un tema de bloques.

Vamos a ver como puedes hacerlo.

Pasos para crear un child theme en un tema de bloques

1. Crea una carpeta con el nombre del tema hijo

Dentro de la carpeta /theme/ añade una nueva con el nombre del tema hijo.

Por ejemplo, si quieres crear un tema hijo del Twenty Twenty-Three puedes optar por tt3-child.

Pero puedes darle el nombre que quieras a la carpeta. Eso sí, usa minúsculas y guiones para separar las palabras, que las buenas prácticas hay que mantenerlas. 😉

2. Crea un fichero style.css

Dentro de la carpeta del tema hijo crea un fichero que se llame style.css y añade lo siguiente:

/*
Theme Name: TT3 child
Template: twentytwentythree
*/

Ya ves que solo hay dos campos imprescindibles:

• Template Name: Nombre que se mostrará en la página de temas.
• Template: el slug del tema padre, en este caso twentytwentythree.

Si quieres puedes añadir más campos a la cabecera, te dejo aquí un ejemplo:

/*
Theme Name:
Theme URI:
Author:
Author URI:
Version:
*/

A continuación de estos campos podrás añadir las modificaciones de CSS que quieras.

3. Crea un fichero functions.php (opcional)

Este paso solo es necesario si el tema padre no encola el fichero style.css, como es el caso del Twenty Twenty-Three. En ese caso tienes que crear un fichero functions.php y añadir lo siguiente:

// Encolar el fichero style.css
add_action( 'wp_enqueue_scripts', 'tt3_child_styles' );
function tt3_child_styles() {
	wp_enqueue_style( 'tt3-child-style', get_stylesheet_uri() );
}

4. Añade un fichero theme.json (opcional)

Crea un fichero llamado theme.json en la raíz del tema hijo.

Si, por ejemplo quieres añadir una paleta de colores puedes añadir:

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "primary",
					"color": "#0366cc",
					"name": "Blue"
				},
				{
					"slug": "secondary",
					"color": "#F59900",
					"name": "Orange"
				},
				{
					"color": "#33333",
					"slug": "black",
					"name": "Black"
        		},
				{
					"color": "#fff",
					"slug": "white",
					"name": "White"
        		}
			]
		}
	}
}

O si quieres eliminar los espaciados superiores e inferiores:

{
	"version": 2,
	"styles": {
		"spacing": {
			"padding": {
				"top": "0",
				"bottom": "0"
			}
		}
	}
}

La idea es que personalices el fichero theme.json a tu gusto.

La estructura del child theme quedaría así:

themes
|__ tt3-child
  |__ style.css
  |__ functions.php
  |__ theme.json

Lo bueno es que todas las personalizaciones que hayas hecho en los puntos anteriores se mantendrán cuando actualices el tema padre.

Conclusiones

Ahora ya sabes en qué casos te puede interesar crear un child theme de un tema de bloques y cómo hacerlo.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉