Create Custom Block Style Using PHP

June 29, 2021

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.'), 
	]);
});

Font Styles:

add_action('init', function() {
	register_block_style('core/paragraph', [ 
		'name' => 'sans-serif', 
		'label' => __('Roboto', 'Apply sans-serif font.'), 
	]);
	register_block_style('core/heading', [ 
		'name' => 'sans-serif', 
		'label' => __('Roboto', 'Apply sans-serif font.'), 
	]);
	register_block_style('core/paragraph', [ 
		'name' => 'serif', 
		'label' => __('Antiqua', 'Apply serif font.'), 
	]);
	register_block_style('core/heading', [ 
		'name' => 'serif', 
		'label' => __('Antiqua', 'Apply serif font.'), 
	]);
});

Source.