DataForm - Card Layout: implement summary field #71576
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
gigitux
force-pushed
the
nex-383-dataform-card-layout-allow-having-summarybadge
branch
from
661436a to
a5d71d5
Compare
Contributor
Author
|
With this field definition: {
id: 'tax-summary',
type: 'text',
readOnly: true,
render: ( { item } ) => (
<Badge>
VAT: { item.vat } - Commission: { item.commission }
</Badge>
),
}and this form configuration: {
id: 'taxConfiguration',
label: 'Taxes',
layout: {
type: 'card',
summaryField: 'tax-summary',
isOpened: false,
},
children: [ 'vat', 'commission' ],
}the layout renders like this: 
This happens because the default field layout is |
|
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. |
gigitux
force-pushed
the
nex-383-dataform-card-layout-allow-having-summarybadge
branch
from
a5d71d5 to
2a68e6e
Compare
Contributor
|
Thank you for working on this @gigitux ! I wanted to note that the current design (at least for Settings) removes the summary when the card is open. I just wanted to know if this is the default behaviour we should support? |
t-hamano
added
[Type] Enhancement
Member
|
The
So all of these scenarios are valid: {
summary: 'flight-details' // only visible on close
}{
summary: [ 'flight-details', 'seat-number' ] // only visible on close
}{
summary: [
'flight-details', // only visible on close
{ id: 'requires-visa-badge', visibility: 'always' } // always visible
]
} |
…ataform-card-layout-allow-having-summarybadge
Contributor
Author
What do you think if the {
id: 'customer-card',
label: '',
children: [...],
summary: ['email', 'birthday'],
layout: {
type: "card",
summaryVisibility: "always"
}
} |
gigitux
commented
Sep 25, 2025
Contributor
Author
There was a problem hiding this comment.
I just moved the function from panel layout.
gigitux
force-pushed
the
nex-383-dataform-card-layout-allow-having-summarybadge
branch
from
123da82 to
fcb5eca
Compare
gigitux
commented
Sep 25, 2025
packages/dataviews/src/types.ts
Outdated
| export type SimpleFormField = { | ||
| id: string; | ||
| layout?: Layout; | ||
| summary?: string | string[]; |
Contributor
Author
There was a problem hiding this comment.
I think that even SimpleFormField should support summary prop, no?
gigitux
force-pushed
the
nex-383-dataform-card-layout-allow-having-summarybadge
branch
from
fcb5eca to
caee7ea
Compare
…ataform-card-layout-allow-having-summarybadge
|
Flaky tests detected in 9df0b31. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18220009386
|
Contributor
Author
|
@oandregal I implemented this approach. Let me know what you think about: Screen.Capture.on.2025-09-25.at.12-09-29.mov |
|
Size Change: +717 B (+0.04%) Total Size: 1.95 MB
ℹ️ View Unchanged
|
oandregal
reviewed
Oct 2, 2025
packages/dataviews/CHANGELOG.md
Outdated
|
|
||
| - Introduce a new `DataViewsPicker` component. [#70971](https://github.com/WordPress/gutenberg/pull/70971) and [#71836](https://github.com/WordPress/gutenberg/pull/71836). | ||
| - DataForm: Add support for elements validation in array fields [#71194](https://github.com/WordPress/gutenberg/pull/71194) | ||
| - DataForm: Add support for summary fields in card layouts, allowing display of condensed information in card headers. [#71576](https://github.com/WordPress/gutenberg/pull/71576) |
Member
There was a problem hiding this comment.
This needs to be moved to a new "breaking changes" section.
oandregal
reviewed
Oct 2, 2025
Comment on lines
101
to
104
| layout: { | ||
| type: 'panel', | ||
| summary: 'discussion', | ||
| }, |
Member
There was a problem hiding this comment.
This wouldn't be necessary if, by default, the summary for a panel layout is the form field id:
This is how it works in this PR:
{
"id": "discussion",
"label": "Discussion",
"layout": {
"type": "panel",
"summary": "discussion"
},
"children": ["comment_status", "ping_status"]
}This is how it should work by default:
{
"id": "discussion",
"label": "Discussion",
"children": ["comment_status", "ping_status"]
}In other words, consumers only need to provide a summary if it's different from the form field id (discussion) in this case.
Contributor
Author
There was a problem hiding this comment.
I'm fine with this approach, but it is a breaking change. Currently, when a summary isn't present, the first child is picked up.
Member
There was a problem hiding this comment.
This PR is already a breaking change (moving summary to layout), so it'd be nice to address this here to minimize the number of consecutive breaking changes.
That behavior (picking the first child for panel) was a fine start, but we've introduced summary because it wasn't enough or the best default. With today's status and knowledge, I find this logic more aligned with what we want:
- Summary is
summary, if it exists. - Otherwise, summary is the Field that matches the form field's id, if it exists.
- Otherwise, use the 1st child.
Thoughts?
Contributor
Author
There was a problem hiding this comment.
It makes sense. Improved the logic with: ff1fef6
oandregal
reviewed
Oct 2, 2025
Comment on lines
161
to
178
| { summaryFields.length > 0 && layout.withHeader && ( | ||
| <div className="dataforms-layouts-card__field-summary"> | ||
| { summaryFields.map( | ||
| ( summaryField ) => | ||
| isSummaryFieldVisible( | ||
| summaryField, | ||
| layout.summary, | ||
| isOpen | ||
| ) && ( | ||
| <summaryField.render | ||
| key={ summaryField.id } | ||
| item={ data } | ||
| field={ summaryField } | ||
| /> | ||
| ) | ||
| ) } | ||
| </div> | ||
| ) } |
Member
There was a problem hiding this comment.
We need to operate only with the visible summary fields. It'll be clearer, and we'll prevent the dataforms-layout-card__field-summary wrapper from being rendered when all summary fields are invisible.
oandregal
reviewed
Oct 2, 2025
| typeof layout.isOpened === 'boolean' | ||
| ? layout.isOpened | ||
| : true, | ||
| summary: layout.summary ?? [], |
Member
There was a problem hiding this comment.
The layouts are not fully normalized:
- For the panel layout, convert it to an array of strings (or empty).
- For the card layout, convert it to an array of objects that encode its visibility. The default visibility is
when-collapsed.
By doing this, everything is simpler: the normalized layout types, there's a single point of normalization (remove code from layout components), and the API supports use cases like this for card layout (tax-summary visibility is when-collapsed, the default):
summary: [ 'tax-summary', { id: 'vat', visibility: 'always' } ]
Contributor
Author
There was a problem hiding this comment.
Good point! I improved the logic via bb2e019.
Member
|
@gigitux this is working great, thanks. I've left some final comments about API tweaks and implementation details. |
oandregal
reviewed
Oct 2, 2025
| withHeader, | ||
| summary: [ | ||
| { id: 'customer-summary', visibility: 'always' }, | ||
| { id: 'tax-summary', visibility: 'when-collapsed' }, |
Member
There was a problem hiding this comment.
I know this is possible (displaying a summary that is unrelated to the card), but it feels a bit weird given that the tax info is in a different card. Can you perhaps move this summary there or change the summary here? Not a strong opinion, though.
Contributor
Author
There was a problem hiding this comment.
Fixed with 0454fa0. I used plan as the second field.
oandregal
reviewed
Oct 2, 2025
| sum: CardSummaryField | ||
| ): NormalizedCardSummaryField => { | ||
| if ( typeof sum === 'string' ) { | ||
| return [ { id: sum, visibility: 'always' } ]; |
Member
There was a problem hiding this comment.
I feel the default should be when-collapsed. Always on summaries for card should be rare (e.g., things to act on such as validation, etc.).
Member
There was a problem hiding this comment.
small nit: this little utility could take layout.summary as input and be defined outside the normalizeLayout for better readability and performance (so it's only created once, not every time normalizeLayout is called).
oandregal
reviewed
Oct 2, 2025
| withHeader, | ||
| summary: [ | ||
| { id: 'customer-summary', visibility: 'always' }, | ||
| { id: 'plan-summary', visibility: 'when-collapsed' }, |
Member
There was a problem hiding this comment.
This could be just 'plan-summary' to highlight the default.
…ataform-card-layout-allow-having-summarybadge
Contributor
Author
|
@oandregal I addressed your feedback! Can you take another look? Thanks! 🙇 |
oandregal
approved these changes
Oct 3, 2025
Member
oandregal
left a comment
oandregal
left a comment
There was a problem hiding this comment.
This is working nicely, thanks for your work here, Luigi.
oandregal
deleted the
nex-383-dataform-card-layout-allow-having-summarybadge
branch
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?
Adds
summaryFieldprop to DataForm card layouts that references an existing field definition to display in the header.Why?
Currently, card layouts in DataForm don't provide a way to display summary information in their headers. This makes it difficult for users to quickly scan and understand the content of collapsed cards. By adding support for summary badges, we improve the user experience while maintaining our architectural principle of keeping forms and views declarative (NEX-198).
How?
Summary Fields in Layout Object: Summary fields are now configured within the layout object instead of directly on the field, providing better organization and consistency.
CardLayout: Added optional summary property that accepts:
Testing Instructions
Testing Instructions for Keyboard
Screenshots
Screen.Capture.on.2025-09-10.at.10-44-33.mov