@wordpress/editor 14.45.2-next.v.202605131032.0 → 14.47.0

package/src/components/start-page-options/index.js

@@ -144,9 +144,10 @@ function StartPageOptionsModal( { onClose } ) {
 
 export default function StartPageOptions() {
 	const [ isOpen, setIsOpen ] = useState( false );
-	const { isEditedPostDirty, isEditedPostEmpty } = useSelect( editorStore );
+	const { isEditedPostEmpty } = useSelect( editorStore );
+	const { getEntityRecordNonTransientEdits } = useSelect( coreStore );
 	const { isModalActive } = useSelect( interfaceStore );
-	const { enabled, postId } = useSelect( ( select ) => {
+	const { enabled, postType, postId } = useSelect( ( select ) => {
 		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
 		const choosePatternModalEnabled = select( preferencesStore ).get(
 			'core',
@@ -154,6 +155,7 @@ export default function StartPageOptions() {
 		);
 		const currentPostType = getCurrentPostType();
 		return {
+			postType: currentPostType,
 			postId: getCurrentPostId(),
 			enabled:
 				choosePatternModalEnabled &&
@@ -166,7 +168,19 @@ export default function StartPageOptions() {
 	// Note: The `postId` ensures the effect re-runs when pages are switched without remounting the component.
 	// Examples: changing pages in the List View, creating a new page via Command Palette.
 	useEffect( () => {
-		const isFreshPage = ! isEditedPostDirty() && isEditedPostEmpty();
+		// Read non-transient edits directly. `isEditedPostDirty` /
+		// `hasEditsForEntityRecord` also return true while the CRDT
+		// sync manager's phantom save (fired off `receiveEntityRecords`
+		// at boot) is in flight, which would suppress the modal.
+		const hasEdits =
+			Object.keys(
+				getEntityRecordNonTransientEdits(
+					'postType',
+					postType,
+					postId
+				) ?? {}
+			).length > 0;
+		const isFreshPage = ! hasEdits && isEditedPostEmpty();
 		// Prevents immediately opening when features is enabled via preferences modal.
 		const isPreferencesModalActive = isModalActive( 'editor/preferences' );
 		if ( ! enabled || ! isFreshPage || isPreferencesModalActive ) {
@@ -177,8 +191,9 @@ export default function StartPageOptions() {
 		setIsOpen( true );
 	}, [
 		enabled,
+		postType,
 		postId,
-		isEditedPostDirty,
+		getEntityRecordNonTransientEdits,
 		isEditedPostEmpty,
 		isModalActive,
 	] );

package/src/components/start-template-options/index.js

@@ -173,18 +173,25 @@ export default function StartTemplateOptions() {
 				select( editorStore );
 			const _postType = getCurrentPostType();
 			const _postId = getCurrentPostId();
-			const { getEditedEntityRecord, hasEditsForEntityRecord } =
+			const { getEditedEntityRecord, getEntityRecordNonTransientEdits } =
 				select( coreStore );
 			const templateRecord = getEditedEntityRecord(
 				'postType',
 				_postType,
 				_postId
 			);
-			const hasEdits = hasEditsForEntityRecord(
-				'postType',
-				_postType,
-				_postId
-			);
+			// Read non-transient edits directly. `isEditedPostDirty` /
+			// `hasEditsForEntityRecord` also return true while the CRDT
+			// sync manager's phantom save (fired off `receiveEntityRecords`
+			// at boot) is in flight, which would suppress the modal.
+			const hasEdits =
+				Object.keys(
+					getEntityRecordNonTransientEdits(
+						'postType',
+						_postType,
+						_postId
+					) ?? {}
+				).length > 0;
 
 			return {
 				shouldOpenModal:

package/src/components/styles-canvas/style-book.js

@@ -1,28 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { useMemo, forwardRef } from '@wordpress/element';
+import { useGlobalStylesRevisions } from '@wordpress/global-styles-ui';
 
 /**
  * Internal dependencies
  */
 import StyleBook from '../style-book';
 import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+import { useGlobalStyles } from '../global-styles/hooks';
 
-/**
- * Style Book content component for global styles.
- * Provides the business logic for StyleBook behavior in the global styles context.
- *
- * @param {Object}             props              Component props.
- * @param {string}             props.path         Current path in global styles.
- * @param {Function}           props.onPathChange Callback when the path changes.
- * @param {React.ForwardedRef} ref                Ref to the Style Book component.
- * @return {React.JSX.Element} The Style Book component.
- */
-function StylesCanvasStyleBook( { path, onPathChange }, ref ) {
+function StyleBookWithNavigation( {
+	path,
+	onPathChange,
+	userConfig,
+	forwardedRef,
+} ) {
 	return (
 		<StyleBook
-			ref={ ref }
+			ref={ forwardedRef }
+			path={ path }
+			userConfig={ userConfig }
 			isSelected={ ( blockName ) =>
 				// Match '/blocks/core%2Fbutton' and
 				// '/blocks/core%2Fbutton/typography', but not
@@ -54,4 +53,67 @@ function StylesCanvasStyleBook( { path, onPathChange }, ref ) {
 		/>
 	);
 }
+
+function StylesCanvasRevisionStyleBook( { path, onPathChange, forwardedRef } ) {
+	const { user: userConfig } = useGlobalStyles();
+	const { revisions, isLoading } = useGlobalStylesRevisions();
+
+	const revisionId = useMemo( () => {
+		const match = path?.match( /^\/revisions\/(.+)$/ );
+		return match ? match[ 1 ] : null;
+	}, [ path ] );
+
+	const selectedRevision = useMemo( () => {
+		if ( ! revisionId || ! revisions.length ) {
+			return null;
+		}
+		return revisions.find(
+			( revision ) => String( revision.id ) === String( revisionId )
+		);
+	}, [ revisionId, revisions ] );
+
+	if ( isLoading ) {
+		return null;
+	}
+
+	return (
+		<StyleBookWithNavigation
+			forwardedRef={ forwardedRef }
+			path={ path }
+			onPathChange={ onPathChange }
+			userConfig={ selectedRevision || userConfig }
+		/>
+	);
+}
+
+/**
+ * Style Book content component for global styles.
+ * Provides the business logic for StyleBook behavior in the global styles context.
+ *
+ * @param {Object}             props              Component props.
+ * @param {string}             props.path         Current path in global styles.
+ * @param {Function}           props.onPathChange Callback when the path changes.
+ * @param {React.ForwardedRef} ref                Ref to the Style Book component.
+ * @return {React.JSX.Element} The Style Book component.
+ */
+function StylesCanvasStyleBook( { path, onPathChange }, ref ) {
+	if ( path?.startsWith( '/revisions' ) ) {
+		return (
+			<StylesCanvasRevisionStyleBook
+				forwardedRef={ ref }
+				path={ path }
+				onPathChange={ onPathChange }
+			/>
+		);
+	}
+
+	return (
+		<StyleBookWithNavigation
+			forwardedRef={ ref }
+			path={ path }
+			onPathChange={ onPathChange }
+		/>
+	);
+}
+
 export default forwardRef( StylesCanvasStyleBook );

package/src/components/sync-connection-error-modal/index.tsx

@@ -25,7 +25,10 @@ import { __, sprintf, _n } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getSyncErrorMessages } from '../../utils/sync-error-messages';
+import {
+	getSyncErrorMessages,
+	PROTOCOL_MISMATCH,
+} from '../../utils/sync-error-messages';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useRetryCountdown } from './use-retry-countdown';
@@ -50,17 +53,17 @@ export function SyncConnectionErrorModal() {
 
 	const { connectionStatus, isCollaborationEnabled, postType } = useSelect(
 		( selectFn ) => {
-			const currentPostType =
-				selectFn( editorStore ).getCurrentPostType();
+			const { getSyncConnectionStatus, getPostType } = unlock(
+				selectFn( coreDataStore )
+			);
+			const { getCurrentPostType, isCollaborationEnabledForCurrentPost } =
+				unlock( selectFn( editorStore ) );
+			const currentPostType = getCurrentPostType();
 			return {
-				connectionStatus:
-					selectFn( coreDataStore ).getSyncConnectionStatus() || null,
-				isCollaborationEnabled:
-					selectFn(
-						editorStore
-					).isCollaborationEnabledForCurrentPost(),
+				connectionStatus: getSyncConnectionStatus() || null,
+				isCollaborationEnabled: isCollaborationEnabledForCurrentPost(),
 				postType: currentPostType
-					? selectFn( coreDataStore ).getPostType( currentPostType )
+					? getPostType( currentPostType )
 					: null,
 			};
 		},
@@ -125,7 +128,18 @@ export function SyncConnectionErrorModal() {
 		}
 	}, [ connectionStatus, canRetry ] );
 
-	if ( ! isCollaborationEnabled || ! hasInitialized || ! showModal ) {
+	// Protocol mismatch is unrecoverable and has no in-flight connection
+	// attempt to wait on, so delaying the modal serves no purpose.
+	const isProtocolMismatch =
+		connectionStatus?.status === 'disconnected' &&
+		'error' in connectionStatus &&
+		connectionStatus.error?.code === PROTOCOL_MISMATCH;
+
+	if (
+		! isCollaborationEnabled ||
+		( ! hasInitialized && ! isProtocolMismatch ) ||
+		! showModal
+	) {
 		return null;
 	}
 

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

@@ -11,7 +11,6 @@ import { BlockPreview } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	Button,
-	Tooltip,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -20,6 +19,8 @@ import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 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';
 
 /**
  * Internal dependencies
@@ -117,18 +118,23 @@ export default function TemplateActionsPanelContent() {
 		if ( hasSwapTargets ) {
 			const tooltipText = __( 'Change template' );
 			return (
-				<Tooltip text={ tooltipText }>
-					<div
-						className="editor-template-actions-panel__preview"
-						role="button"
-						tabIndex={ 0 }
-						aria-label={ tooltipText }
-						onClick={ () => setIsSwapModalOpen( true ) }
-						onKeyPress={ () => setIsSwapModalOpen( true ) }
-					>
-						{ previewContent }
-					</div>
-				</Tooltip>
+				<Tooltip.Root>
+					<Tooltip.Trigger
+						render={
+							<div
+								className="editor-template-actions-panel__preview"
+								role="button"
+								tabIndex={ 0 }
+								aria-label={ tooltipText }
+								onClick={ () => setIsSwapModalOpen( true ) }
+								onKeyPress={ () => setIsSwapModalOpen( true ) }
+							>
+								{ previewContent }
+							</div>
+						}
+					/>
+					<Tooltip.Popup>{ tooltipText }</Tooltip.Popup>
+				</Tooltip.Root>
 			);
 		}
 

package/src/components/text-editor/style.scss

@@ -2,11 +2,11 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
 
 .editor-text-editor {
 	@include reset;
 	position: relative;
+	isolation: isolate;
 	width: 100%;
 	background-color: $white;
 	flex-grow: 1;
@@ -53,7 +53,7 @@
 // Exit code editor toolbar.
 .editor-text-editor__toolbar {
 	position: sticky;
-	z-index: z-index(".editor-text-editor__toolbar");
+	z-index: 1;
 	top: 0;
 	left: 0;
 	right: 0;

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

@@ -65,7 +65,6 @@ import { unlock } from '../../lock-unlock';
 declare global {
 	interface Window {
 		__experimentalTemplateActivate?: boolean;
-		__experimentalMediaEditor?: boolean;
 	}
 }
 

package/src/store/private-actions.js

@@ -17,8 +17,35 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
  */
 import isTemplateRevertable from './utils/is-template-revertable';
 import { buildRevisionsPageQuery } from './private-selectors';
+import { unlock } from '../lock-unlock';
 export * from '../dataviews/store/private-actions';
 
+const DEVICE_TYPE_BY_VIEWPORT_STATE = {
+	mobile: 'Mobile',
+	tablet: 'Tablet',
+};
+
+/**
+ * Updates the editor preview device in response to a block-editor viewport
+ * state signal.
+ *
+ * @param {Object}  options                   Viewport state change options.
+ * @param {string}  options.viewport          Selected viewport state.
+ * @param {boolean} options.showStateOnCanvas Whether canvas preview is enabled.
+ */
+export const updateDeviceTypeForViewportState =
+	( { viewport = 'default', showStateOnCanvas = true } = {} ) =>
+	( { dispatch, registry } ) => {
+		if ( ! showStateOnCanvas ) {
+			return;
+		}
+
+		dispatch.setDeviceType(
+			DEVICE_TYPE_BY_VIEWPORT_STATE[ viewport ] ?? 'Desktop'
+		);
+		unlock( registry.dispatch( blockEditorStore ) ).resetZoomLevel();
+	};
+
 /**
  * Returns an action object used to set which template is currently being used/edited.
  *

package/src/store/private-selectors.js

@@ -24,6 +24,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	getRenderingMode,
 	getCurrentPost,
+	getCurrentPostType,
 	getEditorSettings,
 	getCurrentPostRevisionsCount,
 } from './selectors';
@@ -33,6 +34,7 @@ import {
 	isEntityReady as _isEntityReady,
 } from '../dataviews/store/private-selectors';
 import { getTemplatePartIcon } from '../utils';
+import { unlock } from '../lock-unlock';
 
 const EMPTY_INSERTION_POINT = {
 	rootClientId: undefined,
@@ -582,3 +584,27 @@ export const getPreviousRevision = createRegistrySelector(
 		return null;
 	}
 );
+
+/**
+ * Returns whether the collaboration is enabled for the current post.
+ *
+ * @return {boolean} Whether collaboration is enabled.
+ */
+export const isCollaborationEnabledForCurrentPost = createRegistrySelector(
+	( select ) => ( state ) => {
+		// Return early, if collaboration is not supported.
+		if ( ! unlock( select( coreStore ) ).isCollaborationSupported() ) {
+			return false;
+		}
+
+		const currentPostType = getCurrentPostType( state );
+		const entityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			currentPostType
+		);
+
+		return Boolean(
+			entityConfig?.syncConfig && window._wpCollaborationEnabled
+		);
+	}
+);

package/src/store/selectors.js

@@ -1885,27 +1885,3 @@ export const getPostTypeLabel = createRegistrySelector(
 export function isPublishSidebarOpened( state ) {
 	return state.publishSidebarActive;
 }
-
-/**
- * Returns whether the collaboration is enabled for the current post.
- *
- * @return {boolean} Whether collaboration is enabled.
- */
-export const isCollaborationEnabledForCurrentPost = createRegistrySelector(
-	( select ) => ( state ) => {
-		// Return early, if collaboration is not supported.
-		if ( ! unlock( select( coreStore ) ).isCollaborationSupported() ) {
-			return false;
-		}
-
-		const currentPostType = getCurrentPostType( state );
-		const entityConfig = select( coreStore ).getEntityConfig(
-			'postType',
-			currentPostType
-		);
-
-		return Boolean(
-			entityConfig?.syncConfig && window._wpCollaborationEnabled
-		);
-	}
-);

package/src/store/test/actions.js

@@ -14,6 +14,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 
 import * as actions from '../actions';
 import { store as editorStore } from '..';
+import { unlock } from '../../lock-unlock';
 
 const postId = 44;
 
@@ -63,6 +64,39 @@ const getMethod = ( options ) =>
 	options.headers?.[ 'X-HTTP-Method-Override' ] || options.method || 'GET';
 
 describe( 'Post actions', () => {
+	describe( 'updateDeviceTypeForViewportState', () => {
+		it( 'updates the editor device type for a viewport state', () => {
+			const registry = createRegistryWithStores();
+
+			unlock(
+				registry.dispatch( editorStore )
+			).updateDeviceTypeForViewportState( {
+				viewport: 'mobile',
+				showStateOnCanvas: true,
+			} );
+
+			expect( registry.select( editorStore ).getDeviceType() ).toBe(
+				'Mobile'
+			);
+		} );
+
+		it( 'keeps the editor device type when canvas preview is disabled', () => {
+			const registry = createRegistryWithStores();
+			registry.dispatch( editorStore ).setDeviceType( 'Tablet' );
+
+			unlock(
+				registry.dispatch( editorStore )
+			).updateDeviceTypeForViewportState( {
+				viewport: 'mobile',
+				showStateOnCanvas: false,
+			} );
+
+			expect( registry.select( editorStore ).getDeviceType() ).toBe(
+				'Tablet'
+			);
+		} );
+	} );
+
 	describe( 'savePost()', () => {
 		it( 'saves a modified post', async () => {
 			const post = {

package/src/utils/media-delete/index.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+export default async function mediaDelete( id ) {
+	await apiFetch( {
+		path: `/wp/v2/media/${ id }?force=true`,
+		method: 'DELETE',
+	} );
+}

package/src/utils/media-finalize/index.js

@@ -2,11 +2,16 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
+import { transformAttachment } from '@wordpress/media-utils';
 
 export default async function mediaFinalize( id, subSizes = [] ) {
-	await apiFetch( {
+	const response = await apiFetch( {
 		path: `/wp/v2/media/${ id }/finalize`,
 		method: 'POST',
 		data: { sub_sizes: subSizes },
 	} );
+
+	// Returning the post-finalize attachment lets callers refresh the block
+	// URL (via onChange) so it points at the scaled file and srcset matches.
+	return response ? transformAttachment( response ) : undefined;
 }

package/src/utils/media-finalize/test/index.js

@@ -10,13 +10,21 @@ import mediaFinalize from '..';
 
 jest.mock( '@wordpress/api-fetch', () => jest.fn() );
 
+const mockRestAttachment = {
+	id: 123,
+	alt_text: '',
+	caption: { raw: '' },
+	title: { raw: '' },
+	source_url: 'https://example.com/wp-content/uploads/image-scaled.jpg',
+};
+
 describe( 'mediaFinalize', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
 	} );
 
 	it( 'should call the finalize endpoint with the correct path, method, and sub_sizes', async () => {
-		apiFetch.mockResolvedValue( {} );
+		apiFetch.mockResolvedValue( mockRestAttachment );
 
 		const subSizes = [
 			{
@@ -39,7 +47,7 @@ describe( 'mediaFinalize', () => {
 	} );
 
 	it( 'should send empty sub_sizes array by default', async () => {
-		apiFetch.mockResolvedValue( {} );
+		apiFetch.mockResolvedValue( mockRestAttachment );
 
 		await mediaFinalize( 123 );
 
@@ -50,6 +58,28 @@ describe( 'mediaFinalize', () => {
 		} );
 	} );
 
+	it( 'should return the transformed attachment with the scaled URL so the block can pick up srcset', async () => {
+		apiFetch.mockResolvedValue( mockRestAttachment );
+
+		const result = await mediaFinalize( 123 );
+
+		// transformAttachment maps source_url -> url, which is the key the
+		// block stores. Without this mapping, the block keeps the original
+		// (pre-finalize) URL and wp_calculate_image_srcset() emits no srcset.
+		expect( result ).toMatchObject( {
+			id: 123,
+			url: 'https://example.com/wp-content/uploads/image-scaled.jpg',
+		} );
+	} );
+
+	it( 'should return undefined when the response is empty', async () => {
+		apiFetch.mockResolvedValue( undefined );
+
+		const result = await mediaFinalize( 123 );
+
+		expect( result ).toBeUndefined();
+	} );
+
 	it( 'should propagate errors from apiFetch', async () => {
 		apiFetch.mockRejectedValue( new Error( 'Network error' ) );
 

package/src/utils/sync-error-messages.ts

@@ -10,6 +10,7 @@ export const AUTHENTICATION_FAILED = 'authentication-failed';
 export const CONNECTION_EXPIRED = 'connection-expired';
 export const CONNECTION_LIMIT_EXCEEDED = 'connection-limit-exceeded';
 export const DOCUMENT_SIZE_LIMIT_EXCEEDED = 'document-size-limit-exceeded';
+export const PROTOCOL_MISMATCH = 'protocol-mismatch';
 export const UNKNOWN_ERROR = 'unknown-error';
 
 interface ConnectionErrorMessages {
@@ -42,6 +43,13 @@ const ERROR_MESSAGES: Record< string, ConnectionErrorMessages > = {
 				'Try again later or contact your site administrator.'
 		),
 	},
+	[ PROTOCOL_MISMATCH ]: {
+		title: __( 'Protocol update' ),
+		description: __(
+			'Real-time collaboration has been updated. ' +
+				'Please refresh the page to continue editing.'
+		),
+	},
 	// DOCUMENT_SIZE_LIMIT_EXCEEDED is not included here because it results in
 	// collaboration being disabled entirely.
 	[ UNKNOWN_ERROR ]: {

package/src/utils/test/sync-error-messages.js

@@ -9,6 +9,7 @@ describe( 'getSyncErrorMessages', () => {
 		'connection-expired',
 		'connection-limit-exceeded',
 		'document-size-limit-exceeded',
+		'protocol-mismatch',
 		'unknown-error',
 	] )( 'should return title and description for "%s"', ( code ) => {
 		const result = getSyncErrorMessages( { code } );