@wordpress/editor 14.48.1 → 14.48.2-next.v.202606191442.0

package/src/components/revision-fields-diff/index.js

@@ -38,6 +38,16 @@ function stringifyValue( value ) {
 	return String( value );
 }
 
+/**
+ * Determines whether a meta value should be treated as empty.
+ *
+ * @param {string} str The stringified value.
+ * @return {boolean} Whether the value is effectively empty.
+ */
+function isEmptyMeta( str ) {
+	return ! str || str === '[]' || str === '{}';
+}
+
 /**
  * Panel that shows meta field diffs between the current revision and
  * the previous revision in the document sidebar during revision mode.
@@ -72,7 +82,7 @@ export default function RevisionFieldsDiffPanel() {
 			const revStr = stringifyValue( revisionMeta[ key ] );
 			const prevStr = stringifyValue( previousMeta[ key ] );
 
-			if ( ! revStr && ! prevStr ) {
+			if ( isEmptyMeta( revStr ) && isEmptyMeta( prevStr ) ) {
 				continue;
 			}
 
@@ -91,6 +101,7 @@ export default function RevisionFieldsDiffPanel() {
 			title={ __( 'Meta' ) }
 			entries={ entries }
 			initialOpen={ false }
+			className="editor-revision-meta-diff__content"
 		/>
 	);
 }

package/src/components/sidebar/dataform-post-summary.js

@@ -18,9 +18,76 @@ import { store as editorStore } from '../../store';
 import PostTrash from '../post-trash';
 import usePostFields from '../post-fields';
 import { usePostTemplatePanelMode } from '../post-template/hooks';
+import revisionsField from '../../dataviews/fields/revisions';
 
 const EMPTY_FORM = { layout: { type: 'panel' }, fields: [] };
 
+// Some post types expose summary fields that edit entities other than the one
+// being edited. Keyed by the post type that needs them, the related records are
+// merged into the form data under a `${ kind }_${ name }` namespace key so that
+// a single DataForm can read and write all of them, and edits to those keys are
+// routed back to their entity.
+//
+// The fields themselves are namespace-agnostic: they read and write a plain
+// record. The `fields` list ties each one to the entity it edits, and this
+// component overrides their `getValue`/`setValue`/`render` to operate on the
+// namespaced record, plus their `isVisible` to only show where that record is
+// present (e.g. the `home`/`index` template summary).
+//
+// Currently only `wp_template` uses this: `posts_per_page` and
+// `default_comment_status` target `root/site`, and `posts_page_title` targets
+// the posts page (the `page` assigned as `page_for_posts`).
+const ENTITIES = {
+	wp_template: {
+		root_site: {
+			kind: 'root',
+			name: 'site',
+			fields: [ 'posts_per_page', 'default_comment_status' ],
+			isVisible: ( item ) =>
+				[ 'home', 'index' ].includes( item.slug ?? '' ),
+		},
+		posttype_page: {
+			kind: 'postType',
+			name: 'page',
+			getId: ( select ) =>
+				select( coreDataStore ).getEditedEntityRecord( 'root', 'site' )
+					?.page_for_posts,
+			fields: [ 'posts_page_title' ],
+			isVisible: ( item ) =>
+				[ 'home', 'index' ].includes( item.slug ?? '' ),
+		},
+	},
+};
+
+// Rebinds a namespace-agnostic field to the namespaced record it edits. Every
+// field callback that receives the form `item` is redirected to the
+// `item[ namespace ]` sub-record so the field operates on its own entity:
+// `getValue`/`setValue`/`render` here, and the rest indirectly because they all
+// funnel through the (remapped) `getValue` (default `render`, `getValueFormatted`
+// and `isValid` range/`custom` validation). Edits are wrapped back under the
+// namespace key. The caller-supplied `isVisible` encodes entity-specific
+// conditions (e.g. only for `home`/`index` templates); the generic guard
+// `!! item[ namespace ]` ensures the field is hidden when the sub-record
+// hasn't been fetched.
+function bindFieldToNamespace( field, namespace, isVisible = () => true ) {
+	const subItem = ( item ) => item?.[ namespace ] ?? {};
+	return {
+		...field,
+		getValue: ( { item } ) =>
+			field.getValue
+				? field.getValue( { item: subItem( item ) } )
+				: subItem( item )[ field.id ],
+		setValue: ( { item, value } ) => ( {
+			[ namespace ]: field.setValue( { item: subItem( item ), value } ),
+		} ),
+		render: field.render
+			? ( props ) =>
+					field.render( { ...props, item: subItem( props.item ) } )
+			: undefined,
+		isVisible: ( item ) => isVisible( item ) && !! item[ namespace ],
+	};
+}
+
 export default function DataFormPostSummary( { onActionPerformed } ) {
 	const { postType, postId } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
@@ -50,33 +117,102 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 
 	const templatePanelMode = usePostTemplatePanelMode();
 
-	const availableTemplates = useSelect( ( select ) => {
-		if ( select( coreDataStore ).getCurrentTheme()?.is_block_theme ) {
-			return null;
-		}
-		return (
-			select( editorStore ).getEditorSettings().availableTemplates ?? {}
-		);
-	}, [] );
+	// Assemble every piece of supplementary data merged into the form `data`
+	// alongside the post record: read-only editor data that the post's own
+	// fields consume (e.g. the `template` field's `available_templates` in
+	// classic themes), and the records of other entities targeted by namespaced
+	// fields (keyed by `${ kind }_${ name }`) together with the id used to
+	// persist edits back to each one.
+	const { entityData, entityIds, availableTemplates } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, canUser, getCurrentTheme } =
+				select( coreDataStore );
+
+			const _availableTemplates = getCurrentTheme()?.is_block_theme
+				? null
+				: select( editorStore ).getEditorSettings()
+						.availableTemplates ?? {};
+
+			const extra = {};
+			const ids = {};
+
+			// Other entities the current post type needs merged into its form.
+			for ( const [ key, entity ] of Object.entries(
+				ENTITIES[ postType ] ?? {}
+			) ) {
+				if (
+					! canUser( 'read', {
+						kind: entity.kind,
+						name: entity.name,
+					} )
+				) {
+					continue;
+				}
+				const id = entity.getId ? entity.getId( select ) : undefined;
+				// Entities resolved through another record need a valid id.
+				if ( entity.getId && ! id ) {
+					continue;
+				}
+				extra[ key ] = getEditedEntityRecord(
+					entity.kind,
+					entity.name,
+					id
+				);
+				ids[ key ] = id;
+			}
+
+			return {
+				entityData: extra,
+				entityIds: ids,
+				availableTemplates: _availableTemplates,
+			};
+		},
+		[ postType ]
+	);
 
-	// Augment record only when needed(not a block theme with available templates).
-	const augmentedRecord = useMemo( () => {
-		if ( ! record || ! availableTemplates ) {
+	// Merge the supplementary data onto the record only when there is any.
+	const data = useMemo( () => {
+		if ( ! record ) {
 			return record;
 		}
-		return {
-			...record,
-			available_templates: availableTemplates,
-		};
-	}, [ record, availableTemplates ] );
+		const extra = { ...entityData };
+		if ( availableTemplates && Object.keys( availableTemplates ).length ) {
+			extra.available_templates = availableTemplates;
+		}
+		if ( ! Object.keys( extra ).length ) {
+			return record;
+		}
+		return { ...record, ...extra };
+	}, [ record, entityData, availableTemplates ] );
 
 	const { editEntityRecord } = useDispatch( coreDataStore );
 
+	// Map of namespaced field id to the namespace key its entity is merged under.
+	const fieldNamespaces = useMemo( () => {
+		const map = {};
+		for ( const [ namespace, entity ] of Object.entries(
+			ENTITIES[ postType ] ?? {}
+		) ) {
+			for ( const id of entity.fields ?? [] ) {
+				map[ id ] = namespace;
+			}
+		}
+		return map;
+	}, [ postType ] );
+
 	const _fields = usePostFields( { postType } );
 	const fields = useMemo(
 		() =>
 			_fields
 				?.map( ( field ) => {
+					const namespace = fieldNamespaces[ field.id ];
+					if ( namespace ) {
+						return bindFieldToNamespace(
+							field,
+							namespace,
+							ENTITIES[ postType ]?.[ namespace ]?.isVisible
+						);
+					}
 					if ( field.id === 'status' ) {
 						return {
 							...field,
@@ -107,24 +243,59 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 					}
 					return field;
 				} )
-				.filter( Boolean ),
-		[ _fields, templatePanelMode, availableTemplates ]
+				.filter( Boolean )
+				// Editor-only field, injected here rather than registered
+				// so it never leaks into the site editor list / quick-edit fields.
+				.concat( revisionsField ),
+		[
+			_fields,
+			templatePanelMode,
+			availableTemplates,
+			fieldNamespaces,
+			postType,
+		]
 	);
 
 	const onChange = ( edits ) => {
+		// Route edits that target another entity (merged in under a namespace)
+		// back to that entity; collect the rest for the post being edited.
+		const entities = ENTITIES[ postType ] ?? {};
+		const baseEdits = {};
+		for ( const [ key, value ] of Object.entries( edits ) ) {
+			const entity = entities[ key ];
+			if ( entity ) {
+				editEntityRecord(
+					entity.kind,
+					entity.name,
+					entityIds[ key ],
+					value
+				);
+			} else {
+				baseEdits[ key ] = value;
+			}
+		}
+
+		if ( ! Object.keys( baseEdits ).length ) {
+			return;
+		}
+
 		if (
-			edits.status &&
-			edits.status !== 'future' &&
+			baseEdits.status &&
+			baseEdits.status !== 'future' &&
 			record?.status === 'future' &&
 			new Date( record.date ) > new Date()
 		) {
-			edits.date = null;
+			baseEdits.date = null;
 		}
-		if ( edits.status && edits.status === 'private' && record?.password ) {
-			edits.password = '';
+		if (
+			baseEdits.status &&
+			baseEdits.status === 'private' &&
+			record?.password
+		) {
+			baseEdits.password = '';
 		}
 
-		editEntityRecord( 'postType', postType, postId, edits );
+		editEntityRecord( 'postType', postType, postId, baseEdits );
 	};
 	return (
 		<PostPanelSection className="editor-post-summary">
@@ -135,7 +306,7 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 					onActionPerformed={ onActionPerformed }
 				/>
 				<DataForm
-					data={ augmentedRecord }
+					data={ data }
 					fields={ fields }
 					form={ form }
 					onChange={ onChange }

package/src/components/sidebar/index.js

@@ -27,7 +27,6 @@ import SidebarHeader from './header';
 import TemplateActionsPanel from '../template-actions-panel';
 import TemplateContentPanel from '../template-content-panel';
 import TemplatePartContentPanel from '../template-part-content-panel';
-import PostRevisionsPanel from '../post-revisions-panel';
 import RevisionBlockDiffPanel from '../revision-block-diff';
 import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
 import { sidebars } from './constants';
@@ -96,17 +95,8 @@ const SidebarContent = ( {
 				<PluginDocumentSettingPanel.Slot />
 				<TemplateContentPanel />
 				{ window?.__experimentalDataFormInspector &&
-					[
-						'post',
-						'page',
-						'wp_template',
-						'wp_template_part',
-						'wp_block',
-					].includes( postType ) && (
-						<>
-							<TemplateActionsPanel />
-							<PostRevisionsPanel />
-						</>
+					[ 'page', 'post' ].includes( postType ) && (
+						<TemplateActionsPanel />
 					) }
 				<TemplatePartContentPanel />
 				<PostTransformPanel />

package/src/components/sidebar/post-revision-summary.js

@@ -14,22 +14,19 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import RevisionAuthorPanel from '../revision-author-panel';
-import RevisionCreatedPanel from '../revision-created-panel';
-import { PostContentInformationUI } from '../post-content-information';
-import RevisionFieldsDiffPanel from '../revision-fields-diff';
+import PostRevisionsTimeline from '../post-revisions-timeline';
 import PostPanelSection from '../post-panel-section';
 import PostCardPanel from '../post-card-panel';
+import RevisionFieldsDiffPanel from '../revision-fields-diff';
 
 export default function PostRevisionSummary() {
-	const { revisionId, postId, postContent } = useSelect( ( select ) => {
-		const { getCurrentRevisionId, getCurrentRevision, getCurrentPostId } =
-			unlock( select( editorStore ) );
-		const _revisionId = getCurrentRevisionId();
+	const { revisionId, postId } = useSelect( ( select ) => {
+		const { getCurrentRevisionId, getCurrentPostId } = unlock(
+			select( editorStore )
+		);
 		return {
-			revisionId: _revisionId,
+			revisionId: getCurrentRevisionId(),
 			postId: getCurrentPostId(),
-			postContent: _revisionId && getCurrentRevision()?.content?.raw,
 		};
 	}, [] );
 	if ( ! revisionId ) {
@@ -40,10 +37,6 @@ export default function PostRevisionSummary() {
 			<PostPanelSection className="editor-post-summary">
 				<VStack spacing={ 4 }>
 					<PostCardPanel postId={ postId } hideActions />
-					<VStack spacing={ 1 }>
-						<PostContentInformationUI postContent={ postContent } />
-						<RevisionCreatedPanel />
-					</VStack>
 					<ExternalLink
 						href={ addQueryArgs( 'revision.php', {
 							revision: revisionId,
@@ -51,10 +44,10 @@ export default function PostRevisionSummary() {
 					>
 						{ __( 'Open classic revisions screen' ) }
 					</ExternalLink>
-					<RevisionAuthorPanel />
 				</VStack>
 			</PostPanelSection>
 			<RevisionFieldsDiffPanel />
+			<PostRevisionsTimeline />
 		</>
 	);
 }

package/src/components/sidebar/post-summary.js

@@ -43,7 +43,7 @@ export default function PostSummary( { onActionPerformed } ) {
 	);
 	if (
 		window?.__experimentalDataFormInspector &&
-		[ 'page', 'post' ].includes( postType )
+		[ 'page', 'post', 'wp_template' ].includes( postType )
 	) {
 		return <DataFormPostSummary onActionPerformed={ onActionPerformed } />;
 	}

package/src/components/style-book/index.js

@@ -500,7 +500,7 @@ export const StyleBookPreview = ( {
 			return { examples: examplesForSinglePageUse };
 		}
 
-		if ( blockVariation ) {
+		if ( blockVariation && filteredExamples?.examples?.length ) {
 			return {
 				examples: applyBlockVariationsToExamples(
 					filteredExamples.examples,

package/src/components/template-actions-panel/block-theme-content.js

@@ -20,7 +20,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/template-actions-panel/index.js

@@ -1,27 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
 import { usePostTemplatePanelMode } from '../post-template/hooks';
 import BlockThemeContent from './block-theme-content';
 import ClassicThemeContent from './classic-theme-content';
 
 export default function TemplateActionsPanel() {
-	const postType = useSelect(
-		( select ) => select( editorStore ).getCurrentPostType(),
-		[]
-	);
 	const mode = usePostTemplatePanelMode();
-	// This check is because the experiment is gated for these post
-	// types for now. Later we should use `postType.viewable`.
-	if ( ! [ 'page', 'post' ].includes( postType ) ) {
-		return null;
-	}
 	if ( mode === 'classic' ) {
 		return <ClassicThemeContent />;
 	}

package/src/dataviews/fields/revisions/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import type { BasePost } from '@wordpress/fields';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import RevisionsView from './revisions-view';
+
+const revisionsField: Field< BasePost > = {
+	id: 'revisions',
+	label: __( 'Revisions' ),
+	readOnly: true,
+	enableSorting: false,
+	render: RevisionsView,
+	isVisible: ( item ) => {
+		const revisionsCount =
+			item._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		const lastRevisionId =
+			item._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+		return !! lastRevisionId && revisionsCount >= 2;
+	},
+};
+
+export default revisionsField;

package/src/dataviews/fields/revisions/revisions-view.tsx

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { _n, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+// @ts-ignore
+import { store as editorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+export default function RevisionsView() {
+	const { lastRevisionId, revisionsCount, disableVisualRevisions } =
+		useSelect( ( select ) => {
+			const {
+				getCurrentPostLastRevisionId,
+				getCurrentPostRevisionsCount,
+				getEditorSettings,
+				// @ts-ignore
+			} = select( editorStore );
+			return {
+				lastRevisionId: getCurrentPostLastRevisionId(),
+				revisionsCount: getCurrentPostRevisionsCount(),
+				disableVisualRevisions:
+					// @ts-ignore
+					!! getEditorSettings().disableVisualRevisions,
+			};
+		}, [] );
+	const { setCurrentRevisionId } = unlock( useDispatch( editorStore ) );
+
+	const buttonProps = disableVisualRevisions
+		? {
+				href: addQueryArgs( 'revision.php', {
+					revision: lastRevisionId,
+				} ),
+		  }
+		: { onClick: () => setCurrentRevisionId( lastRevisionId ) };
+
+	return (
+		<Button
+			{ ...buttonProps }
+			variant="link"
+			text={ String( revisionsCount ) }
+			aria-label={ sprintf(
+				/* translators: %d: number of revisions. */
+				_n(
+					'Open revisions screen: %d revision',
+					'Open revisions screen: %d revisions',
+					revisionsCount
+				),
+				revisionsCount
+			) }
+		/>
+	);
+}

package/src/dataviews/store/private-actions.ts

@@ -37,9 +37,15 @@ import {
 	patternTitleField,
 	notesField,
 	scheduledDateField,
+	lastEditedDateField,
 	formatField,
 	postContentInfoField,
 	stickyField,
+	descriptionField,
+	readOnlyDescriptionField,
+	postsPerPageField,
+	siteDiscussionField,
+	postsPageTitleField,
 } from '@wordpress/fields';
 import {
 	altTextField,
@@ -47,7 +53,7 @@ import {
 	authorField as mediaAuthorField,
 	captionField,
 	dateAddedField,
-	descriptionField,
+	descriptionField as mediaDescriptionField,
 	filenameField,
 	filesizeField,
 	mediaDimensionsField,
@@ -164,7 +170,7 @@ const ORDERED_MEDIA_FIELDS = [
 	titleField,
 	altTextField,
 	captionField,
-	descriptionField,
+	mediaDescriptionField,
 ];
 
 export const registerPostTypeSchema =
@@ -262,12 +268,15 @@ export const registerPostTypeSchema =
 					currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
 					featuredImageField,
 				postTypeConfig.supports?.author && authorField,
-				statusField,
+				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+					statusField,
 				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
 					dateField,
 				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
 					scheduledDateField,
-				slugField,
+				lastEditedDateField,
+				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+					slugField,
 				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
 					postTypeConfig.supports?.excerpt &&
 					excerptField,
@@ -277,15 +286,27 @@ export const registerPostTypeSchema =
 				( postTypeConfig.supports?.comments ||
 					postTypeConfig.supports?.trackbacks ) &&
 					discussionField,
-				templateField,
+				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+					templateField,
 				postTypeConfig.supports?.[ 'post-formats' ] &&
 					! disablePostFormats &&
 					formatField,
 				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
 					postTypeConfig.supports?.editor &&
 					postContentInfoField,
-				passwordField,
+				! DESIGN_POST_TYPES.includes( postTypeConfig.slug ) &&
+					passwordField,
 				postTypeConfig.slug === 'post' && stickyField,
+				postTypeConfig.slug === 'wp_template' && descriptionField,
+				postTypeConfig.slug === 'wp_template' &&
+					readOnlyDescriptionField,
+				// The `home`/`index` template summary exposes a few fields that
+				// target other entities (`root/site` and the posts page).
+				// `DataFormPostSummary` overrides them to read/write the right
+				// entity and to control their visibility.
+				postTypeConfig.slug === 'wp_template' && postsPageTitleField,
+				postTypeConfig.slug === 'wp_template' && postsPerPageField,
+				postTypeConfig.slug === 'wp_template' && siteDiscussionField,
 				postTypeConfig.supports?.editor &&
 					postTypeConfig.viewable &&
 					postPreviewField,

package/src/store/private-selectors.js

@@ -25,6 +25,7 @@ import {
 	getRenderingMode,
 	getCurrentPost,
 	getCurrentPostType,
+	getCurrentPostId,
 	getEditorSettings,
 	getCurrentPostRevisionsCount,
 } from './selectors';
@@ -598,13 +599,22 @@ export const isCollaborationEnabledForCurrentPost = createRegistrySelector(
 		}
 
 		const currentPostType = getCurrentPostType( state );
+		const currentPostId = getCurrentPostId( state );
 		const entityConfig = select( coreStore ).getEntityConfig(
 			'postType',
 			currentPostType
 		);
+		const syncConfig = entityConfig?.syncConfig;
 
 		return Boolean(
-			entityConfig?.syncConfig && window._wpCollaborationEnabled
+			syncConfig &&
+				syncConfig.supportsPersistence &&
+				window._wpCollaborationEnabled &&
+				false !==
+					syncConfig.shouldSync?.(
+						`postType/${ currentPostType }`,
+						currentPostId
+					)
 		);
 	}
 );