Skip to content

Conversation

@jorgefilipecosta
Copy link
Member

This PR adds support for custom summary rendering in composed DataForm fields through an optional summary property. Previously, composed fields would always display the first child field's value as the summary. Now, developers can specify which field's render method should be used for the summary display.

Problem

When using composed fields (fields with children), the panel layout would always use the first simple child field to display the summary value. This limitation prevented meaningful summaries for complex composed fields where a custom rendering logic would be more appropriate.

For example, a "Discussion" field containing both comment status and ping status would only show the comment status, missing the complete picture.

Solution

Type Changes

  • Extended CombinedFormField type with optional summary?: string property
  • The summary property references a field ID whose render method will be used for display

Implementation

  • Modified panel field resolution logic in dataforms-layouts/panel/index.tsx
  • When a composed field has a summary property, the system looks for that field definition instead of defaulting to the first child
  • Maintains backward compatibility - existing composed fields continue to work unchanged

Usage Example

// Field definition with custom render
{
  id: 'discussion',
  label: 'Discussion',
  type: 'text',
  render: ({ item }) => {
    const commentLabel = item.comment_status === 'open' 
      ? 'Allow comments' 
      : 'Comments closed';
    const pingLabel = item.ping_status 
      ? 'Pings enabled' 
      : 'Pings disabled';
    return <span>{commentLabel}, {pingLabel}</span>;
  },
}

// Composed field using custom summary
{
  id: 'discussion',
  label: 'Discussion', 
  children: ['comment_status', 'ping_status'],
  summary: 'discussion', // References the field above
}

Benefits

  • Enhanced UX: Composed fields can now show meaningful, context-aware summaries
  • Flexible: Any field's render method can be used for summary display
  • Backward Compatible: No breaking changes to existing implementations

Testing

Go to http://localhost:50240/?path=/story/dataviews-dataform--layout-panel and verify the Discussion field works as expected.

@github-actions
Copy link

github-actions bot commented Sep 11, 2025

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: oandregal <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@jorgefilipecosta jorgefilipecosta added [Type] Enhancement A suggestion for improvement. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Package] DataViews /packages/dataviews labels Sep 11, 2025
@github-actions
Copy link

github-actions bot commented Sep 11, 2025

Flaky tests detected in 0552132.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17761854764
📝 Reported issues:

id: 'discussion',
label: 'Discussion',
children: [ 'comment_status', 'ping_status' ],
summary: 'discussion',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm thinking that, sometimes, instead of using a single field as summary, we may want to display a couple of fields instead. For example, an airplane form. The summary may be [ 'origin_destination', 'status' ], and they'd be rendered in a new line each. Something along these lines:

FLIGHT DETAILS (label)
From SCQ to OPO (1st field render)
On Time (2nd field render)

but when clicking on the panel it opens a modal with a lot more details (flight time, connections if any, etc.).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

render: VisibilityComponent,
};

export const MultipleSummaryFields = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we integrate this in the existing LayoutPanel story?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(It doesn't need to be everything, as long as there's one or two examples for each it's fine (a single summary field + a list of summary fields).

item={ data }
field={ fieldDefinition }
/>
{ summaryFields.length > 1 ? (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This button component could be extracted as an utility to both Modal and Panel. SummaryButton, perhaps?

@jorgefilipecosta jorgefilipecosta force-pushed the add/support-for-composed-fields-summary branch from 389653a to a5d386d Compare September 15, 2025 15:43
@jorgefilipecosta
Copy link
Member Author

Hi @oandregal thank you for the reviews, all your feedback was applied.

@oandregal
Copy link
Member

@jorgefilipecosta this needs a packages/dataviews/changelog entry with a link to this PR (for the CI check to pass).

@jorgefilipecosta jorgefilipecosta force-pushed the add/support-for-composed-fields-summary branch from 0dc77d7 to 621cf63 Compare September 16, 2025 09:08
@jorgefilipecosta jorgefilipecosta force-pushed the add/support-for-composed-fields-summary branch from 621cf63 to 0552132 Compare September 16, 2025 09:50
@jorgefilipecosta jorgefilipecosta merged commit 7293eda into trunk Sep 16, 2025
68 checks passed
@jorgefilipecosta jorgefilipecosta deleted the add/support-for-composed-fields-summary branch September 16, 2025 10:21
@github-actions github-actions bot added this to the Gutenberg 21.7 milestone Sep 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond [Package] DataViews /packages/dataviews [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants