Improve guidance to editing template when focused on editing a page

packages/edit-site/src/components/block-editor/index.js

@@ -38,10 +38,7 @@ import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
-import {
-	DisableNonPageContentBlocks,
-	usePageContentFocusNotifications,
-} from '../page-content-focus';
+import PageContentFocusManager from '../page-content-focus-manager';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -53,25 +50,20 @@ const LAYOUT = {
 
 export default function BlockEditor() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, templateType, canvasMode, hasPageContentFocus } =
-		useSelect(
-			( select ) => {
-				const {
-					getSettings,
-					getEditedPostType,
-					getCanvasMode,
-					hasPageContentFocus: _hasPageContentFocus,
-				} = unlock( select( editSiteStore ) );
-
-				return {
-					storedSettings: getSettings( setIsInserterOpened ),
-					templateType: getEditedPostType(),
-					canvasMode: getCanvasMode(),
-					hasPageContentFocus: _hasPageContentFocus(),
-				};
-			},
-			[ setIsInserterOpened ]
-		);
+	const { storedSettings, templateType, canvasMode } = useSelect(
+		( select ) => {
+			const { getSettings, getEditedPostType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+
+			return {
+				storedSettings: getSettings( setIsInserterOpened ),
+				templateType: getEditedPostType(),
+				canvasMode: getCanvasMode(),
+			};
+		},
+		[ setIsInserterOpened ]
+	);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -146,7 +138,6 @@ export default function BlockEditor() {
 		contentRef,
 		useClipboardHandler(),
 		useTypingObserver(),
-		usePageContentFocusNotifications(),
 	] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
@@ -172,7 +163,7 @@ export default function BlockEditor() {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
-			{ hasPageContentFocus && <DisableNonPageContentBlocks /> }
+			<PageContentFocusManager contentRef={ contentRef } />
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
 				<BlockInspector />

packages/edit-site/src/components/page-content-focus-manager/back-to-page-notification.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Component that displays a 'You are editing a template' notification when the
+ * user switches from focusing on editing page content to editing a template.
+ */
+export default function BackToPageNotification() {
+	useBackToPageNotification();
+	return null;
+}
+
+/**
+ * Hook that displays a 'You are editing a template' notification when the user
+ * switches from focusing on editing page content to editing a template.
+ */
+export function useBackToPageNotification() {
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
+		[]
+	);
+
+	const alreadySeen = useRef( false );
+	const prevHasPageContentFocus = useRef( false );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if (
+			! alreadySeen.current &&
+			prevHasPageContentFocus.current &&
+			! hasPageContentFocus
+		) {
+			createInfoNotice( __( 'You are editing a template' ), {
+				isDismissible: true,
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Back to page' ),
+						onClick: () => setHasPageContentFocus( true ),
+					},
+				],
+			} );
+			alreadySeen.current = true;
+		}
+		prevHasPageContentFocus.current = hasPageContentFocus;
+	}, [
+		alreadySeen,
+		prevHasPageContentFocus,
+		hasPageContentFocus,
+		createInfoNotice,
+		setHasPageContentFocus,
+	] );
+}

packages/edit-site/src/components/page-content-focus/disable-non-page-content-blocks.js → packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -18,7 +18,7 @@ const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
-export function DisableNonPageContentBlocks() {
+export default function DisableNonPageContentBlocks() {
 	useDisableNonPageContentBlocks();
 }
 

packages/edit-site/src/components/page-content-focus-manager/edit-template-dialog.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Component that displays a 'Edit your template to edit this block'
+ * notification when the user is focusing on editing page content and clicks on
+ * a disabled template block.
+ *
+ * @param {Object}                                 props
+ * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
+ *                                                                  editor iframe canvas.
+ */
+export default function EditTemplateDialog( { contentRef } ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	useEffect( () => {
+		const handleDblClick = ( event ) => {
+			if ( event.target.classList.contains( 'is-root-container' ) ) {
+				setIsOpen( true );
+			}
+		};
+		const canvas = contentRef.current;
+		canvas?.addEventListener( 'dblclick', handleDblClick );
+		return () => canvas?.removeEventListener( 'dblclick', handleDblClick );
+	}, [ contentRef.current ] );
+
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			confirmButtonText={ __( 'Edit template' ) }
+			onConfirm={ () => {
+				setIsOpen( false );
+				setHasPageContentFocus( false );
+			} }
+			onCancel={ () => setIsOpen( false ) }
+		>
+			{ __( 'Edit your template to edit this block' ) }
+		</ConfirmDialog>
+	);
+}

packages/edit-site/src/components/page-content-focus-manager/edit-template-notification.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+/**
+ * Component that displays a 'Edit your template to edit this block'
+ * notification when the user is focusing on editing page content and clicks on
+ * a disabled template block.
+ *
+ * @param {Object}                                 props
+ * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
+ *                                                                  editor iframe canvas.
+ */
+export default function EditTemplateNotification( { contentRef } ) {
+	useEditTemplateNotification( contentRef );
+	return null;
+}
+
+/**
+ * Hook that displays a 'Edit your template to edit this block' notification
+ * when the user is focusing on editing page content and clicks on a disabled
+ * template block.
+ *
+ * @param {import('react').RefObject<HTMLElement>} contentRef Ref to the block
+ *                                                            editor iframe canvas.
+ */
+function useEditTemplateNotification( contentRef ) {
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
+		[]
+	);
+	const { getNotices } = useSelect( noticesStore );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	const lastNoticeId = useRef( 0 );
+
+	useEffect( () => {
+		const handleClick = async ( event ) => {
+			const isNoticeAlreadyShowing = getNotices().some(
+				( notice ) => notice.id === lastNoticeId.current
+			);
+			if (
+				! isNoticeAlreadyShowing &&
+				hasPageContentFocus &&
+				event.target.classList.contains( 'is-root-container' )
+			) {
+				const { notice } = await createInfoNotice(
+					__( 'Edit your template to edit this block' ),
+					{
+						isDismissible: true,
+						type: 'snackbar',
+						actions: [
+							{
+								label: __( 'Edit template' ),
+								onClick: () => setHasPageContentFocus( false ),
+							},
+						],
+					}
+				);
+				lastNoticeId.current = notice.id;
+			}
+		};
+		const canvas = contentRef.current;
+		canvas?.addEventListener( 'click', handleClick );
+		return () => canvas?.removeEventListener( 'click', handleClick );
+	}, [ lastNoticeId, hasPageContentFocus, contentRef.current ] );
+}

packages/edit-site/src/components/page-content-focus-manager/index.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
+import EditTemplateDialog from './edit-template-dialog';
+import EditTemplateNotification from './edit-template-notification';
+import BackToPageNotification from './back-to-page-notification';
+
+export default function PageContentFocusManager( { contentRef } ) {
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
+		[]
+	);
+	return (
+		<>
+			{ hasPageContentFocus && (
+				<>
+					<DisableNonPageContentBlocks />
+					<EditTemplateDialog contentRef={ contentRef } />
+				</>
+			) }
+			<EditTemplateNotification contentRef={ contentRef } />
+			<BackToPageNotification />
+		</>
+	);
+}