@wordpress/editor 14.40.2-next.v.202602271551.0 → 14.40.2

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

@@ -23,7 +23,9 @@ import {
  */
 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';
@@ -103,6 +105,7 @@ const {
 	isIsolatedEditorKey,
 	deviceTypeKey,
 	isNavigationOverlayContextKey,
+	mediaUploadOnSuccessKey,
 } = unlock( privateApis );
 
 /**
@@ -137,6 +140,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		sectionRootClientId,
 		deviceType,
 		isNavigationOverlayContext,
+		isRevisionsMode,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -148,7 +152,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', {
@@ -216,6 +222,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 								postId
 						  )?.area === 'navigation-overlay'
 						: false,
+				isRevisionsMode: _isRevisionsMode(),
 			};
 		},
 		[ postType, postId, isLargeViewport, renderingMode ]
@@ -336,7 +343,11 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				? editMediaEntity
 				: undefined,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
+			[ mediaUploadOnSuccessKey ]: hasUploadPermissions
+				? mediaUploadOnSuccess
+				: undefined,
 			mediaSideload: hasUploadPermissions ? mediaSideload : undefined,
+			mediaFinalize: hasUploadPermissions ? mediaFinalize : undefined,
 			__experimentalBlockPatterns: blockPatterns,
 			[ selectBlockPatternsKey ]: ( select ) => {
 				const { hasFinishedResolution, getBlockPatternsForPostType } =
@@ -386,12 +397,21 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				'wp_block',
 				'wp_navigation',
 			].includes( postType ),
+			// 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,39 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import RevisionDiffPanel from '../revision-diff-panel';
+
+/**
+ * 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 changedAttributes =
+		block.attributes?.__revisionDiffStatus?.changedAttributes;
+
+	return (
+		<RevisionDiffPanel
+			title={ __( 'Changed attributes' ) }
+			entries={ changedAttributes }
+			initialOpen
+		/>
+	);
+}

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

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+
+/**
+ * Renders a panel of word-level diffs.
+ *
+ * @param {Object}  props
+ * @param {string}  props.title       Panel title.
+ * @param {Object}  props.entries     Map of key → diffWords parts arrays.
+ * @param {boolean} props.initialOpen Whether the panel starts open.
+ */
+export default function RevisionDiffPanel( { title, entries, initialOpen } ) {
+	if ( ! entries ) {
+		return null;
+	}
+
+	const fields = Object.entries( entries ).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={ title } initialOpen={ initialOpen }>
+			{ fields }
+		</PanelBody>
+	);
+}

package/src/components/revision-diff-panel/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/revision-fields-diff/index.js

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { diffWords } from 'diff/lib/diff/word';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import RevisionDiffPanel from '../revision-diff-panel';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Safely stringifies a value for display and comparison.
+ *
+ * @param {*} value The value to stringify.
+ * @return {string} The stringified value.
+ */
+function stringifyValue( value ) {
+	if ( value === null || value === undefined ) {
+		return '';
+	}
+	if ( typeof value === 'object' ) {
+		return JSON.stringify( value, null, 2 );
+	}
+	return String( value );
+}
+
+/**
+ * Panel that shows meta field diffs between the current revision and
+ * the previous revision in the document sidebar during revision mode.
+ */
+export default function RevisionFieldsDiffPanel() {
+	const { revision, previousRevision } = useSelect( ( select ) => {
+		const { getCurrentRevision, getPreviousRevision } = unlock(
+			select( editorStore )
+		);
+
+		return {
+			revision: getCurrentRevision(),
+			previousRevision: getPreviousRevision(),
+		};
+	}, [] );
+
+	const entries = useMemo( () => {
+		if ( ! revision ) {
+			return null;
+		}
+
+		const revisionMeta = revision.meta ?? {};
+		const previousMeta = previousRevision?.meta ?? {};
+		const allMetaKeys = new Set( [
+			...Object.keys( revisionMeta ),
+			...Object.keys( previousMeta ),
+		] );
+
+		const result = {};
+
+		for ( const key of allMetaKeys ) {
+			const revStr = stringifyValue( revisionMeta[ key ] );
+			const prevStr = stringifyValue( previousMeta[ key ] );
+
+			if ( ! revStr && ! prevStr ) {
+				continue;
+			}
+
+			result[ key ] = diffWords( prevStr, revStr );
+		}
+
+		if ( Object.keys( result ).length === 0 ) {
+			return null;
+		}
+
+		return result;
+	}, [ revision, previousRevision ] );
+
+	return (
+		<RevisionDiffPanel
+			title={ __( 'Meta' ) }
+			entries={ entries }
+			initialOpen={ false }
+		/>
+	);
+}

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

@@ -27,11 +27,13 @@ import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebar from '../plugin-sidebar';
 import PostSummary from './post-summary';
 import PostTaxonomiesPanel from '../post-taxonomies/panel';
+import RevisionFieldsDiffPanel from '../revision-fields-diff';
 import PostTransformPanel from '../post-transform-panel';
 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';
@@ -127,6 +129,7 @@ const SidebarContent = ( {
 							<PostSummary
 								onActionPerformed={ onActionPerformed }
 							/>
+							{ isRevisionsMode && <RevisionFieldsDiffPanel /> }
 							{ ! isRevisionsMode && (
 								<>
 									<PluginDocumentSettingPanel.Slot />
@@ -144,6 +147,7 @@ const SidebarContent = ( {
 				{ ! isAttachment && (
 					<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
 						<BlockInspector />
+						{ isRevisionsMode && <RevisionBlockDiffPanel /> }
 					</Tabs.TabPanel>
 				) }
 			</Tabs.Context.Provider>

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

@@ -375,6 +375,7 @@ function StyleBook(
  * @param {Function} props.onPathChange Callback when the path changes.
  * @param {Object}   props.userConfig   User configuration.
  * @param {boolean}  props.isStatic     Whether the stylebook is static or clickable.
+ * @param {Object}   props.settings     Optional editor settings to use instead of the editor store settings.
  * @return {Object} Style Book Preview component.
  */
 export const StyleBookPreview = ( {
@@ -382,10 +383,11 @@ export const StyleBookPreview = ( {
 	isStatic = false,
 	path,
 	onPathChange,
+	settings: settingsProp,
 } ) => {
 	const editorSettings = useSelect(
-		( select ) => select( editorStore ).getEditorSettings(),
-		[]
+		( select ) => settingsProp ?? select( editorStore ).getEditorSettings(),
+		[ settingsProp ]
 	);
 
 	const canUserUploadMedia = useSelect(