@wordpress/editor 14.41.1-next.v.202603102151.0 → 14.42.0

package/src/components/provider/disable-non-page-content-blocks.js

@@ -8,21 +8,33 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import usePostContentBlocks from './use-post-content-blocks';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import usePostContentBlockTypes from './use-post-content-block-types';
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
-	const contentOnlyIds = usePostContentBlocks();
-	const { templateParts } = useSelect( ( select ) => {
-		const { getBlocksByName } = select( blockEditorStore );
-		return {
-			templateParts: getBlocksByName( 'core/template-part' ),
-		};
-	}, [] );
-	const disabledIds = useSelect(
+	const postContentBlockTypes = usePostContentBlockTypes();
+	const { contentOnlyIds, templateParts } = useSelect(
+		( select ) => {
+			const { getPostBlocksByName } = unlock( select( editorStore ) );
+			const { getBlocksByName } = select( blockEditorStore );
+			return {
+				contentOnlyIds: getPostBlocksByName( postContentBlockTypes ),
+				templateParts: getBlocksByName( 'core/template-part' ),
+			};
+		},
+		[ postContentBlockTypes ]
+	);
+	// This is a separate `useSelect` because `templatePartChildren` is
+	// derived via flatMap, which always produces a new array. Combining it
+	// with the above subscription causes an infinite render loop: the new
+	// array fails useSelect's shallow equality check → re-render → effect
+	// fires setBlockEditingMode → store changes → useSelect re-runs → …
+	const templatePartChildren = useSelect(
 		( select ) => {
 			const { getBlockOrder } = select( blockEditorStore );
 			return templateParts.flatMap( ( clientId ) =>
@@ -34,14 +46,11 @@ export default function DisableNonPageContentBlocks() {
 
 	const registry = useRegistry();
 
-	// The code here is split into multiple `useEffects` calls.
-	// This is done to avoid setting/unsetting block editing modes multiple times unnecessarily.
-	//
-	// For example, the block editing mode of the root block (clientId: '') only
-	// needs to be set once, not when `contentOnlyIds` or `disabledIds` change.
-	//
-	// It's also unlikely that these different types of blocks are being inserted
-	// or removed at the same time, so using different effects reflects that.
+	// The effects below are split so that changes to one group of blocks
+	// don't cause unnecessary set/unset cycles for the others. For example,
+	// the root block ('') editing mode only needs to be set once.
+	// Child blocks of templates and templateParts are also loaded separately,
+	// so these are kept in separate effects.
 	useEffect( () => {
 		const { setBlockEditingMode, unsetBlockEditingMode } =
 			registry.dispatch( blockEditorStore );
@@ -53,25 +62,6 @@ export default function DisableNonPageContentBlocks() {
 		};
 	}, [ registry ] );
 
-	useEffect( () => {
-		const { setBlockEditingMode, unsetBlockEditingMode } =
-			registry.dispatch( blockEditorStore );
-
-		registry.batch( () => {
-			for ( const clientId of contentOnlyIds ) {
-				setBlockEditingMode( clientId, 'contentOnly' );
-			}
-		} );
-
-		return () => {
-			registry.batch( () => {
-				for ( const clientId of contentOnlyIds ) {
-					unsetBlockEditingMode( clientId );
-				}
-			} );
-		};
-	}, [ contentOnlyIds, registry ] );
-
 	useEffect( () => {
 		const { setBlockEditingMode, unsetBlockEditingMode } =
 			registry.dispatch( blockEditorStore );
@@ -95,20 +85,32 @@ export default function DisableNonPageContentBlocks() {
 		const { setBlockEditingMode, unsetBlockEditingMode } =
 			registry.dispatch( blockEditorStore );
 
+		const contentOnlySet = new Set( contentOnlyIds );
+
 		registry.batch( () => {
-			for ( const clientId of disabledIds ) {
-				setBlockEditingMode( clientId, 'disabled' );
+			for ( const clientId of contentOnlyIds ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
+			for ( const clientId of templatePartChildren ) {
+				if ( ! contentOnlySet.has( clientId ) ) {
+					setBlockEditingMode( clientId, 'disabled' );
+				}
 			}
 		} );
 
 		return () => {
 			registry.batch( () => {
-				for ( const clientId of disabledIds ) {
+				for ( const clientId of contentOnlyIds ) {
 					unsetBlockEditingMode( clientId );
 				}
+				for ( const clientId of templatePartChildren ) {
+					if ( ! contentOnlySet.has( clientId ) ) {
+						unsetBlockEditingMode( clientId );
+					}
+				}
 			} );
 		};
-	}, [ disabledIds, registry ] );
+	}, [ contentOnlyIds, templatePartChildren, registry ] );
 
 	return null;
 }

package/src/components/provider/index.js

@@ -34,6 +34,7 @@ import { unlock } from '../../lock-unlock';
 import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
 import NavigationBlockEditingMode from './navigation-block-editing-mode';
 import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
+import { useRevisionBlocks } from './use-revision-blocks';
 import useCommands from '../commands';
 import useUploadSaveLock from './use-upload-save-lock';
 import BlockRemovalWarnings from '../block-removal-warnings';
@@ -78,6 +79,7 @@ const NON_CONTEXTUAL_POST_TYPES = [
  * @return {Array} Block editor props.
  */
 function useBlockEditorProps( post, template, mode ) {
+	const revisionBlocks = useRevisionBlocks();
 	const rootLevelPost = mode === 'template-locked' ? 'template' : 'post';
 	const [ postBlocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
@@ -116,6 +118,11 @@ function useBlockEditorProps( post, template, mode ) {
 		return postBlocks;
 	}, [ maybeNavigationBlocks, rootLevelPost, templateBlocks, postBlocks ] );
 
+	// In revisions mode, use the revision blocks and disable editing.
+	if ( revisionBlocks !== null ) {
+		return [ revisionBlocks, noop, noop ];
+	}
+
 	// Handle fallback to postBlocks outside of the above useMemo, to ensure
 	// that constructed block templates that call `createBlock` are not generated
 	// too frequently. This ensures that clientIds are stable.
@@ -177,6 +184,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			mode,
 			defaultMode,
 			postTypeEntities,
+			isInRevisionsMode,
+			currentRevisionId,
 		} = useSelect(
 			( select ) => {
 				const {
@@ -184,6 +193,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					getRenderingMode,
 					__unstableIsEditorReady,
 					getDefaultRenderingMode,
+					isRevisionsMode: _isRevisionsMode,
+					getCurrentRevisionId: _getCurrentRevisionId,
 				} = unlock( select( editorStore ) );
 				const { getEntitiesConfig, getEntityRecordEdits } =
 					select( coreStore );
@@ -224,6 +235,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 						post.type === 'wp_template'
 							? getEntitiesConfig( 'postType' )
 							: null,
+					isInRevisionsMode: _isRevisionsMode(),
+					currentRevisionId: _getCurrentRevisionId(),
 				};
 			},
 			[ post.type, post.id, hasTemplate ]
@@ -418,14 +431,19 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					kind="postType"
 					type={ post.type }
 					id={ post.id }
+					revisionId={ currentRevisionId ?? undefined }
 				>
 					<BlockContextProvider value={ defaultBlockContext }>
 						<BlockEditorProviderComponent
 							value={ blocks }
 							onChange={ onChange }
 							onInput={ onInput }
-							selection={ selection }
-							onChangeSelection={ onChangeSelection }
+							selection={
+								isInRevisionsMode ? undefined : selection
+							}
+							onChangeSelection={
+								isInRevisionsMode ? noop : onChangeSelection
+							}
 							settings={ blockEditorSettings }
 							useSubRegistry={ false }
 						>

package/src/components/provider/use-block-editor-settings.js

@@ -25,6 +25,7 @@ import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import mediaUploadOnSuccess from '../../utils/media-upload/on-success';
 import { default as mediaSideload } from '../../utils/media-sideload';
+import { default as mediaFinalize } from '../../utils/media-finalize';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
@@ -104,6 +105,7 @@ const {
 	isIsolatedEditorKey,
 	deviceTypeKey,
 	isNavigationOverlayContextKey,
+	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
 } = unlock( privateApis );
 
@@ -139,6 +141,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		sectionRootClientId,
 		deviceType,
 		isNavigationOverlayContext,
+		isRevisionsMode,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -150,7 +153,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			} = select( coreStore );
 			const { get } = select( preferencesStore );
 			const { getBlockTypes } = select( blocksStore );
-			const { getDeviceType } = unlock( select( editorStore ) );
+			const { getDeviceType, isRevisionsMode: _isRevisionsMode } = unlock(
+				select( editorStore )
+			);
 			const { getBlocksByName, getBlockAttributes } =
 				select( blockEditorStore );
 			const siteSettings = canUser( 'read', {
@@ -218,6 +223,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 								postId
 						  )?.area === 'navigation-overlay'
 						: false,
+				isRevisionsMode: _isRevisionsMode(),
 			};
 		},
 		[ postType, postId, isLargeViewport, renderingMode ]
@@ -309,12 +315,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	return useMemo( () => {
 		const blockEditorSettings = {
 			...Object.fromEntries(
-				Object.entries( settings )
-					.filter( ( [ key ] ) =>
-						BLOCK_EDITOR_SETTINGS.includes( key )
-					)
-					// Exclude onNavigateToEntityRecord since we're wrapping it
-					.filter( ( [ key ] ) => key !== 'onNavigateToEntityRecord' )
+				Object.entries( settings ).filter( ( [ key ] ) =>
+					BLOCK_EDITOR_SETTINGS.includes( key )
+				)
 			),
 			[ globalStylesDataKey ]: globalStylesData,
 			[ globalStylesLinksDataKey ]: globalStylesLinksData,
@@ -326,7 +329,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			hasFixedToolbar,
 			isDistractionFree,
 			keepCaretInsideBlock,
-			onNavigateToEntityRecord: settings.onNavigateToEntityRecord,
 			[ getMediaSelectKey ]: ( select, attachmentId ) => {
 				return select( coreStore ).getEntityRecord(
 					'postType',
@@ -342,6 +344,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				? mediaUploadOnSuccess
 				: undefined,
 			mediaSideload: hasUploadPermissions ? mediaSideload : undefined,
+			mediaFinalize: hasUploadPermissions ? mediaFinalize : undefined,
 			__experimentalBlockPatterns: blockPatterns,
 			[ selectBlockPatternsKey ]: ( select ) => {
 				const { hasFinishedResolution, getBlockPatternsForPostType } =
@@ -391,12 +394,22 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				'wp_block',
 				'wp_navigation',
 			].includes( postType ),
+			[ isNavigationPostEditorKey ]: postType === 'wp_navigation',
+			// When in template-locked mode (e.g., "Show Template" in the post editor),
+			// don't treat template parts as contentOnly sections.
+			disableContentOnlyForTemplateParts:
+				renderingMode === 'template-locked',
 			...( deviceType ? { [ deviceTypeKey ]: deviceType } : {} ),
 			[ isNavigationOverlayContextKey ]: isNavigationOverlayContext,
 		};
 
+		if ( isRevisionsMode ) {
+			blockEditorSettings.isPreviewMode = true;
+		}
+
 		return blockEditorSettings;
 	}, [
+		isRevisionsMode,
 		allowedBlockTypes,
 		allowRightClickOverrides,
 		focusMode,

package/src/components/provider/use-post-content-block-types.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+const POST_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
+/**
+ * Returns the list of post content block types, including any added via the
+ * `editor.postContentBlockTypes` filter. The result is memoized so it can be
+ * used as a stable dependency in `useSelect` calls.
+ *
+ * @return {string[]} Block type names considered post content.
+ */
+export default function usePostContentBlockTypes() {
+	return useMemo(
+		() => [
+			...applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
+			),
+		],
+		[]
+	);
+}

package/src/components/provider/use-revision-blocks.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo, useRef } from '@wordpress/element';
+import { createBlock, parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { diffRevisionContent } from '../post-revisions-preview/block-diff';
+import { preserveClientIds } from '../post-revisions-preview/preserve-client-ids';
+
+/**
+ * Hook that computes revision blocks when in revisions mode.
+ *
+ * Returns `null` when not in revisions mode, `[]` when loading,
+ * or the computed blocks array when ready.
+ *
+ * @return {Array|null} The revision blocks, or null if not in revisions mode.
+ */
+export function useRevisionBlocks() {
+	const {
+		isInRevisionsMode,
+		showDiff,
+		revision,
+		previousRevision,
+		postType,
+	} = useSelect( ( select ) => {
+		const {
+			isRevisionsMode,
+			isShowingRevisionDiff,
+			getCurrentRevision,
+			getPreviousRevision,
+		} = unlock( select( editorStore ) );
+		const { getCurrentPostType } = select( editorStore );
+
+		const inRevisions = isRevisionsMode();
+		return {
+			isInRevisionsMode: inRevisions,
+			showDiff: isShowingRevisionDiff(),
+			revision: inRevisions ? getCurrentRevision() : undefined,
+			previousRevision: inRevisions ? getPreviousRevision() : undefined,
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	// Track previously rendered blocks to preserve clientIds between renders.
+	const previousBlocksRef = useRef( [] );
+
+	const blocks = useMemo( () => {
+		if ( ! isInRevisionsMode ) {
+			// Clear the ref when exiting revisions mode.
+			previousBlocksRef.current = [];
+			return null;
+		}
+
+		// Revision not loaded yet.
+		if ( ! revision ) {
+			return [];
+		}
+
+		const currentContent = revision?.content?.raw ?? '';
+
+		let parsedBlocks;
+		if ( showDiff ) {
+			const previousContent = previousRevision?.content?.raw || '';
+			parsedBlocks = diffRevisionContent(
+				currentContent,
+				previousContent
+			);
+		} else {
+			parsedBlocks = parse( currentContent );
+		}
+
+		if ( postType === 'wp_navigation' ) {
+			parsedBlocks = [
+				createBlock(
+					'core/navigation',
+					{ templateLock: false },
+					parsedBlocks
+				),
+			];
+		}
+
+		const blocksWithStableIds = preserveClientIds(
+			parsedBlocks,
+			previousBlocksRef.current
+		);
+		previousBlocksRef.current = blocksWithStableIds;
+
+		return blocksWithStableIds;
+	}, [
+		isInRevisionsMode,
+		revision,
+		revision?.content?.raw,
+		previousRevision?.content?.raw,
+		postType,
+		showDiff,
+	] );
+
+	return blocks;
+}

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

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+
+/**
+ * Panel that shows changed block attributes for the selected block
+ * when viewing revisions.
+ */
+export default function RevisionBlockDiffPanel() {
+	const { block } = useSelect( ( select ) => {
+		const { getSelectedBlock } = select( blockEditorStore );
+		return {
+			block: getSelectedBlock(),
+		};
+	}, [] );
+
+	if ( ! block ) {
+		return null;
+	}
+
+	const diffInfo = block.attributes?.__revisionDiffStatus;
+	const changedAttributes = diffInfo?.changedAttributes;
+
+	if ( ! changedAttributes ) {
+		return null;
+	}
+
+	const fields = Object.entries( changedAttributes ).map(
+		( [ key, parts ] ) => (
+			<PostPanelRow key={ key } label={ key }>
+				<span className="editor-revision-fields-diff__value">
+					{ parts.map( ( part, index ) => {
+						if ( part.added ) {
+							return (
+								<ins
+									key={ index }
+									className="editor-revision-fields-diff__added"
+								>
+									{ part.value }
+								</ins>
+							);
+						}
+						if ( part.removed ) {
+							return (
+								<del
+									key={ index }
+									className="editor-revision-fields-diff__removed"
+								>
+									{ part.value }
+								</del>
+							);
+						}
+						return <span key={ index }>{ part.value }</span>;
+					} ) }
+				</span>
+			</PostPanelRow>
+		)
+	);
+
+	return (
+		<PanelBody title={ __( 'Changed attributes' ) } initialOpen>
+			{ fields }
+		</PanelBody>
+	);
+}

package/src/components/revision-block-diff/style.scss

@@ -0,0 +1,13 @@
+.editor-revision-fields-diff__value {
+	word-break: break-word;
+}
+
+.editor-revision-fields-diff__added {
+	background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
+	text-decoration: none;
+}
+
+.editor-revision-fields-diff__removed {
+	text-decoration: line-through;
+	color: #d63638;
+}

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

@@ -17,6 +17,7 @@ import { store as editorStore } from '../../store';
 import PostTrash from '../post-trash';
 import usePostFields from '../post-fields';
 import { unlock } from '../../lock-unlock';
+import { usePostTemplatePanelMode } from '../post-template/hooks';
 
 const form = {
 	layout: {
@@ -48,10 +49,10 @@ const form = {
 				'password',
 			],
 		},
-		'author',
 		'date',
 		'slug',
-		'parent',
+		'author',
+		'template',
 		{
 			id: 'discussion',
 			label: __( 'Discussion' ),
@@ -63,7 +64,7 @@ const form = {
 				'ping_status',
 			],
 		},
-		'template',
+		'parent',
 		'format',
 	],
 };
@@ -93,23 +94,67 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 		[ postType, postId ]
 	);
 
+	const templatePanelMode = usePostTemplatePanelMode();
+
+	const availableTemplates = useSelect( ( select ) => {
+		if ( select( coreDataStore ).getCurrentTheme()?.is_block_theme ) {
+			return null;
+		}
+		return (
+			select( editorStore ).getEditorSettings().availableTemplates ?? {}
+		);
+	}, [] );
+
+	// Augment record only when needed(not a block theme with available templates).
+	const augmentedRecord = useMemo( () => {
+		if ( ! record || ! availableTemplates ) {
+			return record;
+		}
+		return {
+			...record,
+			available_templates: availableTemplates,
+		};
+	}, [ record, availableTemplates ] );
+
 	const { editEntityRecord } = useDispatch( coreDataStore );
 
 	const _fields = usePostFields( { postType } );
 	const fields = useMemo(
 		() =>
-			_fields?.map( ( field ) => {
-				if ( field.id === 'status' ) {
-					return {
-						...field,
-						elements: field.elements.filter(
-							( element ) => element.value !== 'trash'
-						),
-					};
-				}
-				return field;
-			} ),
-		[ _fields ]
+			_fields
+				?.map( ( field ) => {
+					if ( field.id === 'status' ) {
+						return {
+							...field,
+							elements: field.elements.filter(
+								( element ) => element.value !== 'trash'
+							),
+						};
+					}
+					if ( field.id === 'template' ) {
+						// `usePostTemplatePanelMode` is reused in the Post Template panel to match
+						// the existing behavior. If the panel rendered nothing we should exclude the
+						// template field from the form.
+						if ( ! templatePanelMode ) {
+							return null;
+						}
+						// In classic themes without available templates we need to make the field read-only.
+						if (
+							templatePanelMode === 'classic' &&
+							Object.keys( availableTemplates ?? {} ).length === 0
+						) {
+							return {
+								...field,
+								readOnly: true,
+								render: () => __( 'Default template' ),
+							};
+						}
+						return field;
+					}
+					return field;
+				} )
+				.filter( Boolean ),
+		[ _fields, templatePanelMode, availableTemplates ]
 	);
 
 	const onChange = ( edits ) => {
@@ -137,7 +182,7 @@ export default function DataFormPostSummary( { onActionPerformed } ) {
 					onActionPerformed={ onActionPerformed }
 				/>
 				<DataForm
-					data={ record }
+					data={ augmentedRecord }
 					fields={ fields }
 					form={ form }
 					onChange={ onChange }

package/src/components/sidebar/header.js

@@ -55,7 +55,7 @@ const SidebarHeader = ( _, ref ) => {
 			>
 				{ documentLabel }
 			</Tabs.Tab>
-			{ ! isAttachment && ! isRevisionsMode && (
+			{ ! isAttachment && (
 				<Tabs.Tab
 					tabId={ sidebars.block }
 					// Used for focus management in the SettingsSidebar component.

package/src/components/sidebar/index.js

@@ -32,6 +32,7 @@ import SidebarHeader from './header';
 import TemplateContentPanel from '../template-content-panel';
 import TemplatePartContentPanel from '../template-part-content-panel';
 import { MediaMetadataPanel } from '../media';
+import RevisionBlockDiffPanel from '../revision-block-diff';
 import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
 import { sidebars } from './constants';
 import { unlock } from '../../lock-unlock';
@@ -144,6 +145,7 @@ const SidebarContent = ( {
 				{ ! isAttachment && (
 					<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 						<BlockInspector />
+						{ isRevisionsMode && <RevisionBlockDiffPanel /> }
 					</Tabs.TabPanel>
 				) }
 			</Tabs.Context.Provider>