diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index c179e20cecc19..09886d4b48e89 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/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 diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js b/packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js index 1cfbdd25693f5..6078370ef6fdb 100644 --- a/packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js +++ b/packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js @@ -16,43 +16,52 @@ 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 ( { children } @@ -60,20 +69,18 @@ export default function DefaultBlockEditorProvider( { children } ) { ); } -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; } diff --git a/packages/edit-site/src/components/page-content-focus-manager/constants.js b/packages/edit-site/src/components/page-content-focus-manager/constants.js new file mode 100644 index 0000000000000..a81b2fd37563a --- /dev/null +++ b/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', +]; diff --git a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js index 9d28c01164f29..71f0df828f5a4 100644 --- a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js +++ b/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 diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js index 53b25a23fc6fa..79804aa40ba07 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js +++ b/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() { { - setPageContentFocusMode( - pageContentFocusMode === 'withTemplate' - ? 'withoutTemplate' - : 'withTemplate' + setPageContentFocusType( + pageContentFocusType === 'disableTemplate' + ? 'hideTemplate' + : 'disableTemplate' ); } } __nextHasNoMarginBottom diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 5f064bb44e8d9..1acb46ee6676d 100644 --- a/packages/edit-site/src/store/actions.js +++ b/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, + }; +} diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js index a0458d6ef3008..e99c6dda1fc1d 100644 --- a/packages/edit-site/src/store/reducer.js +++ b/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, } ); diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 2534719793eb9..163ca7123c4c1 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/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; }