Implement a standard "controls grid" component for sidebar

[mirka]

What problem does this address?

The controls in the sidebar should be laid out in a consistent grid, whether they are in edit-post (ToolsPanel) or edit-site (ad hoc layouts). Currently they each do their own styling for rowGap/columnGap, column count, and full-width items.

What is your proposed solution?

Try making a standard layout component for this purpose, so they can be easily reused in either context. We can call it something like ControlsGrid.

[ciampo]

This could be an interesting exploration to inform some of the decision re. grid components discussed in #43085

[jasmussen]

Here's a suggested grid:

Is that helpful?

[jasmussen]

I went ahead and created a separate issue for updating the default component sizes: #46734

[mirka]

Relevant: An implementation of the boundary-breaking buttons in the header labels #50855

[afercia]

Comine here from #63806
Although this is somehow an old issue, I'd like to add a couple considerations:

Personally, I'm not sure the inconsistency in the placement of the 'Set custom size' toggle button helps with providing the highest level of usability and accessibility. Currently, this button is placed in a different spot depending on the control. Example screenshot:

Sometimes the order is:

1. Label
2. Toggle
3. Control

Sometimes is:

1. Label
2. Control
3. Toggle

From a logical order perspective, I would expect this order:

1. Label: it tells me what the control is about and it makes sense to have this information first.
2. The control itself.
3. Lastly, the option to switch the control to an alternative version.

What I would like to see from the design team is an effort to make design that goes beyond providing a balanced, visually pleasant, grid. I would like to see a functional analysis and consistency in the grouping and order of the controls.