Components: Specify line-height to avoid inheriting default values#75880
Merged
Components: Specify line-height to avoid inheriting default values#75880
Conversation
aduth
added
[Type] Bug
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +8 B (0%) Total Size: 6.84 MB
ℹ️ View Unchanged
|
ciampo
reviewed
Feb 24, 2026
Contributor
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
LGTM 🚀 Although I wonder if using an actual px value (intead of normal) would be a better solution?
t-hamano
reviewed
Feb 25, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
normal should probably be fine, but it seems to depend on the user agent. 1 might be better. getSizeConfig also uses 1.
t-hamano
moved this from 🔎 Needs Review
to 🏗️ In Progress
in WordPress 7.0 Editor Tasks
github-project-automation
bot
moved this to 🔎 Needs Review
in WordPress 7.0 Editor Tasks
t-hamano
moved this from 🏗️ In Progress
to 🔎 Needs Review
in WordPress 7.0 Editor Tasks
mirka
reviewed
Feb 25, 2026
Member
mirka
left a comment
mirka
left a comment
There was a problem hiding this comment.
Let's avoid normal, the browser differences have bitten me before.
Member
Author
|
I agree that using a fixed value rather than risking browser inconsistencies makes sense. A concern I had is if using
|
aduth
commented
Feb 25, 2026
| default: { | ||
| height: 40, | ||
| minHeight: 40, | ||
| lineHeight: 1, |
Member
Author
There was a problem hiding this comment.
Should this style be moved below to the other "base" styles below where we also define e.g. font-family ?
... which in turn led me to question: Why do we specify paddingTop and paddingBottom here if they're static?
... why do we specify padding at all? From what I can tell, the select element doesn't have any default (at least in Chrome).
Member
Author
There was a problem hiding this comment.
... why do we specify padding at all? From what I can tell, the select element doesn't have any default (at least in Chrome).
This is discussed in #40985 (comment) , and was also changed as part of r61645 so that the top and bottom paddings are now 0. So technically we don't need this style anymore in WordPress >=7.0, but we may want to keep it for backwards-compatibility for now, and to limit the scope of this change.
Member
Author
There was a problem hiding this comment.
Should this style be moved below to the other "base" styles below where we also define e.g.
font-family?
This function isn't just about size variations, it's also about handling the multiple case. Interestingly, line-height doesn't appear to have any effect on <select multiple> in my testing. Which is good, since otherwise this solution may not have been sufficient. Although I still think we would want this to take precedence over the core styles, and therefore belongs below.
Member
Author
|
The questions in #75880 (comment) led me to #40985, where apparently we used to do |
Member
Author
So yes, it does regress to use 
At first I wondered if the actual underlying problem is the A compromise solution might be to pick a line-height large enough to avoid the clipping but not so large to cause the issues we saw previously (i.e. |
Avoid descender clipping while still preventing unintended select growth
aduth
force-pushed
the
fix/components-line-height-forms-css
branch
from
6387dfb to
b463052
Compare
Member
Author
|
I went with
I also moved it out of
|
|
Flaky tests detected in b463052. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22413302754
|
ciampo
reviewed
Feb 26, 2026
Contributor
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
Great sleuthing! The approach that you suggest seems like a good compromise.
| flex: 1; | ||
| font-family: inherit; | ||
| font-size: 16px; | ||
| line-height: 1; |
Contributor
There was a problem hiding this comment.
Should we also add a comment re. overriding form.css? Are there any risks of clipping here too?
Member
Author
There was a problem hiding this comment.
Should we also add a comment re. overriding form.css?
Yeah, that'd help.
Are there any risks of clipping here too?
I tested it yesterday and it didn't seem to be an issue, but I'll double-check again to make sure. And try to make sure I understand why it's not an issue here.
Member
Author
There was a problem hiding this comment.
I tested it yesterday and it didn't seem to be an issue, but I'll double-check again to make sure. And try to make sure I understand why it's not an issue here.
On further testing, it doesn't ever clip, even going as low as line-height: 0;. After some more digging, I found this blurb in the WHATWG rendering spec, which might explain why that is:
For
inputelements whosetypeattribute is in one of the above states, the used value of the 'line-height' property must be a length value that is no smaller than what the used value would be for 'line-height: normal'.
Ref: https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-text-entry-widget
Contributor
To find the optimal value, I think we need to consider the influence of the font. On Windows OS, i.e., Segoe UI font, descenders are still cut off even at
|
Member
Author
|
Thanks for testing and putting together those examples @t-hamano 🙏 It should be fine to use 1.3 if that helps avoid some of these issues (as noted previously, it only becomes an issue at >=1.85). For what it's worth, this probably also means those have been problematic when used outside WordPress styles before now if we relied on "normal" until now. |
Better cross-font compatibility in Windows #75880 (comment)
t-hamano
approved these changes
Feb 26, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
I think 1.3 is a reasonable value 👍
P.S. In my experience, the automatic cherry-pick can fail due to conflicts in the CHANGELOG file. If that's the case, we'll likely need to manually submit another PR to the wp/7.0 branch
github-project-automation
bot
moved this from 🔎 Needs Review
to ✅ Done
in WordPress 7.0 Editor Tasks
peterwilsoncc
pushed a commit
to peterwilsoncc/gutenberg-build
that referenced
this pull request
Feb 26, 2026
…75880) * Components: Specify line-height to avoid inheriting default values * Add CHANGELOG notes * Use line-height: 1 to normalize browser inconsistencies * Use line-height: 1.2 for select styling Avoid descender clipping while still preventing unintended select growth * Add clarifying code comment in select line-height styling * Use 1.3 as line-height for SelectControl Better cross-font compatibility in Windows WordPress/gutenberg#75880 (comment) * FormTokenField: Add code comment clarifying forms styles override Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Source: WordPress/gutenberg@b3930a2
Member
Author
|
Forgive my process ignorance, but should I expect to get some kind of feedback whether the backporting was successful or not, or does it just silently fail? |
Contributor
|
The GitHub bot should leave a comment on whether the cherry-pick was successful or not. Example: #75940 (comment) For some reason, it looks like the cherry-pick may have failed silently in this PR 🤔 Let's try re-adding the label that triggers the cherry-pick again. |
t-hamano
added
Backport to WP 7.0 Beta/RC
github-actions
bot
removed
the
Backport to WP 7.0 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Feb 27, 2026
…75880) * Components: Specify line-height to avoid inheriting default values * Add CHANGELOG notes * Use line-height: 1 to normalize browser inconsistencies * Use line-height: 1.2 for select styling Avoid descender clipping while still preventing unintended select growth * Add clarifying code comment in select line-height styling * Use 1.3 as line-height for SelectControl Better cross-font compatibility in Windows #75880 (comment) * FormTokenField: Add code comment clarifying forms styles override Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: e4c7794 |
github-actions
bot
added
the
Backported to WP Core
Contributor
|
Ok, the automatic cherry-pick worked! My understanding is that even if we add the |
Member
Author
|
Thanks for taking care of that @t-hamano ! I'll keep an eye out for this next time I need to backport a change. Are there some actions logs you were checking to see that it failed on the pull request merge? |
Contributor
Yes, I think it was these two: https://github.com/WordPress/gutenberg/actions/runs/22366822124/job/64734941261 We can't see the detailed logs anymore, but as I recall, it logged something like "Cherry-pick was skipped because no commit or PR was found." |
peterwilsoncc
pushed a commit
to peterwilsoncc/gutenberg-build
that referenced
this pull request
Mar 1, 2026
…75880) * Components: Specify line-height to avoid inheriting default values * Add CHANGELOG notes * Use line-height: 1 to normalize browser inconsistencies * Use line-height: 1.2 for select styling Avoid descender clipping while still preventing unintended select growth * Add clarifying code comment in select line-height styling * Use 1.3 as line-height for SelectControl Better cross-font compatibility in Windows WordPress/gutenberg#75880 (comment) * FormTokenField: Add code comment clarifying forms styles override Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Source: WordPress/gutenberg@e4c7794
pull bot
pushed a commit
to tigefa4u/wordpress-develop
that referenced
this pull request
Mar 5, 2026
CI run: WordPress#11167. See #64595. --- I've included a log of the Gutenberg changes with the following command: git log --reverse --format="- %s" 022d8dd3d461f91b15c1f0410649d3ebb027207f..e499abfb843a43ac88455ca319220c5f181e1cf3 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy - Add documentation for contentRole and listView block supports (WordPress/gutenberg#75903) - Interactivity Router: fix back and forward navigation after refresh (WordPress/gutenberg#75927) - Real-time collaboration: Fix disconnect dialog on navigate (WordPress/gutenberg#75886) - Real Time Collab: Throttle syncing for inactive tabs. (WordPress/gutenberg#75843) - Components: Specify line-height to avoid inheriting default values (WordPress/gutenberg#75880) - Pattern Editing: Fix sibling blocks to edited pattern not being disabled (WordPress/gutenberg#75994) - Sync connector PHP behavior with Core backport changes (WordPress/gutenberg#75968) - Connectors: Avoid manual string concatenation (WordPress/gutenberg#75997) - DataForm: fix field label for panel (should not be uppercase) (WordPress/gutenberg#75944) - Views: add support for more overrides (all developer-defined config) (WordPress/gutenberg#75971) - Use homeUrl instead of siteUrl for link badge evaluations (WordPress/gutenberg#75978) - DataViews: Right-align `integer` and `number` fields (WordPress/gutenberg#75917) - Navigation Link: Compare internal links by host instead of origin (WordPress/gutenberg#76015) - Fix: Skip scaled image sideload for images below big image threshold (WordPress/gutenberg#75990) - Client side media cherry pick for 7.0 (WordPress/gutenberg#75998) - Show transform dropdown previews on focus as well as hover (WordPress/gutenberg#75940) (WordPress/gutenberg#75992) - RTC: Fix syncing of emoji / surrogate pairs (WordPress/gutenberg#76049) - [Real-time Collaboration] Fix sync issue on refresh (WordPress/gutenberg#76017) - Real-time collaboration: Improve disconnect dialog (WordPress/gutenberg#75970) - DataViews: Fix filter toggle flickering when there are locked or primary filters (WordPress/gutenberg#75913) (WordPress/gutenberg#76068) - Connectors: Dynamically register providers from WP AI Client registry (WordPress/gutenberg#76014) - PHP-only Blocks: Reflect bound attribute values in inspector controls (WordPress/gutenberg#76040) - Fix: Set quality and strip metadata in client-side image resize (WordPress/gutenberg#76029) - RTC: Prevent duplicate poll cycles (WordPress/gutenberg#76059) - RTC: Fix stale CRDT document persisted on save (WordPress/gutenberg#75975) - RTC: Disable multiple collaborators if meta boxes are present (WordPress/gutenberg#75939) - Directly inject styles in overlay to make styles stay consistently mounted (WordPress/gutenberg#75700) - Real-time collaboration: Fix comment syncing on site editor (WordPress/gutenberg#75746) - Real-time Collaboration: Bug fix for CRDT user selection and add tests (WordPress/gutenberg#75075) - RTC: Updates from backport PR (WordPress/gutenberg#75711) - RTC: Fix undefined array_first() call in sync storage (WordPress/gutenberg#75869) - RTC: Fix fallthrough for sync update switch statement (WordPress/gutenberg#76060) - Real-time collaboration: Remove block client IDs from Awareness, fix "Show Template" view (WordPress/gutenberg#75590) - RTC: Add session activity notifications (WordPress/gutenberg#76065) - Prevent non-reproducible Sass/CSS builds. (WordPress/gutenberg#76098) - Block toolbar and context menu: hide pattern actions in Revisions UI (WordPress/gutenberg#76066) - Try enabling style variation transforms for blocks in contentOnly mode (WordPress/gutenberg#75761) - Block toolbar: hide styles dropdown in Revisions UI (WordPress/gutenberg#76119) - Image block: fix lightbox srcset size (WordPress/gutenberg#76092) - Fix writing flow navigation for annotation style, or any other block with border radius (WordPress/gutenberg#76072) - Image: Hide 'Set as featured image' for in-editor revisions (WordPress/gutenberg#76123) - Connectors: Gate unavailable install actions behind install capability (WordPress/gutenberg#75980) - build: Exclude experimental pages from Core builds (WordPress/gutenberg#76038) - HTML & Shortcode: Disable viewport visibility support (WordPress/gutenberg#76138) - RTC: Verify client ID to avoid awareness mutation (WordPress/gutenberg#76056) - wp-build: Do not remove Core's default script modules registration (WordPress/gutenberg#75705) - wp-build: Deregister script modules before re-registering (WordPress/gutenberg#75909) - Remove `! function_exists()` checks from PHP templates (WordPress/gutenberg#76062) - Connectors: Update page identifier to options-connectors (WordPress/gutenberg#76156) - Connectors: Align init hook priorities with Core overrides (WordPress/gutenberg#76161) - Icon Block: Clean up selectors config (WordPress/gutenberg#75786) - Icons: Fix incorrect icon slug (WordPress/gutenberg#76165) - RTC: Enable RTC by default (WordPress/gutenberg#75739) - Rename and visibility modals: gate shortcuts behind canEditBlock to prevent triggering in revisions UI (WordPress/gutenberg#76168) - Fix: Block style variations not rendering in Site Editor Patterns page (WordPress/gutenberg#76122) - Client-side media processing: only use media upload provider when not in preview mode (WordPress/gutenberg#76124) - Notes: Disable for in-editor revisions (WordPress/gutenberg#76180) - Core Data: Support reading revision data in useEntityProp (fixes footnotes in revisions UI) (WordPress/gutenberg#76106) - Client-side media processing: Try plumbing invalidation to the block-editor's mediaUpload onSuccess callback (WordPress/gutenberg#76173) - Connectors: Improve responsive layout on small screens (WordPress/gutenberg#76186) - Interactivity API: Fix router initialization race condition on Safari/Firefox (WordPress/gutenberg#76053) (WordPress/gutenberg#76191) - Interactivity: Fix crypto.randomUUID crash in non-secure contexts (WordPress/gutenberg#76151) git-svn-id: https://develop.svn.wordpress.org/trunk@61843 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Mar 5, 2026
CI run: WordPress/wordpress-develop#11167. See #64595. --- I've included a log of the Gutenberg changes with the following command: git log --reverse --format="- %s" 022d8dd3d461f91b15c1f0410649d3ebb027207f..e499abfb843a43ac88455ca319220c5f181e1cf3 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy - Add documentation for contentRole and listView block supports (WordPress/gutenberg#75903) - Interactivity Router: fix back and forward navigation after refresh (WordPress/gutenberg#75927) - Real-time collaboration: Fix disconnect dialog on navigate (WordPress/gutenberg#75886) - Real Time Collab: Throttle syncing for inactive tabs. (WordPress/gutenberg#75843) - Components: Specify line-height to avoid inheriting default values (WordPress/gutenberg#75880) - Pattern Editing: Fix sibling blocks to edited pattern not being disabled (WordPress/gutenberg#75994) - Sync connector PHP behavior with Core backport changes (WordPress/gutenberg#75968) - Connectors: Avoid manual string concatenation (WordPress/gutenberg#75997) - DataForm: fix field label for panel (should not be uppercase) (WordPress/gutenberg#75944) - Views: add support for more overrides (all developer-defined config) (WordPress/gutenberg#75971) - Use homeUrl instead of siteUrl for link badge evaluations (WordPress/gutenberg#75978) - DataViews: Right-align `integer` and `number` fields (WordPress/gutenberg#75917) - Navigation Link: Compare internal links by host instead of origin (WordPress/gutenberg#76015) - Fix: Skip scaled image sideload for images below big image threshold (WordPress/gutenberg#75990) - Client side media cherry pick for 7.0 (WordPress/gutenberg#75998) - Show transform dropdown previews on focus as well as hover (WordPress/gutenberg#75940) (WordPress/gutenberg#75992) - RTC: Fix syncing of emoji / surrogate pairs (WordPress/gutenberg#76049) - [Real-time Collaboration] Fix sync issue on refresh (WordPress/gutenberg#76017) - Real-time collaboration: Improve disconnect dialog (WordPress/gutenberg#75970) - DataViews: Fix filter toggle flickering when there are locked or primary filters (WordPress/gutenberg#75913) (WordPress/gutenberg#76068) - Connectors: Dynamically register providers from WP AI Client registry (WordPress/gutenberg#76014) - PHP-only Blocks: Reflect bound attribute values in inspector controls (WordPress/gutenberg#76040) - Fix: Set quality and strip metadata in client-side image resize (WordPress/gutenberg#76029) - RTC: Prevent duplicate poll cycles (WordPress/gutenberg#76059) - RTC: Fix stale CRDT document persisted on save (WordPress/gutenberg#75975) - RTC: Disable multiple collaborators if meta boxes are present (WordPress/gutenberg#75939) - Directly inject styles in overlay to make styles stay consistently mounted (WordPress/gutenberg#75700) - Real-time collaboration: Fix comment syncing on site editor (WordPress/gutenberg#75746) - Real-time Collaboration: Bug fix for CRDT user selection and add tests (WordPress/gutenberg#75075) - RTC: Updates from backport PR (WordPress/gutenberg#75711) - RTC: Fix undefined array_first() call in sync storage (WordPress/gutenberg#75869) - RTC: Fix fallthrough for sync update switch statement (WordPress/gutenberg#76060) - Real-time collaboration: Remove block client IDs from Awareness, fix "Show Template" view (WordPress/gutenberg#75590) - RTC: Add session activity notifications (WordPress/gutenberg#76065) - Prevent non-reproducible Sass/CSS builds. (WordPress/gutenberg#76098) - Block toolbar and context menu: hide pattern actions in Revisions UI (WordPress/gutenberg#76066) - Try enabling style variation transforms for blocks in contentOnly mode (WordPress/gutenberg#75761) - Block toolbar: hide styles dropdown in Revisions UI (WordPress/gutenberg#76119) - Image block: fix lightbox srcset size (WordPress/gutenberg#76092) - Fix writing flow navigation for annotation style, or any other block with border radius (WordPress/gutenberg#76072) - Image: Hide 'Set as featured image' for in-editor revisions (WordPress/gutenberg#76123) - Connectors: Gate unavailable install actions behind install capability (WordPress/gutenberg#75980) - build: Exclude experimental pages from Core builds (WordPress/gutenberg#76038) - HTML & Shortcode: Disable viewport visibility support (WordPress/gutenberg#76138) - RTC: Verify client ID to avoid awareness mutation (WordPress/gutenberg#76056) - wp-build: Do not remove Core's default script modules registration (WordPress/gutenberg#75705) - wp-build: Deregister script modules before re-registering (WordPress/gutenberg#75909) - Remove `! function_exists()` checks from PHP templates (WordPress/gutenberg#76062) - Connectors: Update page identifier to options-connectors (WordPress/gutenberg#76156) - Connectors: Align init hook priorities with Core overrides (WordPress/gutenberg#76161) - Icon Block: Clean up selectors config (WordPress/gutenberg#75786) - Icons: Fix incorrect icon slug (WordPress/gutenberg#76165) - RTC: Enable RTC by default (WordPress/gutenberg#75739) - Rename and visibility modals: gate shortcuts behind canEditBlock to prevent triggering in revisions UI (WordPress/gutenberg#76168) - Fix: Block style variations not rendering in Site Editor Patterns page (WordPress/gutenberg#76122) - Client-side media processing: only use media upload provider when not in preview mode (WordPress/gutenberg#76124) - Notes: Disable for in-editor revisions (WordPress/gutenberg#76180) - Core Data: Support reading revision data in useEntityProp (fixes footnotes in revisions UI) (WordPress/gutenberg#76106) - Client-side media processing: Try plumbing invalidation to the block-editor's mediaUpload onSuccess callback (WordPress/gutenberg#76173) - Connectors: Improve responsive layout on small screens (WordPress/gutenberg#76186) - Interactivity API: Fix router initialization race condition on Safari/Firefox (WordPress/gutenberg#76053) (WordPress/gutenberg#76191) - Interactivity: Fix crypto.randomUUID crash in non-secure contexts (WordPress/gutenberg#76151) Built from https://develop.svn.wordpress.org/trunk@61843 git-svn-id: http://core.svn.wordpress.org/trunk@61130 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Fixes #75855
Updates
SelectControlandFormTokenFieldcomponents to explicitly specify their ownline-heightstyles, to avoid inheriting base form CSS values which recently changed in Core's r61645, causing visual regressions in some combinations of these components.Why?
Restore original intended appearance of these components.
Testing Instructions
Review Storybook stories of affected components, specifically reviewing variants, as well as visual styles applied under the styles toolbar dropdown (see screenshot):
npm run storybook:devCompare against live versions in https://wordpress.github.io/gutenberg/ to see differences.
Screenshots or screencast
FormTokenFieldSelectControl