• Resolved yann1ck

    (@ja4st3r)


    Hi all,

    I am using a classic theme and try to active/deactivate some block controls. For example I would like to remove the border-radius control from the core button block or add some border-controls to the core group block. I could use GenerateBlocks for that, but I dont want to give all these options to users.

    I could add a theme.json to a child theme, but that leads to some unexpected behaviour, e. g. the editor width is broken or the group block looses it inner container. I am sure there are more unexpected side-effects of adding a theme.json file.

    So is there another way to activate/deactivate block controls? Just some PHP hooks?

    Kind regards
    Yannick

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    It’s probably simpler to simply hide the specific elements in the editor with custom admin CSS. A user could conceivably then unhide them for them self, but they’d have to realize they are missing and guess that they are simply hidden and not truly removed. Hiding should deter nearly everyone from using the element.

    You can directly output a <style> block with appropriate CSS from the “admin_print_styles” action hook.

    Thread Starter yann1ck

    (@ja4st3r)

    Thank you very much for your response!

    Custom admin CSS to remove an option works fine (seems a little hacky), but that way I am not able to activate additional controls for a block.

    I just went ahead and added a theme.json. I encountered some bugs but I am in touch with the developer to fix it.

    Thread Starter yann1ck

    (@ja4st3r)

    For everyone having the same problem. I found a solution without custom CSS and without adding a theme.json. It is actually quite easy.

    At first you need a javascript file, which you enqueue via enqueue_block_editor_assets, to add your js to the block editor.

    
    function block_editor_scripts () {
    
    	wp_enqueue_style(
    		'remove-block-settings',
    		get_theme_file_uri( ) . '/assets/css/block-editor-scripts.js',
    		array( 'wp-block-editor' ),
    	);
    }
    
    

    In your js file you add the following code which registers a filter (you have to give a unique name to this filter) and applys this filter while the block editor loads. The filter receives an object with all block settings. There are a lot and I suggest you use console.log(settings) to find the correct property. In my case the border settings are under block supports. This is a collection of default features and you will find most ‘block settings’ there.

    
    wp.hooks.addFilter(
        'blocks.registerBlockType',
        'MyName/filterName', //custom name
        removeButtonBorderRadius
    );
    
    function removeButtonBorderRadius(settings, name) {
        if (name !== 'core/button') {
            return settings;
        }
        
        //console.log(settings)
    
        return lodash.assign({}, settings, {
            supports: lodash.assign({}, settings.supports, {
                __experimentalBorder: false,
                className: true,
            }),
        });
    }

    There are some very good StackOverflow answer with addtional details:
    https://stackoverflow.com/questions/71637137/remove-property-from-wordpress-core-gutenberg-block

    The example is also described in the Block Editor Handbook, but I would have never looked at that page by myself: https://developer.www.ads-software.com/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘(De)activate Gutenberg Block Controls’ is closed to new replies.