Site Editor: Add ability to focus on editing a page's content vs the page's template

docs/reference-guides/data/data-core-edit-site.md

@@ -131,6 +131,18 @@ _Returns_
 
 -   `Object`: Settings.
 
+### hasPageContentLock
+
+Whether or not the editor is locked so that only page content can be edited.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether or not the editor is locked.
+
 ### isFeatureActive
 
 > **Deprecated**
@@ -174,6 +186,22 @@ _Returns_
 
 > **Deprecated**
 
+### isPage
+
+Whether or not the editor has a page loaded into it.
+
+_Related_
+
+-   setPage
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether or not the editor has a page loaded into it.
+
 ### isSaveViewOpened
 
 Returns the current opened/closed state of the save panel.
@@ -355,6 +383,18 @@ _Parameters_
 
 -   _featureName_ `string`: Feature name.
 
+### togglePageContentLock
+
+Action that toggles whether or not the editor is locked so that only page content can be edited.
+
+_Parameters_
+
+-   _hasPageContentLock_ `boolean`: True to enable lock, false to disable, or undefined to toggle.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### updateSettings
 
 Returns an action object used to update the settings.

packages/block-editor/src/components/block-list-appender/index.js

@@ -15,6 +15,7 @@ import { getDefaultBlockName } from '@wordpress/blocks';
 import DefaultBlockAppender from '../default-block-appender';
 import ButtonBlockAppender from '../button-block-appender';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function DefaultAppender( { rootClientId } ) {
 	const canInsertDefaultBlock = useSelect( ( select ) =>
@@ -46,13 +47,15 @@ function useAppender( rootClientId, CustomAppender ) {
 				getTemplateLock,
 				getSelectedBlockClientId,
 				__unstableGetEditorMode,
-			} = select( blockEditorStore );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
 
 			const selectedBlockClientId = getSelectedBlockClientId();
 
 			return {
 				hideInserter:
 					!! getTemplateLock( rootClientId ) ||
+					getBlockEditingMode( rootClientId ) === 'disabled' ||
 					__unstableGetEditorMode() === 'zoom-out',
 				isParentSelected:
 					rootClientId === selectedBlockClientId ||

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

@@ -161,15 +161,6 @@
 	padding: 0;
 }
 
-.block-editor-block-list__layout,
-.block-editor-block-list__block {
-	pointer-events: initial;
-
-	&.is-editing-disabled {
-		pointer-events: none;
-	}
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block {
 	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
 	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
@@ -178,12 +169,19 @@
 	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 
-	// Re-enable text-selection on editable blocks.
-	user-select: text;
-
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
+	// Enable pointer events on editable blocks.
+	pointer-events: auto;
+	user-select: text;
+
+	// But disable when editing is disabled.
+	&.is-editing-disabled {
+		pointer-events: none;
+		user-select: none;
+	}
+
 	.reusable-block-edit-panel * {
 		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
 	}

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

@@ -26,6 +26,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { mapRichTextSettings } from './utils';
 import { orderBy } from '../utils/sorting';
+import { getBlockEditingMode } from './private-selectors';
 
 /**
  * A block selection object.
@@ -2788,6 +2789,13 @@ export function __unstableGetTemporarilyEditingAsBlocks( state ) {
 }
 
 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' ) {
+		return false;
+	}
+
 	// If the block editing is locked, the block overlay is always active.
 	if ( ! canEditBlock( state, clientId ) ) {
 		return true;

packages/block-library/src/navigation/editor.scss

@@ -513,9 +513,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	@include break-small() {
 		pointer-events: none;
 
-		.wp-block-navigation__responsive-container-close,
-		.block-editor-block-list__layout * {
-			pointer-events: all;
+		.wp-block-navigation:not(.is-editing-disabled) {
+			.wp-block-navigation__responsive-container-close,
+			.block-editor-block-list__layout * {
+				pointer-events: all;
+			}
 		}
 	}
 

packages/block-library/src/post-title/edit.js

@@ -12,6 +12,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	PlainText,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -23,6 +24,9 @@ import { useEntityProp } from '@wordpress/core-data';
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 import { useCanEditEntity } from '../utils/hooks';
+import { unlock } from '../private-apis';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
@@ -58,6 +62,7 @@ export default function PostTitleEdit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
+	const blockEditingMode = useBlockEditingMode();
 
 	let titleElement = (
 		<TagName { ...blockProps }>{ __( 'Post Title' ) }</TagName>
@@ -114,20 +119,22 @@ export default function PostTitleEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					selectedLevel={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ blockEditingMode === 'default' && (
+				<BlockControls group="block">
+					<HeadingLevelDropdown
+						selectedLevel={ level }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl

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

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

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

@@ -37,12 +37,12 @@ import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
-
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
+import removePageFromBlockContext from '../../utils/remove-page-from-block-context';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -74,13 +74,15 @@ export default function Editor( { isLoading } ) {
 		isListViewOpen,
 		showIconLabels,
 		showBlockBreadcrumbs,
+		hasPageContentLock,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
 			getEditorMode,
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
+			hasPageContentLock: _hasPageContentLock,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
@@ -105,6 +107,7 @@ export default function Editor( { isLoading } ) {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
+			hasPageContentLock: _hasPageContentLock(),
 		};
 	}, [] );
 	const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -123,21 +126,14 @@ export default function Editor( { isLoading } ) {
 		? __( 'List View' )
 		: __( 'Block Library' );
 	const blockContext = useMemo(
-		() => ( {
-			...context,
-			queryContext: [
-				context?.queryContext || { page: 1 },
-				( newQueryContext ) =>
-					setEditedPostContext( {
-						...context,
-						queryContext: {
-							...context?.queryContext,
-							...newQueryContext,
-						},
-					} ),
-			],
-		} ),
-		[ context, setEditedPostContext ]
+		() =>
+			addQueryContextToBlockContext(
+				hasPageContentLock
+					? context
+					: removePageFromBlockContext( context ),
+				setEditedPostContext
+			),
+		[ hasPageContentLock, context, setEditedPostContext ]
 	);
 
 	let title;
@@ -227,7 +223,11 @@ export default function Editor( { isLoading } ) {
 							footer={
 								shouldShowBlockBreakcrumbs && (
 									<BlockBreadcrumb
-										rootLabelText={ __( 'Template' ) }
+										rootLabelText={
+											hasPageContentLock
+												? __( 'Page' )
+												: __( 'Template' )
+										}
 									/>
 								)
 							}
@@ -242,3 +242,20 @@ export default function Editor( { isLoading } ) {
 		</>
 	);
 }
+
+function addQueryContextToBlockContext( context, setContext ) {
+	return {
+		...context,
+		queryContext: [
+			context?.queryContext || { page: 1 },
+			( newQueryContext ) =>
+				setContext( {
+					...context,
+					queryContext: {
+						...context?.queryContext,
+						...newQueryContext,
+					},
+				} ),
+		],
+	};
+}