Components: Render 40px size variants in editor sidebar

[mirka]

Our current priority on the component size consistency front is to get everything in the editor sidebar to be rendered in the 40px height variant. Specifically, this applies to:

• Standard hook-based tools (Typography, Dimensions, Border, etc.) in the edit-post and edit-site editors
• Global Styles sidebar
• InspectorControlsFill content in edit-post and edit-site editors

@mtias indicated that it would be best to first validate the new 40px designs in context, as soon as possible. Sizing consistency work on the component library as a whole (#39397) will be put on hold while we work on this first.

Plan

The previous plan was to leverage the Context System, but after working on this I realized that this is not very feasible, at least in the initial stages. The main problem is that there are just too many components that haven't been hooked up to the context system. There are also a lot of block-editor package components being used in the sidebar, and it feels like overkill to connect them all to the context system.

Previous plan based on Context System

We will try and leverage the Context System so all components of a given type under certain context trees can be rendered in the 40px size by default. Configuration will be added on a per-component basis.

• [WIP] Components: Add size variant context #41913

We need to be careful about how this config cascades. For example, if we suddenly start to render all InputControls at 40px, many higher-level components that depend on InputControl will look broken. Therefore, we'll want to add config for higher-level components first.

Instead, I'm going to start by flipping the switch section by section in the standard sections (Typography, Dimensions, etc.), to minimize jarring inconsistencies. We can start with the Global Styles section before moving on to the block editor Inspector, since the sections in Global Styles are more isolated visually. Once everything is ready, we can reconsider using the Context System to upsize custom third-party inspector content.

Components

If the component does NOT have a default size of 40px:

Create a 40px size variant. (size = "__unstable-large")

If the component already has a default size of 40px:

No need to do anything at this time — we'll just leave it be for now. (At some point in the future we will need to decide on a consistent sizing scale across the component library though.)

[mirka]

Update: The previous version of this plan used to mention the possibility of a __unstableSize: 'large' prop, but I discovered that would create a lot of unnecessary complication when passing through props to underlying components. We don't actually have a __unstableSize prop in our codebase yet, so let's just unify with size: '__unstable-large'.

[ciampo]

Just flagging for completeness that there may be other components that already use the size prop to tweak slightly different aspects (Card comes to mind). We may want to review the usage of the size prop across the codebase to uniform it as we work on introducing more size variants?

[mirka]

size prop auditing will be tracked here #42792

[jasmussen]

Hey @mirka and @ciampo, I'm coming back to this after a while. Thank you for the patience on this one.

I've caught up a bit on the conversations around 36px and 40px, and it definitely is difficult to thread the needle with all the moving parts. But at the core, it would be nice to just go straight to 40px for the inspector, as that is what the majority of the designs are for.

Just to visualize it a bit, I put together some quick mockups showing how that would look, with the main gist hopefully being: it looks good! Here's Paragraph, Image, Group:

Please note that the mockups above are meant mainly to illustrate the 40px height across inputs, controls, and buttons, but they are likely slightly out of date in other aspects, notably around the Group layout panel, which I know is being explored separately.

Let me know if this is useful, and how I can best help move things forward! Nice work.

[mirka]

Update: I changed my plan — the Context System plan turned out to be kind of impractical at this stage. See updated OP for specifics.

[mirka]

Closing in favor of #46741