Cómo añadir estilos a bloques de Gutenberg

Extensión de bloques

Realicemos mediante un ejemplo como añadir un estilo de bloque, extendiendo el editor de bloques y mejorando el diseño por CSS en WordPress.

Con este ejemplo se agrega una clase propia a un bloque. Vamos a ver como añadir un nuevo estilo de comillas (“) al bloque de citas.

Vamos a añadir un plugin, para ello creamos una carpeta dentro de plugins, con tres archivos:

guten-plugin.php
quotes.js
style.css

Añadir el siguiente código al archivo guten-plugin.php, con el que definimos el plugin e indicamos los archivos en los que se basa:

<?php
/*
*************************************************************
* Plugin Name: Doowebs Gutenberg blocks
* Description: Gutenberg blocks.
* Author: Doowebs
* Version: 1.0
*************************************************************
*/
function myguten_enqueue() {
    wp_enqueue_script('myguten-script', plugins_url( 'quotes.js', __FILE__ ) );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

function myguten_stylesheet() {
    wp_enqueue_style( 'mygutenstyle', plugins_url( 'style.css', __FILE__) );
}
add_action( 'enqueue_block_assets', 'myguten_stylesheet' );
?>

En el archivo quotes.js se le indica en que bloque (core/quote) queremos añadir el nuevo estilo de comillas (quote) para citas, con su nombre y etiqueta:

quotes.js

wp.blocks.registerBlockStyle( 'core/quote', {
  name: 'modern-quote',
  label: 'Modern Quotes'
} );

y el archivo de estilos con el que controlar los estilos con que se mostrará en el front-end:

style.css

.is-style-modern-quote {
  color: #25343D;
  font-size: 21px;
  font-weight: bold;
  margin: 0 56px 0 56px;
}
.is-style-modern-quote::before {
  content: '“';
  font-size: 96px;
  font-family: serif;
  color: #71EB6C;
  margin: -20px 0px -120px -55px;
  display: block;
}
.is-style-modern-quote::after {
  content: '”';
  font-size: 96px;
  font-family: serif;
  color: #71EB6C;
  margin: -100px -60px -25px 0px;
  display: block;
  text-align: end;
}
.is-style-modern-quote cite {
  color: #25343D;
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
  text-align: end;
  transform: translateY(-25px);
  display: block;
}

Después de haber actualizado los archivos JavaScript y PHP, activar el plugin creado e ir al editor de bloques, donde se podrá utilizar el estilo de cuotas creado para las citas.