Add design tool pattern to the 'Advanced' tab in block inspector

[jameskoster]

The 'Advanced' panel in the block inspector is getting a little crowded, and will become moreso when we close #44412.

Since the items in this panel are largely situational, it might be worth applying the 'design tool' pattern, enabling folks to add/remove controls ad hoc:

[jasmussen]

Could this not work without the help-text? I.e. just like a plain toolspanel?

One challenge is that some other blocks like Navigation put additional items there, like menu management. Something to consider.

[talldan]

One challenge is that some other blocks like Navigation put additional items there, like menu management. Something to consider.

There are a couple of plugins that seem to use this area too (though it is an experimental API) - https://www.wpdirectory.net/search/01GGVGDDHBTHFK7NWQCP8F0CQX

In these cases we won't know what the tool is, so it'll be difficult to display it in the dropdown menu as anything but 'other'.

Given it's such small usage it may be possible to reach out to the plugin devs and ask them to update to whatever API is introduced.

Another observation is that it'd be good to see how well this revised UI works in the tabs being trialed in #45005.

[fabiankaegy]

@talldan Just want to flag here that whilst the __experimentalGroup syntax is experimental, there has been a stable slot for this called InspectorAdvancedControls for this for quite a while now: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/inspector-controls/README.md#inspectoradvancedcontrols

So the advanced inspector controls area is a stable slot that will need to get preserved/migrated.

You can view the search for the component here:
https://www.wpdirectory.net/search/01GGVJ0G7BHKXTP7G2VAG4NPTT

[talldan]

Cool, thanks for flagging that. I thought there was a stable slot, but had trouble finding it in the codebase.

Definitely something to consider then in terms of the design - there's going to be a lot more plugin usage than I mentioned before, and in terms of this feature we won't know what those controls are. There would also only be the possibility of showing or hiding them as one item in the dropdown. It might be a sensitive area for plugin developers.

[jasmussen]

Would it be possible to move the slot to become an item inside the toolspanel?

If not, it doesn't seem world-ending to have the plugin-added items sit there permanently.

[talldan]

Would it be possible to move the slot to become an item inside the toolspanel?

Yep, that would be possible I think. It would be a catch-all, every 'unknown' tool under one item in the tools panel if that makes sense.

[jasmussen]

Having very limited understanding of the API in question, my hope was that the call to add an item there could be a call to add individual menu items in the tools panel instead. But a catch-all might work.

[fabiankaegy]

One thing that might help here is, that the InspectorAdvancedControls slot already gets rendered inside of a PanelBody Component. So extenders were always more limited for this slot than for example for the InspectorControls.

Because of this, it may be technically possible to automatically transform each of the slots into a tool panel. But it will likely still be difficult since the tool panel needs to know which value to use for whether or not the value inside the panel has been set and therefore whether it should be expanded or now. We just don't have any means of knowing this about custom extensions using the slot.

[aaronrobertshaw]

Would it be possible to move the slot to become an item inside the toolspanel?

Yep, that would be possible I think. It would be a catch-all, every 'unknown' tool under one item in the tools panel if that makes sense.

As @fabiankaegy notes, the ToolsPanel expects to be given callbacks to determine whether a ToolsPanelItem has a value or not, reset that value, and reset appropriate values when "reset all" is called.

The ToolsPanel can however render any non-ToolsPanelItem into the panel as usual. They just will not have a corresponding item within the ToolsPanel menu. Contrast checkers in the color panel are an example of this.

[talldan]

I think the custom items provided by plugins also wouldn't have a name or label, so that would make it difficult to display them in the dropdown.

[fabiankaegy]

It would be great to use the mechanism @aaronrobertshaw mentioned to just display them there. But also I would love there to be a new API to actually adapt the Panels approach. That way plugin authors can migrate to the new approach and match the core UI paradigm.