From 06dbb4430d0dc92882c12596c5630394220cec85 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 17 Jul 2023 12:53:20 +1000 Subject: [PATCH 01/16] Site Editor: First pass at adding a Show Template toggle when editing pages --- .../data/data-core-edit-site.md | 8 +++ .../src/higher-order/with-filters/index.tsx | 10 +++- .../block-editor/get-block-editor-provider.js | 29 --------- .../src/components/block-editor/index.js | 16 +---- .../content-block-editor-provider.js | 59 +++++++++++++++++++ .../block-editor/use-block-editor-provider.js | 40 +++++++++++++ .../src/components/header-edit-mode/index.js | 53 ++++++++++++++++- .../disable-non-page-content-blocks.js | 3 +- packages/edit-site/src/store/actions.js | 14 ++++- packages/edit-site/src/store/reducer.js | 10 ++-- packages/edit-site/src/store/selectors.js | 6 +- 11 files changed, 191 insertions(+), 57 deletions(-) delete mode 100644 packages/edit-site/src/components/block-editor/get-block-editor-provider.js create mode 100644 packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js create mode 100644 packages/edit-site/src/components/block-editor/use-block-editor-provider.js diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index 6dea8e9b77d1b..a4eda1a85a7f8 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -106,6 +106,10 @@ _Returns_ - `Object`: Page. +### getPageContentFocusMode + +Undocumented declaration. + ### getReusableBlocks Returns any available Reusable blocks. @@ -379,6 +383,10 @@ _Returns_ - `number`: The resolved template ID for the page route. +### setPageContentFocusMode + +Undocumented declaration. + ### setTemplate Action that sets a template, optionally fetching it from REST API. diff --git a/packages/components/src/higher-order/with-filters/index.tsx b/packages/components/src/higher-order/with-filters/index.tsx index eddd0829f3716..8b6939a44013d 100644 --- a/packages/components/src/higher-order/with-filters/index.tsx +++ b/packages/components/src/higher-order/with-filters/index.tsx @@ -52,7 +52,7 @@ export default function withFilters( hookName: string ) { * reuse this shared reference as an optimization to avoid excessive * calls to `applyFilters` when many instances exist. */ - let FilteredComponent: React.ComponentType; + let FilteredComponent: React.ComponentType | undefined; /** * Initializes the FilteredComponent variable once, if not already @@ -94,15 +94,19 @@ export default function withFilters( hookName: string ) { ); // If this was the last of the mounted components filtered on - // this hook, remove the hook handler. + // this hook, remove the hook handler and reset the shared + // FilteredComponent reference so that it's recreated on next + // mount. if ( FilteredComponentRenderer.instances.length === 0 ) { removeAction( 'hookRemoved', namespace ); removeAction( 'hookAdded', namespace ); + // FilteredComponent = undefined; } } render() { - return ; + const NonNullFilteredComponent = FilteredComponent!; + return ; } } diff --git a/packages/edit-site/src/components/block-editor/get-block-editor-provider.js b/packages/edit-site/src/components/block-editor/get-block-editor-provider.js deleted file mode 100644 index df8185605f13a..0000000000000 --- a/packages/edit-site/src/components/block-editor/get-block-editor-provider.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Internal dependencies - */ -import DefaultBlockEditor from './providers/default-block-editor-provider'; -import NavigationBlockEditor from './providers/navigation-block-editor-provider'; - -/** - * Factory to isolate choosing the appropriate block editor - * component to handle a given entity type. - * - * @param {string} entityType the entity type being edited - * @return {JSX.Element} the block editor component to use. - */ -export default function getBlockEditorProvider( entityType ) { - let Provider = null; - - switch ( entityType ) { - case 'wp_navigation': - Provider = NavigationBlockEditor; - break; - case 'wp_template': - case 'wp_template_part': - default: - Provider = DefaultBlockEditor; - break; - } - - return Provider; -} diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 5bfcdb012d1f7..7935b9e75f5e1 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; import { BlockInspector } from '@wordpress/block-editor'; import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns'; @@ -10,31 +9,20 @@ import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns'; */ import TemplatePartConverter from '../template-part-converter'; import { SidebarInspectorFill } from '../sidebar-edit-mode'; -import { store as editSiteStore } from '../../store'; import SiteEditorCanvas from './site-editor-canvas'; -import getBlockEditorProvider from './get-block-editor-provider'; +import useBlockEditorProvider from './use-block-editor-provider'; import { unlock } from '../../lock-unlock'; const { PatternsMenuItems } = unlock( editPatternsPrivateApis ); export default function BlockEditor() { - const entityType = useSelect( - ( select ) => select( editSiteStore ).getEditedPostType(), - [] - ); - - // Choose the provider based on the entity type currently - // being edited. - const BlockEditorProvider = getBlockEditorProvider( entityType ); - + const BlockEditorProvider = useBlockEditorProvider(); return ( - - ); diff --git a/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js b/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js new file mode 100644 index 0000000000000..a1da54cb61e9c --- /dev/null +++ b/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js @@ -0,0 +1,59 @@ +/** + * WordPress dependencies + */ +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { createBlock } from '@wordpress/blocks'; +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { unlock } from '../../../lock-unlock'; +import useSiteEditorSettings from '../use-site-editor-settings'; + +const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); + +const noop = () => {}; + +export default function ContentBlockEditorProvider( { children } ) { + const defaultSettings = useSiteEditorSettings(); + const settings = useMemo( () => { + return { + ...defaultSettings, + }; + }, [ defaultSettings ] ); + + const blocks = useMemo( () => { + return [ + createBlock( + 'core/group', + { + layout: { type: 'constrained' }, + style: { + spacing: { + margin: { + top: '4em', + }, + }, + }, + }, + [ + createBlock( 'core/post-title' ), + createBlock( 'core/post-content' ), + ] + ), + ]; + }, [] ); + + return ( + + { children } + + ); +} diff --git a/packages/edit-site/src/components/block-editor/use-block-editor-provider.js b/packages/edit-site/src/components/block-editor/use-block-editor-provider.js new file mode 100644 index 0000000000000..3383c26dc7b47 --- /dev/null +++ b/packages/edit-site/src/components/block-editor/use-block-editor-provider.js @@ -0,0 +1,40 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; +import DefaultBlockEditor from './providers/default-block-editor-provider'; +import NavigationBlockEditor from './providers/navigation-block-editor-provider'; +import ContentBlockEditorProvider from './providers/content-block-editor-provider'; + +/** + * Factory to isolate choosing the appropriate block editor + * component to handle a given entity type. + * + * @return {JSX.Element} the block editor component to use. + */ +export default function useBlockEditorProvider() { + const { entityType, pageContentFocusMode } = useSelect( + ( select ) => ( { + entityType: select( editSiteStore ).getEditedPostType(), + pageContentFocusMode: + select( editSiteStore ).getPageContentFocusMode(), + } ), + [] + ); + + switch ( entityType ) { + case 'wp_navigation': + return NavigationBlockEditor; + case 'wp_template': + case 'wp_template_part': + default: + return pageContentFocusMode === 'withoutTemplate' + ? ContentBlockEditorProvider + : DefaultBlockEditor; + } +} diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index da682e995defd..1b639ac34439e 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -19,7 +19,13 @@ import { import { useSelect, useDispatch } from '@wordpress/data'; import { PinnedItems } from '@wordpress/interface'; import { _x, __ } from '@wordpress/i18n'; -import { listView, plus, external, chevronUpDown } from '@wordpress/icons'; +import { + listView, + plus, + external, + chevronUpDown, + postContent, +} from '@wordpress/icons'; import { __unstableMotion as motion, Button, @@ -68,6 +74,8 @@ export default function HeaderEditMode() { showIconLabels, editorCanvasView, hasFixedToolbar, + isPage, + pageContentFocusMode, } = useSelect( ( select ) => { const { __experimentalGetPreviewDeviceType, @@ -75,6 +83,8 @@ export default function HeaderEditMode() { isInserterOpened, isListViewOpened, getEditorMode, + isPage: _isPage, + getPageContentFocusMode, } = select( editSiteStore ); const { getShortcutRepresentation } = select( keyboardShortcutsStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); @@ -113,6 +123,8 @@ export default function HeaderEditMode() { editSiteStore.name, 'fixedToolbar' ), + isPage: _isPage(), + pageContentFocusMode: getPageContentFocusMode(), }; }, [] ); @@ -120,6 +132,7 @@ export default function HeaderEditMode() { __experimentalSetPreviewDeviceType: setPreviewDeviceType, setIsInserterOpened, setIsListViewOpened, + setPageContentFocusMode, } = useDispatch( editSiteStore ); const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const disableMotion = useReducedMotion(); @@ -269,6 +282,44 @@ export default function HeaderEditMode() { aria-expanded={ isListViewOpen } /> ) } + { ! isDistractionFree && isPage && ( + { + if ( + pageContentFocusMode === + 'withTemplate' + ) { + setPageContentFocusMode( + 'withoutTemplate' + ); + } else { + setPageContentFocusMode( + 'withTemplate' + ); + } + } } + showTooltip={ ! showIconLabels } + variant={ + showIconLabels + ? 'tertiary' + : undefined + } + /> + ) } { isZoomedOutViewExperimentEnabled && ! isDistractionFree && ! hasFixedToolbar && ( 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..6c5573e0d8c23 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 @@ -36,11 +36,12 @@ export function useDisableNonPageContentBlocks() { 'core/edit-site/disable-non-content-blocks', withDisableNonPageContentBlocks ); - return () => + return () => { removeFilter( 'editor.BlockEdit', 'core/edit-site/disable-non-content-blocks' ); + }; }, [] ); } diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 61569482c69db..16e242aca677c 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -624,13 +624,21 @@ export const switchEditorMode = */ export const setHasPageContentFocus = ( hasPageContentFocus ) => + ( { dispatch } ) => { + dispatch.setPageContentFocusMode( + hasPageContentFocus ? 'withTemplate' : null + ); + }; + +export const setPageContentFocusMode = + ( pageContentFocusMode ) => ( { dispatch, registry } ) => { - if ( hasPageContentFocus ) { + if ( pageContentFocusMode ) { registry.dispatch( blockEditorStore ).clearSelectedBlock(); } dispatch( { - type: 'SET_HAS_PAGE_CONTENT_FOCUS', - hasPageContentFocus, + type: 'SET_PAGE_CONTENT_FOCUS_MODE', + pageContentFocusMode, } ); }; diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js index 4b4689e26c561..a0458d6ef3008 100644 --- a/packages/edit-site/src/store/reducer.js +++ b/packages/edit-site/src/store/reducer.js @@ -166,12 +166,12 @@ function editorCanvasContainerView( state = undefined, action ) { * * @return {boolean} Updated state. */ -export function hasPageContentFocus( state = false, action ) { +export function pageContentFocusMode( state = null, action ) { switch ( action.type ) { case 'SET_EDITED_POST': - return !! action.context?.postId; - case 'SET_HAS_PAGE_CONTENT_FOCUS': - return action.hasPageContentFocus; + return action.context?.postId ? 'withTemplate' : null; + case 'SET_PAGE_CONTENT_FOCUS_MODE': + return action.pageContentFocusMode; } return state; @@ -186,5 +186,5 @@ export default combineReducers( { saveViewPanel, canvasMode, editorCanvasContainerView, - hasPageContentFocus, + pageContentFocusMode, } ); diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 654b3c321ae93..2534719793eb9 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -373,5 +373,9 @@ export function isPage( state ) { * @return {boolean} Whether or not focus is on editing page content. */ export function hasPageContentFocus( state ) { - return isPage( state ) ? state.hasPageContentFocus : false; + return !! getPageContentFocusMode( state ); +} + +export function getPageContentFocusMode( state ) { + return isPage( state ) ? state.pageContentFocusMode : null; } From 8562bdc277157bf6a0d8c34f409b02227139cf5f Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 17 Jul 2023 15:58:28 +1000 Subject: [PATCH 02/16] Bit of clean up --- .../components/src/higher-order/with-filters/index.tsx | 10 +++------- .../providers/content-block-editor-provider.js | 7 +------ .../disable-non-page-content-blocks.js | 3 +-- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/packages/components/src/higher-order/with-filters/index.tsx b/packages/components/src/higher-order/with-filters/index.tsx index 8b6939a44013d..eddd0829f3716 100644 --- a/packages/components/src/higher-order/with-filters/index.tsx +++ b/packages/components/src/higher-order/with-filters/index.tsx @@ -52,7 +52,7 @@ export default function withFilters( hookName: string ) { * reuse this shared reference as an optimization to avoid excessive * calls to `applyFilters` when many instances exist. */ - let FilteredComponent: React.ComponentType | undefined; + let FilteredComponent: React.ComponentType; /** * Initializes the FilteredComponent variable once, if not already @@ -94,19 +94,15 @@ export default function withFilters( hookName: string ) { ); // If this was the last of the mounted components filtered on - // this hook, remove the hook handler and reset the shared - // FilteredComponent reference so that it's recreated on next - // mount. + // this hook, remove the hook handler. if ( FilteredComponentRenderer.instances.length === 0 ) { removeAction( 'hookRemoved', namespace ); removeAction( 'hookAdded', namespace ); - // FilteredComponent = undefined; } } render() { - const NonNullFilteredComponent = FilteredComponent!; - return ; + return ; } } diff --git a/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js b/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js index a1da54cb61e9c..cae969807187c 100644 --- a/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js +++ b/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js @@ -16,12 +16,7 @@ const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); const noop = () => {}; export default function ContentBlockEditorProvider( { children } ) { - const defaultSettings = useSiteEditorSettings(); - const settings = useMemo( () => { - return { - ...defaultSettings, - }; - }, [ defaultSettings ] ); + const settings = useSiteEditorSettings(); const blocks = useMemo( () => { return [ 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 6c5573e0d8c23..9d28c01164f29 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 @@ -36,12 +36,11 @@ export function useDisableNonPageContentBlocks() { 'core/edit-site/disable-non-content-blocks', withDisableNonPageContentBlocks ); - return () => { + return () => removeFilter( 'editor.BlockEdit', 'core/edit-site/disable-non-content-blocks' ); - }; }, [] ); } From e03e9956c5a74e314b7f602e3769493282144432 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 14 Aug 2023 10:38:17 +1000 Subject: [PATCH 03/16] Use a toggle in sidebar --- .../src/components/header-edit-mode/index.js | 53 +-------------- .../page-panels/edit-template.js | 66 +++++++++++++------ 2 files changed, 46 insertions(+), 73 deletions(-) diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 1b639ac34439e..da682e995defd 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -19,13 +19,7 @@ import { import { useSelect, useDispatch } from '@wordpress/data'; import { PinnedItems } from '@wordpress/interface'; import { _x, __ } from '@wordpress/i18n'; -import { - listView, - plus, - external, - chevronUpDown, - postContent, -} from '@wordpress/icons'; +import { listView, plus, external, chevronUpDown } from '@wordpress/icons'; import { __unstableMotion as motion, Button, @@ -74,8 +68,6 @@ export default function HeaderEditMode() { showIconLabels, editorCanvasView, hasFixedToolbar, - isPage, - pageContentFocusMode, } = useSelect( ( select ) => { const { __experimentalGetPreviewDeviceType, @@ -83,8 +75,6 @@ export default function HeaderEditMode() { isInserterOpened, isListViewOpened, getEditorMode, - isPage: _isPage, - getPageContentFocusMode, } = select( editSiteStore ); const { getShortcutRepresentation } = select( keyboardShortcutsStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); @@ -123,8 +113,6 @@ export default function HeaderEditMode() { editSiteStore.name, 'fixedToolbar' ), - isPage: _isPage(), - pageContentFocusMode: getPageContentFocusMode(), }; }, [] ); @@ -132,7 +120,6 @@ export default function HeaderEditMode() { __experimentalSetPreviewDeviceType: setPreviewDeviceType, setIsInserterOpened, setIsListViewOpened, - setPageContentFocusMode, } = useDispatch( editSiteStore ); const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const disableMotion = useReducedMotion(); @@ -282,44 +269,6 @@ export default function HeaderEditMode() { aria-expanded={ isListViewOpen } /> ) } - { ! isDistractionFree && isPage && ( - { - if ( - pageContentFocusMode === - 'withTemplate' - ) { - setPageContentFocusMode( - 'withoutTemplate' - ); - } else { - setPageContentFocusMode( - 'withTemplate' - ); - } - } } - showTooltip={ ! showIconLabels } - variant={ - showIconLabels - ? 'tertiary' - : undefined - } - /> - ) } { isZoomedOutViewExperimentEnabled && ! isDistractionFree && ! hasFixedToolbar && ( 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 2295ee12f4504..34a51dd3aadb1 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 @@ -9,6 +9,7 @@ import { MenuItem, __experimentalHStack as HStack, __experimentalText as Text, + ToggleControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; @@ -26,28 +27,37 @@ const POPOVER_PROPS = { }; export default function EditTemplate() { - const { hasResolved, template } = useSelect( ( select ) => { - const { getEditedPostContext, getEditedPostType, getEditedPostId } = - select( editSiteStore ); - const { getEditedEntityRecord, hasFinishedResolution } = - select( coreStore ); - const _context = getEditedPostContext(); - const queryArgs = [ - 'postType', - getEditedPostType(), - getEditedPostId(), - ]; - return { - context: _context, - hasResolved: hasFinishedResolution( - 'getEditedEntityRecord', - queryArgs - ), - template: getEditedEntityRecord( ...queryArgs ), - }; - }, [] ); + const { hasResolved, template, pageContentFocusType } = useSelect( + ( select ) => { + const { + getEditedPostContext, + getEditedPostType, + getEditedPostId, + getPageContentFocusType, + } = select( editSiteStore ); + const { getEditedEntityRecord, hasFinishedResolution } = + select( coreStore ); + const _context = getEditedPostContext(); + const queryArgs = [ + 'postType', + getEditedPostType(), + getEditedPostId(), + ]; + return { + context: _context, + hasResolved: hasFinishedResolution( + 'getEditedEntityRecord', + queryArgs + ), + template: getEditedEntityRecord( ...queryArgs ), + pageContentFocusType: getPageContentFocusType(), + }; + }, + [] + ); - const { setHasPageContentFocus } = useDispatch( editSiteStore ); + const { setHasPageContentFocus, setPageContentFocusType } = + useDispatch( editSiteStore ); if ( ! hasResolved ) { return null; @@ -83,6 +93,20 @@ export default function EditTemplate() { + { + setPageContentFocusType( + pageContentFocusType === 'disableTemplate' + ? 'hideTemplate' + : 'disableTemplate' + ); + onClose(); + } } + > + { pageContentFocusType === 'disableTemplate' + ? __( 'Hide template' ) + : __( 'Show template' ) } + ) } From 50f19cf93af69d2e1502c2a7b744f727d8ccd64b Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 14 Aug 2023 10:46:17 +1000 Subject: [PATCH 04/16] Make toggling 'Show template' on/off faster --- ...r-provider.js => block-editor-provider.js} | 30 +++++------ .../src/components/block-editor/index.js | 3 +- .../content-block-editor-provider.js | 54 ------------------- .../default-block-editor-provider.js | 39 ++++++++++++-- 4 files changed, 48 insertions(+), 78 deletions(-) rename packages/edit-site/src/components/block-editor/{use-block-editor-provider.js => block-editor-provider.js} (50%) delete mode 100644 packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js diff --git a/packages/edit-site/src/components/block-editor/use-block-editor-provider.js b/packages/edit-site/src/components/block-editor/block-editor-provider.js similarity index 50% rename from packages/edit-site/src/components/block-editor/use-block-editor-provider.js rename to packages/edit-site/src/components/block-editor/block-editor-provider.js index 3383c26dc7b47..e7f6833d754d3 100644 --- a/packages/edit-site/src/components/block-editor/use-block-editor-provider.js +++ b/packages/edit-site/src/components/block-editor/block-editor-provider.js @@ -9,15 +9,8 @@ import { useSelect } from '@wordpress/data'; import { store as editSiteStore } from '../../store'; import DefaultBlockEditor from './providers/default-block-editor-provider'; import NavigationBlockEditor from './providers/navigation-block-editor-provider'; -import ContentBlockEditorProvider from './providers/content-block-editor-provider'; -/** - * Factory to isolate choosing the appropriate block editor - * component to handle a given entity type. - * - * @return {JSX.Element} the block editor component to use. - */ -export default function useBlockEditorProvider() { +export default function BlockEditorProvider( { children } ) { const { entityType, pageContentFocusMode } = useSelect( ( select ) => ( { entityType: select( editSiteStore ).getEditedPostType(), @@ -27,14 +20,17 @@ export default function useBlockEditorProvider() { [] ); - switch ( entityType ) { - case 'wp_navigation': - return NavigationBlockEditor; - case 'wp_template': - case 'wp_template_part': - default: - return pageContentFocusMode === 'withoutTemplate' - ? ContentBlockEditorProvider - : DefaultBlockEditor; + if ( entityType === 'wp_navigation' ) { + return { children }; + } + + if ( entityType === 'wp_template' || entityType === 'wp_template_part' ) { + return ( + + { children } + + ); } } diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 7935b9e75f5e1..2c635ff860a5b 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -10,12 +10,11 @@ import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns'; import TemplatePartConverter from '../template-part-converter'; import { SidebarInspectorFill } from '../sidebar-edit-mode'; import SiteEditorCanvas from './site-editor-canvas'; -import useBlockEditorProvider from './use-block-editor-provider'; +import BlockEditorProvider from './block-editor-provider'; import { unlock } from '../../lock-unlock'; const { PatternsMenuItems } = unlock( editPatternsPrivateApis ); export default function BlockEditor() { - const BlockEditorProvider = useBlockEditorProvider(); return ( diff --git a/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js b/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js deleted file mode 100644 index cae969807187c..0000000000000 --- a/packages/edit-site/src/components/block-editor/providers/content-block-editor-provider.js +++ /dev/null @@ -1,54 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; -import { createBlock } from '@wordpress/blocks'; -import { useMemo } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; -import useSiteEditorSettings from '../use-site-editor-settings'; - -const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); - -const noop = () => {}; - -export default function ContentBlockEditorProvider( { children } ) { - const settings = useSiteEditorSettings(); - - const blocks = useMemo( () => { - return [ - createBlock( - 'core/group', - { - layout: { type: 'constrained' }, - style: { - spacing: { - margin: { - top: '4em', - }, - }, - }, - }, - [ - createBlock( 'core/post-title' ), - createBlock( 'core/post-content' ), - ] - ), - ]; - }, [] ); - - return ( - - { children } - - ); -} diff --git a/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js b/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js index 2ee0ae467f8d6..7c2b2fb6f3650 100644 --- a/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js +++ b/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js @@ -4,6 +4,8 @@ import { useEntityBlockEditor } from '@wordpress/core-data'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; +import { createBlock } from '@wordpress/blocks'; /** * Internal dependencies @@ -14,7 +16,12 @@ import useSiteEditorSettings from '../use-site-editor-settings'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); -export default function DefaultBlockEditorProvider( { children } ) { +const noop = () => {}; + +export default function DefaultBlockEditorProvider( { + contentOnly, + children, +} ) { const settings = useSiteEditorSettings(); const { templateType } = useSelect( ( select ) => { @@ -25,17 +32,39 @@ export default function DefaultBlockEditorProvider( { children } ) { }; }, [] ); - const [ blocks, onInput, onChange ] = useEntityBlockEditor( + const [ entityBlocks, onInput, onChange ] = useEntityBlockEditor( 'postType', templateType ); + const contentOnlyBlocks = useMemo( () => { + return [ + createBlock( + 'core/group', + { + layout: { type: 'constrained' }, + style: { + spacing: { + margin: { + top: '4em', + }, + }, + }, + }, + [ + createBlock( 'core/post-title' ), + createBlock( 'core/post-content' ), + ] + ), + ]; + }, [] ); + return ( { children } From 8d958ceab29466b123fb56a652234116a90b4ebb Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 15 Aug 2023 10:49:56 +1000 Subject: [PATCH 05/16] Use blocks in same order as template --- .../block-editor/block-editor-provider.js | 36 ------- .../default-block-editor-provider.js | 94 +++++++++++++++++++ .../block-editor-provider/index.js | 28 ++++++ .../navigation-block-editor-provider.js | 0 .../default-block-editor-provider.js | 73 -------------- 5 files changed, 122 insertions(+), 109 deletions(-) delete mode 100644 packages/edit-site/src/components/block-editor/block-editor-provider.js create mode 100644 packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js create mode 100644 packages/edit-site/src/components/block-editor/block-editor-provider/index.js rename packages/edit-site/src/components/block-editor/{providers => block-editor-provider}/navigation-block-editor-provider.js (100%) delete mode 100644 packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider.js b/packages/edit-site/src/components/block-editor/block-editor-provider.js deleted file mode 100644 index e7f6833d754d3..0000000000000 --- a/packages/edit-site/src/components/block-editor/block-editor-provider.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../store'; -import DefaultBlockEditor from './providers/default-block-editor-provider'; -import NavigationBlockEditor from './providers/navigation-block-editor-provider'; - -export default function BlockEditorProvider( { children } ) { - const { entityType, pageContentFocusMode } = useSelect( - ( select ) => ( { - entityType: select( editSiteStore ).getEditedPostType(), - pageContentFocusMode: - select( editSiteStore ).getPageContentFocusMode(), - } ), - [] - ); - - if ( entityType === 'wp_navigation' ) { - return { children }; - } - - if ( entityType === 'wp_template' || entityType === 'wp_template_part' ) { - return ( - - { children } - - ); - } -} 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 new file mode 100644 index 0000000000000..1cfbdd25693f5 --- /dev/null +++ b/packages/edit-site/src/components/block-editor/block-editor-provider/default-block-editor-provider.js @@ -0,0 +1,94 @@ +/** + * WordPress dependencies + */ +import { useEntityBlockEditor } from '@wordpress/core-data'; +import { + privateApis as blockEditorPrivateApis, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; +import { createBlock } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../../store'; +import { unlock } from '../../../lock-unlock'; +import useSiteEditorSettings from '../use-site-editor-settings'; + +const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); + +const noop = () => {}; + +export default function DefaultBlockEditorProvider( { children } ) { + const settings = useSiteEditorSettings(); + + const { templateType, pageContentFocusMode } = useSelect( ( select ) => { + const { getEditedPostType, getPageContentFocusMode } = + select( editSiteStore ); + + return { + templateType: getEditedPostType(), + pageContentFocusMode: getPageContentFocusMode(), + }; + }, [] ); + + const [ blocks, onInput, onChange ] = useEntityBlockEditor( + 'postType', + templateType + ); + + const pageBlocks = usePageBlocks(); + + return ( + + { children } + + ); +} + +function usePageBlocks() { + const pageBlockNames = useSelect( ( select ) => { + const { __experimentalGetGlobalBlocksByName, getBlockNamesByClientId } = + select( blockEditorStore ); + return getBlockNamesByClientId( + __experimentalGetGlobalBlocksByName( [ + 'core/post-title', + 'core/post-featured-image', + 'core/post-content', + ] ) + ); + }, [] ); + + return useMemo( () => { + return [ + createBlock( + 'core/group', + { + layout: { type: 'constrained' }, + style: { + spacing: { + margin: { + top: '4em', + }, + }, + }, + }, + pageBlockNames.map( ( name ) => createBlock( name ) ) + ), + ]; + }, [ pageBlockNames ] ); +} diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/index.js b/packages/edit-site/src/components/block-editor/block-editor-provider/index.js new file mode 100644 index 0000000000000..36c7c72066a88 --- /dev/null +++ b/packages/edit-site/src/components/block-editor/block-editor-provider/index.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../../store'; +import DefaultBlockEditorProvider from './default-block-editor-provider'; +import NavigationBlockEditorProvider from './navigation-block-editor-provider'; + +export default function BlockEditorProvider( { children } ) { + const entityType = useSelect( + ( select ) => select( editSiteStore ).getEditedPostType(), + [] + ); + if ( entityType === 'wp_navigation' ) { + return ( + + { children } + + ); + } + return ( + { children } + ); +} diff --git a/packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js b/packages/edit-site/src/components/block-editor/block-editor-provider/navigation-block-editor-provider.js similarity index 100% rename from packages/edit-site/src/components/block-editor/providers/navigation-block-editor-provider.js rename to packages/edit-site/src/components/block-editor/block-editor-provider/navigation-block-editor-provider.js diff --git a/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js b/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js deleted file mode 100644 index 7c2b2fb6f3650..0000000000000 --- a/packages/edit-site/src/components/block-editor/providers/default-block-editor-provider.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * WordPress dependencies - */ -import { useEntityBlockEditor } from '@wordpress/core-data'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; -import { useMemo } from '@wordpress/element'; -import { createBlock } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../../store'; -import { unlock } from '../../../lock-unlock'; -import useSiteEditorSettings from '../use-site-editor-settings'; - -const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); - -const noop = () => {}; - -export default function DefaultBlockEditorProvider( { - contentOnly, - children, -} ) { - const settings = useSiteEditorSettings(); - - const { templateType } = useSelect( ( select ) => { - const { getEditedPostType } = unlock( select( editSiteStore ) ); - - return { - templateType: getEditedPostType(), - }; - }, [] ); - - const [ entityBlocks, onInput, onChange ] = useEntityBlockEditor( - 'postType', - templateType - ); - - const contentOnlyBlocks = useMemo( () => { - return [ - createBlock( - 'core/group', - { - layout: { type: 'constrained' }, - style: { - spacing: { - margin: { - top: '4em', - }, - }, - }, - }, - [ - createBlock( 'core/post-title' ), - createBlock( 'core/post-content' ), - ] - ), - ]; - }, [] ); - - return ( - - { children } - - ); -} From 663c2ee0ea445a71b993ee2b2039c324bbdb7c2e Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 15 Aug 2023 14:09:11 +1000 Subject: [PATCH 06/16] Tidy up code --- .../data/data-core-edit-site.md | 32 +++++++++-- .../default-block-editor-provider.js | 57 +++++++++++-------- .../page-content-focus-manager/constants.js | 5 ++ .../disable-non-page-content-blocks.js | 7 +-- packages/edit-site/src/store/actions.js | 33 +++++++---- packages/edit-site/src/store/reducer.js | 28 +++++++-- packages/edit-site/src/store/selectors.js | 19 ++++++- 7 files changed, 127 insertions(+), 54 deletions(-) create mode 100644 packages/edit-site/src/components/page-content-focus-manager/constants.js diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index a4eda1a85a7f8..231c2e5b22f03 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/store/actions.js b/packages/edit-site/src/store/actions.js index 16e242aca677c..62c81babb94c0 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -616,7 +616,7 @@ export const switchEditorMode = }; /** - * Sets whether or not the editor allows only page content to be edited. + * Sets whether the editor allows only page content to be edited. * * @param {boolean} hasPageContentFocus True to allow only page content to be * edited, false to allow template to be @@ -624,21 +624,13 @@ 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, } ); }; @@ -684,3 +676,20 @@ export const toggleDistractionFree = ); } ); }; + +/** + * 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; } From 068ae1dee16337e41a402cc339564b73cd41fe6a Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 22 Aug 2023 11:13:02 +1200 Subject: [PATCH 07/16] Add unit tests --- packages/edit-site/src/store/test/actions.js | 11 +++++- packages/edit-site/src/store/test/reducer.js | 18 +++++++++ .../edit-site/src/store/test/selectors.js | 38 +++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js index 5fbbf62f369e8..e9c9f8ac3fab6 100644 --- a/packages/edit-site/src/store/test/actions.js +++ b/packages/edit-site/src/store/test/actions.js @@ -13,7 +13,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; * Internal dependencies */ import { store as editSiteStore } from '..'; -import { setHasPageContentFocus } from '../actions'; +import { setHasPageContentFocus, setPageContentFocusType } from '../actions'; const ENTITY_TYPES = { wp_template: { @@ -333,4 +333,13 @@ describe( 'actions', () => { } ); } ); } ); + + describe( 'setPageContentFocusType', () => { + it( 'sets the page content focus type', () => { + expect( setPageContentFocusType( 'disableTemplate' ) ).toEqual( { + type: 'SET_PAGE_CONTENT_FOCUS_TYPE', + pageContentFocusType: 'disableTemplate', + } ); + } ); + } ); } ); diff --git a/packages/edit-site/src/store/test/reducer.js b/packages/edit-site/src/store/test/reducer.js index d3816f6ac0ac2..a5e47ec5bbbaf 100644 --- a/packages/edit-site/src/store/test/reducer.js +++ b/packages/edit-site/src/store/test/reducer.js @@ -12,6 +12,7 @@ import { blockInserterPanel, listViewPanel, hasPageContentFocus, + pageContentFocusType, } from '../reducer'; import { setIsInserterOpened } from '../actions'; @@ -191,4 +192,21 @@ describe( 'state', () => { ).toBe( false ); } ); } ); + + describe( 'pageContentFocusType', () => { + it( 'defaults to disableTemplate', () => { + expect( pageContentFocusType( undefined, {} ) ).toBe( + 'disableTemplate' + ); + } ); + + it( 'can be set', () => { + expect( + pageContentFocusType( 'disableTemplate', { + type: 'SET_PAGE_CONTENT_FOCUS_TYPE', + pageContentFocusType: 'enableTemplate', + } ) + ).toBe( 'enableTemplate' ); + } ); + } ); } ); diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js index 9380f8ea4d276..71b1fc555dace 100644 --- a/packages/edit-site/src/store/test/selectors.js +++ b/packages/edit-site/src/store/test/selectors.js @@ -17,6 +17,7 @@ import { __unstableGetPreference, isPage, hasPageContentFocus, + getPageContentFocusType, } from '../selectors'; describe( 'selectors', () => { @@ -204,4 +205,41 @@ describe( 'selectors', () => { expect( hasPageContentFocus( state ) ).toBe( false ); } ); } ); + + describe( 'getPageContentFocusType', () => { + it( 'returns the current content focus type', () => { + const state = { + editedPost: { + postType: 'wp_template', + context: { postType: 'page', postId: 123 }, + }, + hasPageContentFocus: true, + pageContentFocusType: 'disableTemplate', + }; + expect( getPageContentFocusType( state ) ).toBe( + 'disableTemplate' + ); + } ); + + it( 'returns null if the page does not have content focus', () => { + const state = { + editedPost: { + postType: 'wp_template', + context: { postType: 'page', postId: 123 }, + }, + hasPageContentFocus: false, + }; + expect( getPageContentFocusType( state ) ).toBe( null ); + } ); + + it( 'returns null if the edited post type is a template', () => { + const state = { + editedPost: { + postType: 'wp_template', + }, + hasPageContentFocus: true, + }; + expect( getPageContentFocusType( state ) ).toBe( null ); + } ); + } ); } ); From 782d4f117e649a8d7fdfd3a60b2544567d575c3f Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Tue, 22 Aug 2023 11:14:07 +1200 Subject: [PATCH 08/16] Add doc comment --- .../src/components/page-content-focus-manager/constants.js | 4 ++++ 1 file changed, 4 insertions(+) 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 index a81b2fd37563a..3af0f55c0580b 100644 --- a/packages/edit-site/src/components/page-content-focus-manager/constants.js +++ b/packages/edit-site/src/components/page-content-focus-manager/constants.js @@ -1,3 +1,7 @@ +/** + * Block types that are considered to be page content. These are the only blocks + * editable when hasPageContentFocus() is true. + */ export const PAGE_CONTENT_BLOCK_TYPES = [ 'core/post-title', 'core/post-featured-image', From d1308a1ec4bc8d29be82d2295713f51cf8f5c172 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 14 Sep 2023 14:41:07 +1000 Subject: [PATCH 09/16] Formatting Remove unused component import Doc update --- .../data/data-core-edit-site.md | 2 +- .../page-panels/edit-template.js | 32 ++++++++++--------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index 231c2e5b22f03..371b3a16b7ae8 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -312,7 +312,7 @@ _Returns_ ### setHasPageContentFocus -Sets whether or not the editor allows only page content to be edited. +Sets whether the editor allows only page content to be edited. _Parameters_ 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 34a51dd3aadb1..6386407ee4a28 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 @@ -9,7 +9,6 @@ import { MenuItem, __experimentalHStack as HStack, __experimentalText as Text, - ToggleControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; @@ -93,20 +92,23 @@ export default function EditTemplate() { - { - setPageContentFocusType( - pageContentFocusType === 'disableTemplate' - ? 'hideTemplate' - : 'disableTemplate' - ); - onClose(); - } } - > - { pageContentFocusType === 'disableTemplate' - ? __( 'Hide template' ) - : __( 'Show template' ) } - + + { + setPageContentFocusType( + pageContentFocusType === + 'disableTemplate' + ? 'hideTemplate' + : 'disableTemplate' + ); + onClose(); + } } + > + { pageContentFocusType === 'disableTemplate' + ? __( 'Hide template' ) + : __( 'Show template' ) } + + ) } From fcd7d64746ce4ad9ddecf7cb6e1b018b7ab483da Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 15 Sep 2023 12:48:17 +1000 Subject: [PATCH 10/16] With icon and updated copy --- .../page-panels/edit-template.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) 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 6386407ee4a28..178e8454d694e 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 @@ -12,6 +12,7 @@ import { } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; +import { check, reset } from '@wordpress/icons'; /** * Internal dependencies @@ -62,6 +63,8 @@ export default function EditTemplate() { return null; } + const isTemplateHidden = pageContentFocusType !== 'disableTemplate'; + return ( @@ -94,19 +97,16 @@ export default function EditTemplate() { { setPageContentFocusType( - pageContentFocusType === - 'disableTemplate' - ? 'hideTemplate' - : 'disableTemplate' + isTemplateHidden + ? 'disableTemplate' + : 'hideTemplate' ); - onClose(); } } > - { pageContentFocusType === 'disableTemplate' - ? __( 'Hide template' ) - : __( 'Show template' ) } + { __( 'Template preview' ) } From 93aef3ed63fa232591e9f6603e6ca2633ca4627c Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 18 Sep 2023 09:54:57 +1000 Subject: [PATCH 11/16] Use only the check icon and set min width of dropdown to minimize the effect of the dropdown width toggling between narrow and wide --- .../sidebar-edit-mode/page-panels/edit-template.js | 4 ++-- .../src/components/sidebar-edit-mode/page-panels/style.scss | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) 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 178e8454d694e..042a5cdc66770 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 @@ -12,7 +12,7 @@ import { } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; -import { check, reset } from '@wordpress/icons'; +import { check } from '@wordpress/icons'; /** * Internal dependencies @@ -97,7 +97,7 @@ export default function EditTemplate() { { setPageContentFocusType( isTemplateHidden diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss index aedcf5e46ca9e..5501fe49e5876 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss @@ -79,3 +79,9 @@ width: 30%; } } + +.edit-site-page-panels-edit-template__dropdown { + .components-popover__content { + min-width: 240px; + } +} From 9da83541cf276730152c57ae3848be808b7f71e5 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 19 Sep 2023 12:13:33 +1000 Subject: [PATCH 12/16] This commit tries to get around a peculiarity of __experimentalGetGlobalBlocksByName, which doesn't seem to be able to find the post-content block in a new block tree (if it even exists in state). We're sidestepping the issue, but with fewer selectors, so overall hopefully it's more sustainable. --- .../default-block-editor-provider.js | 61 ++++++++++++------- 1 file changed, 38 insertions(+), 23 deletions(-) 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 6078370ef6fdb..b5e7aa4c4db4b 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 @@ -2,10 +2,7 @@ * WordPress dependencies */ import { useEntityBlockEditor } from '@wordpress/core-data'; -import { - privateApis as blockEditorPrivateApis, - store as blockEditorStore, -} from '@wordpress/block-editor'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; @@ -47,13 +44,11 @@ export default function DefaultBlockEditorProvider( { children } ) { }; }, [] ); - const pageGhostBlocks = usePageGhostBlocks(); - const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', templateType ); - + const pageGhostBlocks = usePageContentBlocks( blocks ); const isTemplateHidden = pageContentFocusType === 'hideTemplate'; return ( @@ -69,18 +64,38 @@ export default function DefaultBlockEditorProvider( { children } ) { ); } -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( PAGE_CONTENT_BLOCK_TYPES ) - ); - }, [] ); +/** + * Helper method to iterate through all blocks, recursing into inner blocks. + * Returns a flattened object. + * + * @param {Array} blocks Blocks to flatten. + * + * @return {Array} Flattened object. + */ +function flattenBlocks( blocks ) { + const result = []; + + blocks.forEach( ( block ) => { + result.push( block ); + result.push( ...flattenBlocks( block.innerBlocks ) ); + } ); - const ghostBlocks = useMemo( () => { + return result; +} + +/** + * Returns a memoized array of blocks that contain only page content blocks, + * surrounded by a group block to mimic the post editor. + * + * @param {Array} blocks Block list. + * + * @return {Array} Flattened object. + */ +function usePageContentBlocks( blocks ) { + return useMemo( () => { + if ( ! blocks || ! blocks.length ) { + return []; + } return [ createBlock( 'core/group', @@ -89,15 +104,15 @@ function usePageGhostBlocks() { style: { spacing: { margin: { - top: '4em', // Mimicks the post editor. + top: '4em', // Mimics the post editor. }, }, }, }, - pageContentBlockNames.map( ( name ) => createBlock( name ) ) + flattenBlocks( blocks ).filter( ( block ) => + PAGE_CONTENT_BLOCK_TYPES.includes( block.name ) + ) ), ]; - }, [ pageContentBlockNames ] ); - - return ghostBlocks; + }, [ blocks ] ); } From a20ef59e4d157e810947ec9a10925138670d5414 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 19 Sep 2023 15:42:44 +1000 Subject: [PATCH 13/16] Removing the filter iteration layer and adding it to the flattenBlock helper function Checking for disallowed blocks as well, e.g., core/query --- .../default-block-editor-provider.js | 63 ++++++++++++------- 1 file changed, 40 insertions(+), 23 deletions(-) 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 b5e7aa4c4db4b..def627beba6fd 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 @@ -48,15 +48,21 @@ export default function DefaultBlockEditorProvider( { children } ) { 'postType', templateType ); - const pageGhostBlocks = usePageContentBlocks( blocks ); - const isTemplateHidden = pageContentFocusType === 'hideTemplate'; - + const isPageContentFocused = pageContentFocusType === 'hideTemplate'; + const pageContentBlock = usePageContentBlocks( + blocks, + isPageContentFocused + ); return ( { children } @@ -64,21 +70,29 @@ export default function DefaultBlockEditorProvider( { children } ) { ); } +const identity = ( x ) => x; +const DISALLOWED_BLOCK_TYPES = [ 'core/query' ]; /** - * Helper method to iterate through all blocks, recursing into inner blocks. - * Returns a flattened object. + * Helper method to iterate through all blocks, recursing into allowed inner blocks. + * Returns a flattened object of transformed blocks. * - * @param {Array} blocks Blocks to flatten. + * @param {Array} blocks Blocks to flatten. + * @param {Function} transform Transforming function to be applied to each block. If transform returns `undefined`, the block is skipped. * * @return {Array} Flattened object. */ -function flattenBlocks( blocks ) { +function flattenBlocks( blocks, transform = identity ) { const result = []; - - blocks.forEach( ( block ) => { - result.push( block ); - result.push( ...flattenBlocks( block.innerBlocks ) ); - } ); + for ( let i = 0; i < blocks.length; i++ ) { + if ( DISALLOWED_BLOCK_TYPES.includes( blocks[ i ].name ) ) { + continue; + } + const transformedBlock = transform( blocks[ i ] ); + if ( transformedBlock ) { + result.push( transformedBlock ); + } + result.push( ...flattenBlocks( blocks[ i ].innerBlocks, transform ) ); + } return result; } @@ -87,13 +101,14 @@ function flattenBlocks( blocks ) { * Returns a memoized array of blocks that contain only page content blocks, * surrounded by a group block to mimic the post editor. * - * @param {Array} blocks Block list. + * @param {Array} blocks Block list. + * @param {boolean} isPageContentFocused Whether the page content has focus. If `true` return page content blocks. Default `false`. * - * @return {Array} Flattened object. + * @return {Array} Page content blocks. */ -function usePageContentBlocks( blocks ) { +function usePageContentBlocks( blocks, isPageContentFocused = false ) { return useMemo( () => { - if ( ! blocks || ! blocks.length ) { + if ( ! isPageContentFocused || ! blocks || ! blocks.length ) { return []; } return [ @@ -109,10 +124,12 @@ function usePageContentBlocks( blocks ) { }, }, }, - flattenBlocks( blocks ).filter( ( block ) => - PAGE_CONTENT_BLOCK_TYPES.includes( block.name ) - ) + flattenBlocks( blocks, ( block ) => { + if ( PAGE_CONTENT_BLOCK_TYPES.includes( block.name ) ) { + return createBlock( block.name ); + } + } ) ), ]; - }, [ blocks ] ); + }, [ blocks, isPageContentFocused ] ); } From a384980e94dd1e7d8bb472da2fea465fe8915b3d Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 20 Sep 2023 13:32:26 +1000 Subject: [PATCH 14/16] Extract usePageContentBlocks and write basic tests Moving PAGE_CONTENT_BLOCK_TYPES to utils/constants and creating a map --- .../default-block-editor-provider.js | 71 +--------------- .../test/use-page-content-blocks.js | 83 +++++++++++++++++++ .../use-page-content-blocks.js | 77 +++++++++++++++++ .../page-content-focus-manager/constants.js | 9 -- .../disable-non-page-content-blocks.js | 5 +- packages/edit-site/src/utils/constants.js | 10 +++ 6 files changed, 175 insertions(+), 80 deletions(-) create mode 100644 packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js create mode 100644 packages/edit-site/src/components/block-editor/block-editor-provider/use-page-content-blocks.js delete mode 100644 packages/edit-site/src/components/page-content-focus-manager/constants.js 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 def627beba6fd..5ddbf6e236207 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 @@ -4,8 +4,6 @@ import { useEntityBlockEditor } from '@wordpress/core-data'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; -import { useMemo } from '@wordpress/element'; -import { createBlock } from '@wordpress/blocks'; /** * Internal dependencies @@ -13,7 +11,7 @@ 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'; +import usePageContentBlocks from './use-page-content-blocks'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); @@ -25,7 +23,8 @@ const noop = () => {}; * 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 + * a set of page content blocks wrapped in a container that, together, + * mimic the look and feel of the post editor and * allow editing of the page content only. * * @param {Object} props @@ -69,67 +68,3 @@ export default function DefaultBlockEditorProvider( { children } ) { ); } - -const identity = ( x ) => x; -const DISALLOWED_BLOCK_TYPES = [ 'core/query' ]; -/** - * Helper method to iterate through all blocks, recursing into allowed inner blocks. - * Returns a flattened object of transformed blocks. - * - * @param {Array} blocks Blocks to flatten. - * @param {Function} transform Transforming function to be applied to each block. If transform returns `undefined`, the block is skipped. - * - * @return {Array} Flattened object. - */ -function flattenBlocks( blocks, transform = identity ) { - const result = []; - for ( let i = 0; i < blocks.length; i++ ) { - if ( DISALLOWED_BLOCK_TYPES.includes( blocks[ i ].name ) ) { - continue; - } - const transformedBlock = transform( blocks[ i ] ); - if ( transformedBlock ) { - result.push( transformedBlock ); - } - result.push( ...flattenBlocks( blocks[ i ].innerBlocks, transform ) ); - } - - return result; -} - -/** - * Returns a memoized array of blocks that contain only page content blocks, - * surrounded by a group block to mimic the post editor. - * - * @param {Array} blocks Block list. - * @param {boolean} isPageContentFocused Whether the page content has focus. If `true` return page content blocks. Default `false`. - * - * @return {Array} Page content blocks. - */ -function usePageContentBlocks( blocks, isPageContentFocused = false ) { - return useMemo( () => { - if ( ! isPageContentFocused || ! blocks || ! blocks.length ) { - return []; - } - return [ - createBlock( - 'core/group', - { - layout: { type: 'constrained' }, - style: { - spacing: { - margin: { - top: '4em', // Mimics the post editor. - }, - }, - }, - }, - flattenBlocks( blocks, ( block ) => { - if ( PAGE_CONTENT_BLOCK_TYPES.includes( block.name ) ) { - return createBlock( block.name ); - } - } ) - ), - ]; - }, [ blocks, isPageContentFocused ] ); -} diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js b/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js new file mode 100644 index 0000000000000..aa600df2f9ae3 --- /dev/null +++ b/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js @@ -0,0 +1,83 @@ +/** + * External dependencies + */ +import { renderHook } from '@testing-library/react'; +/** + * WordPress dependencies + */ +import { createBlock } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import usePageContentBlocks from '../use-page-content-blocks'; + +jest.mock( '@wordpress/blocks', () => { + return { + __esModule: true, + ...jest.requireActual( '@wordpress/blocks' ), + createBlock( name, attributes = {}, innerBlocks = [] ) { + return { + name, + attributes, + innerBlocks, + }; + }, + }; +} ); + +describe( 'usePageContentBlocks', () => { + const blocksList = [ + createBlock( 'core/group', {}, [ + createBlock( 'core/post-title' ), + createBlock( 'core/post-featured-image' ), + createBlock( 'core/query' ), + createBlock( 'core/post-content' ), + ] ), + createBlock( 'core/query' ), + createBlock( 'core/paragraph' ), + createBlock( 'core/post-content' ), + ]; + it( 'should return empty array if `isPageContentFocused` is `false`', () => { + const { result } = renderHook( () => + usePageContentBlocks( blocksList, false ) + ); + expect( result.current ).toEqual( [] ); + } ); + it( 'should return empty array if `blocks` is undefined', () => { + const { result } = renderHook( () => + usePageContentBlocks( undefined, true ) + ); + expect( result.current ).toEqual( [] ); + } ); + it( 'should return empty array if `blocks` is an empty array', () => { + const { result } = renderHook( () => usePageContentBlocks( [], true ) ); + expect( result.current ).toEqual( [] ); + } ); + it( 'should return new block list', () => { + const { result } = renderHook( () => + usePageContentBlocks( blocksList, true ) + ); + expect( result.current ).toEqual( [ + { + name: 'core/group', + attributes: { + layout: { type: 'constrained' }, + style: { + spacing: { + margin: { + top: '4em', // Mimics the post editor. + }, + }, + }, + }, + innerBlocks: [ + createBlock( 'core/post-title' ), + createBlock( 'core/post-featured-image' ), + createBlock( 'core/post-content' ), + createBlock( 'core/post-content' ), + ], + }, + ] ); + } ); +} ); diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/use-page-content-blocks.js b/packages/edit-site/src/components/block-editor/block-editor-provider/use-page-content-blocks.js new file mode 100644 index 0000000000000..17e907113c515 --- /dev/null +++ b/packages/edit-site/src/components/block-editor/block-editor-provider/use-page-content-blocks.js @@ -0,0 +1,77 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; +import { createBlock } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { PAGE_CONTENT_BLOCK_TYPES } from '../../../utils/constants'; + +/** + * Helper method to iterate through all blocks, recursing into allowed inner blocks. + * Returns a flattened object of transformed blocks. + * + * @param {Array} blocks Blocks to flatten. + * @param {Function} transform Transforming function to be applied to each block. If transform returns `undefined`, the block is skipped. + * + * @return {Array} Flattened object. + */ +function flattenBlocks( blocks, transform ) { + const result = []; + for ( let i = 0; i < blocks.length; i++ ) { + // Since the Query Block could contain PAGE_CONTENT_BLOCK_TYPES block types, + // we skip it because we only want to render stand-alone page content blocks in the block list. + if ( [ 'core/query' ].includes( blocks[ i ].name ) ) { + continue; + } + const transformedBlock = transform( blocks[ i ] ); + if ( transformedBlock ) { + result.push( transformedBlock ); + } + result.push( ...flattenBlocks( blocks[ i ].innerBlocks, transform ) ); + } + + return result; +} + +/** + * Returns a memoized array of blocks that contain only page content blocks, + * surrounded by a group block to mimic the post editor. + * + * @param {Array} blocks Block list. + * @param {boolean} isPageContentFocused Whether the page content has focus. If `true` return page content blocks. Default `false`. + * + * @return {Array} Page content blocks. + */ +export default function usePageContentBlocks( + blocks, + isPageContentFocused = false +) { + return useMemo( () => { + if ( ! isPageContentFocused || ! blocks || ! blocks.length ) { + return []; + } + return [ + createBlock( + 'core/group', + { + layout: { type: 'constrained' }, + style: { + spacing: { + margin: { + top: '4em', // Mimics the post editor. + }, + }, + }, + }, + flattenBlocks( blocks, ( block ) => { + if ( PAGE_CONTENT_BLOCK_TYPES[ block.name ] ) { + return createBlock( block.name ); + } + } ) + ), + ]; + }, [ blocks, isPageContentFocused ] ); +} 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 deleted file mode 100644 index 3af0f55c0580b..0000000000000 --- a/packages/edit-site/src/components/page-content-focus-manager/constants.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Block types that are considered to be page content. These are the only blocks - * editable when hasPageContentFocus() is true. - */ -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 71f0df828f5a4..f3e021ba88524 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,7 +9,7 @@ import { useEffect } from '@wordpress/element'; /** * Internal dependencies */ -import { PAGE_CONTENT_BLOCK_TYPES } from './constants'; +import { PAGE_CONTENT_BLOCK_TYPES } from '../../utils/constants'; /** * Component that when rendered, makes it so that the site editor allows only @@ -43,8 +43,7 @@ const withDisableNonPageContentBlocks = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { const isDescendentOfQueryLoop = props.context.queryId !== undefined; const isPageContent = - PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) && - ! isDescendentOfQueryLoop; + PAGE_CONTENT_BLOCK_TYPES[ props.name ] && ! isDescendentOfQueryLoop; const mode = isPageContent ? 'contentOnly' : undefined; useBlockEditingMode( mode ); return ; diff --git a/packages/edit-site/src/utils/constants.js b/packages/edit-site/src/utils/constants.js index d12c7f84cc356..1dcbdc0cc6fa3 100644 --- a/packages/edit-site/src/utils/constants.js +++ b/packages/edit-site/src/utils/constants.js @@ -32,6 +32,16 @@ export const FOCUSABLE_ENTITIES = [ PATTERN_TYPES.user, ]; +/** + * Block types that are considered to be page content. These are the only blocks + * editable when hasPageContentFocus() is true. + */ +export const PAGE_CONTENT_BLOCK_TYPES = { + 'core/post-title': true, + 'core/post-featured-image': true, + 'core/post-content': true, +}; + export const POST_TYPE_LABELS = { [ TEMPLATE_POST_TYPE ]: __( 'Template' ), [ TEMPLATE_PART_POST_TYPE ]: __( 'Template Part' ), From 30af53cb2ad642b20306973c85135606d4dc5c8b Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 20 Sep 2023 15:35:10 +1000 Subject: [PATCH 15/16] Updates selectors to include canvas mode so we can show any hidden templates in focus mode --- .../data/data-core-edit-site.md | 4 ++-- .../default-block-editor-provider.js | 21 +++++++++---------- .../page-panels/edit-template.js | 11 +++++++--- packages/edit-site/src/store/actions.js | 4 ++-- packages/edit-site/src/store/selectors.js | 3 ++- 5 files changed, 24 insertions(+), 19 deletions(-) diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index 371b3a16b7ae8..f04dd7cd4606e 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -150,7 +150,7 @@ _Returns_ ### hasPageContentFocus -Whether or not the editor allows only page content to be edited. +Whether the site editor allows only page content blocks to be edited, as opposed to any surrounding template entities or template parts. _Parameters_ @@ -405,7 +405,7 @@ Sets the type of page content focus. Can be one of: _Parameters_ -- _pageContentFocusType_ `'disbleTemplate'|'hideTemplate'`: The type of page content focus. +- _pageContentFocusType_ `'disableTemplate'|'hideTemplate'`: The type of page content focus. _Returns_ 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 5ddbf6e236207..85d6884253c16 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 @@ -33,13 +33,16 @@ const noop = () => {}; export default function DefaultBlockEditorProvider( { children } ) { const settings = useSiteEditorSettings(); - const { templateType, pageContentFocusType } = useSelect( ( select ) => { + const { templateType, isTemplateHidden } = useSelect( ( select ) => { const { getEditedPostType, getPageContentFocusType } = select( editSiteStore ); - + const canvasMode = unlock( select( editSiteStore ) ).getCanvasMode(); return { templateType: getEditedPostType(), - pageContentFocusType: getPageContentFocusType(), + isTemplateHidden: + canvasMode === 'edit' && + getPageContentFocusType() === 'hideTemplate', + canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(), }; }, [] ); @@ -47,21 +50,17 @@ export default function DefaultBlockEditorProvider( { children } ) { 'postType', templateType ); - const isPageContentFocused = pageContentFocusType === 'hideTemplate'; - const pageContentBlock = usePageContentBlocks( - blocks, - isPageContentFocused - ); + const pageContentBlock = usePageContentBlocks( blocks, isTemplateHidden ); return ( { children } 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 042a5cdc66770..37959df790706 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,6 +20,7 @@ import { check } from '@wordpress/icons'; import { store as editSiteStore } from '../../../store'; import SwapTemplateButton from './swap-template-button'; import ResetDefaultTemplate from './reset-default-template'; +import { unlock } from '../../../lock-unlock'; const POPOVER_PROPS = { className: 'edit-site-page-panels-edit-template__dropdown', @@ -27,7 +28,7 @@ const POPOVER_PROPS = { }; export default function EditTemplate() { - const { hasResolved, template, pageContentFocusType } = useSelect( + const { hasResolved, template, isTemplateHidden } = useSelect( ( select ) => { const { getEditedPostContext, @@ -35,6 +36,9 @@ export default function EditTemplate() { getEditedPostId, getPageContentFocusType, } = select( editSiteStore ); + const canvasMode = unlock( + select( editSiteStore ) + ).getCanvasMode(); const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore ); const _context = getEditedPostContext(); @@ -51,6 +55,9 @@ export default function EditTemplate() { ), template: getEditedEntityRecord( ...queryArgs ), pageContentFocusType: getPageContentFocusType(), + isTemplateHidden: + canvasMode === 'edit' && + getPageContentFocusType() === 'hideTemplate', }; }, [] @@ -63,8 +70,6 @@ export default function EditTemplate() { return null; } - const isTemplateHidden = pageContentFocusType !== 'disableTemplate'; - return ( diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 62c81babb94c0..5d77f2a84fd28 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -285,7 +285,7 @@ export const setPage = .getEntityRecords( 'postType', 'wp_template', { per_page: -1, } ) - )?.find( ( { slug } ) => slug === currentTemplateSlug ); + )?.find( ( { slug } ) => slug === currentTemplateSlug ); if ( currentTemplate ) { template = currentTemplate; } else { @@ -683,7 +683,7 @@ export const toggleDistractionFree = * - `'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. + * @param {'disableTemplate'|'hideTemplate'} pageContentFocusType The type of page content focus. * * @return {Object} Action object. */ diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 163ca7123c4c1..a4390aeaef98f 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -366,7 +366,8 @@ export function isPage( state ) { } /** - * Whether or not the editor allows only page content to be edited. + * Whether the site editor allows only page content blocks to be edited, + * as opposed to any surrounding template entities or template parts. * * @param {Object} state Global application state. * From 0724b6d872ec7551a802fb66816f4c04e7ed3390 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 20 Sep 2023 16:12:55 +1000 Subject: [PATCH 16/16] Moving getPageContentFocusType and setPageContentFocusType selector/action to locked, private methods In the use-page-content-blocks.js test, add innerblocks to the query test block --- .../data/data-core-edit-site.md | 36 +----------------- .../default-block-editor-provider.js | 9 +++-- .../test/use-page-content-blocks.js | 6 ++- .../page-panels/edit-template.js | 21 +++++----- packages/edit-site/src/store/actions.js | 21 +--------- .../edit-site/src/store/private-actions.js | 19 ++++++++++ .../edit-site/src/store/private-selectors.js | 22 +++++++++++ packages/edit-site/src/store/selectors.js | 20 +--------- packages/edit-site/src/store/test/actions.js | 11 +----- .../edit-site/src/store/test/selectors.js | 38 ------------------- 10 files changed, 66 insertions(+), 137 deletions(-) diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index f04dd7cd4606e..6dea8e9b77d1b 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -106,23 +106,6 @@ _Returns_ - `Object`: Page. -### getPageContentFocusType - -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 Returns any available Reusable blocks. @@ -150,7 +133,7 @@ _Returns_ ### hasPageContentFocus -Whether the site editor allows only page content blocks to be edited, as opposed to any surrounding template entities or template parts. +Whether or not the editor allows only page content to be edited. _Parameters_ @@ -312,7 +295,7 @@ _Returns_ ### setHasPageContentFocus -Sets whether the editor allows only page content to be edited. +Sets whether or not the editor allows only page content to be edited. _Parameters_ @@ -396,21 +379,6 @@ _Returns_ - `number`: The resolved template ID for the page route. -### setPageContentFocusType - -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_ `'disableTemplate'|'hideTemplate'`: The type of page content focus. - -_Returns_ - -- `Object`: Action object. - ### setTemplate Action that sets a template, optionally fetching it from REST API. 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 85d6884253c16..9ffee1ca68722 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 @@ -34,13 +34,14 @@ export default function DefaultBlockEditorProvider( { children } ) { const settings = useSiteEditorSettings(); const { templateType, isTemplateHidden } = useSelect( ( select ) => { - const { getEditedPostType, getPageContentFocusType } = - select( editSiteStore ); - const canvasMode = unlock( select( editSiteStore ) ).getCanvasMode(); + const { getEditedPostType } = select( editSiteStore ); + const { getPageContentFocusType, getCanvasMode } = unlock( + select( editSiteStore ) + ); return { templateType: getEditedPostType(), isTemplateHidden: - canvasMode === 'edit' && + getCanvasMode() === 'edit' && getPageContentFocusType() === 'hideTemplate', canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(), }; diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js b/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js index aa600df2f9ae3..533ed0f8f3d10 100644 --- a/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js +++ b/packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js @@ -31,7 +31,11 @@ describe( 'usePageContentBlocks', () => { createBlock( 'core/group', {}, [ createBlock( 'core/post-title' ), createBlock( 'core/post-featured-image' ), - createBlock( 'core/query' ), + createBlock( 'core/query', {}, [ + createBlock( 'core/post-title' ), + createBlock( 'core/post-featured-image' ), + createBlock( 'core/post-content' ), + ] ), createBlock( 'core/post-content' ), ] ), createBlock( 'core/query' ), 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 37959df790706..9e0b9e37c33ff 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 @@ -30,15 +30,11 @@ const POPOVER_PROPS = { export default function EditTemplate() { const { hasResolved, template, isTemplateHidden } = useSelect( ( select ) => { - const { - getEditedPostContext, - getEditedPostType, - getEditedPostId, - getPageContentFocusType, - } = select( editSiteStore ); - const canvasMode = unlock( + const { getEditedPostContext, getEditedPostType, getEditedPostId } = + select( editSiteStore ); + const { getCanvasMode, getPageContentFocusType } = unlock( select( editSiteStore ) - ).getCanvasMode(); + ); const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore ); const _context = getEditedPostContext(); @@ -54,17 +50,18 @@ export default function EditTemplate() { queryArgs ), template: getEditedEntityRecord( ...queryArgs ), - pageContentFocusType: getPageContentFocusType(), isTemplateHidden: - canvasMode === 'edit' && + getCanvasMode() === 'edit' && getPageContentFocusType() === 'hideTemplate', }; }, [] ); - const { setHasPageContentFocus, setPageContentFocusType } = - useDispatch( editSiteStore ); + const { setHasPageContentFocus } = useDispatch( editSiteStore ); + // Disable reason: `useDispatch` can't be called conditionally. + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const { setPageContentFocusType } = unlock( useDispatch( editSiteStore ) ); if ( ! hasResolved ) { return null; diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 5d77f2a84fd28..61569482c69db 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -285,7 +285,7 @@ export const setPage = .getEntityRecords( 'postType', 'wp_template', { per_page: -1, } ) - )?.find( ( { slug } ) => slug === currentTemplateSlug ); + )?.find( ( { slug } ) => slug === currentTemplateSlug ); if ( currentTemplate ) { template = currentTemplate; } else { @@ -616,7 +616,7 @@ export const switchEditorMode = }; /** - * Sets whether the editor allows only page content to be edited. + * Sets whether or not the editor allows only page content to be edited. * * @param {boolean} hasPageContentFocus True to allow only page content to be * edited, false to allow template to be @@ -676,20 +676,3 @@ export const toggleDistractionFree = ); } ); }; - -/** - * 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 {'disableTemplate'|'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/private-actions.js b/packages/edit-site/src/store/private-actions.js index f3dd4c10cec43..3e2bfe2ee47b2 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -49,3 +49,22 @@ export const setEditorCanvasContainerView = view, } ); }; + +/** + * 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 {'disableTemplate'|'hideTemplate'} pageContentFocusType The type of page content focus. + * + * @return {Object} Action object. + */ +export const setPageContentFocusType = + ( pageContentFocusType ) => + ( { dispatch } ) => { + dispatch( { + type: 'SET_PAGE_CONTENT_FOCUS_TYPE', + pageContentFocusType, + } ); + }; diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js index 1f1f6e999fdb2..0d4cf2b3eefda 100644 --- a/packages/edit-site/src/store/private-selectors.js +++ b/packages/edit-site/src/store/private-selectors.js @@ -1,3 +1,8 @@ +/** + * Internal dependencies + */ +import { hasPageContentFocus } from './selectors'; + /** * Returns the current canvas mode. * @@ -19,3 +24,20 @@ export function getCanvasMode( state ) { export function getEditorCanvasContainerView( state ) { return state.editorCanvasContainerView; } + +/** + * 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; +} diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index a4390aeaef98f..654b3c321ae93 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -366,8 +366,7 @@ export function isPage( state ) { } /** - * Whether the site editor allows only page content blocks to be edited, - * as opposed to any surrounding template entities or template parts. + * Whether or not the editor allows only page content to be edited. * * @param {Object} state Global application state. * @@ -376,20 +375,3 @@ export function isPage( state ) { export function hasPageContentFocus( state ) { return isPage( state ) ? state.hasPageContentFocus : false; } - -/** - * 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; -} diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js index e9c9f8ac3fab6..5fbbf62f369e8 100644 --- a/packages/edit-site/src/store/test/actions.js +++ b/packages/edit-site/src/store/test/actions.js @@ -13,7 +13,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; * Internal dependencies */ import { store as editSiteStore } from '..'; -import { setHasPageContentFocus, setPageContentFocusType } from '../actions'; +import { setHasPageContentFocus } from '../actions'; const ENTITY_TYPES = { wp_template: { @@ -333,13 +333,4 @@ describe( 'actions', () => { } ); } ); } ); - - describe( 'setPageContentFocusType', () => { - it( 'sets the page content focus type', () => { - expect( setPageContentFocusType( 'disableTemplate' ) ).toEqual( { - type: 'SET_PAGE_CONTENT_FOCUS_TYPE', - pageContentFocusType: 'disableTemplate', - } ); - } ); - } ); } ); diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js index 71b1fc555dace..9380f8ea4d276 100644 --- a/packages/edit-site/src/store/test/selectors.js +++ b/packages/edit-site/src/store/test/selectors.js @@ -17,7 +17,6 @@ import { __unstableGetPreference, isPage, hasPageContentFocus, - getPageContentFocusType, } from '../selectors'; describe( 'selectors', () => { @@ -205,41 +204,4 @@ describe( 'selectors', () => { expect( hasPageContentFocus( state ) ).toBe( false ); } ); } ); - - describe( 'getPageContentFocusType', () => { - it( 'returns the current content focus type', () => { - const state = { - editedPost: { - postType: 'wp_template', - context: { postType: 'page', postId: 123 }, - }, - hasPageContentFocus: true, - pageContentFocusType: 'disableTemplate', - }; - expect( getPageContentFocusType( state ) ).toBe( - 'disableTemplate' - ); - } ); - - it( 'returns null if the page does not have content focus', () => { - const state = { - editedPost: { - postType: 'wp_template', - context: { postType: 'page', postId: 123 }, - }, - hasPageContentFocus: false, - }; - expect( getPageContentFocusType( state ) ).toBe( null ); - } ); - - it( 'returns null if the edited post type is a template', () => { - const state = { - editedPost: { - postType: 'wp_template', - }, - hasPageContentFocus: true, - }; - expect( getPageContentFocusType( state ) ).toBe( null ); - } ); - } ); } );