DataForm: Card bordless layout
#72514
Merged
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
…ate size type definitions
gigitux
changed the base branch from
trunk
to
72175-card-support-more-padding-options
…ate size type definitions
gigitux
force-pushed
the
add/card-bordless-layout
branch
from
1e9892e to
30c314b
Compare
…WordPress/gutenberg into add/card-bordless-layout
…d-support-more-padding-options
…WordPress/gutenberg into add/card-bordless-layout
…d-support-more-padding-options
…d-support-more-padding-options
…WordPress/gutenberg into add/card-bordless-layout
|
Flaky tests detected in 6e6cc81. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19076570659
|
|
Size Change: +89 B (0%) Total Size: 2.19 MB
ℹ️ View Unchanged
|
gigitux
force-pushed
the
add/card-bordless-layout
branch
from
d0d48e0 to
7fd6753
Compare
…d-support-more-padding-options
gigitux
changed the base branch from
72175-card-support-more-padding-options
to
trunk
gigitux
changed the base branch from
trunk
to
72175-card-support-more-padding-options
…WordPress/gutenberg into add/card-bordless-layout
Contributor
Author
|
On the engineering side, this PR is blocked by #72511, but @jameskoster I think that you can review this PR design-wise. |
Base automatically changed from
72175-card-support-more-padding-options
to
trunk
November 4, 2025 14:07
|
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. |
Contributor
Author
|
With ef00ee3, I fixed a bug in Storybook. The
|
oandregal
reviewed
Nov 4, 2025
| [ field ] | ||
| ); | ||
|
|
||
| const sizeCard = layout.withHeader |
Member
There was a problem hiding this comment.
Can sizeCard be collocated with sizeCardBody? Moreover, why this only depends on the card having a header but sizeCardBody depends on both the field having a label and the layout having a header?
Contributor
Author
There was a problem hiding this comment.
Good point! I simplified the logic with 6e6cc81.
It would be great if you can take another look!
Member
There was a problem hiding this comment.
It's clearer now, thanks.
In terms of types, I feel we could use the SizeOptions type to type the size objects (either sizeCardBody: SizeOptions or { ... } satifies SizeOptions) as that leverages the TypeScript power (as opposed to as const that doesn't provide any help in refactoring, documentation, etc.).
Member
|
@gigitux what should happen when the card is not collapsible? This is what the storybook reports: 
|
Contributor
Author
|
Are you running the updated version of this branch? I'm not able to replicate it: Screen.Capture.on.2025-11-04.at.17-21-26.mp4Also see the video in this comment. |
Member
Oh, I wasn't 😅 Updated and everything works fine. The spacing for headerless cards looks a bit unbalanced to me, but it's a design detail I'll let others comment on: 
Other than this, this is ready code-wise, so I'm pre-approving. |
oandregal
approved these changes
Nov 4, 2025
Contributor
Author
I feel the same, but I followed the specs 24px padding overall, except for the CardBody’s padding-top, which is 0. @jameskoster should we go ahead and merge this or tweak it a bit further? |
Contributor
|
I agree the spacing in the headerless card is strange, but it's caused the internal |
Contributor
Author
|
The Screen.Capture.on.2025-11-05.at.12-29-24.movIf you agree, I think that we can merge the PR as it is. @oandregal maybe we can override the style of the 
|
Member
|
@gigitux sounds good to me. 👍 |
…ved layout consistency
Contributor
Author
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?
Improve the DataViews Card layout making it borderless. Padding is 24px for all the sides except for the padding top on the card body, which is 0.
Testing Instructions