From 1226937a103902fa7d68cc7bb382a83aba3bb43e Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 26 Mar 2026 12:55:07 +0200 Subject: [PATCH 1/3] Fields: Add `excerpt` field --- packages/dataviews/src/types/dataform.ts | 9 ++- packages/dataviews/src/types/field-api.ts | 2 +- .../sidebar/dataform-post-summary.js | 1 + .../src/dataviews/store/private-actions.ts | 6 ++ packages/fields/README.md | 4 ++ packages/fields/src/fields/excerpt/index.tsx | 57 +++++++++++++++++++ packages/fields/src/fields/index.ts | 1 + packages/fields/src/types.ts | 1 + 8 files changed, 78 insertions(+), 3 deletions(-) create mode 100644 packages/fields/src/fields/excerpt/index.tsx diff --git a/packages/dataviews/src/types/dataform.ts b/packages/dataviews/src/types/dataform.ts index fd893ccd0d66b3..d840f8d5e3ba05 100644 --- a/packages/dataviews/src/types/dataform.ts +++ b/packages/dataviews/src/types/dataform.ts @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { ReactElement } from 'react'; + /** * Internal dependencies */ @@ -143,7 +148,7 @@ export type NormalizedSummaryField = export type FormField = { id: string; label?: string; - description?: string; + description?: string | ReactElement; layout?: Layout; children?: Array< FormField | string >; }; @@ -151,7 +156,7 @@ export type NormalizedFormField = { id: string; layout: NormalizedLayout; label?: string; - description?: string; + description?: string | ReactElement; children?: NormalizedFormField[]; }; diff --git a/packages/dataviews/src/types/field-api.ts b/packages/dataviews/src/types/field-api.ts index cd219c5cf839ae..1475c799182f3d 100644 --- a/packages/dataviews/src/types/field-api.ts +++ b/packages/dataviews/src/types/field-api.ts @@ -200,7 +200,7 @@ export type Field< Item > = { /** * A description of the field. */ - description?: string; + description?: string | ReactElement; /** * Placeholder for the field. diff --git a/packages/editor/src/components/sidebar/dataform-post-summary.js b/packages/editor/src/components/sidebar/dataform-post-summary.js index c76989a49d54b4..736459c67481d8 100644 --- a/packages/editor/src/components/sidebar/dataform-post-summary.js +++ b/packages/editor/src/components/sidebar/dataform-post-summary.js @@ -38,6 +38,7 @@ const form = { labelPosition: 'none', }, }, + 'excerpt', { id: 'status', label: __( 'Status' ), diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts index f343fbbd62d376..8581624c14be29 100644 --- a/packages/editor/src/dataviews/store/private-actions.ts +++ b/packages/editor/src/dataviews/store/private-actions.ts @@ -19,6 +19,7 @@ import { resetPost, deletePost, duplicateTemplatePart, + excerptField, featuredImageField, dateField, parentField, @@ -267,6 +268,11 @@ export const registerPostTypeSchema = ! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) && scheduledDateField, slugField, + // There are special cases where we want to label the excerpt as a description. + // So for now skip registering the excerpt field for some post types. + ! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) && + postTypeConfig.supports?.excerpt && + excerptField, postTypeConfig.supports?.[ 'page-attributes' ] && parentField, postTypeConfig.supports?.comments && commentStatusField, postTypeConfig.supports?.trackbacks && pingStatusField, diff --git a/packages/fields/README.md b/packages/fields/README.md index 5fdebc9c401ec7..012cb6fbb4edca 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -63,6 +63,10 @@ Duplicate action for BasePost. Duplicate action for TemplatePart. +### excerptField + +Excerpt field for BasePost. + ### exportPattern Export action as JSON for Pattern. diff --git a/packages/fields/src/fields/excerpt/index.tsx b/packages/fields/src/fields/excerpt/index.tsx new file mode 100644 index 00000000000000..af17796199f80c --- /dev/null +++ b/packages/fields/src/fields/excerpt/index.tsx @@ -0,0 +1,57 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { decodeEntities } from '@wordpress/html-entities'; +import { __ } from '@wordpress/i18n'; +import { + ExternalLink, + __experimentalText as Text, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; + +const excerptField: Field< BasePost > = { + id: 'excerpt', + type: 'text', + label: __( 'Excerpt' ), + placeholder: __( 'Add an excerpt' ), + description: ( + + { __( 'Learn more about manual excerpts' ) } + + ), + render: ( { item } ) => { + let excerpt; + if ( typeof item.excerpt === 'string' ) { + excerpt = !! item.excerpt + ? decodeEntities( item.excerpt ) + : __( 'Add an excerpt' ); + } else { + excerpt = decodeEntities( item.excerpt?.raw || '' ); + } + return ( + + { excerpt } + + ); + }, + Edit: { + control: 'textarea', + rows: 4, + }, + enableSorting: false, + filterBy: false, +}; + +/** + * Excerpt field for BasePost. + */ +export default excerptField; diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts index f2a6b90ccedacc..f0377a1ca07749 100644 --- a/packages/fields/src/fields/index.ts +++ b/packages/fields/src/fields/index.ts @@ -16,5 +16,6 @@ export { default as dateField } from './date'; export { default as scheduledDateField } from './date/scheduled'; export { default as authorField } from './author'; export { default as notesField } from './notes'; +export { default as excerptField } from './excerpt'; export { default as formatField } from './format'; export { default as postContentInfoField } from './post-content-info'; diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts index 75af437cf59fcf..ddba0847102a8a 100644 --- a/packages/fields/src/types.ts +++ b/packages/fields/src/types.ts @@ -127,6 +127,7 @@ export interface PostType { supports?: { 'page-attributes'?: boolean; title?: boolean; + excerpt?: boolean; revisions?: boolean; author?: string; thumbnail?: string; From b8b7fbb419defe6508f5b692fd0efa4a3017c20b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 26 Mar 2026 14:14:53 +0200 Subject: [PATCH 2/3] remove comment --- packages/editor/src/dataviews/store/private-actions.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts index 8581624c14be29..ec8f566d1c8472 100644 --- a/packages/editor/src/dataviews/store/private-actions.ts +++ b/packages/editor/src/dataviews/store/private-actions.ts @@ -268,8 +268,6 @@ export const registerPostTypeSchema = ! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) && scheduledDateField, slugField, - // There are special cases where we want to label the excerpt as a description. - // So for now skip registering the excerpt field for some post types. ! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) && postTypeConfig.supports?.excerpt && excerptField, From 64af3a6643dabc438cbab83a92edc1613d21231f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 27 Mar 2026 10:24:47 +0200 Subject: [PATCH 3/3] add changelog and remove types --- packages/dataviews/CHANGELOG.md | 4 ++++ packages/dataviews/src/types/dataform.ts | 9 ++------- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index f74de60f765c69..26f0e8c69b0c25 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -7,6 +7,10 @@ - DataViews: Use intersectionObserver to improve performance by unloading invisible items. Change how infinite scroll is enabled to require only 2 view properties: `infiniteScrollEnabled` and `startPosition`. [#74378](https://github.com/WordPress/gutenberg/pull/74378) - DataForm: The card layout now uses `Card` and `CollapsibleCard` from `@wordpress/ui` instead of `Card`, `CardHeader`, and `CardBody` from `@wordpress/components`. This changes the card's visual appearance (spacing, typography, and removal of the header/content separator). Custom CSS targeting `.components-card__body` within DataViews has been removed. Consumers wrapping DataViews or DataForm in a card should migrate to the `Card` and `CollapsibleCard` components from `@wordpress/ui`. [#76282](https://github.com/WordPress/gutenberg/pull/76282) +### Enhancements + +- DataViews: Field's description can accept ReactElements. [#76829](https://github.com/WordPress/gutenberg/pull/76829) + ## 13.1.0 (2026-03-18) ### Enhancements diff --git a/packages/dataviews/src/types/dataform.ts b/packages/dataviews/src/types/dataform.ts index d840f8d5e3ba05..fd893ccd0d66b3 100644 --- a/packages/dataviews/src/types/dataform.ts +++ b/packages/dataviews/src/types/dataform.ts @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import type { ReactElement } from 'react'; - /** * Internal dependencies */ @@ -148,7 +143,7 @@ export type NormalizedSummaryField = export type FormField = { id: string; label?: string; - description?: string | ReactElement; + description?: string; layout?: Layout; children?: Array< FormField | string >; }; @@ -156,7 +151,7 @@ export type NormalizedFormField = { id: string; layout: NormalizedLayout; label?: string; - description?: string | ReactElement; + description?: string; children?: NormalizedFormField[]; };