Support

Account

Home Forums Gutenberg CSS Class does not apply to custom block – ACF v5.8

Solving

CSS Class does not apply to custom block – ACF v5.8

  • I have created a gutenberg custom block using ACF BETA v5.8. When I try to apply a css class from WordPress admin panel – advanced tab, css does not apply to custom blocks.

    CSS classes applied to WordPress gutenberg default block works. When applying to ACF Custom block does not reflect the design.

  • This issue stuck around since beta 1, and still persists with beta 3. Personally, at least for the time being, I gave up on this, disabled the CSS class applied by Gutenberg (during the blog registration), and created an ACF field to hold the custom CSS values. Of course I also have to wrap the block code with a div to apply the custom CSS…

    I hope it gets fixed though, it’s an annoying bug…

  • As i see it, it is easy to add the custom css class to your block, you can decide where to place the css class in the same way as you would set your block alignment.

    You can use $block to get gutenberg settings.

    Place $block[‘className’] in the containing div of your block element, and then it should work.

    There are other values stored in $block as well:

    ‘name’
    ‘title’
    ‘description’
    ‘category’
    ‘icon’
    ‘mode’
    ‘align’
    ‘keywords’
    ‘supports’
    ‘post_types’
    ‘render_template’
    ‘render_callback’
    ‘multiple’
    ‘className’
    ‘data’
    ‘id’

    Hope this helps!

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

The topic ‘CSS Class does not apply to custom block – ACF v5.8’ is closed to new replies.