• Part of Block API #41236.
• Related to Block Editor: Provide a way to customize panels in Inspector Controls #33891.

What problem does this address?

There is no way to remove a toolbar item from Block Toolbar.

Note: It isn't limited to block variations only, but it's a general concern as explained in #47641 (comment).

What am I trying to achieve?

In WooCommerce Blocks, I am implementing a variation of core/buttons but I don't need link button in toolbar as shown in screenshot below:

The variation will be for Add to cart button. We want to remove the “link” toolbar item for the button so that merchants aren’t confused by that (since the link is provided dynamically during render).

Why solve this problem?

While creating variations of GB blocks, I believe it's a common scenario when a developer might want to hide some of the toolbar buttons. By allowing developers to remove toolbar items, we can make block variations more powerful & flexible.

For now, we have a way to add new toolbar items using BlockControls, but there is no way to remove existing controls.

Why not hide using CSS?

One way to hide toolbar button is by using DOM API. For example:

const linkElement: HTMLElement | null =
	document.querySelector(
		'.edit-post-visual-editor button[name="link"]'
	);
if ( linkElement ) linkElement.style.display = 'none';

But as you can see, we have to depend on a CSS selector with a class name. AFAIK class names can change anytime in future & therefore, this code might break in future.

What is your proposed solution?

Some of the solution I can think of are:

Solution 1

One way could be to provide a way to hide toolbar buttons by name while registering variation using registerBlockVariation method.

For example:

wp.blocks.registerBlockVariation( 'core/buttons', {
  ...,
  hideControls: [ 'link' ],
} );

hideControls may accept list of controls which should be hidden for the variation.

Solution 2

One more way could be to let developer decide if a control should be visible or not using a callback function provided in registerBlockVariation.

For example:

wp.blocks.registerBlockVariation( 'core/buttons', {
  ...,
  hideControl: (control) => {
    if(control.name === 'link'){
      return true;
    }
    return false;
  },
} );

hideControl will be called before showing a control on UI. This will be even more flexible because developer can compute here if a control be should hidden or not.

Solution 3

One more solution could be to provide a filter hook in which we can decide if toolbar should be visible or not.