Standardize the usage of the InspectorControls "group" slots for all ToolsPanel components we provide in Gutenberg

[fabiankaegy]

One of the great advantages of the ToolsPanel component over the PanelBody is that it's much easier to target specific tool panels to register additional controls to show up inside of them.

This is already heavily used for all the design tools. They all have unique groups that someone can slot additional settings into via the group property of the InspectorControls component.

<InspectorControls group="typography">
   { // ... custom control }
</InspectorControls>

However this behavior is not standardized right now. We have groups defined for:

• color
• background
• typography
• dimensions
• border
• styles
• advanced
• bindings

In #67813 we are looking at standardizing the usage of the ToolsPanel component for settings also. So it would be great to find a way to have every ToolsPanel associated with a group to standardize this behavior in general.

Most of these should be generalized groups such as settings / display. But there will be a need for one-offs like the filters group of the Query Loop block.

[aaronrobertshaw]

This is probably just me but after re-reading this issue a couple of times I can't quite work out if it is conflating the ToolsPanel instances with the SlotFills that power the inspector controls.

The group prop of InspectorControls targets which slot the children will become fills for. From there, the InspectorControlsSlot chooses how to render its fills. If there is a label present it will wrap the fills in a ToolsPanel.

So it would be great to find a way to have every ToolsPanel associated with a group to standardize this behavior in general.

This sounds like you're chasing a new SlotFill for all the possible ToolsPanel uses. Would that be a fair assessment?

But there will be a need for one-offs like the filters group of the Query Loop block.

Wouldn't this just be a ToolsPanel rendered to the default InspectorControls slot? If that panel is to be extendable, wouldn't it need to define its own slot within it?

[fabiankaegy]

@aaronrobertshaw yes sounds are right this is conflating things and therefore isn't clear. I have updated the title to hopefully better reflect it.

At the end of the day the goal here is to allow 3rd parties to use the InspectorCotrols slot through the group property to add additional controls to any Tools panel we ship in the Gutenberg UI.

We already do support that for pretty much all the design tools.

What we need to add are the following groups

• settings: Most blocks have this one
• display: Several blocks have this one
• filters: The query loop has that one

(and maybe there are a few additional outliers)

[aaronrobertshaw]

Appreciate the clarification @fabiankaegy, I believe I'm on the same page now 👍

It seems conceptually that we could leave the ToolsPanel component out of the discussion or replace it with any other panel or container. The essence of what we're chasing is inspector control groups for all common categories of controls seen across block types. What they are rendered in is just an implementation detail.

Regarding extensibility, are there plans to allow 3rd parties to define their own inspector control groups (slot fills) so additional 3rd parties can inject controls into their groups/panels too?

If there are only a few extra group SlotFills to add, that could be a quick win.

• Create the slot fills for the inspector controls here
• Update the Settings and Styles tabs for the inspector controls tabs to render the new slots
• Update the block inspector to render the new slots for when the tabs aren't displayed
• When adding the InspectorControls.Slot for the new groups, adding a label would make them render in a ToolsPanel

After a quick glance at the existing groups, there's already a filter group and settings too. Unfortunately, the settings group was an alias for the default group which just renders within the overall inspector controls. Without digging deeper I'm not sure how we maintain backward compatibility for any extenders already using settings. We might need a different group name 🤷

Hopefully, that helps anyone picking this up get some traction quickly 🤞