Cómo añadir estilos de lista a Gutenberg

Si los estilos que traen los bloques de Gutenberg se te quedan cortos, entonces esto te interesa. Aprende como modificarlos fácilmente.

CSS, Gutenberg, WordPress

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 opciones:

  1. Coger la 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.

Así quedaría el estilo: Lower Roman
Así quedaría el estilo: Lower Roman
Así quedaría el estilo: Lower Latin
Así quedaría el estilo: Lower Latin

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.

Conclusión

Con estos sencillos pasos podemos añadir nuevos estilos a nuestros bloques de Gutenberg ampliando el catálogo ya existente. Solo es necesario saber un poco de CSS y ponerse manos a la obra.

Espero que os sirva de ayuda, y nos vemos en los siguientes artículos.