@wordpress/edit-post 8.39.1-next.v.202602091733.0 → 8.40.0

package/src/components/layout/index.js

@@ -12,7 +12,6 @@ import {
 	LocalAutosaveMonitor,
 	UnsavedChangesWarning,
 	EditorKeyboardShortcutsRegister,
-	EditorSnackbars,
 	ErrorBoundary,
 	PostLockedModal,
 	store as editorStore,
@@ -31,7 +30,7 @@ import {
 	useState,
 } from '@wordpress/element';
 import { chevronDown, chevronUp } from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
+import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
@@ -134,7 +133,7 @@ function useEditorStyles( settings ) {
 
 /**
  * @param {Object}  props
- * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
+ * @param {boolean} props.isLegacy True for device previews where split view is disabled.
  */
 function MetaBoxesMain( { isLegacy } ) {
 	const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
@@ -379,7 +378,6 @@ function Layout( {
 		currentPost: { postId: currentPostId, postType: currentPostType },
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
-		previousSelectedBlockPath,
 	} = useNavigateToEntityRecord(
 		initialPostId,
 		initialPostType,
@@ -595,18 +593,13 @@ function Layout( {
 						// eslint-disable-next-line jsx-a11y/no-autofocus
 						autoFocus={ ! isWelcomeGuideVisible }
 						onActionPerformed={ onActionPerformed }
-						initialSelection={ previousSelectedBlockPath }
 						extraSidebarPanels={
 							showMetaBoxes && <MetaBoxes location="side" />
 						}
 						extraContent={
 							! isDistractionFree &&
 							showMetaBoxes && (
-								<MetaBoxesMain
-									isLegacy={
-										! shouldIframe || isDevicePreview
-									}
-								/>
+								<MetaBoxesMain isLegacy={ isDevicePreview } />
 							)
 						}
 					>
@@ -626,7 +619,7 @@ function Layout( {
 						<PluginArea onError={ onPluginAreaError } />
 						<PostEditorMoreMenu />
 						{ backButton }
-						<EditorSnackbars />
+						<SnackbarNotices className="edit-post-layout__snackbar" />
 					</Editor>
 				</div>
 			</ErrorBoundary>

package/src/components/layout/style.scss

@@ -110,24 +110,16 @@
 	clear: both;
 }
 
-// Only when the split view is active the visual editor should allow shrinking and
-// its main size should be zero.
+// Only when the split view is active the visual editor should allow shrinking,
+// its main size should be zero, and overflow should be hidden so that the inner
+// container provides the scrollable viewport.
 .has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
 	flex-shrink: 1;
 	flex-basis: 0%;
-}
-
-.has-metaboxes .editor-visual-editor.is-iframed {
+	overflow: hidden;
 	isolation: isolate;
 }
 
-// Adjust the position of the notices
-.components-editor-notices__snackbar {
-	position: fixed;
-	right: 0;
-	bottom: 24px;
-	padding-left: 24px;
-	padding-right: 24px;
+.edit-post-layout__snackbar {
+	@include snackbar-container();
 }
-
-@include editor-left(".edit-post-layout .components-editor-notices__snackbar");

package/src/components/layout/use-should-iframe.js

@@ -15,25 +15,31 @@ const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
 
 export function useShouldIframe() {
 	return useSelect( ( select ) => {
-		const { getEditorSettings, getCurrentPostType, getDeviceType } =
-			select( editorStore );
+		const { getCurrentPostType, getDeviceType } = select( editorStore );
+		const { getClientIdsWithDescendants, getBlockName } =
+			select( blockEditorStore );
+		const { getBlockType } = select( blocksStore );
+
 		return (
-			// If the theme is block based and the Gutenberg plugin is active,
-			// we ALWAYS use the iframe for consistency across the post and site
-			// editor.
-			( isGutenbergPlugin &&
-				getEditorSettings().__unstableIsBlockBasedTheme ) ||
+			// If the Gutenberg plugin is active, we ALWAYS use the iframe for
+			// consistency across the post and site editor. We plan on enforcing
+			// the iframe in the future, so Gutenberg both serves as way for us
+			// to warn plugin developers and for plugin developers to test their
+			// blocks easily. Before GB v22.5, we only enforced it for
+			// block-based themes (classic themes used the same rules as core).
+			isGutenbergPlugin ||
 			// We also still want to iframe all the special
 			// editor features and modes such as device previews, zoom out, and
 			// template/pattern editing.
 			getDeviceType() !== 'Desktop' ||
 			[ 'wp_template', 'wp_block' ].includes( getCurrentPostType() ) ||
 			unlock( select( blockEditorStore ) ).isZoomOut() ||
-			// Finally, still iframe the editor if all blocks are v3 (which means
-			// they are marked as iframe-compatible).
-			select( blocksStore )
-				.getBlockTypes()
-				.every( ( type ) => type.apiVersion >= 3 )
+			// Finally, still iframe the editor if all present blocks are v3
+			// (which means they are marked as iframe-compatible).
+			[ ...new Set( getClientIdsWithDescendants().map( getBlockName ) ) ]
+				.map( getBlockType )
+				.filter( Boolean )
+				.every( ( blockType ) => blockType.apiVersion >= 3 )
 		);
 	}, [] );
 }

package/src/hooks/use-navigate-to-entity-record.js

@@ -2,15 +2,9 @@
  * WordPress dependencies
  */
 import { useCallback, useReducer } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as editorStore, privateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../lock-unlock';
-
-const { useGenerateBlockPath } = unlock( privateApis );
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * A hook that records the 'entity' history in the post editor as a user
@@ -32,19 +26,19 @@ export default function useNavigateToEntityRecord(
 	initialPostType,
 	defaultRenderingMode
 ) {
-	const generateBlockPath = useGenerateBlockPath();
+	const registry = useRegistry();
 	const [ postHistory, dispatch ] = useReducer(
 		(
 			historyState,
-			{ type, post, previousRenderingMode, selectedBlockPath }
+			{ type, post, previousRenderingMode, selectedBlockClientId }
 		) => {
 			if ( type === 'push' ) {
-				// Update the current item with the selected block path before pushing new item
+				// Update the current item with the selected block clientId before pushing new item
 				const updatedHistory = [ ...historyState ];
 				const currentIndex = updatedHistory.length - 1;
 				updatedHistory[ currentIndex ] = {
 					...updatedHistory[ currentIndex ],
-					selectedBlockPath,
+					selectedBlockClientId,
 				};
 				return [ ...updatedHistory, { post, previousRenderingMode } ];
 			}
@@ -62,44 +56,79 @@ export default function useNavigateToEntityRecord(
 			},
 		]
 	);
-	const { post, previousRenderingMode, selectedBlockPath } =
+	const { post, previousRenderingMode } =
 		postHistory[ postHistory.length - 1 ];
 
 	const { getRenderingMode } = useSelect( editorStore );
 	const { setRenderingMode } = useDispatch( editorStore );
+	const { editEntityRecord } = useDispatch( coreStore );
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
-			// Generate block path from clientId if provided
-			const blockPath = params.selectedBlockClientId
-				? generateBlockPath( params.selectedBlockClientId )
-				: null;
+			// Read entity selection (already has external IDs from onChangeSelection)
+			const entityEdits = registry
+				.select( coreStore )
+				.getEntityRecordEdits( 'postType', post.postType, post.postId );
+			const externalClientId =
+				entityEdits?.selection?.selectionStart?.clientId ?? null;
 
 			dispatch( {
 				type: 'push',
 				post: { postId: params.postId, postType: params.postType },
 				// Save the current rendering mode so we can restore it when navigating back.
 				previousRenderingMode: getRenderingMode(),
-				selectedBlockPath: blockPath,
+				selectedBlockClientId: externalClientId,
 			} );
 			setRenderingMode( defaultRenderingMode );
 		},
 		[
+			registry,
+			post.postType,
+			post.postId,
 			getRenderingMode,
 			setRenderingMode,
 			defaultRenderingMode,
-			generateBlockPath,
 		]
 	);
 
 	const onNavigateToPreviousEntityRecord = useCallback( () => {
+		// Get the item we're navigating back to (second to last in history)
+		// to set its selection on the entity record
+		if ( postHistory.length > 1 ) {
+			const previousItem = postHistory[ postHistory.length - 2 ];
+
+			if ( previousItem.selectedBlockClientId ) {
+				// Set the selection on the entity we're navigating back to
+				editEntityRecord(
+					'postType',
+					previousItem.post.postType,
+					previousItem.post.postId,
+					{
+						selection: {
+							selectionStart: {
+								clientId: previousItem.selectedBlockClientId,
+							},
+							selectionEnd: {
+								clientId: previousItem.selectedBlockClientId,
+							},
+						},
+					},
+					{ undoIgnore: true }
+				);
+			}
+		}
 		dispatch( {
 			type: 'pop',
 		} );
 		if ( previousRenderingMode ) {
 			setRenderingMode( previousRenderingMode );
 		}
-	}, [ setRenderingMode, previousRenderingMode ] );
+	}, [
+		setRenderingMode,
+		previousRenderingMode,
+		postHistory,
+		editEntityRecord,
+	] );
 
 	return {
 		currentPost: post,
@@ -108,7 +137,5 @@ export default function useNavigateToEntityRecord(
 			postHistory.length > 1
 				? onNavigateToPreviousEntityRecord
 				: undefined,
-		// Return the selected block path from the current history item
-		previousSelectedBlockPath: selectedBlockPath,
 	};
 }