Cómo personalizar los estilos del bloque de lista en WordPress (Gutenberg)

Parece mentira que con tanta variedad de estilos de lista que tiene Gutenberg por defecto no venga el estilo con números romanos y con letras… Justo el que necesitaba para un proyecto.

Tenía dos posibilidades:

1. Coger los dos estilos que ya vienen y que no se fueran a utilizar, y modificarlos mediante CSS.
2. Añadir esas dos nuevas opciones.

La más sencilla era la primera, pero también la peor para la persona de contenidos que tendría que saber que «ese estilo» era el de números romanos.

Decidimos invertir un poco más de tiempo para dejarlo perfecto y evitar confusiones con el paso del tiempo.

Registrar los nuevos estilos del bloque lista en Gutenberg.

¡Manos a la obra! Lo primero que debemos hacer es registrar los nuevos estilos. Aquí tienes más información sobre los estilos de los bloques de Gutenberg

Para ello creamos un archivo llamado, por ejemplo, editor.js, y los añadimos.

// Add custom list styles
wp.domReady( () => {
    // Add custom list styles
    wp.blocks.registerBlockStyle( 'core/list', {
         name: 'default',
         label: 'Default',
         isDefault: true,
    });
    wp.blocks.registerBlockStyle( 'core/list', {
         name: 'lower-latin',
         label: 'Lower Latin',
    } );
    wp.blocks.registerBlockStyle( 'core/list', {
         name: 'lower-roman',
         label: 'Lower Roman',
    } );
} );

En este script hemos registrado los dos estilos nuevos. La variable name la utilizaremos para el identificador de estilo en CSS, y el label será el nombre que se muestre en el editor de Gutenberg.

Lo siguiente es poner en cola el script dentro del editor, con la siguiente acción:

**
 * Block editor scripts & styles
 *
 * @since  1.0.0
 *
 */
function bk_admin_gutenstyles() {
     wp_enqueue_script('wd-editor', get_stylesheet_directory_uri() . '/assets/js/editor.js', array( 'wp-blocks', 'wp-dom' ), filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ), true );
}
add_action( 'enqueue_block_editor_assets', 'bk_admin_gutenstyles' );

Creando los nuevos estilos del Bloque lista en Gutenberg.

A continuación añadiremos los estilos tanto el archivo CSS para la parte Admin como en tu tema de WordPress. Lo haríamos así:

.editor-styles-wrapper ul.is-style-lower-latin,
.is-style-lower-latin {
    list-style-type: lower-latin;
}
.editor-styles-wrapper ul.is-style-lower-roman
.is-style-lower-roman {
    list-style-type: lower-roman;
}

Como vemos en este código, hemos creado el nombre de las clases añadiendo «is-style-» delante del «name» que definimos en el script de «editor.js«, y le hemos dado el estilo que necesitamos.

Ejemplo real de estilos personalizados en bloques de WordPress

Gracias a esta personalización, es posible aplicar estilos únicos y totalmente adaptados al diseño de cada sitio web. En nuestro caso, utilizamos estilos personalizados como los que ves en nuestra propia página de servicios de desarrollo de plugins para WooCommerce, integrados cuidadosamente con el diseño global y la experiencia del usuario.

Aquí tienes un ejemplo real de cómo aplicamos estilos avanzados y bien alineados con la identidad visual en una sección clave de nuestra web:

Personaliza fácilmente los estilos del bloque de lista en WordPress

Con unos sencillos pasos puedes personalizar los estilos del bloque de lista en WordPress y adaptarlos al diseño de tu sitio. Solo necesitas un poco de conocimiento de CSS y seguir una estructura clara para extender las opciones por defecto del editor de bloques (Gutenberg).

Si estás trabajando en mejorar la apariencia de tus bloques y ofrecer una mejor experiencia visual a tus usuarios, esta es una forma rápida y efectiva de lograrlo.

Espero que te haya sido útil, y si quieres más consejos sobre WordPress y diseño de bloques, ¡nos vemos en el siguiente artículo!

Preguntas frecuentes sobre estilos personalizados en bloques de WordPress