Removing unwanted panels inside InspectorControls from core Gutenberg blocks

  • If I want to extend the core block I can use Block Filter where I found a filter like editor.BlockEdit

    Example from doc:

    
const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;
 
const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        return (
            <Fragment>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody>My custom control</PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withInspectorControl' );
 
wp.hooks.addFilter(
    'editor.BlockEdit',
    'my-plugin/with-inspector-controls',
    withInspectorControls
);

    It works, but now i would like to remove unwanted panels from core blocks. Unfortunately, the documentation does not contain any such example so I can’t understand how to do this.

    So how to remove unwanted panels inside InspectorControls from core blocks in Gutenberg?

    Note: I know about the newest feature theme.json, but it has very limited functions and won’t remove everything it needs

    • This topic was modified 3 years, 3 months ago by Kris Kelvin.
Viewing 1 replies (of 1 total)

  • Hi Kris!

    Thank you for reaching out.

    I’m afraid at the moment, we have limited options in terms of programmatically removing or filtering out inspector controls.

    The example code snippet, as you mentioned, extends a block by adding controls. The <BlockEdit { ...props } /> line effectively provides the entire original core block’s edit component, including all of its inspector controls.

    If the controls to be removed are being provided via the Block Supports API it would be possible to disable the display of those controls by turning off the relevant feature within the current theme.json.

    As for removing controls added individually by blocks themselves, there isn’t an API or filter to achieve that.

    While less than ideal, you may still have a couple of options.

    1. You could write a custom block and register that in place of the core block you are looking to customize. This is probably the most robust option available.

    2. Instead of passing the existing core block’s edit component through the editor.BlockEdit filter, you could replace it with your own edit component which exposes only your desired controls. This approach would not be recommended though as it would be rather brittle and prone to break in the face of upstream changes.

    3. The undesired controls could be hidden via CSS. This wouldn’t be officially supported though, so your mileage may vary.

    Hope that helps!

Viewing 1 replies (of 1 total)
  • The topic ‘Removing unwanted panels inside InspectorControls from core Gutenberg blocks’ is closed to new replies.