Tidy up code

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

@@ -106,9 +106,22 @@ _Returns_
 
 -   `Object`: Page.
 
-### getPageContentFocusMode
+### getPageContentFocusType
 
-Undocumented declaration.
+Returns the type of the current page content focus, or null if there is no page content focus.
+
+Possible values are:
+
+-   `'disableTemplate'`: Disable the blocks belonging to the page's template.
+-   `'hideTemplate'`: Hide the blocks belonging to the page's template.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `'disableTemplate'|'hideTemplate'|null`: Type of the current page content focus.
 
 ### getReusableBlocks
 
@@ -383,9 +396,20 @@ _Returns_
 
 -   `number`: The resolved template ID for the page route.
 
-### setPageContentFocusMode
+### setPageContentFocusType
 
-Undocumented declaration.
+Sets the type of page content focus. Can be one of:
+
+-   `'disableTemplate'`: Disable the blocks belonging to the page's template.
+-   `'hideTemplate'`: Hide the blocks belonging to the page's template.
+
+_Parameters_
+
+-   _pageContentFocusType_ `'disbleTemplate'|'hideTemplate'`: The type of page content focus.
+
+_Returns_
+
+-   `Object`: Action object.
 
 ### setTemplate
 

packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js

@@ -16,64 +16,71 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editSiteStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 import useSiteEditorSettings from '../use-site-editor-settings';
+import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
 const noop = () => {};
 
+/**
+ * The default block editor provider for the site editor. Typically used when
+ * the post type is `'wp_template_part'` or `'wp_template'` and allows editing
+ * of the template and its nested entities.
+ *
+ * If the page content focus type is `'hideTemplate'`, the provider will provide
+ * a set of "ghost" blocks that mimick the look and feel of the post editor and
+ * allow editing of the page content only.
+ *
+ * @param {Object}    props
+ * @param {WPElement} props.children
+ */
 export default function DefaultBlockEditorProvider( { children } ) {
 	const settings = useSiteEditorSettings();
 
-	const { templateType, pageContentFocusMode } = useSelect( ( select ) => {
-		const { getEditedPostType, getPageContentFocusMode } =
+	const { templateType, pageContentFocusType } = useSelect( ( select ) => {
+		const { getEditedPostType, getPageContentFocusType } =
 			select( editSiteStore );
 
 		return {
 			templateType: getEditedPostType(),
-			pageContentFocusMode: getPageContentFocusMode(),
+			pageContentFocusType: getPageContentFocusType(),
 		};
 	}, [] );
 
+	const pageGhostBlocks = usePageGhostBlocks();
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		templateType
 	);
 
-	const pageBlocks = usePageBlocks();
+	const isTemplateHidden = pageContentFocusType === 'hideTemplate';
 
 	return (
 		<ExperimentalBlockEditorProvider
 			settings={ settings }
-			value={
-				pageContentFocusMode === 'withoutTemplate' ? pageBlocks : blocks
-			}
-			onInput={
-				pageContentFocusMode === 'withoutTemplate' ? noop : onInput
-			}
-			onChange={
-				pageContentFocusMode === 'withoutTemplate' ? noop : onChange
-			}
+			value={ isTemplateHidden ? pageGhostBlocks : blocks }
+			onInput={ isTemplateHidden ? noop : onInput }
+			onChange={ isTemplateHidden ? noop : onChange }
 			useSubRegistry={ false }
 		>
 			{ children }
 		</ExperimentalBlockEditorProvider>
 	);
 }
 
-function usePageBlocks() {
-	const pageBlockNames = useSelect( ( select ) => {
+function usePageGhostBlocks() {
+	const pageContentBlockNames = useSelect( ( select ) => {
 		const { __experimentalGetGlobalBlocksByName, getBlockNamesByClientId } =
 			select( blockEditorStore );
+		// Show only the content blocks that appear in the page's template, and
+		// in the same order that they appear in the template.
 		return getBlockNamesByClientId(
-			__experimentalGetGlobalBlocksByName( [
-				'core/post-title',
-				'core/post-featured-image',
-				'core/post-content',
-			] )
+			__experimentalGetGlobalBlocksByName( PAGE_CONTENT_BLOCK_TYPES )
 		);
 	}, [] );
 
-	return useMemo( () => {
+	const ghostBlocks = useMemo( () => {
 		return [
 			createBlock(
 				'core/group',
@@ -82,13 +89,15 @@ function usePageBlocks() {
 					style: {
 						spacing: {
 							margin: {
-								top: '4em',
+								top: '4em', // Mimicks the post editor.
 							},
 						},
 					},
 				},
-				pageBlockNames.map( ( name ) => createBlock( name ) )
+				pageContentBlockNames.map( ( name ) => createBlock( name ) )
 			),
 		];
-	}, [ pageBlockNames ] );
+	}, [ pageContentBlockNames ] );
+
+	return ghostBlocks;
 }

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

@@ -0,0 +1,5 @@
+export const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];

packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -9,12 +9,7 @@ import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
-const PAGE_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
+import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 /**
  * Component that when rendered, makes it so that the site editor allows only

packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -20,13 +20,13 @@ import { parse } from '@wordpress/blocks';
 import { store as editSiteStore } from '../../../store';
 
 export default function EditTemplate() {
-	const { context, hasResolved, template, pageContentFocusMode } = useSelect(
+	const { context, hasResolved, template, pageContentFocusType } = useSelect(
 		( select ) => {
 			const {
 				getEditedPostContext,
 				getEditedPostType,
 				getEditedPostId,
-				getPageContentFocusMode,
+				getPageContentFocusType,
 			} = select( editSiteStore );
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
@@ -43,13 +43,13 @@ export default function EditTemplate() {
 					queryArgs
 				),
 				template: getEditedEntityRecord( ...queryArgs ),
-				pageContentFocusMode: getPageContentFocusMode(),
+				pageContentFocusType: getPageContentFocusType(),
 			};
 		},
 		[]
 	);
 
-	const { setHasPageContentFocus, setPageContentFocusMode } =
+	const { setHasPageContentFocus, setPageContentFocusType } =
 		useDispatch( editSiteStore );
 
 	const blockContext = useMemo(
@@ -87,12 +87,12 @@ export default function EditTemplate() {
 			</Button>
 			<ToggleControl
 				label={ __( 'Show template' ) }
-				checked={ pageContentFocusMode === 'withTemplate' }
+				checked={ pageContentFocusType === 'disableTemplate' }
 				onChange={ () => {
-					setPageContentFocusMode(
-						pageContentFocusMode === 'withTemplate'
-							? 'withoutTemplate'
-							: 'withTemplate'
+					setPageContentFocusType(
+						pageContentFocusType === 'disableTemplate'
+							? 'hideTemplate'
+							: 'disableTemplate'
 					);
 				} }
 				__nextHasNoMarginBottom

packages/edit-site/src/store/actions.js

@@ -578,20 +578,29 @@ export const switchEditorMode =
  */
 export const setHasPageContentFocus =
 	( hasPageContentFocus ) =>
-	( { dispatch } ) => {
-		dispatch.setPageContentFocusMode(
-			hasPageContentFocus ? 'withTemplate' : null
-		);
-	};
-
-export const setPageContentFocusMode =
-	( pageContentFocusMode ) =>
 	( { dispatch, registry } ) => {
-		if ( pageContentFocusMode ) {
+		if ( hasPageContentFocus ) {
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
 		}
 		dispatch( {
-			type: 'SET_PAGE_CONTENT_FOCUS_MODE',
-			pageContentFocusMode,
+			type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+			hasPageContentFocus,
 		} );
 	};
+
+/**
+ * Sets the type of page content focus. Can be one of:
+ *
+ * - `'disableTemplate'`: Disable the blocks belonging to the page's template.
+ * - `'hideTemplate'`: Hide the blocks belonging to the page's template.
+ *
+ * @param {'disbleTemplate'|'hideTemplate'} pageContentFocusType The type of page content focus.
+ *
+ * @return {Object} Action object.
+ */
+export function setPageContentFocusType( pageContentFocusType ) {
+	return {
+		type: 'SET_PAGE_CONTENT_FOCUS_TYPE',
+		pageContentFocusType,
+	};
+}

packages/edit-site/src/store/reducer.js

@@ -166,12 +166,29 @@ function editorCanvasContainerView( state = undefined, action ) {
  *
  * @return {boolean} Updated state.
  */
-export function pageContentFocusMode( state = null, action ) {
+export function hasPageContentFocus( state = false, action ) {
 	switch ( action.type ) {
 		case 'SET_EDITED_POST':
-			return action.context?.postId ? 'withTemplate' : null;
-		case 'SET_PAGE_CONTENT_FOCUS_MODE':
-			return action.pageContentFocusMode;
+			return !! action.context?.postId;
+		case 'SET_HAS_PAGE_CONTENT_FOCUS':
+			return action.hasPageContentFocus;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer used to track the type of page content focus.
+ *
+ * @param {string} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function pageContentFocusType( state = 'disableTemplate', action ) {
+	switch ( action.type ) {
+		case 'SET_PAGE_CONTENT_FOCUS_TYPE':
+			return action.pageContentFocusType;
 	}
 
 	return state;
@@ -186,5 +203,6 @@ export default combineReducers( {
 	saveViewPanel,
 	canvasMode,
 	editorCanvasContainerView,
-	pageContentFocusMode,
+	hasPageContentFocus,
+	pageContentFocusType,
 } );

packages/edit-site/src/store/selectors.js

@@ -373,9 +373,22 @@ export function isPage( state ) {
  * @return {boolean} Whether or not focus is on editing page content.
  */
 export function hasPageContentFocus( state ) {
-	return !! getPageContentFocusMode( state );
+	return isPage( state ) ? state.hasPageContentFocus : false;
 }
 
-export function getPageContentFocusMode( state ) {
-	return isPage( state ) ? state.pageContentFocusMode : null;
+/**
+ * Returns the type of the current page content focus, or null if there is no
+ * page content focus.
+ *
+ * Possible values are:
+ *
+ * - `'disableTemplate'`: Disable the blocks belonging to the page's template.
+ * - `'hideTemplate'`: Hide the blocks belonging to the page's template.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {'disableTemplate'|'hideTemplate'|null} Type of the current page content focus.
+ */
+export function getPageContentFocusType( state ) {
+	return hasPageContentFocus( state ) ? state.pageContentFocusType : null;
 }