You should add a custom plugin. That’s need a PHP main file that include, register a JavaScript file. The source below should result in an plugin. You find a usable solution also in the probs below.
PHP part
add_action( 'enqueue_block_editor_assets', 'my_gutenberg_scripts' );
function my_gutenberg_scripts() {
wp_register_script(
'my-editor-enhancement',
plugins_url( 'editor.js', __FILE__ ),
array( 'wp-blocks' ), // Necessary script handles.
filemtime( plugins_url( 'editor.js', __FILE__ ) ),
true
);
wp_enqueue_script( 'my-editor-enhancement' );
}
JavaScript part
In our example is this the code of the editor.js, that we enqueue above. The example add only one paragraph and two different heading types.
wp.domReady( () => {
wp.blocks.registerBlockStyle( 'core/paragraph', {
name: 'blue-paragraph',
label: 'Blue Paragraph'
} );
wp.blocks.registerBlockStyle( 'core/heading', {
name: 'default',
label: 'Default',
isDefault: true,
} );
wp.blocks.registerBlockStyle( 'core/heading', {
name: 'alt',
label: 'Alternate',
isDefault: false,
} );
} );
If you add isDefault: true, then this style will be marked as active on visible blocks that don’t already have a style specified.
core blocks
core/paragraphcore/imagecore/headingcore/gallerycore/listcore/quotecore/audiocore/covercore/filecore/videocore/preformattedcore/codecore/freeformcore/htmlcore/pullquotecore/tablecore/versecore/buttoncore/columnscore/media-textcore/morecore/nextpagecore/separatorcore/spacercore/shortcodecore/archivescore/categoriescore/latest-commentscore/latest-posts
Removing blocks
JavaScript part
wp.domReady( () => {
wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );
} );
Probs
- Automattic Block Style Example
- Bill Erikson great post.