Adding Block Styles to an ACF Custom Block

• michelleclare

• September 27, 2019 at 9:27 pm

Hi,

I’ve created a block using acf_register_block_type within a custom plugin using the init hook to run my function creating blocks. The goal is to replace the Spacer block with a series of set options for spacing to give a uniform appearance through the site.

acf_register_block_type(array(
‘name’ => ‘spacer’,
‘title’ => __(‘Spacer’),
‘description’ => __(‘A block displaying a blank space.’),
‘category’ => ‘layout’,
‘icon’ => ‘editor-expand’,
‘keywords’ => array( ‘spacer’ ),
‘render_template’ => ‘template-parts/blocks/spacer/spacer.php’,
‘supports’ => array(
‘align’ => false
)
));

There doesn’t seem to be a way to add additional styles here.

I’ve tried adding them using the wp.blocks.registerBlockStyle function within a js file. This is enqueued using the enqueue_block_editor_assets hook.

wp.blocks.registerBlockStyle(‘layout/spacer’, {
name:’standard’,
label:’Standard’,
isDefault:true
});
wp.blocks.registerBlockStyle(‘layout/spacer’, {
name:’small’,
label:’Small’
});

Unfortunately, the styles don’t show up when I select my new block in the CMS. I think the js file must be running before the new block has been registered.

Has anyone encountered this situation before?

• CFD Broker

• November 3, 2019 at 5:25 am

Same here! Did anything come up yet?

• Steffi

• November 13, 2019 at 2:56 am

You can add styles directly via the acf_register_block_type() function like so:

acf_register_block_type( [
	'name'			=> '',
	'title'			=> '',
	'description'  	=> '',
	'render_callback' => '',
	'category'		=> 'formatting',
	'icon'			=> '',
	'mode'			=> '',
	'keywords'		=> [],
	'supports'      => [],
	'styles'  => [
		[
			'name' => 'light',
			'label' => __('Light', 'abc'),
			'isDefault' => true,
		],
		[
			'name' => 'medium',
			'label' => __('Medium', 'abc'),
		],
		[
			'name' => 'dark',
			'label' => __('Dark', 'abc'),
		]
	],
]);

• sloconte

• November 28, 2019 at 6:20 am

Is there any additional documentation for adding styles when registering ACF blocks? I can’t find anything in the ACF documentation, but I could be missing it.

• Bryan Orozco

• May 1, 2020 at 7:15 am

Adding the ‘sytles’ attribute worked for me. On the front-end if you want the style classes to show up on the HTML, you can use the $block['className'] global variable.

$className = 'acf-card';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}

I found this in the blocks documentation under “3. Render the Block”
https://www.advancedcustomfields.com/resources/blocks/

• odil-io

• January 25, 2022 at 5:53 am

For anyone landing here through a search engine:

This still works as of 5.11.4.

According to the current documentation:

Any argument from the JavaScript registerBlockType() function may also be used.

• csaborio

• March 27, 2023 at 7:45 am

@bryan-orozco I had been looking ALL over for this, thank you!