Typography: Font appearance control sits at different height to line height and other controls

[andrewserong]

Description

I noticed that the Font Appearance typography controls currently sit slightly lower in the UI than the other UI elements for Typography.

This is possibly related to some of the changes to the custom select control. I've added a comment over in #63258 (review) in case it's a part of that work.

Step-by-step reproduction instructions

1. Add a Group block to a post
2. In the Typography panel in the block inspector, enable all the typography controls
3. Notice that in Gutenberg trunk, the Appearance controls sit slightly lower than the others
4. In WP 6.6.1, the controls are at the correct height

Screenshots, screen recording, code snippet

Gutenberg trunk	WordPress 6.6

Environment info

• WP 6.6.1 with Gutenberg trunk running

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[ciampo]

Thank you for flagging.

@mirka and I had noticed this behavior in our early tests, but we assumed it would be mitigated by other common styles in the editor: #63137 (comment)

Likely, the fact that we stopped using a label element for the label could have played a role.

This could be fixed in a bunch of ways, I'll look into it to understand what's the best one.

[ciampo]

I see two main ways to solve this:

Patch it locally in CustomSelectControl

By making the root div a flexbox container, which automatically trims white space.

• Pros: small change, easy to test
• Const: the spacing inconsistencies in BaseControl's StyledLabel will continue to happen as described in CustomSelectControl V2: fix labelling with a visually hidden label #63137 (comment)

Patch it in BaseControl

We could change the display property of StyledLabel from inline-block to block.

• Pros: it would prevent more issues like this one from happening, since display: block trims white space
• Cons: it could have unexpected consequences (although they should be easy to fix, and it would also be a way to spot unusual usages of BaseControl)

---

What do folks think?

[mirka]

I think we need to bite the bullet and fix it in BaseControl. I believe this change won't affect consumers of BaseControl, but only direct consumers of StyledLabel, which is still limited to the wp-components package.

[ciampo]

Sounds good, opened #63911