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

…page's template (#50857)

* Add ability to prevent editing blocks using useBlockEditingMode()

* Make useBlockEditingMode use context

* Remove rootBlockEditingMode setting

* Fix private createRegistrySelector selectors

* Consolidate templateLock=contentOnly logic into getBlockEditingMode

* Hide disabled blocks from List View

* Hide disabled blocks from breadcrumbs

* Add doc comments

* Add unit tests

* Use @typedef to document mode param

* Restore packages/components/package.json from trunk

* Restore packages/block-library/src/post-title/edit.js from trunk

* Move BlockListBlockContext out of block.js so that it exists on mobile platforms

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

* Show page information in DocumentActions

* Implement Content panel

* Prevent block overlay on disabled blocks

* Fix Navigation block being selectable

* Show 'Page' in breadcrumbs when focused on editing page

* Update post title, post featured image, and post content blocks to say 'Page' instead of 'Post'

* toolbar title styling

* Remove removePostFromContentBlockLabels for now

* Fix being able to select text within disabled blocks

* Hide BlockAppender when block is disabled

* Fix comments block in non-post templates

* Update template card selector in E2E tests

* Fix 'Add submenu' button in Navigation block

* Remove unhelpful comments

* Remove more unnecessary comments

* Use constant for block types array

* Use BEMish selectors

* Be explicit that we're switching away from the page lock

* Update removePageFromBlockContext() test

* Fix post context from appearing in Edit Template preview

We have to set postId and postType to null for the preview and omit them
in the editor. No point having helper methods, therefore.

* Clear block selection when switching from template focus to page focus

* Prevent insertion into a disabled block

* Don't allow removing and moving children of disabled blocks

* Work around @wordpress/data bug by not using createRegistrySelector() for now

* Fix typo

* Fix select() mock

* Fix block-editor selector tests

* Revert block-editor changes

* Improve useDisableNonContentBlocks performance

* Fix performance tests

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: ramon <ramonjd@gmail.com>

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.
@@ -252,6 +280,14 @@ _Returns_
 
 -   `number`: The resolved template ID for the page route.
 
+### setHasPageContentLock
+
+Sets 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.
+
 ### setHomeTemplateId
 
 > **Deprecated**

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

@@ -508,20 +508,22 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 // so focus is applied naturally on the block container.
 // It's important the right container has focus, otherwise you can't press
 // "Delete" to remove the block.
-.wp-block-navigation__responsive-container,
-.wp-block-navigation__responsive-close {
-	@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,
+	.wp-block-navigation__responsive-close {
+		@include break-small() {
+			pointer-events: none;
+
+			.wp-block-navigation__responsive-container-close,
+			.block-editor-block-list__layout * {
+				pointer-events: all;
+			}
 		}
-	}
 
-	// Page List items should remain inert.
-	.wp-block-pages-list__item__link {
-		pointer-events: none;
+		// Page List items should remain inert.
+		.wp-block-pages-list__item__link {
+			pointer-events: none;
+		}
 	}
 }
 

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 }>{ __( 'Title' ) }</TagName>;
 
@@ -112,20 +117,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/e2e-tests/specs/performance/site-editor.test.js

@@ -151,7 +151,8 @@ describe( 'Site Editor Performance', () => {
 		await enterEditMode();
 
 		// Insert a new paragraph right under the first one.
-		await firstParagraph.focus();
+		await firstParagraph.click(); // Once to select the block overlay.
+		await firstParagraph.click(); // Once again to select the paragraph.
 		await insertBlock( 'Paragraph' );
 
 		// Start tracing.

packages/e2e-tests/specs/site-editor/settings-sidebar.test.js

@@ -27,11 +27,11 @@ async function getActiveTabLabel() {
 async function getTemplateCard() {
 	return {
 		title: await page.$eval(
-			'.edit-site-template-card__title',
+			'.edit-site-sidebar-card__title',
 			( element ) => element.innerText
 		),
 		description: await page.$eval(
-			'.edit-site-template-card__description',
+			'.edit-site-sidebar-card__description',
 			( element ) => element.innerText
 		),
 	};

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,7 +37,6 @@ 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';
@@ -74,13 +73,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 +106,7 @@ export default function Editor( { isLoading } ) {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
+			hasPageContentLock: _hasPageContentLock(),
 		};
 	}, [] );
 	const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -122,9 +124,10 @@ export default function Editor( { isLoading } ) {
 	const secondarySidebarLabel = isListViewOpen
 		? __( 'List View' )
 		: __( 'Block Library' );
-	const blockContext = useMemo(
-		() => ( {
-			...context,
+	const blockContext = useMemo( () => {
+		const { postType, postId, ...nonPostFields } = context ?? {};
+		return {
+			...( hasPageContentLock ? context : nonPostFields ),
 			queryContext: [
 				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
@@ -136,9 +139,8 @@ export default function Editor( { isLoading } ) {
 						},
 					} ),
 			],
-		} ),
-		[ context, setEditedPostContext ]
-	);
+		};
+	}, [ hasPageContentLock, context, setEditedPostContext ] );
 
 	let title;
 	if ( hasLoadedPost ) {
@@ -227,7 +229,11 @@ export default function Editor( { isLoading } ) {
 							footer={
 								shouldShowBlockBreakcrumbs && (
 									<BlockBreadcrumb
-										rootLabelText={ __( 'Template' ) }
+										rootLabelText={
+											hasPageContentLock
+												? __( 'Page' )
+												: __( 'Template' )
+										}
 									/>
 								)
 							}