Site Editor: Add ability to focus only on editing page content

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-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,8 +38,11 @@ import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import { unlock } from '../../private-apis';
 import EditorCanvasContainer from '../editor-canvas-container';
+import usePageContentLockNotifications from '../use-page-content-lock-notifications';
 
-const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+const { ExperimentalBlockEditorProvider, useBlockEditingMode } = unlock(
+	blockEditorPrivateApis
+);
 
 const LAYOUT = {
 	type: 'default',
@@ -49,20 +52,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 +145,7 @@ export default function BlockEditor() {
 		contentRef,
 		useClipboardHandler(),
 		useTypingObserver(),
+		usePageContentLockNotifications(),
 	] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
@@ -162,6 +171,9 @@ export default function BlockEditor() {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
+			{ hasPageContentLock && (
+				<SetRootBlockEditingMode mode="disabled" />
+			) }
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
 				<BlockInspector />
@@ -215,3 +227,8 @@ export default function BlockEditor() {
 		</ExperimentalBlockEditorProvider>
 	);
 }
+
+function SetRootBlockEditingMode( { mode } ) {
+	useBlockEditingMode( mode );
+	return null;
+}

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;
@@ -247,3 +243,20 @@ export default function Editor( { isLoading } ) {
 		</>
 	);
 }
+
+function addQueryContextToBlockContext( context, setContext ) {
+	return {
+		...context,
+		queryContext: [
+			context?.queryContext || { page: 1 },
+			( newQueryContext ) =>
+				setContext( {
+					...context,
+					queryContext: {
+						...context?.queryContext,
+						...newQueryContext,
+					},
+				} ),
+		],
+	};
+}

packages/edit-site/src/components/sidebar-edit-mode/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelBody, PanelRow } from '@wordpress/components';
+import { createSlotFill } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
@@ -16,8 +16,8 @@ import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
-import LastRevision from './template-revisions';
-import TemplateCard from './template-card';
+import PagePanels from './page-panels';
+import TemplatePanel from './template-panel';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
@@ -33,6 +33,7 @@ export function SidebarComplementaryAreaFills() {
 		isEditorSidebarOpened,
 		hasBlockSelection,
 		supportsGlobalStyles,
+		hasPageContentLock,
 	} = useSelect( ( select ) => {
 		const _sidebar =
 			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
@@ -47,18 +48,23 @@ export function SidebarComplementaryAreaFills() {
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
+			hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
 		};
 	}, [] );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
 	useEffect( () => {
-		if ( ! isEditorSidebarOpened ) return;
+		// Don't automatically switch tab when the sidebar is closed or when we
+		// are focused on page content.
+		if ( ! isEditorSidebarOpened || hasPageContentLock ) {
+			return;
+		}
 		if ( hasBlockSelection ) {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
 		} else {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}
-	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+	}, [ hasBlockSelection, isEditorSidebarOpened, hasPageContentLock ] );
 
 	let sidebarName = sidebar;
 	if ( ! isEditorSidebarOpened ) {
@@ -77,15 +83,11 @@ export function SidebarComplementaryAreaFills() {
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
 					<>
-						<PanelBody>
-							<TemplateCard />
-							<PanelRow
-								header={ __( 'Editing history' ) }
-								className="edit-site-template-revisions"
-							>
-								<LastRevision />
-							</PanelRow>
-						</PanelBody>
+						{ hasPageContentLock ? (
+							<PagePanels />
+						) : (
+							<TemplatePanel />
+						) }
 						<PluginTemplateSettingPanel.Slot />
 					</>
 				) }