diff --git a/packages/edit-site/src/components/block-editor/back-button.js b/packages/edit-site/src/components/block-editor/back-button.js index 924dedd4f853e..2653270446887 100644 --- a/packages/edit-site/src/components/block-editor/back-button.js +++ b/packages/edit-site/src/components/block-editor/back-button.js @@ -5,26 +5,29 @@ import { Button } from '@wordpress/components'; import { arrowLeft } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { - TEMPLATE_PART_POST_TYPE, - NAVIGATION_POST_TYPE, -} from '../../utils/constants'; import { unlock } from '../../lock-unlock'; +import { store as editSiteStore } from '../../store'; const { useLocation, useHistory } = unlock( routerPrivateApis ); function BackButton() { const location = useLocation(); const history = useHistory(); - const isTemplatePart = location.params.postType === TEMPLATE_PART_POST_TYPE; - const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE; + const previousTemplateId = location.state?.fromTemplateId; - const isFocusMode = isTemplatePart || isNavigationMenu; + const { isFocusMode } = useSelect( ( select ) => { + const { isEntityFocusMode } = unlock( select( editSiteStore ) ); + + return { + isFocusMode: isEntityFocusMode(), + }; + }, [] ); if ( ! isFocusMode || ! previousTemplateId ) { return null; diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index 15d638aa329e1..354afeb15b10e 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -22,10 +22,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor'; */ import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import { - FOCUSABLE_ENTITIES, - NAVIGATION_POST_TYPE, -} from '../../utils/constants'; +import { NAVIGATION_POST_TYPE } from '../../utils/constants'; const { ExperimentalBlockCanvas: BlockCanvas } = unlock( blockEditorPrivateApis @@ -53,12 +50,13 @@ function EditorCanvas( { getEditedPostType, __experimentalGetPreviewDeviceType, getCanvasMode, + isEntityFocusMode, } = unlock( select( editSiteStore ) ); const _templateType = getEditedPostType(); return { templateType: _templateType, - isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ), + isFocusMode: isEntityFocusMode(), deviceType: __experimentalGetPreviewDeviceType(), isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', canvasMode: getCanvasMode(), @@ -93,6 +91,7 @@ function EditorCanvas( { }; const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE; const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode; + // Hide the appender when: // - In navigation focus mode (should only allow the root Nav block). // - In view mode (i.e. not editing). 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 f8a9d9d4e892b..1e65ed163fc53 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -41,14 +41,12 @@ import { useHasEditorCanvasContainer, } from '../editor-canvas-container'; import { unlock } from '../../lock-unlock'; -import { FOCUSABLE_ENTITIES } from '../../utils/constants'; const { BlockContextualToolbar } = unlock( blockEditorPrivateApis ); export default function HeaderEditMode( { setListViewToggleElement } ) { const { deviceType, - templateType, isDistractionFree, blockEditorMode, blockSelectionStart, @@ -57,12 +55,15 @@ export default function HeaderEditMode( { setListViewToggleElement } ) { editorCanvasView, hasFixedToolbar, isZoomOutMode, + isFocusMode, } = useSelect( ( select ) => { const { __experimentalGetPreviewDeviceType, getEditedPostType } = select( editSiteStore ); const { getBlockSelectionStart, __unstableGetEditorMode } = select( blockEditorStore ); + const { isEntityFocusMode } = unlock( select( editSiteStore ) ); + const postType = getEditedPostType(); const { @@ -93,6 +94,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) { 'distractionFree' ), isZoomOutMode: __unstableGetEditorMode() === 'zoom-out', + isFocusMode: isEntityFocusMode(), }; }, [] ); @@ -106,8 +108,6 @@ export default function HeaderEditMode( { setListViewToggleElement } ) { const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); - const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType ); - const isZoomedOutView = blockEditorMode === 'zoom-out'; const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js index 1f1f6e999fdb2..bcf2a19d2ef32 100644 --- a/packages/edit-site/src/store/private-selectors.js +++ b/packages/edit-site/src/store/private-selectors.js @@ -1,3 +1,10 @@ +/** + * Internal dependencies + */ +import { FOCUSABLE_ENTITIES } from '../utils/constants'; + +import { getEditedPostType } from './selectors'; + /** * Returns the current canvas mode. * @@ -19,3 +26,8 @@ export function getCanvasMode( state ) { export function getEditorCanvasContainerView( state ) { return state.editorCanvasContainerView; } + +export function isEntityFocusMode( state ) { + const postType = getEditedPostType( state ); + return FOCUSABLE_ENTITIES.includes( postType ); +}