Remove/hide "additional CSS" tab in wordpress gutenberg blocks

Question

I am looking for a way to hide this option in the gutenberg blocks. In this example you can see that the core/separator has the option to add "aditional CSS" and that is something I don't want to allow the client to do.

Any way to hide this?

Answer 1

The additional CSS classes section can be enabled/disabled by setting className in the Block Supports to true|false. Any property that is part of supports:{...} can be disabled in the same way as typography (see related answer to previous question), eg:

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'jsforwpadvgb/extend-quote-block',
    extendBlockQuoteBlock
);

function extendBlockQuoteBlock(settings, name) {
    if (name !== 'core/quote') {
        return settings;
    }

    return lodash.assign({}, settings, {
        supports: lodash.assign({}, settings.supports, {
            typography: false, // Previous question 71637137
            className: false // Removes "Additional CSS classes" panel for blocks that support it
            customClassName: false // **Updated** For blocks that don't have className
        }),
    });
}

Ref: Block Editor Handbook / Reference Guides / Filter Reference / Block Filters

If you want to remove different options for many blocks, the best way to find the name of the option is to view the block.json source (eg. quote) to find the properties it supports and then disabled/enable what you wish.