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

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

@@ -6,13 +6,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Platform,
-	useCallback,
-	useContext,
-	useEffect,
-	useRef,
-} from '@wordpress/element';
+import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
 import { isRTL, __, _x } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
@@ -33,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';
@@ -47,10 +40,7 @@ import {
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
-	web: true,
-	native: false,
-} );
+const SIDEBAR_ACTIVE_BY_DEFAULT = true;
 
 const SidebarContent = ( {
 	tabName,
@@ -105,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

@@ -17,9 +17,9 @@ import {
 import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 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';
 
 /**
@@ -127,7 +127,15 @@ export default function TemplateActionsPanelContent() {
 								tabIndex={ 0 }
 								aria-label={ tooltipText }
 								onClick={ () => setIsSwapModalOpen( true ) }
-								onKeyPress={ () => setIsSwapModalOpen( true ) }
+								onKeyDown={ ( event ) => {
+									if (
+										event.keyCode === ENTER ||
+										event.keyCode === SPACE
+									) {
+										event.preventDefault();
+										setIsSwapModalOpen( true );
+									}
+								} }
 							>
 								{ previewContent }
 							</div>

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/components/upload-progress-snackbar/README.md

@@ -0,0 +1,26 @@
+# UploadProgressSnackbar
+
+`UploadProgressSnackbar` manages a snackbar notice that shows media upload progress. It creates and updates a notice via the notices store, so the snackbar positions and stacks with every other snackbar in the editor.
+
+The component reads from two sources so it works for both upload paths:
+
+-   **`@wordpress/upload-media`** — the client-side media processing (CSM) path. Only counts original user-uploaded files, ignoring generated subsizes and thumbnails (items with a `parentId`).
+-   **Editor-local tracker** — populated by the editor's `mediaUpload` wrapper for the traditional (non-CSM) upload path (e.g. Safari, or when a filter disables CSM).
+
+While uploads are in progress the snackbar shows a spinner to the left of the text. When the last upload finishes, the spinner is replaced with a green checkmark for a brief moment before the snackbar dismisses.
+
+The component renders nothing itself — it is a controller that manages a notice.
+
+## Usage
+
+```jsx
+import { UploadProgressSnackbar } from '@wordpress/editor';
+
+// Mount anywhere in the editor — it doesn't render DOM, just manages a notice.
+<UploadProgressSnackbar />
+```
+
+## Accessibility
+
+-   The component calls `wp.a11y.speak()` once when uploads start and once when they complete, avoiding per-tick chatter.
+-   The snackbar is created with `speak: false` to prevent the notices store from re-announcing on every text update.