@wordpress/editor 14.41.0 → 14.41.2-next.v.202603161435.0

package/src/components/post-revisions-preview/revisions-canvas.js

@@ -7,13 +7,9 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { createBlock, parse } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useMemo, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -27,12 +23,8 @@ import {
 	unregisterDiffFormatTypes,
 } from './diff-format-types';
 import { useDiffMarkers } from './diff-markers';
-import { preserveClientIds } from './preserve-client-ids';
-import { diffRevisionContent } from './block-diff';
 
-const { ExperimentalBlockEditorProvider, usePrivateStyleOverride } = unlock(
-	blockEditorPrivateApis
-);
+const { usePrivateStyleOverride } = unlock( blockEditorPrivateApis );
 
 // SVG filter for removed blocks: grayscale + red tint
 const REVISION_REMOVED_FILTER_SVG = `
@@ -150,12 +142,11 @@ function CanvasContent( { showDiff } ) {
 
 /**
  * Canvas component that renders a post revision in read-only mode.
+ * Block preparation and settings are handled by the parent EditorProvider.
  *
- * @param {Object}  props          Component props.
- * @param {boolean} props.showDiff Whether to show diff highlighting.
  * @return {React.JSX.Element} The revisions canvas component.
  */
-export default function RevisionsCanvas( { showDiff } ) {
+export default function RevisionsCanvas() {
 	useEffect( () => {
 		registerDiffFormatTypes();
 		return () => {
@@ -163,83 +154,23 @@ export default function RevisionsCanvas( { showDiff } ) {
 		};
 	}, [] );
 
-	const { revision, previousRevision, postType, blockEditorSettings } =
-		useSelect( ( select ) => {
-			const {
-				getCurrentRevision,
-				getPreviousRevision,
-				getCurrentPostType,
-			} = unlock( select( editorStore ) );
-			return {
-				revision: getCurrentRevision(),
-				previousRevision: getPreviousRevision(),
-				postType: getCurrentPostType(),
-				blockEditorSettings: select( blockEditorStore ).getSettings(),
-			};
-		}, [] );
-
-	// Track previously rendered blocks to preserve clientIds between renders.
-	const previousBlocksRef = useRef( [] );
-
-	const blocks = useMemo( () => {
-		const currentContent = revision?.content?.raw ?? '';
-
-		let parsedBlocks;
-		if ( showDiff ) {
-			const previousContent = previousRevision?.content?.raw || '';
-			// diffRevisionContent handles both normal diffing and the case
-			// where there's no previous revision (oldest revision shows all as added).
-			parsedBlocks = diffRevisionContent(
-				currentContent,
-				previousContent
-			);
-		} else {
-			// When diff is disabled, just parse the current revision content.
-			parsedBlocks = parse( currentContent );
-		}
-
-		if ( postType === 'wp_navigation' ) {
-			parsedBlocks = [
-				createBlock(
-					'core/navigation',
-					{ templateLock: false },
-					parsedBlocks
-				),
-			];
-		}
-
-		// Preserve clientIds from previous render to prevent React unmount/remount.
-		const blocksWithStableIds = preserveClientIds(
-			parsedBlocks,
-			previousBlocksRef.current
+	const { revision, showDiff } = useSelect( ( select ) => {
+		const { getCurrentRevision, isShowingRevisionDiff } = unlock(
+			select( editorStore )
 		);
-
-		// Update ref for next render.
-		previousBlocksRef.current = blocksWithStableIds;
-
-		return blocksWithStableIds;
-	}, [
-		revision?.content?.raw,
-		previousRevision?.content?.raw,
-		postType,
-		showDiff,
-	] );
-
-	const settings = useMemo(
-		() => ( {
-			...blockEditorSettings,
-			isPreviewMode: true,
-		} ),
-		[ blockEditorSettings ]
-	);
+		return {
+			revision: getCurrentRevision(),
+			showDiff: isShowingRevisionDiff(),
+		};
+	}, [] );
 
 	return revision ? (
-		<ExperimentalBlockEditorProvider value={ blocks } settings={ settings }>
+		<>
 			<DiffStyleOverrides showDiff={ showDiff } />
 			<div className="editor-revisions-canvas__content">
 				<CanvasContent showDiff={ showDiff } />
 			</div>
-		</ExperimentalBlockEditorProvider>
+		</>
 	) : (
 		<div className="editor-revisions-canvas__loading">
 			<Spinner />

package/src/components/post-revisions-preview/revisions-slider.js

@@ -35,7 +35,12 @@ function RevisionsSlider() {
 			}
 
 			const entityConfig = getEntityConfig( 'postType', postType );
-			const query = { per_page: -1, context: 'edit' };
+			const query = {
+				per_page: -1,
+				context: 'edit',
+				_fields:
+					'id,date,author,meta,title.raw,excerpt.raw,content.raw',
+			};
 			return {
 				revisions: getRevisions( 'postType', postType, postId, query ),
 				isLoading: isResolving( 'getRevisions', [

package/src/components/post-url/panel.js

@@ -90,6 +90,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 	return (
 		<Button
 			size="compact"
+			className="editor-post-url__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
 			aria-label={

package/src/components/post-url/style.scss

@@ -47,6 +47,11 @@
 	padding-inline-start: 0 !important;
 }
 
+.editor-post-url__panel-toggle,
+.editor-post-parent__panel-toggle {
+	word-break: break-word;
+}
+
 .editor-post-url__intro {
 	margin: 0;
 }

package/src/components/preferences-modal/index.js

@@ -120,6 +120,24 @@ function PreferencesModalContents( { extraSections = {} } ) {
 									) }
 									label={ __( 'Show starter patterns' ) }
 								/>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="showCollaborationCursor"
+									help={ __(
+										'Show your own avatar inside blocks during collaborative editing sessions.'
+									) }
+									label={ __( 'Show avatar in blocks' ) }
+								/>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="showCollaborationNotifications"
+									help={ __(
+										'Show notifications when collaborators join, leave, or save the post.'
+									) }
+									label={ __(
+										'Show collaboration notifications'
+									) }
+								/>
 							</PreferencesModalSection>
 							<PreferencesModalSection
 								title={ __( 'Document settings' ) }

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,6 +23,7 @@ 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 { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -103,6 +104,8 @@ const {
 	isIsolatedEditorKey,
 	deviceTypeKey,
 	isNavigationOverlayContextKey,
+	isNavigationPostEditorKey,
+	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 ]
@@ -307,12 +314,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,
@@ -324,7 +328,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			hasFixedToolbar,
 			isDistractionFree,
 			keepCaretInsideBlock,
-			onNavigateToEntityRecord: settings.onNavigateToEntityRecord,
 			[ getMediaSelectKey ]: ( select, attachmentId ) => {
 				return select( coreStore ).getEntityRecord(
 					'postType',
@@ -336,6 +339,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				? editMediaEntity
 				: undefined,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
+			[ mediaUploadOnSuccessKey ]: hasUploadPermissions
+				? mediaUploadOnSuccess
+				: undefined,
 			mediaSideload: hasUploadPermissions ? mediaSideload : undefined,
 			__experimentalBlockPatterns: blockPatterns,
 			[ selectBlockPatternsKey ]: ( select ) => {
@@ -386,12 +392,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;
+}