Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gutenberg registerBlockStyle
/**
* 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' );
wp.blocks.registerBlockStyle( 'core/quote', {
name: 'fancy-quote',
label: 'Fancy Quote'
} );
/**
* 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' );
/**
* 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 );
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.