@wordpress/fields 0.42.0 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/fields",
-	"version": "0.42.0",
+	"version": "0.43.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,39 +47,40 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/api-fetch": "^7.50.0",
-		"@wordpress/base-styles": "^10.2.0",
-		"@wordpress/blob": "^4.50.0",
-		"@wordpress/blocks": "^15.23.0",
-		"@wordpress/components": "^36.1.0",
-		"@wordpress/compose": "^8.3.0",
-		"@wordpress/core-data": "^7.50.0",
-		"@wordpress/data": "^10.50.0",
-		"@wordpress/dataviews": "^17.1.0",
-		"@wordpress/date": "^5.50.0",
-		"@wordpress/element": "^8.2.0",
-		"@wordpress/hooks": "^4.50.0",
-		"@wordpress/html-entities": "^4.50.0",
-		"@wordpress/i18n": "^6.23.0",
-		"@wordpress/icons": "^15.1.0",
-		"@wordpress/media-utils": "^5.50.0",
-		"@wordpress/notices": "^5.50.0",
-		"@wordpress/patterns": "^2.50.0",
-		"@wordpress/primitives": "^4.50.0",
-		"@wordpress/private-apis": "^1.50.0",
-		"@wordpress/router": "^1.50.0",
-		"@wordpress/ui": "^0.17.0",
-		"@wordpress/url": "^4.50.0",
-		"@wordpress/warning": "^3.50.0",
-		"@wordpress/wordcount": "^4.50.0",
+		"@wordpress/a11y": "^4.51.0",
+		"@wordpress/api-fetch": "^7.51.0",
+		"@wordpress/base-styles": "^11.0.0",
+		"@wordpress/blob": "^4.51.0",
+		"@wordpress/blocks": "^15.24.0",
+		"@wordpress/components": "^37.0.0",
+		"@wordpress/compose": "^8.4.0",
+		"@wordpress/core-data": "^7.51.0",
+		"@wordpress/data": "^10.51.0",
+		"@wordpress/dataviews": "^17.2.0",
+		"@wordpress/date": "^5.51.0",
+		"@wordpress/element": "^8.3.0",
+		"@wordpress/hooks": "^4.51.0",
+		"@wordpress/html-entities": "^4.51.0",
+		"@wordpress/i18n": "^6.24.0",
+		"@wordpress/icons": "^15.2.0",
+		"@wordpress/media-utils": "^5.51.0",
+		"@wordpress/notices": "^5.51.0",
+		"@wordpress/patterns": "^2.51.0",
+		"@wordpress/primitives": "^4.51.0",
+		"@wordpress/private-apis": "^1.51.0",
+		"@wordpress/router": "^1.51.0",
+		"@wordpress/ui": "^0.18.0",
+		"@wordpress/url": "^4.51.0",
+		"@wordpress/warning": "^3.51.0",
+		"@wordpress/wordcount": "^4.51.0",
 		"change-case": "^4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
-		"@types/react": "^18.3.27",
-		"react": "^18.0.0"
+		"@types/react": "^18 || ^19",
+		"react": "^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
@@ -89,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
 }

package/src/actions/duplicate-post.tsx

@@ -153,7 +153,6 @@ const duplicatePost: Action< BasePost > = {
 						</div>
 					) }
 					<InputControl
-						__next40pxDefaultSize
 						label={ __( 'Title' ) }
 						placeholder={ __( 'No title' ) }
 						value={ getItemTitle( item ) }

package/src/actions/reorder-page.tsx

@@ -93,7 +93,6 @@ function ReorderModal( {
 					) }
 				</div>
 				<InputControl
-					__next40pxDefaultSize
 					label={ __( 'Order' ) }
 					type="number"
 					value={

package/src/components/media-edit/index.tsx

@@ -41,6 +41,7 @@ import {
 	chevronRight,
 } from '@wordpress/icons';
 import { VisuallyHidden, Tooltip } from '@wordpress/ui';
+import { speak } from '@wordpress/a11y';
 import {
 	MediaUpload,
 	uploadMedia,
@@ -838,6 +839,13 @@ export default function MediaEdit< Item >( {
 			setCustomValidity( undefined );
 		}
 	}, [ isTouched, field.isValid, validity ] );
+
+	useEffect( () => {
+		if ( isTouched && customValidity?.message ) {
+			speak( customValidity.message );
+		}
+	}, [ isTouched, customValidity?.message ] );
+
 	const onBlur = useCallback(
 		( event: React.FocusEvent< HTMLElement > ) => {
 			if ( isTouched ) {
@@ -961,25 +969,23 @@ export default function MediaEdit< Item >( {
 				/>
 			</VisuallyHidden>
 			{ customValidity && (
-				<div aria-live="polite">
-					<p
-						className={ clsx(
-							'components-validated-control__indicator',
-							{
-								'is-invalid': customValidity.type === 'invalid',
-								'is-valid': customValidity.type === 'valid',
-							}
-						) }
-					>
-						<WCIcon
-							className="components-validated-control__indicator-icon"
-							icon={ errorIcon }
-							size={ 16 }
-							fill="currentColor"
-						/>
-						{ customValidity.message }
-					</p>
-				</div>
+				<p
+					className={ clsx(
+						'components-validated-control__indicator',
+						{
+							'is-invalid': customValidity.type === 'invalid',
+							'is-valid': customValidity.type === 'valid',
+						}
+					) }
+				>
+					<WCIcon
+						className="components-validated-control__indicator-icon"
+						icon={ errorIcon }
+						size={ 16 }
+						fill="currentColor"
+					/>
+					{ customValidity.message }
+				</p>
 			) }
 		</div>
 	);

package/src/components/media-edit/style.scss

@@ -35,7 +35,6 @@ fieldset.fields__media-edit {
 		line-height: 1.5;
 	}
 
-	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container-type: inline-size;
 
 	.fields__media-edit-compact-group {
@@ -264,7 +263,6 @@ fieldset.fields__media-edit {
 			// Auto-fill columns based on minimum item width
 			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 
-			/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 			@container (max-width: 500px) {
 				grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
 			}

package/src/fields/index.ts

@@ -3,6 +3,8 @@ export { default as titleField } from './title';
 export { default as pageTitleField } from './page-title';
 export { default as templateTitleField } from './template-title';
 export { default as patternTitleField } from './pattern-title';
+export { default as patternDescriptionField } from './pattern-description';
+export { default as patternSyncStatusField } from './pattern-sync-status';
 export { default as orderField } from './order';
 export { default as featuredImageField } from './featured-image';
 export { default as templateField } from './template';

package/src/fields/parent/parent-edit.tsx

@@ -261,7 +261,6 @@ export function PageAttributesParent( {
 
 	return (
 		<ComboboxControl
-			__next40pxDefaultSize
 			label={ __( 'Parent' ) }
 			help={ __( 'Choose a parent page.' ) }
 			value={ pageId?.toString() }

package/src/fields/pattern-description/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import type { Pattern } from '../../types';
+
+function getPatternDescription( item: Pattern ) {
+	if ( typeof item.excerpt === 'string' ) {
+		return decodeEntities( item.excerpt );
+	}
+	return decodeEntities( item.excerpt?.raw || '' );
+}
+
+const patternDescriptionField: Field< Pattern > = {
+	id: 'excerpt',
+	type: 'text',
+	label: __( 'Description' ),
+	placeholder: __( 'Add a description' ),
+	getValue: ( { item } ) => getPatternDescription( item ),
+	render: ( { item } ) => {
+		const description = getPatternDescription( item );
+		return description ? <Text>{ description }</Text> : null;
+	},
+	Edit: {
+		control: 'textarea',
+		rows: 4,
+	},
+	enableSorting: false,
+	enableHiding: false,
+	filterBy: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Description field for patterns.
+ */
+export default patternDescriptionField;

package/src/fields/pattern-sync-status/index.tsx

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __, _x } from '@wordpress/i18n';
+// @ts-ignore
+import { privateApis as patternPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import type { Pattern } from '../../types';
+import { unlock } from '../../lock-unlock';
+
+const { PATTERN_SYNC_TYPES, PATTERN_TYPES } = unlock( patternPrivateApis );
+
+const SYNC_STATUS_FILTERS = [
+	{
+		value: PATTERN_SYNC_TYPES.full,
+		label: _x( 'Synced', 'pattern (singular)' ),
+		description: __( 'Patterns that are kept in sync across the site.' ),
+	},
+	{
+		value: PATTERN_SYNC_TYPES.unsynced,
+		label: _x( 'Not synced', 'pattern (singular)' ),
+		description: __(
+			'Patterns that can be changed freely without affecting the site.'
+		),
+	},
+];
+
+function getPatternSyncStatus( item: Pattern ) {
+	if ( item.type && item.type !== PATTERN_TYPES.user ) {
+		return PATTERN_SYNC_TYPES.unsynced;
+	}
+	// When a pattern is first created directly from the post editor
+	// (`post-new.php?post_type=wp_block`), the top-level sync status is not
+	// set yet, so fall back to the meta value.
+	if ( item.meta?.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced ) {
+		return PATTERN_SYNC_TYPES.unsynced;
+	}
+	return item.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full;
+}
+
+const patternSyncStatusField: Field< Pattern > = {
+	id: 'sync-status',
+	type: 'text',
+	label: __( 'Sync status' ),
+	readOnly: true,
+	enableSorting: false,
+	enableHiding: true,
+	elements: SYNC_STATUS_FILTERS,
+	filterBy: {
+		operators: [ 'is' ],
+		isPrimary: true,
+	},
+	render: ( { item } ) => {
+		const syncStatus = getPatternSyncStatus( item );
+		return (
+			<span
+				className={ `fields-field__pattern-sync-status fields-field__pattern-sync-status-${ syncStatus }` }
+			>
+				{
+					SYNC_STATUS_FILTERS.find(
+						( { value } ) => value === syncStatus
+					)?.label
+				}
+			</span>
+		);
+	},
+};
+
+/**
+ * Sync status field for patterns.
+ */
+export default patternSyncStatusField;

package/src/fields/slug/slug-edit.tsx

@@ -87,7 +87,6 @@ const SlugEdit = ( {
 						</ExternalLink>
 					</VStack>
 					<InputControl
-						__next40pxDefaultSize
 						prefix={
 							<InputControlPrefixWrapper>
 								/

package/src/fields/slug/style.scss

@@ -21,7 +21,7 @@
 		flex-direction: column;
 
 		.fields-controls__slug-help-slug {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 		}
 	}
 }

package/src/fields/status/index.tsx

@@ -18,6 +18,10 @@ const statusField: Field< BasePost > = {
 	id: 'status',
 	type: 'text',
 	elements: STATUSES,
+	// An auto-draft is a draft that hasn't been saved yet, so treat it as
+	// one for display, selection, and filtering.
+	getValue: ( { item } ) =>
+		item.status === 'auto-draft' ? 'draft' : item.status,
 	render: StatusView,
 	Edit: 'radio',
 	enableSorting: false,

package/src/fields/status/status-view.tsx

@@ -5,6 +5,7 @@ import {
 	__experimentalHStack as HStack,
 	Icon as WCIcon,
 } from '@wordpress/components';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
@@ -12,9 +13,10 @@ import {
 import type { BasePost } from '../../types';
 import STATUSES from './status-elements';
 
-function StatusView( { item }: { item: BasePost } ) {
-	const status = STATUSES.find( ( { value } ) => value === item.status );
-	const label = status?.label || item.status;
+function StatusView( { item, field }: DataViewRenderFieldProps< BasePost > ) {
+	const currentStatus = field.getValue( { item } );
+	const status = STATUSES.find( ( { value } ) => value === currentStatus );
+	const label = status?.label || currentStatus;
 	const icon = status?.icon;
 	return (
 		<HStack alignment="left" spacing={ 0 }>

package/src/fields/template/template-edit.tsx

@@ -61,7 +61,6 @@ function ClassicTemplateEdit( {
 	);
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Template' ) }
 			hideLabelFromVision
 			value={ value }
@@ -126,7 +125,6 @@ function BlockThemeTemplateEdit( {
 	}, [ templates, defaultTemplateLabel ] );
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Template' ) }
 			hideLabelFromVision
 			value={ value }

package/src/types.ts

@@ -119,7 +119,9 @@ export interface TemplatePart extends CommonPost, TemplateAuthorFields {
 export interface Pattern extends CommonPost {
 	slug: string;
 	title: { raw: string };
-	wp_pattern_sync_status: string;
+	excerpt?: string | { raw: string; rendered: string };
+	meta?: Record< string, any >;
+	wp_pattern_sync_status?: string;
 }
 
 export interface SiteSettings {