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.

    • NickDA

    • November 24, 2018 at 6:44 pm

    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 3 posts - 1 through 3 (of 3 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.