DataForms regular layout: Remove label style overrides as they cause inconsistent results #71574
Conversation
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
andrewserong
added
[Type] Bug
andrewserong
changed the title
|
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: -84 B (0%) Total Size: 1.93 MB
ℹ️ View Unchanged
|
Member
|
It is strange that read only fields are in a different case: But that seems to be something at the component level, and I'm not sure if it is expected. |
jorgefilipecosta
approved these changes
Sep 10, 2025
Member
jorgefilipecosta
left a comment
jorgefilipecosta
left a comment
There was a problem hiding this comment.
The change looks good and greatly improves the consistency of labels.
Member
Yeah, we also need to fix that. This happens because it's not handled by the Edit component (a component from the components package) but by DataForm itself here. It's the same case as the side label. This is why we need to use the "label component" in DataForm (or creating one if there's none): so the case of the label is delegated to the underlying system. |
Contributor
Author
Good points! I'll merge this PR in as it addresses the immediate concern, and we can look at how we might reliably inject label components in follow-up(s). Thanks for the reviews! |
andrewserong
deleted the
try/remove-label-style-overrides-for-dataform-regular-layout
branch
adamsilverstein
pushed a commit
to adamsilverstein/gutenberg
that referenced
this pull request
Sep 11, 2025
…inconsistent results (WordPress#71574) * DataForms: Remove label style overrides as they cause inconsistent results * Add changelog entry Co-authored-by: andrewserong <[email protected]> Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: oandregal <[email protected]>
Contributor
Author
I'm not sure what the desired design is for the side label position, but in order to get better visual consistency for the top label position, I've opened up a follow-up PR in #71597 that looks to use the visual label for the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
Follow-up to: #71495
Remove the CSS in the DataForms' regular layout that overrides the styles provided by the base control label.
Why?
Currently the styling overrides of the regular layout are inconsistent, and within DataForm controls we have a mix of components that do or don't use the base control label, resulting in different styles for different components.
The idea behind this PR is that the regular layout shouldn't be prescriptive in this way, and let the underlying components do their thing. The result should be a greater level of consistency in controls. To observe this, try looking at the regular layout Storybook story for DataForm in trunk compared to this PR.
In particular I ran into this issue with the textarea control as its label appeared to look different to the other comparable labels.
How?
Remove the CSS affecting this component.
Testing Instructions
npm run storybook:devScreenshots or screencast
Before
Not the label on Description looks different to the label on Tags:
After
Now the label is consistent:
Note: this change should have no impact on the "side" labelPosition, as these styles have no effect on how labels are rendered in that mode: