I'm currently wondering if it's possible to filter Gutenberg Components, instead of Blocks. For example, I need to add a new item to every DropDownMenu component, which could be achieved by changing the "controls" variable.

Today, if I need to add a new Inspector Control to every Block, I can do it using:

var el = wp.element.createElement;
var withInspectorControls = wp.compose.createHigherOrderComponent( function (
) {
    return function ( props ) {
        return el(
            el( BlockEdit, props ),
                el( wp.components.PanelBody, {}, 'My custom control' )
'withInspectorControls' );

And then hooking the JavaScript file with the enqueue_block_editor_assets action.

It works perfectly, however, I couldn't find any approach to do the same thing with Components. Is it possible?

Thank you!

  • These filters work just like the PHP hooks. You need a call to applyFilters to allow filtering the value. You can see from the source at the link you shared that there’s no such call. Individual raw components are not going to have filters, because there’s no context that could be used to make them useful. Commented Nov 19, 2021 at 23:42
  • Thank you for the response, @JacobPeattie! So, the only way to add the menu item there would be through a workaround via DOM and jQuery, for example?
    – Lucius
    Commented Nov 19, 2021 at 23:47
  • what are you trying to achieve that requires this? If you added something to every dropdown menu component it would be in every font picker, every preview selector, author selection, extended block toolbars, it would not work how you expect it to. It's likely what you wanted to do can be achieved another way, but this is not the way, and what you asked is not possible.
    – Tom J Nowell
    Commented Nov 19, 2021 at 23:55
  • I've left an answer but at this point you've fallen into the classic X Y Problem trap of asking how to implement your solution, when you should have asked how to solve your problem.
    – Tom J Nowell
    Commented Nov 20, 2021 at 0:01
  • Thank you for the response, @TomJNowell! So, the idea was to provide the user with a quick action that would fire with almost every element. The initial goal was to implement the new item to the "Styles" panel and then the user would select the element, however, I guess both options are not possible.
    – Lucius
    Commented Nov 20, 2021 at 0:06

1 Answer 1


No, you cannot.

You can add extra controls to a blocks toolbar or inspector because filters were added to the code that constructs those user interfaces. Think of it as being handed lego buildings before they're placed as an opportunity to add extra bricks.

What you've asked however is filtering individual components, which is not possible. Unless a slot/fill was implemented, or a filter added, you cannot swap out the components like that at runtime.

But if you could, it would not be a good idea. The WP components library was built to provide generic atomic user interface building blocks with no logic behind them. That's why you have a button component as well as a publish button component. The button component is just a dumb button that does nothing, it's the wrapping component that adds the logic and integrates it into the user interface. Even a raw panel component doesn't have open/close logic to toggle itself and requires more code to glue to together.

Your end goal might be possible, but the solution you dreamed up and asked about here is not it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.