Extending the Block Editor Edit

Let’s look at using the Block Style example to extend the editor. This example allows you to add your own custom CSS class name to any core block type.

Replace the existing console.log() code in your myguten.js file with:

wp.blocks.registerBlockStyle( 'core/quote', {
    name: 'fancy-quote',
    label: 'Fancy Quote',
} );

Important: Notice that you are using a function from wp.blocks package. This means you must specify it as a dependency when you enqueue the script. Update the myguten-plugin.php file to:

<?php
/*
Plugin Name: Fancy Quote
*/

function myguten_enqueue() {
    wp_enqueue_script( 'myguten-script',
        plugins_url( 'myguten.js', __FILE__ ),
        array( 'wp-blocks' )
    );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

The last argument in the wp_enqueue_script() function is an array of dependencies. WordPress makes packages available under the wp namespace. In the example, you use wp.blocks to access the items that the blocks package exports (in this case the registerBlockStyle() function).

See Packages for list of available packages and what objects they export.

After you have updated both JavaScript and PHP files, go to the block editor and create a new post.

Add a quote block, and in the right sidebar under Styles, you will see your new Fancy Quote style listed.

Click the Fancy Quote to select and apply that style to your quote block:

Fancy Quote Style in Inspector

Even if you Preview or Publish the post you will not see a visible change. However, if you look at the source, you will see the is-style-fancy-quote class name is now attached to your quote block.

Let’s add some style. In your plugin folder, create a style.css file with:

.is-style-fancy-quote {
    color: tomato;
}

You enqueue the CSS file by adding the following to your myguten-plugin.php:

function myguten_stylesheet() {
    wp_enqueue_style( 'myguten-style', plugins_url( 'style.css', __FILE__ ) );
}
add_action( 'enqueue_block_assets', 'myguten_stylesheet' );

Now when you view in the editor and publish, you will see your Fancy Quote style, a delicious tomato color text:

Fancy Quote with Style

WordPress.org

Block Editor Handbook

Extending the Block Editor Edit