Custom CSS in Wordpress works fine, but if I add a class to the Advanced->Additional CSS in the block editor, it is ignored

Question

I am working with a client who has a custom Wordpress theme built by an agency. If I add Custom CSS in Appearance->Customizer (e.g. to override an existing style) then it works perfectly. However, if I add a class name in 'Advanced->Additional CSS Classes' in the Block Editor (i.e. via Edit Page - as shown in the attached image), then this has no effect.

I can't see any reference to the class I added in the inspector, but I know it's written correctly as if I insert it manually in the Inspector I can see it taking effect.

Can anyone offer any advice here?

Thanks

Answer 1

First, try .new-class (with a period) in Additional CSS Classes then re-publish the post/page and check if the class name is applied.

If the block is a custom block, the issue could be caused by the block author not implementing useBlockProps in either the JS save() function or get_block_wrapper_attributes in the render_callback for dynamic blocks.

If this is the case, you would need to examine the blocks files and based on what you find, extend/update the existing save() or render_callback so that block props are included that contain the additional CSS class names, eg:

JS (static blocks)

import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
    return (
        <div {...useBlockProps.save()}>...</div>
    );
}

PHP (dynamic blocks)

function customblock_render_callback() {
    $wrapper_attributes = get_block_wrapper_attributes();

    return "<div $wrapper_attributes>...</div>";
}