5

Using core WP Gutenberg blocks is fantastic, but in certain cases I would like to refine the available options to improve my clients user experience, and avoid them having too many options.

For example, in the Heading block, I would like to remove the 'Levels' H1 & H6, as well as all of the 'Alignment' options.

In the paragraph block, I would like to disable 'Font Size' and 'Drop Cap' options.

I have scoured the API documentation with no luck.

dungey_140
  • 2,602
  • 7
  • 34
  • 68

1 Answers1

0

You can use the editor.BlockEdit Filter. I copied the example from the handbook to persist it here.

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.editor;
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 );

What you want to change is the blocks <Toolbar>-Component.

kanlukasz
  • 1,103
  • 19
  • 34
niklas
  • 2,887
  • 3
  • 38
  • 70
  • The link to the default toolbar is deprecated. Would be nice to have an actual example how to remove one specific block option within this answer so it's for me and other people to figure it out :) – Chaoste Oct 28 '20 at 09:35
  • This comment doesn't actually answer the question which is removing existing elements. The example above simply shows how you add a NEW custom panel to the inspector. – Steve de Niese Mar 11 '22 at 04:40