How to add styles to Gutenberg blocks

gutenberg-styles

Block extension

Let’s use an example to add a block style, extending the block editor and improving CSS design in WordPress.

With this example, you add a class of your own to a block. Let’s see how to add a new style of quotes (“) to the citation block.

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

guten-plugin.js
quotes.js
style.css

Add the following code to the guten-plugin.js 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 file quotes.js you are indicated in which block (core / quote) we want to add the new style of quotes (quote) for appointments, with their name and label:

quotes.js

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

and the style file with which to control the styles with which it will be displayed on 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 updating the JavaScript and PHP files, activate the plugin created and go to the block editor, where you can use the quoted style created for appointments.

Llamar a Doowebs Teléfono de Doowebs 653836347