Cómo crear estilos personalizados para bloques nativos de Gutenberg
Los estilos personalizados de bloques (Block Styles) permiten añadir variantes visuales a los bloques nativos de Gutenberg sin necesidad de crear bloques nuevos.
Esto significa que podemos utilizar un bloque existente, como por ejemplo un párrafo, y darle distintos estilos visuales seleccionables desde el editor.
En esta guía aprenderás a crear estilos personalizados para bloques nativos de Gutenberg y a registrarlos correctamente en WordPress para que aparezcan disponibles desde el editor.
Guía actualizada en 2026. Este tutorial explica cómo crear estilos para bloques de Gutenberg mediante Block Styles, una funcionalidad que sigue siendo totalmente compatible con las versiones actuales de WordPress.
En la documentación de WordPress disponemos de dos métodos para poder personalizar los estilos de bloques.
- Por medio de la función ‘wp.blocks-registerBlockStyles’ de JavaScript.
- Por medio de la función ‘register_block_style’ de PHP que es la que usaremos en esta entrada.
Cada vez que quieras modificar un bloque mediante un estilo personalizado seguirás siempre este esquema:
- 1 Elegir bloque
- 2. Registrar CSS
- 3. Registrar Block Style
- 4. Crear CSS
- 5. Cargar CSS en frontend
- 6. Aplicar el estilo desde Gutenberg
Elegir el bloque, por ejemplo:
- core/paragraph
- core/quote
- core/image
- core/heading
- core/group
Elegir tipo de bloque
Antes de registrar estilos personalizados, es recomendable conocer el identificador interno de los bloques disponibles en Gutenberg. Para ello, debemos realizar los siguientes pasos:
1. Abrir una entrada o página en Gutenberg.
2. Abrir las herramientas de desarrollo del navegador.
3. Acceder a la consola.
3. Seleccionar top ⟶ bloques.local
5. Ejecutar el siguiente comando:
wp.blocks.getBlockTypes().map( block => block.name )
Creación del plugin
El primer paso consiste en crear un plugin. Dentro de la carpeta wp-content/plugins creamos una carpeta llamada estilos-bloques-fjs. En su interior creamos el archivo principal del plugin, estilos-bloques-fjs.php, que contendrá la cabecera identificativa que WordPress utiliza para reconocer y activar el plugin desde el panel de administración.
<?php
/**
* Plugin Name: Estilos de bloques FJS
* Author: FranSanto
* Version: 1.0.0
* Text Domain: estilos-fjs
*/
Vamos al administrador y activamos el plugin.
Función para registrar los estilos
La función para registrar estos estilos personalizados la tenemos que incluir dentro del ‘hook’ llamado ‘init’ y en este caso crearemos una función anónima.
<?php
/**
* Plugin Name: Estilos de bloques FJS
* Author: FranSanto
* Version: 1.0.0
* Text Domain: estilos-fjs
*/
add_action( 'init', function() {
} );
Registrar la hoja de estilos
Creamos dentro del plugin un archivo llamado: style.css.
Ahora añadimos este código al fichero principal del plugin:
<?php
/**
* Plugin Name: Estilos de bloques FJS
* Author: FranSanto
* Version: 1.0.0
* Text Domain: estilos-fjs
*/
add_action( 'init', function() {
wp_register_style(
'estilos-bloques',
plugins_url( 'style.css', __FILE__ )
);
} );
‘estilos-bloques’ ⟶ es el identificador interno de la hoja de estilos.
plugins_url( ‘style.css’, __FILE__ ) ⟶ Genera automáticamente la URL correcta del archivo CSS dentro del plugin.
Crear párrafo estilo destacado
Vamos a registrar nuestro primer estilo personalizado y su fichero css.
<?php
/**
* Plugin Name: Estilos de bloques FJS
* Author: FranSanto
* Version: 1.0.0
* Text Domain: estilos-fjs
*/
add_action( 'init', function() {
wp_register_style(
'estilos-bloques',
plugins_url( 'style.css', __FILE__ )
);
// Párrafo destacado
register_block_style( 'core/paragraph', [
'name' => 'destacado',
'label' => __( 'Destacado', 'estilos-fjs' ),
'is_default' => false,
'style_handle' => 'estilos-bloques'
] );
} );
.wp-block-paragraph.is-style-destacado {
background: #fff3cd;
border-left: 6px solid #cc454e;
padding: 30px;
border-radius: 8px;
font-size: 22px;
}
‘core/paragraph’ ⟶ Es el identificador del bloque,
‘name’ => ‘destacado’ ⟶ Define el slug del estilo,
‘label’ => __( ‘Destacado’, ‘estilos-fjs’ ), ⟶ Es el nombre visible dentro del editor,
‘is_default’ => false, ⟶ Define si el estilo debe aplicarse automáticamente, como norma será false,
‘style_handle’ => ‘estilos-bloques’ ⟶ Indica qué archivo contiene los estilos del bloque.
Cuando registras un estilo de bloque, WordPress te obliga a indicar un identificador único mediante name.
Podemos elegir el name que queramos, lo único que debemos respetar es que sea un slug válido:
Slug validos
- ✔highlight
- ✔ warning-box
- ✔ parrafo-destacado
- ✔ tarjeta-moderna
Slug No validos
- ✘ Destacado
- ✘ Mi Estilo
- ✘ Aviso Importante
Además, WordPress utiliza ese valor para generar automáticamente la clase CSS:
name’ => ‘destacado ⟶ .is-style-destacado
En el editor y navegador los veríamos así:
Aviso importante en un bloque de cita
El estilo «Aviso importante» encaja muy bien cuando se quiere llamar la atención del lector sobre una información relevante sin interrumpir la lectura.
Registrar el estilo de bloque y el css
register_block_style( 'core/quote', [
'name' => 'aviso-importante',
'label' => __( 'Aviso importante', 'estilos-fjs' ),
'is_default' => false,
'style_handle' => 'estilos-bloques'
] );
.wp-block-quote.is-style-aviso-importante {
background: #cc454e;
border-left: 12px solid #221b03;
padding: 25px;
border-radius: 6px;
}
Durante las pruebas realizadas para esta entrada en WordPress 7.0, los estilos personalizados registrados mediante register_block_style( ) funcionaron correctamente sobre los bloques Párrafo (core/paragraph) y Cita (core/quote).
Sin embargo, otros bloques como Grupo (core/group), Imagen (core/image), Separador (core/separator) o Título del sitio (core/site-title) no mostraron los estilos registrados en la interfaz del editor a pesar de utilizar exactamente el mismo procedimiento.
Por este motivo, los ejemplos de esta entrada se centran únicamente en bloques cuyo funcionamiento ha sido verificado durante las pruebas.
Como has visto, los Block Styles permiten crear estilos personalizados para bloques nativos de Gutenberg sin necesidad de desarrollar nuevos bloques. Gracias a register_block_style() podemos añadir variantes visuales reutilizables y ofrecer más opciones de diseño directamente desde el editor de WordPress.
Puedes ampliar conocimientos visitando
Manual del editor de bloques
Referencia de la API de Bloques
Creación de bloques para WordPress
Documentación de block.json