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?

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

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.