Rename 'page content lock' to 'page content focus' (#51280)

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

@@ -131,17 +131,17 @@ _Returns_
 
 -   `Object`: Settings.
 
-### hasPageContentLock
+### hasPageContentFocus
 
-Whether or not the editor is locked so that only page content can be edited.
+Whether or not the editor allows only page content to be edited.
 
 _Parameters_
 
 -   _state_ `Object`: Global application state.
 
 _Returns_
 
--   `boolean`: Whether or not the editor is locked.
+-   `boolean`: Whether or not focus is on editing page content.
 
 ### isFeatureActive
 
@@ -280,13 +280,13 @@ _Returns_
 
 -   `number`: The resolved template ID for the page route.
 
-### setHasPageContentLock
+### setHasPageContentFocus
 
-Sets whether or not the editor is locked so that only page content can be edited.
+Sets whether or not the editor allows only page content to be edited.
 
 _Parameters_
 
--   _hasPageContentLock_ `boolean`: True to enable lock, false to disable.
+-   _hasPageContentFocus_ `boolean`: True to allow only page content to be edited, false to allow template to be edited.
 
 ### setHomeTemplateId
 

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

@@ -39,9 +39,9 @@ import EditorCanvas from './editor-canvas';
 import { unlock } from '../../private-apis';
 import EditorCanvasContainer from '../editor-canvas-container';
 import {
-	PageContentLock,
-	usePageContentLockNotifications,
-} from '../page-content-lock';
+	DisableNonPageContentBlocks,
+	usePageContentFocusNotifications,
+} from '../page-content-focus';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -53,21 +53,21 @@ const LAYOUT = {
 
 export default function BlockEditor() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, templateType, canvasMode, hasPageContentLock } =
+	const { storedSettings, templateType, canvasMode, hasPageContentFocus } =
 		useSelect(
 			( select ) => {
 				const {
 					getSettings,
 					getEditedPostType,
 					getCanvasMode,
-					hasPageContentLock: _hasPageContentLock,
+					hasPageContentFocus: _hasPageContentFocus,
 				} = unlock( select( editSiteStore ) );
 
 				return {
 					storedSettings: getSettings( setIsInserterOpened ),
 					templateType: getEditedPostType(),
 					canvasMode: getCanvasMode(),
-					hasPageContentLock: _hasPageContentLock(),
+					hasPageContentFocus: _hasPageContentFocus(),
 				};
 			},
 			[ setIsInserterOpened ]
@@ -146,7 +146,7 @@ export default function BlockEditor() {
 		contentRef,
 		useClipboardHandler(),
 		useTypingObserver(),
-		usePageContentLockNotifications(),
+		usePageContentFocusNotifications(),
 	] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
@@ -172,7 +172,7 @@ export default function BlockEditor() {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
-			{ hasPageContentLock && <PageContentLock /> }
+			{ hasPageContentFocus && <DisableNonPageContentBlocks /> }
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
 				<BlockInspector />

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

@@ -73,15 +73,15 @@ export default function Editor( { isLoading } ) {
 		isListViewOpen,
 		showIconLabels,
 		showBlockBreadcrumbs,
-		hasPageContentLock,
+		hasPageContentFocus,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
 			getEditorMode,
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
-			hasPageContentLock: _hasPageContentLock,
+			hasPageContentFocus: _hasPageContentFocus,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
@@ -106,7 +106,7 @@ export default function Editor( { isLoading } ) {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
-			hasPageContentLock: _hasPageContentLock(),
+			hasPageContentFocus: _hasPageContentFocus(),
 		};
 	}, [] );
 	const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -127,7 +127,7 @@ export default function Editor( { isLoading } ) {
 	const blockContext = useMemo( () => {
 		const { postType, postId, ...nonPostFields } = context ?? {};
 		return {
-			...( hasPageContentLock ? context : nonPostFields ),
+			...( hasPageContentFocus ? context : nonPostFields ),
 			queryContext: [
 				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
@@ -140,7 +140,7 @@ export default function Editor( { isLoading } ) {
 					} ),
 			],
 		};
-	}, [ hasPageContentLock, context, setEditedPostContext ] );
+	}, [ hasPageContentFocus, context, setEditedPostContext ] );
 
 	let title;
 	if ( hasLoadedPost ) {
@@ -230,7 +230,7 @@ export default function Editor( { isLoading } ) {
 								shouldShowBlockBreakcrumbs && (
 									<BlockBreadcrumb
 										rootLabelText={
-											hasPageContentLock
+											hasPageContentFocus
 												? __( 'Page' )
 												: __( 'Template' )
 										}

packages/edit-site/src/components/header-edit-mode/document-actions/index.js

@@ -36,9 +36,9 @@ export default function DocumentActions() {
 }
 
 function PageDocumentActions() {
-	const { hasPageContentLock, context } = useSelect(
+	const { hasPageContentFocus, context } = useSelect(
 		( select ) => ( {
-			hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
+			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
 			context: select( editSiteStore ).getEditedPostContext(),
 		} ),
 		[]
@@ -50,16 +50,16 @@ function PageDocumentActions() {
 		context.postId
 	);
 
-	const { setHasPageContentLock } = useDispatch( editSiteStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
 	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
-	const prevHasPageContentLock = useRef( false );
+	const prevHasPageContentFocus = useRef( false );
 	useEffect( () => {
-		if ( prevHasPageContentLock.current && ! hasPageContentLock ) {
+		if ( prevHasPageContentFocus.current && ! hasPageContentFocus ) {
 			setHasEditedTemplate( true );
 		}
-		prevHasPageContentLock.current = hasPageContentLock;
-	}, [ hasPageContentLock ] );
+		prevHasPageContentFocus.current = hasPageContentFocus;
+	}, [ hasPageContentFocus ] );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -73,7 +73,7 @@ function PageDocumentActions() {
 		);
 	}
 
-	return hasPageContentLock ? (
+	return hasPageContentFocus ? (
 		<BaseDocumentActions
 			className={ classnames( 'is-page', {
 				'is-animated': hasEditedTemplate,
@@ -85,7 +85,7 @@ function PageDocumentActions() {
 	) : (
 		<TemplateDocumentActions
 			className="is-animated"
-			onBack={ () => setHasPageContentLock( true ) }
+			onBack={ () => setHasPageContentFocus( true ) }
 		/>
 	);
 }

packages/edit-site/src/components/page-content-lock/constants.js → packages/edit-site/src/components/page-content-focus/constants.js

@@ -1,4 +1,4 @@
-export const CONTENT_BLOCK_TYPES = [
+export const PAGE_CONTENT_BLOCK_TYPES = [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',

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

@@ -10,20 +10,28 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
-import { CONTENT_BLOCK_TYPES } from './constants';
+import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 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() {
+	useDisableNonPageContentBlocks();
+}
+
 /**
  * Disables non-content blocks using the `useBlockEditingMode` hook.
  */
-export function useDisableNonContentBlocks() {
+export function useDisableNonPageContentBlocks() {
 	useBlockEditingMode( 'disabled' );
 	useEffect( () => {
 		addFilter(
 			'editor.BlockEdit',
 			'core/edit-site/disable-non-content-blocks',
-			withDisableNonContentBlocks
+			withDisableNonPageContentBlocks
 		);
 		return () =>
 			removeFilter(
@@ -33,12 +41,12 @@ export function useDisableNonContentBlocks() {
 	}, [] );
 }
 
-const withDisableNonContentBlocks = createHigherOrderComponent(
+const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isContent = CONTENT_BLOCK_TYPES.includes( props.name );
+		const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
 		const mode = isContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;
 	},
-	'withBlockEditingMode'
+	'withDisableNonPageContentBlocks'
 );

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

@@ -0,0 +1,2 @@
+export * from './disable-non-page-content-blocks';
+export { usePageContentFocusNotifications } from './use-page-content-focus-notifications';

packages/edit-site/src/components/page-content-lock/use-page-content-lock-notifications.js → packages/edit-site/src/components/page-content-focus/use-page-content-focus-notifications.js

@@ -20,38 +20,38 @@ import { store as editSiteStore } from '../../store';
  *                                                  (using useMergeRefs()) to
  *                                                  the editor iframe canvas.
  */
-export function usePageContentLockNotifications() {
+export function usePageContentFocusNotifications() {
 	const ref = useEditTemplateNotification();
 	useBackToPageNotification();
 	return ref;
 }
 
 /**
  * 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 locked
+ * when the user is focusing on editing page content and clicks on a disabled
  * template block.
  *
  * @return {import('react').RefObject<HTMLElement>} Ref which should be passed
  *                                                  (using useMergeRefs()) to
  *                                                  the editor iframe canvas.
  */
 function useEditTemplateNotification() {
-	const hasPageContentLock = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentLock(),
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
 		[]
 	);
 
 	const alreadySeen = useRef( false );
 
 	const { createInfoNotice } = useDispatch( noticesStore );
-	const { setHasPageContentLock } = useDispatch( editSiteStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
 	return useRefEffect(
 		( node ) => {
 			const handleClick = ( event ) => {
 				if (
 					! alreadySeen.current &&
-					hasPageContentLock &&
+					hasPageContentFocus &&
 					event.target.classList.contains( 'is-root-container' )
 				) {
 					createInfoNotice(
@@ -63,7 +63,7 @@ function useEditTemplateNotification() {
 								{
 									label: __( 'Edit template' ),
 									onClick: () =>
-										setHasPageContentLock( false ),
+										setHasPageContentFocus( false ),
 								},
 							],
 						}
@@ -75,10 +75,10 @@ function useEditTemplateNotification() {
 			return () => node.removeEventListener( 'click', handleClick );
 		},
 		[
-			hasPageContentLock,
+			hasPageContentFocus,
 			alreadySeen,
 			createInfoNotice,
-			setHasPageContentLock,
+			setHasPageContentFocus,
 		]
 	);
 }
@@ -88,41 +88,41 @@ function useEditTemplateNotification() {
  * switches from focusing on editing page content to editing a template.
  */
 function useBackToPageNotification() {
-	const hasPageContentLock = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentLock(),
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
 		[]
 	);
 
 	const alreadySeen = useRef( false );
-	const prevHasPageContentLock = useRef( false );
+	const prevHasPageContentFocus = useRef( false );
 
 	const { createInfoNotice } = useDispatch( noticesStore );
-	const { setHasPageContentLock } = useDispatch( editSiteStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
 	useEffect( () => {
 		if (
 			! alreadySeen.current &&
-			prevHasPageContentLock.current &&
-			! hasPageContentLock
+			prevHasPageContentFocus.current &&
+			! hasPageContentFocus
 		) {
 			createInfoNotice( __( 'You are editing a template' ), {
 				isDismissible: true,
 				type: 'snackbar',
 				actions: [
 					{
 						label: __( 'Back to page' ),
-						onClick: () => setHasPageContentLock( true ),
+						onClick: () => setHasPageContentFocus( true ),
 					},
 				],
 			} );
 			alreadySeen.current = true;
 		}
-		prevHasPageContentLock.current = hasPageContentLock;
+		prevHasPageContentFocus.current = hasPageContentFocus;
 	}, [
 		alreadySeen,
-		prevHasPageContentLock,
-		hasPageContentLock,
+		prevHasPageContentFocus,
+		hasPageContentFocus,
 		createInfoNotice,
-		setHasPageContentLock,
+		setHasPageContentFocus,
 	] );
 }