Los temas de bloques y theme.json te dan mucha flexibilidad, lo que puede hacer que parezca que los temas hijos han quedado obsoletos. Pero siguen siendo esenciales en muchos casos.
Usar un tema hijo sigue siendo la mejor opción si deseas tener un control real sobre el diseño de tu sitio sin tocar los archivos principales del tema padre.
En este artículo, utilizaremos el tema Twenty Twenty-Five como base y te guiaremos en la creación de un tema hijo de bloques con su propio style.css y functions.php. Aprenderás a anular estilos de forma segura, a definir estilos de bloque personalizados e incluso a configurar tus propias variaciones de estilo. No se trata sólo de un truco de estilo — sino de un paso seguro hacia la creación de tu propio tema de bloques completo en el futuro.
Aunque este ejercicio puede parecer sencillo, exploraremos algunos puntos más delicados que pueden resultar complicados. Vamos a empezar creando un tema hijo personalizado y, a continuación, implementaremos una variación de estilo personalizada.
Registrar un tema hijo de bloques
Registrar un tema hijo de bloques es mucho más sencillo que registrar uno clásico.
Técnicamente, no es necesario registrarlo. El registro se produce automáticamente cuando una carpeta de tema hijo con el nombre adecuado contiene un archivo theme.json y un archivo style.css.
Entonces, ¿por qué sigue siendo necesario el archivo style.css?
Como siempre, incluye un encabezado obligatorio (que se muestra a continuación) que contiene metadatos que WordPress utiliza para identificar el tema, incluyendo su nombre y el tema padre al que pertenece. Aunque los estilos y la configuración se gestionan ahora en theme.json, style.css sigue desempeñando un papel fundamental para que WordPress reconozca tu tema, aunque no contenga CSS propiamente dicho.
/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/Un archivo functions.php no es necesario a menos que quieras poner en cola scripts o añadir funcionalidad basada en PHP. Eso lo haremos más adelante.
Si no estás familiarizado con theme.json o quieres un repaso rápido, consulta nuestra guía sobre cómo Trabajar con propiedades y pares clave-valor en theme.json.
Realizar tres cambios básicos en nuestro tema hijo.
Empecemos actualizando los colores globales del fondo y del texto, además de dar estilo al bloque Botón.
En el archivo theme.json del tema hijo (que sirve como estilo por defecto), definimos lo siguiente:
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FFFF00"
},
{
"name": "Purple",
"slug": "purple",
"color": "#800080"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}Mientras que los colores de fondo y de texto se aplican a todas las variaciones de estilo, el estilo del bloque Botón sólo se aplica a la variación por defecto.
Anular variaciones de estilo
Para aplicar el mismo estilo de botón en diferentes variaciones, lo mejor es crear un archivo .json que coincida con la convención de nomenclatura de variaciones del tema padre.
Por ejemplo, para anular el borde del botón en la variación de estilo Evening, crea un archivo llamado 01-evening.json en el directorio raíz de tu tema hijo (o dentro de una subcarpeta /styles):
{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "var(--wp--preset--color--white)",
"width": "3px",
"style": "dashed"
}
}
}
}
}Aquí hemos utilizado un borde discontinuo más ancho para que el botón destaque. Como se trata de estilos más específicos, anulan los generales de theme.json.
Crear una variación de estilo personalizada
Vamos a dar un paso más creando una variación de estilo completamente nueva llamada Kinsta. Esta variación hereda la configuración global del archivo theme.json del tema hijo y aplica su propia paleta de colores personalizada y el estilo de los botones:
Guarda lo siguiente como /styles/kinsta.json:
{
"version": 3,
"title": "Kinsta",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#261e1e"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ff2900"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--white)",
"width": "4px",
"style": "dotted"
}
}
}
}
}Esta variación «Kinsta» nos da un aspecto distinto, construido completamente dentro de la estructura del tema hijo.
Cómo y por qué poner en cola style.css
En un verdadero tema de bloques como Twenty Twenty-Five, no es necesario poner en cola las hojas de estilo manualmente mediante PHP, ni para el tema padre ni para el tema hijo. El core de WordPress genera CSS dinámicamente basándose en el archivo theme.json.
Sin embargo, si quieres escribir estilos personalizados en un archivo style.css, tendrás que ponerlos en cola manualmente.
// Frontend styles
add_action('wp_enqueue_scripts', function() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style')
);
});Este código garantiza que tanto el archivo style.css padre como el hijo se carguen en el frontend.
Para confirmar que tus estilos se están poniendo en cola correctamente, prueba a añadir el siguiente CSS al archivo style.css de tu tema hijo:
body {
color: #ffff00;
background: #0000ff;
}Esto da a todas las variaciones de estilo un fondo azul y un color de texto amarillo, sólo en el frontend.
Un caso sencillo de uso de styles.css
Puede que te estés preguntando: ¿Por qué utilizar CSS? ¿No se supone que theme.json se encarga de todo?
Pues no.
Por ejemplo, theme.json no admite pseudoclases como :hover. Para dar estilo a un efecto hover en todos los botones, puedes utilizar este CSS:
.wp-block-button a:hover {
background: #ffffff;
color: #0000ff;
}Esto se aplica a todos los bloques de botones en todas las variaciones del frontend.
Supongamos que quieres limitar este efecto hover a una variación o bloque específico. En ese caso, tendrás que utilizar métodos más avanzados, como clases condicionales de cuerpo, filtros de bloque o CSS específico de bloque.
Añadir una variación de estilo de bloque
Ahora vamos a examinar cómo añadir una nueva variación de estilo al bloque Botón utilizando PHP y CSS.
Si estás pensando en añadir un array variations a theme.json, no funcionará para este caso de uso. Mientras que theme.json gestiona el estilo global y a nivel de bloque, las variaciones de estilo de bloque — como los estilos alternativos de los botones — deben registrarse de forma diferente.
Creamos una nueva variación de estilo llamada Alternative Outline, que aparece junto a los estilos de Relleno (Fill) y Contorno (Outline) predeterminados en la interfaz de usuario del editor y se muestra correctamente en el frontend.
Registra el estilo en PHP
Añade el siguiente código al archivo functions.php de tu tema hijo. Registra el estilo después de que se cargue el core, pero antes de que se renderice cualquier página:
// Register "Alternative Outline" button style
add_action('init', function() {
register_block_style(
'core/button',
[
'name' => 'alternative-outline',
'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
]
);
});Añade estilos personalizados a style.css
Ahora define los estilos para esta variación — incluyendo el estado :hover — en el archivo style.css de tu tema hijo:
.wp-block-button.is-style-alternative-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--yellow);
border: 2px dotted var(--wp--preset--color--yellow);
transition: all 0.7s ease-in-out;
}
.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--yellow);
color: var(--wp--preset--color--black);
}Las variables color utilizadas aquí se definen en tu paleta theme.json, lo que garantiza la coherencia en todo el sitio.
Crear variaciones de estilo de bloque con JSON
A partir de WordPress 6.6, puedes registrar variaciones del estilo de bloque core utilizando JSON, sin necesidad de PHP.
Aquí tienes un ejemplo que añade una nueva variación llamada Purple Background (Fondo morado) al bloque Grupo. Aparece en la barra lateral del editor con una vista previa con estilo:
Crea un archivo llamado block.json dentro de la carpeta /styles/purple-background/ de tu tema:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Purple Background",
"slug": "section-purple",
"blockTypes": ["core/group"],
"styles": {
"border": {
"radius": "20px"
},
"color": {
"background": "#800080",
"text": "#eeeeee"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--50)",
"right": "var(--wp--preset--spacing--50)",
"bottom": "var(--wp--preset--spacing--50)",
"left": "var(--wp--preset--spacing--50)"
}
}
}
}La variación Purple Background aparece en la barra lateral del editor como se muestra en la imagen siguiente:
Si trabajas con varias variaciones de estilo, es una buena práctica colocarlas en una subcarpeta de /styles. En este caso, la ruta del archivo es: /styles/purple-background/block.json.
Aquí tienes algunas notas finales que debes tener en cuenta sobre el método JSON:
- Este método no requiere PHP y puede reducir el peso de la página porque WordPress sólo carga el CSS relevante cuando es necesario.
- Como estamos trabajando con un tema hijo de Twenty Twenty-Five — que ya utiliza
theme.jsony estilos dinámicos — no hay necesidad de poner en cola los estilos manualmente. - Es posible que algunos bloques aún no admitan todas las opciones de estilo a través de JSON. Si te preocupa la compatibilidad con versiones anteriores, opcionalmente puedes añadir una alternativa PHP utilizando
register_block_style().
Resumen
Los temas de bloques ofrecen una flexibilidad extraordinaria, lo que abre la puerta a innumerables posibilidades de desarrollo. En este artículo, nuestro objetivo era introducirte en el mundo de los temas hijo para temas de bloques — y, con suerte, inspirarte para que des vida a tus propias ideas.
También hemos explorado dos enfoques para añadir variaciones de estilo personalizadas al bloque core — uno utilizando PHP y CSS, y otro utilizando únicamente JSON.
Como puedes imaginar, cada ejemplo que hemos visto podría dar lugar a varias soluciones. WordPress ofrece numerosas opciones y, a menudo, varias formas de resolver el mismo problema.
Por ejemplo, podrías crear un tema de bloques que utilice theme.json para la configuración pero que dependa totalmente de style.css para el estilo, aprovechando las capacidades más amplias de CSS. O puedes poner en cola de forma condicional los estilos para que sólo se carguen cuando se utilice una variación específica.
¡Las posibilidades son infinitas!
En Kinsta, ofrecemos un conjunto completo de herramientas de desarrollo, tanto básicas como avanzadas, para acelerar, limpiar y mejorar tu flujo de trabajo en WordPress. Prueba Kinsta gratis durante 30 días.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
