Home Forums Gutenberg Adding Block Styles to an ACF Custom Block


Adding Block Styles to an ACF Custom Block

  • 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.

    ‘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’, {
    wp.blocks.registerBlockStyle(‘layout/spacer’, {

    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?

  • Same here! Did anything come up yet?

  • 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'),
  • 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.

  • 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”

  • 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.

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

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Adding Block Styles to an ACF Custom Block’ is closed to new replies.