Data forms: achieve vertical spacing with vertical spacing rather than cell padding #70435
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
…re to ensure alignment with a neighbouring button. However for read only fields, there might be no button. Furthermore, it's better to adjust padding using the container gap spacing rather than tweaking the padding on a single column for alignment.
|
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: -2 B (0%) Total Size: 1.85 MB
ℹ️ View Unchanged
|
ramonjd
commented
Jun 16, 2025
| @@ -48,7 +48,7 @@ export function DataFormLayout< Item >( { | |||
| ); | |||
|
|
|||
| return ( | |||
| <VStack spacing={ 2 }> | |||
| <VStack spacing={ 4 }> | |||
There was a problem hiding this comment.
This is to compensate for the padding that I delete further down.
Might be useful to make this configurable through the form prop or something.
There was a problem hiding this comment.
Nit - should it be 5 instead of 4?
Removing the padding means 12px less for each field label, so that's 3 spacing units.
There was a problem hiding this comment.
Oh yeah, 😄 I just eyeballed it.
5 seemed too rich at the time.
Disclaimer: I wear glasses.
As you say, we can tweak it later.
There was a problem hiding this comment.
Just an idle thought (and not a blocker for now), but I wonder if the vertical spacing should be configurable to support dense or more spaced out layouts, given that label position is already configurable? Of the two, 4 looks a little better to me visually than 5, but I'm no designer 😄
There was a problem hiding this comment.
Yeah, I thought the form prop object might be a good candidate.
ramonjd
commented
Jun 16, 2025
| line-height: $grid-unit-05 * 5; | ||
| hyphens: auto; | ||
| align-self: center; |
There was a problem hiding this comment.
Required because one cell might be taller than the other.
talldan
approved these changes
Jun 16, 2025
|
Thanks for testing! Looks like the E2E fails are the same that are failing for all branches. |
chriszarate
pushed a commit
to chriszarate/gutenberg
that referenced
this pull request
Jul 1, 2025
…re to ensure alignment with a neighbouring button. However for read only fields, there might be no button. Furthermore, it's better to adjust padding using the container gap spacing rather than tweaking the padding on a single column for alignment. (WordPress#70435) Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
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?
This PR removes padding around data forms labels, and bumps up the VStack spacing gap to achieve vertical spacing.
Why?
There is a misalignment between label and control.
The label padding is allegedly there to ensure alignment with a neighbouring button. However for read only fields, there might be no button.
Furthermore, it's better to adjust padding using the container gap spacing rather than tweaking the padding on a single column for alignment.
Testing Instructions
Fire up story book
npm run storybook:devAnd head to the Dataforms component: http://localhost:50240/?path=/story/dataviews-dataform--combined-fields
Play around with the variables, especially side views. Ensure that the label and controls align in the centre.
Testing Instructions for Keyboard