Com afegir estils a blocs de Gutenberg

Extensió de blocs

Realitzem mitjançant un exemple com afegir un estil de bloc, estenent l’editor de blocs i millorant el disseny per CSS en WordPress.

Amb aquest exemple s’agrega una classe pròpia a un bloc. Veurem com afegir un nou estil de cometes (“) al bloc de cites.

Afegirem un plugin, per a això creem una carpeta dins de plugins, amb tres arxius:

guten-plugin.php
quotes.js
style.css

Afegir el següent codi a l’arxiu guten-plugin.php, amb el qual definim el plugin i indiquem els arxius en els quals es 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 l’arxiu quotes.js se li indica en què bloc (core/quote) volem afegir el nou estil de cometes (quote) per a cites, amb el seu nom i etiqueta:

quotes.js

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

i l’arxiu d’estils amb el qual controlar els estils amb què es 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;
}

Després d’haver actualitzat els arxius JavaScript i PHP, activar el plugin creat i anar a l’editor de blocs, on es podrà utilitzar l’estil de quotes creat per a les cites.