Create Custom Block Style Using PHP

Place this in functions in order to create your own custom block styles and render them in the editor.

Custom Image:

add_action('init', function() {
	register_block_style('core/image', [ // affected block
		'name' => 'drop-shadow', // custom slug, added to css
		'label' => __('Drop Shadow', 'shadow'), // label and description
	]);
});

Custom Button:

add_action('init', function() {
	register_block_style('core/button', [ // affected block
		'name' => 'large-button', // custom slug, added to css
		'label' => __('Large Button', 'Large button with arrow icon and rounded corner.'), // label and description
	]);
});

Multiple Blocks:

add_action('init', function() {
	register_block_style('core/image', [ 
		'name' => 'drop-shadow', 
		'label' => __('Drop Shadow', 'shadow'), 
	]);
    register_block_style('core/button', [ 
		'name' => 'large-button', 
		'label' => __('Large Button', 'Large button with arrow icon and rounded corner.'), 
	]);
});

Source.

Leave a Reply

Posted in php
katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.