Gutenberg registerBlockStyle

block-filters-plugin-enqueue.php

/**
 * Enqueue Block Filters.
 */
function enqueue_my_block_filters() {
	wp_register_script(
		'block-style-filter',
		plugins_url( 'block-style-filter', __FILE__ ),
		array( 'wp-blocks', 'wp-element' )
	);
}
add_action( 'init', 'enqueue_my_block_filters' );

block-style-filter.js

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

enqueue-editor-script.php

/**
 * Enqueue block editor only JavaScript.
 */
function gfd_blocks_editor_scripts() {
	wp_enqueue_script(
		'gfd-blocks-js',
		plugins_url( '../build/index.js', __FILE__ ),
		[ 'wp-blocks', 'wp-dom-ready', 'wp-edit-post', 'wp-hooks' ],
		filemtime( plugin_dir_path( __FILE__ ) . $blockPath )
	);
}
add_action( 'enqueue_block_editor_assets', 'gfd_blocks_editor_scripts' );

register-block-style.js

/**
 * Registers a new block style variation for the given block.
 *
 * @param {string} blockName      Name of block (example: “core/latest-posts”).
 * @param {Object} styleVariation Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
 */
export const registerBlockStyle = ( blockName, styleVariation ) => {
	dispatch( 'core/blocks' ).addBlockStyles( blockName, styleVariation );
};