How to add styles to Gutenberg blocks

Extension blocks

Let’s carry out through an example how to add a block style, extend the block editor and improve the design by CSS in WordPress.

This example adds a class of its own to a block. Let’s see how to add a new style of quotes (“) to the quotes block.

We are going to add a plugin, for this we create a folder inside plugins, with three files:

guten-plugin.php
quotes.js
style.css

Add the following code to the guten-plugin.php file, with which we define the plugin and indicate the files on which it is based:

<?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' );
?>

In the quotes.js file, it is indicated in which block (core/quote) we want to add the new quote style (quote) for quotes, with its name and label:

quotes.js

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

and the styles file with which to control the styles with which it will be displayed in the 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;
}

After you have updated the JavaScript and PHP files, activate the created plugin and go to the block editor, where you can use the created quota style for appointments.