Crear Block Styles o estilos personalizados para los bloques nativos

Seguramente te habrás fijado que según que tema o plugins utilices, al añadir bloques nativos al editor te aparecen estilos adicionales en la sidebar que puedes seleccionar para ahorrarte tiempo personalizándolo o para seguir con la imagen global de ese theme.

Se trata de estilos adicionales a los bloques de WordPress, son fáciles de crear y muy prácticos si creas páginas web o themes para dejarle al cliente diseños predefinidos que pueda utilizar al crear o modificar el contenido de su web.

Paso 1: Crear el archivo JS

Para crear los estilos adicionales al bloque necesitaremos usar la función registerBlockStyle de JavaScript, indicándole qué bloque vamos a extender, y el nombre y etiqueta del nuevo estilo:

wp.domReady( () => {
    wp.blocks.registerBlockStyle( 'core/quote', {
        name: 'osom-quote',
        label: 'Dakota',
    // inline_style: '.wp-block-quote.is-style-osom-quote { color: blue; }',
    } ); 
} );

Dónde:

• core/quote es el nombre del bloque nativo a extender.
• name: el nombre interno para la variación, que servirá como clase para darle estilos
• label: la etiqueta que aparecerá en la lista de estilos.
• inline-style: lo pongo comentado porque yo no lo utilizo, añade estilos inline en el bloque, pero como indico más adelante, yo prefiero añadirlos en los css correspondientes.

El archivo completo sería este y podríamos añadir en el mismo todos los estilos a bloques que necesitáramos.

Paso 2: Llamar al archivo js desde el tema/plugin:

Utilizaremos una función para enqueue_block_editor_assets como hacemos para incluir otros estilos o scripts al editor

function osom_block_styles_enqueue() {
	wp_enqueue_script(
		genesis_get_theme_handle() . '-script',
		get_stylesheet_directory_uri() . '/js/block-styles.js',
		array( 'wp-blocks', 'wp-dom-ready' ),
		genesis_get_theme_version(),
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'osom_block_styles_enqueue' );

Lo único que debemos tener en cuenta es añadir las dependencias a ‘wp-blocks’ y ‘wp-dom-ready’ en la llamada.

Paso 3: Agregar los estilos.

Y por último nos quedaría lo más divertido, añadir el CSS para darle los estilos que queramos al bloque.

Si nos fijamos en el código una vez añadido el nuevo estilo, aunque visualmente sea exactamente igual que el bloque nativo, se habrá añadido automáticamente una nueva clase: is-style-osom-quote, es decir, «is-style-» más el nombre de nuestro estilo.

Con esto, ya podremos añadir en el css de nuestro tema todos los estilos particulares que le queramos dar al bloque, tanto para el front-end:

blockquote.wp-block-quote.is-style-osom-quote {
  padding: 30px;
  border-left: solid 10px #FE77FE;
  margin-left: 0px;
  background: #f7f7f7;
}

Cómo para el editor:

.wp-block-quote.is-style-osom-quote {
    padding: 30px;
    border-left: solid 10px #FE77FE;
    margin-left: 0px;
    background: #f7f7f7;
}

Nota: recuerda que debes añadir los estilos de forma separada para el front y para el editor, utilizando wp_enqueue_scripts o enqueue_block_editor_assets, según corresponda, llamando en cada caso al archivo css correspondiente.

Una vez tengas esta estructura montada y funcionando, podrás añadir estilos a todos los bloques que quieras, facilitando la vida a quien tenga que maquetar o mantener la web con recursos apropiados a su estilo general.

Eliminar un estilo de bloque

Si el tema que estás utilizando añade estilos de bloques propios y quieres sustituirlos por los tuyos personalizados, puedes eliminar los que no quieras utilizando la siguiente función:

unregister_block_style( 'core/quote', 'osom-quote' );

La función para des-registrar el estilo debe ir después de que se haya registrado, por lo que deberás revisar el orden de carga de tema/plugin/código o lo que corresponda para comprobar que es así y te funciona.

Como comentaba, es una forma relativamente sencilla de personalizar una instalación de WordPress para facilitar la vida al cliente u ofrecerle un «extra», preparando diferentes estilos para los bloques que suele utilizar.

En otro artículo veremos la variaciones de bloques o Block Variations que es otra forma de extender los bloques nativos añadiendo estructuras predefinidas a bloques tipo contenedor, como las columnas.