Improve guidance to editing template when focused on editing a page

packages/block-editor/src/components/block-list/content.scss

@@ -108,6 +108,11 @@
 			.is-dark-theme & {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
 			}
+
+			transition:
+				border-color 0.1s linear,
+				border-style 0.1s linear,
+				box-shadow 0.1s linear;
 		}
 	}
 

packages/block-editor/src/store/reducer.js

@@ -1759,29 +1759,38 @@ export function lastBlockAttributesChange( state = null, action ) {
 }
 
 /**
- * Reducer returning current highlighted block.
+ * Reducer returning map of block client IDs to whether or not they are
+ * highlighted.
  *
- * @param {boolean} state  Current highlighted block.
- * @param {Object}  action Dispatched action.
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
  *
- * @return {string} Updated state.
+ * @return {Object} Updated state.
  */
-export function highlightedBlock( state, action ) {
+export function highlightedBlocks( state = {}, action ) {
 	switch ( action.type ) {
-		case 'TOGGLE_BLOCK_HIGHLIGHT':
-			const { clientId, isHighlighted } = action;
-
-			if ( isHighlighted ) {
-				return clientId;
-			} else if ( state === clientId ) {
-				return null;
+		case 'TOGGLE_BLOCK_HIGHLIGHT': {
+			if ( action.isHighlighted ) {
+				if ( ! state[ action.clientId ] ) {
+					return {
+						...state,
+						[ action.clientId ]: true,
+					};
+				}
+			} else if ( state[ action.clientId ] ) {
+				const nextState = { ...state };
+				delete nextState[ action.clientId ];
+				return nextState;
 			}
-
-			return state;
-		case 'SELECT_BLOCK':
-			if ( action.clientId !== state ) {
-				return null;
+			break;
+		}
+		case 'SELECT_BLOCK': {
+			if ( state[ action.clientId ] ) {
+				const nextState = { ...state };
+				delete nextState[ action.clientId ];
+				return nextState;
 			}
+		}
 	}
 
 	return state;
@@ -1876,7 +1885,7 @@ const combinedReducers = combineReducers( {
 	lastBlockAttributesChange,
 	editorMode,
 	hasBlockMovingClientId,
-	highlightedBlock,
+	highlightedBlocks,
 	lastBlockInserted,
 	temporarilyEditingAsBlocks,
 	blockVisibility,

packages/block-editor/src/store/selectors.js

@@ -2676,7 +2676,7 @@ export function didAutomaticChange( state ) {
  * @return {boolean} Whether the block is currently highlighted.
  */
 export function isBlockHighlighted( state, clientId ) {
-	return state.highlightedBlock === clientId;
+	return !! state.highlightedBlocks[ clientId ];
 }
 
 /**
@@ -2822,7 +2822,7 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 	// Prevent overlay on disabled blocks. It's redundant since disabled blocks
 	// can't be selected, and prevents non-disabled nested blocks from being
 	// selected.
-	if ( getBlockEditingMode( state, clientId ) === 'disabled' ) {
+	if ( getBlockEditingMode( state, clientId ) !== 'default' ) {
 		return false;
 	}
 

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,74 @@
+/**
+ * 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 alreadySeen = useRef( false );
+
+	const { createInfoNotice } = useDispatch( noticesStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		const handleClick = ( event ) => {
+			if (
+				! alreadySeen.current &&
+				hasPageContentFocus &&
+				event.target.classList.contains( 'is-root-container' )
+			) {
+				createInfoNotice(
+					__( 'Edit your template to edit this block' ),
+					{
+						isDismissible: true,
+						type: 'snackbar',
+						actions: [
+							{
+								label: __( 'Edit template' ),
+								onClick: () => setHasPageContentFocus( false ),
+							},
+						],
+					}
+				);
+				alreadySeen.current = true;
+			}
+		};
+		const canvas = contentRef.current;
+		canvas?.addEventListener( 'click', handleClick );
+		return () => canvas?.removeEventListener( 'click', handleClick );
+	}, [ alreadySeen, hasPageContentFocus, contentRef.current ] );
+}