Editor: Move the edit template blocks notification to editor package (#…

…56901)
WordPress · Dec 8, 2023 · 8a702c3 · 8a702c3 · github-actions · Dec 8, 2023
1 parent 2e95c20
commit 8a702c3
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 53 deletions.
diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -24,7 +24,6 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import PageContentFocusNotifications from '../page-content-focus-notifications';
 
 export default function SiteEditorCanvas() {
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
@@ -60,50 +59,46 @@ export default function SiteEditorCanvas() {
 	const forceFullHeight = isNavigationFocusMode;
 
 	return (
-		<>
-			<EditorCanvasContainer.Slot>
-				{ ( [ editorCanvasView ] ) =>
-					editorCanvasView ? (
-						<div className="edit-site-visual-editor is-focus-mode">
-							{ editorCanvasView }
-						</div>
-					) : (
-						<BlockTools
-							className={ classnames( 'edit-site-visual-editor', {
-								'is-focus-mode':
-									isFocusMode || !! editorCanvasView,
-								'is-view-mode': isViewMode,
-							} ) }
-							__unstableContentRef={ contentRef }
-							onClick={ ( event ) => {
-								// Clear selected block when clicking on the gray background.
-								if ( event.target === event.currentTarget ) {
-									clearSelectedBlock();
-								}
-							} }
+		<EditorCanvasContainer.Slot>
+			{ ( [ editorCanvasView ] ) =>
+				editorCanvasView ? (
+					<div className="edit-site-visual-editor is-focus-mode">
+						{ editorCanvasView }
+					</div>
+				) : (
+					<BlockTools
+						className={ classnames( 'edit-site-visual-editor', {
+							'is-focus-mode': isFocusMode || !! editorCanvasView,
+							'is-view-mode': isViewMode,
+						} ) }
+						__unstableContentRef={ contentRef }
+						onClick={ ( event ) => {
+							// Clear selected block when clicking on the gray background.
+							if ( event.target === event.currentTarget ) {
+								clearSelectedBlock();
+							}
+						} }
+					>
+						<BackButton />
+						<ResizableEditor
+							enableResizing={ enableResizing }
+							height={
+								sizes.height && ! forceFullHeight
+									? sizes.height
+									: '100%'
+							}
 						>
-							<BackButton />
-							<ResizableEditor
+							<EditorCanvas
 								enableResizing={ enableResizing }
-								height={
-									sizes.height && ! forceFullHeight
-										? sizes.height
-										: '100%'
-								}
+								settings={ settings }
+								contentRef={ contentRef }
 							>
-								<EditorCanvas
-									enableResizing={ enableResizing }
-									settings={ settings }
-									contentRef={ contentRef }
-								>
-									{ resizeObserver }
-								</EditorCanvas>
-							</ResizableEditor>
-						</BlockTools>
-					)
-				}
-			</EditorCanvasContainer.Slot>
-			<PageContentFocusNotifications contentRef={ contentRef } />
-		</>
+								{ resizeObserver }
+							</EditorCanvas>
+						</ResizableEditor>
+					</BlockTools>
+				)
+			}
+		</EditorCanvasContainer.Slot>
 	);
 }
diff --git a/packages/edit-site/src/components/page-content-focus-notifications/index.js b/packages/edit-site/src/components/page-content-focus-notifications/index.js
diff --git a/...tifications/edit-template-notification.js → ...nvas/edit-template-blocks-notification.js b/...tifications/edit-template-notification.js → ...nvas/edit-template-blocks-notification.js
@@ -6,7 +6,11 @@ import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
 
 /**
  * Component that:
@@ -22,7 +26,7 @@ import { store as editorStore } from '@wordpress/editor';
  * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
  *                                                                  editor iframe canvas.
  */
-export default function EditTemplateNotification( { contentRef } ) {
+export default function EditTemplateBlocksNotification( { contentRef } ) {
 	const renderingMode = useSelect(
 		( select ) => select( editorStore ).getRenderingMode(),
 		[]

diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
@@ -27,6 +27,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import PostTitle from '../post-title';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import EditTemplateBlocksNotification from './edit-template-blocks-notification';
 
 const {
 	LayoutStyle,
@@ -361,6 +362,7 @@ function EditorCanvas(
 					}
 					renderAppender={ renderAppender }
 				/>
+				<EditTemplateBlocksNotification contentRef={ localRef } />
 			</RecursionProvider>
 			{ children }
 		</BlockCanvas>