From 3f08f5cc5245658c3f1eeabd31f81e52e8b67e5f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 1 Dec 2023 15:11:08 +0100 Subject: [PATCH 1/2] Post Editor: Rely on the editor store for the template mode state --- .../data/data-core-edit-post.md | 20 +++---------- .../header/document-actions/index.js | 5 ++-- .../edit-post/src/components/header/index.js | 9 ++++-- .../components/header/mode-switcher/index.js | 3 +- .../edit-post/src/components/layout/index.js | 3 +- .../sidebar/settings-header/index.js | 6 ++-- .../sidebar/settings-sidebar/index.js | 4 ++- .../components/start-page-options/index.js | 6 ++-- .../src/components/visual-editor/index.js | 25 ++++------------- .../src/components/welcome-guide/index.js | 6 ++-- packages/edit-post/src/editor.js | 8 +++++- packages/edit-post/src/index.js | 5 ++-- .../plugins/welcome-guide-menu-item/index.js | 8 ++---- packages/edit-post/src/store/actions.js | 18 ++++++------ packages/edit-post/src/store/reducer.js | 15 ---------- packages/edit-post/src/store/selectors.js | 14 ++++++---- packages/edit-post/src/store/test/actions.js | 28 ------------------- 17 files changed, 66 insertions(+), 117 deletions(-) diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md index 7d6a1deed455b5..e09cf0caaec515 100644 --- a/docs/reference-guides/data/data-core-edit-post.md +++ b/docs/reference-guides/data/data-core-edit-post.md @@ -138,15 +138,9 @@ _Returns_ ### isEditingTemplate -Returns true if the template editing mode is enabled. - -_Parameters_ - -- _state_ `Object`: Global application state. - -_Returns_ +> **Deprecated** -- `boolean`: Whether we're editing the template. +Returns true if the template editing mode is enabled. ### isEditorPanelEnabled @@ -438,15 +432,9 @@ _Parameters_ ### setIsEditingTemplate -Returns an action object used to switch to template editing. - -_Parameters_ - -- _value_ `boolean`: Is editing template. +> **Deprecated** -_Returns_ - -- `Object`: Action object. +Returns an action object used to switch to template editing. ### setIsInserterOpened diff --git a/packages/edit-post/src/components/header/document-actions/index.js b/packages/edit-post/src/components/header/document-actions/index.js index 105b31e3122ac9..5ce58f179f3ab3 100644 --- a/packages/edit-post/src/components/header/document-actions/index.js +++ b/packages/edit-post/src/components/header/document-actions/index.js @@ -13,6 +13,7 @@ import { import { layout, chevronLeftSmall, chevronRightSmall } from '@wordpress/icons'; import { store as commandsStore } from '@wordpress/commands'; import { displayShortcut } from '@wordpress/keycodes'; +import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -28,7 +29,7 @@ function DocumentActions() { }; }, [] ); const { clearSelectedBlock } = useDispatch( blockEditorStore ); - const { setIsEditingTemplate } = useDispatch( editPostStore ); + const { setRenderingMode } = useDispatch( editorStore ); const { open: openCommandCenter } = useDispatch( commandsStore ); if ( ! template ) { @@ -48,7 +49,7 @@ function DocumentActions() { className="edit-post-document-actions__back" onClick={ () => { clearSelectedBlock(); - setIsEditingTemplate( false ); + setRenderingMode( 'post-only' ); } } icon={ isRTL() ? chevronRightSmall : chevronLeftSmall } > diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index c1c8222394979d..8ac8e47e01dbaa 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -10,7 +10,11 @@ import { privateApis as blockEditorPrivateApis, store as blockEditorStore, } from '@wordpress/block-editor'; -import { PostSavedState, PostPreviewButton } from '@wordpress/editor'; +import { + PostSavedState, + PostPreviewButton, + store as editorStore, +} from '@wordpress/editor'; import { useEffect, useRef, useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -73,7 +77,8 @@ function Header( { blockSelectionStart: select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - isEditingTemplate: select( editPostStore ).isEditingTemplate(), + isEditingTemplate: + select( editorStore ).getRenderingMode() !== 'post-only', isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ), diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js index b8d7f912180b60..93c4ead745ffb4 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/edit-post/src/components/header/mode-switcher/index.js @@ -44,7 +44,8 @@ function ModeSwitcher() { select( editorStore ).getEditorSettings().richEditingEnabled, isCodeEditingEnabled: select( editorStore ).getEditorSettings().codeEditingEnabled, - isEditingTemplate: select( editPostStore ).isEditingTemplate(), + isEditingTemplate: + select( editorStore ).getRenderingMode() !== 'post-only', mode: select( editPostStore ).getEditorMode(), } ), [] diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 9c854dc33636db..bbf33613cb4241 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -165,7 +165,8 @@ function Layout() { const postTypeLabel = getPostTypeLabel(); return { - isTemplateMode: select( editPostStore ).isEditingTemplate(), + isTemplateMode: + select( editorStore ).getRenderingMode() !== 'post-only', hasFixedToolbar: select( editPostStore ).isFeatureActive( 'fixedToolbar' ), sidebarIsOpened: !! ( diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js index f4f7a34db0bc3d..fb2bf8f486f51c 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/edit-post/src/components/sidebar/settings-header/index.js @@ -18,12 +18,12 @@ const SettingsHeader = ( { sidebarName } ) => { const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' ); const { documentLabel, isTemplateMode } = useSelect( ( select ) => { - const postTypeLabel = select( editorStore ).getPostTypeLabel(); + const { getPostTypeLabel, getRenderingMode } = select( editorStore ); return { // translators: Default label for the Document sidebar tab, not selected. - documentLabel: postTypeLabel || _x( 'Document', 'noun' ), - isTemplateMode: select( editPostStore ).isEditingTemplate(), + documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ), + isTemplateMode: getRenderingMode() !== 'post-only', }; }, [] ); diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 8450fec0225932..42ad255d79e053 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -11,6 +11,7 @@ import { isRTL, __ } from '@wordpress/i18n'; import { drawerLeft, drawerRight } from '@wordpress/icons'; import { store as interfaceStore } from '@wordpress/interface'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; +import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -63,7 +64,8 @@ const SettingsSidebar = () => { return { sidebarName: sidebar, keyboardShortcut: shortcut, - isTemplateMode: select( editPostStore ).isEditingTemplate(), + isTemplateMode: + select( editorStore ).getRenderingMode() !== 'post-only', }; }, [] diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/edit-post/src/components/start-page-options/index.js index 77264d27a5e7df..0ef3e166e8ee1a 100644 --- a/packages/edit-post/src/components/start-page-options/index.js +++ b/packages/edit-post/src/components/start-page-options/index.js @@ -90,11 +90,11 @@ function StartPageOptionsModal( { onClose } ) { export default function StartPageOptions() { const [ isClosed, setIsClosed ] = useState( false ); const shouldEnableModal = useSelect( ( select ) => { - const { isCleanNewPost } = select( editorStore ); - const { isEditingTemplate, isFeatureActive } = select( editPostStore ); + const { isCleanNewPost, getRenderingMode } = select( editorStore ); + const { isFeatureActive } = select( editPostStore ); return ( - ! isEditingTemplate() && + getRenderingMode() === 'post-only' && ! isFeatureActive( 'welcomeGuide' ) && isCleanNewPost() ); diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 5b9290fff51375..3c5ba8d0373049 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -16,9 +16,9 @@ import { __experimentalUseResizeCanvas as useResizeCanvas, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; -import { useRef, useMemo, useEffect } from '@wordpress/element'; +import { useRef, useMemo } from '@wordpress/element'; import { __unstableMotion as motion } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; import { store as blocksStore } from '@wordpress/blocks'; @@ -43,20 +43,16 @@ export default function VisualEditor( { styles } ) { isBlockBasedTheme, hasV3BlocksOnly, } = useSelect( ( select ) => { - const { - isFeatureActive, - isEditingTemplate, - __experimentalGetPreviewDeviceType, - } = select( editPostStore ); - const { getEditorSettings } = select( editorStore ); + const { isFeatureActive, __experimentalGetPreviewDeviceType } = + select( editPostStore ); + const { getEditorSettings, getRenderingMode } = select( editorStore ); const { getBlockTypes } = select( blocksStore ); - const _isTemplateMode = isEditingTemplate(); const editorSettings = getEditorSettings(); return { deviceType: __experimentalGetPreviewDeviceType(), isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), - isTemplateMode: _isTemplateMode, + isTemplateMode: getRenderingMode() !== 'post-only', isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; @@ -67,7 +63,6 @@ export default function VisualEditor( { styles } ) { ( select ) => select( editPostStore ).hasMetaBoxes(), [] ); - const { setRenderingMode } = useDispatch( editorStore ); const desktopCanvasStyles = { height: '100%', width: '100%', @@ -126,14 +121,6 @@ export default function VisualEditor( { styles } ) { deviceType === 'Tablet' || deviceType === 'Mobile'; - useEffect( () => { - if ( isTemplateMode ) { - setRenderingMode( 'all' ); - } else { - setRenderingMode( 'post-only' ); - } - }, [ isTemplateMode, setRenderingMode ] ); - return ( { - const { isFeatureActive, isEditingTemplate } = select( editPostStore ); - const _isTemplateMode = isEditingTemplate(); + const { isFeatureActive } = select( editPostStore ); + const { getRenderingMode } = select( editorStore ); + const _isTemplateMode = getRenderingMode() !== 'post-only'; const feature = _isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide'; diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index cff867c3f7a2cb..2394ebb3a3a742 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -9,7 +9,7 @@ import { store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; -import { useMemo } from '@wordpress/element'; +import { useEffect, useMemo } from '@wordpress/element'; import { SlotFillProvider } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -142,6 +142,12 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) { keepCaretInsideBlock, ] ); + // The default mode of the post editor is "post-only" mode. + const { setRenderingMode } = useDispatch( editorStore ); + useEffect( () => { + setRenderingMode( 'post-only' ); + }, [ setRenderingMode ] ); + if ( ! post ) { return null; } diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index fe967eeeed337f..64ddf1d9fb08ba 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -15,6 +15,7 @@ import { registerLegacyWidgetBlock, registerWidgetGroupBlock, } from '@wordpress/widgets'; +import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -93,7 +94,7 @@ export function initializeEditor( 'removeTemplatePartsFromInserter', ( canInsert, blockType ) => { if ( - ! select( editPostStore ).isEditingTemplate() && + select( editorStore ).getRenderingMode() === 'post-only' && blockType.name === 'core/template-part' ) { return false; @@ -118,7 +119,7 @@ export function initializeEditor( { getBlockParentsByBlockName } ) => { if ( - ! select( editPostStore ).isEditingTemplate() && + select( editorStore ).getRenderingMode() === 'post-only' && blockType.name === 'core/post-content' ) { return ( diff --git a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js index 24eec1114a0a7d..394e148603eb0a 100644 --- a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js +++ b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js @@ -4,15 +4,11 @@ import { useSelect } from '@wordpress/data'; import { PreferenceToggleMenuItem } from '@wordpress/preferences'; import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../store'; +import { store as editorStore } from '@wordpress/editor'; export default function WelcomeGuideMenuItem() { const isTemplateMode = useSelect( - ( select ) => select( editPostStore ).isEditingTemplate(), + ( select ) => select( editorStore ).getRenderingMode() !== 'post-only', [] ); diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index 27e45ab0edf9d6..fd1f48bbd4baa9 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -513,14 +513,14 @@ export const setIsListViewOpened = /** * Returns an action object used to switch to template editing. * - * @param {boolean} value Is editing template. - * @return {Object} Action object. + * @deprecated */ -export function setIsEditingTemplate( value ) { - return { - type: 'SET_IS_EDITING_TEMPLATE', - value, - }; +export function setIsEditingTemplate() { + deprecated( "select( 'core/edit-post' ).setIsEditingTemplate", { + since: '6.5', + alternative: "select( 'core/editor').setRenderingMode", + } ); + return { type: 'NOTHING' }; } /** @@ -530,8 +530,8 @@ export function setIsEditingTemplate( value ) { */ export const __unstableSwitchToTemplateMode = ( newTemplate = false ) => - ( { registry, select, dispatch } ) => { - dispatch( setIsEditingTemplate( true ) ); + ( { registry, select } ) => { + registry.dispatch( editorStore ).setRenderingMode( 'all' ); const isWelcomeGuideActive = select.isFeatureActive( 'welcomeGuideTemplate' ); diff --git a/packages/edit-post/src/store/reducer.js b/packages/edit-post/src/store/reducer.js index 622b2e2667f7fc..4748c4fff49723 100644 --- a/packages/edit-post/src/store/reducer.js +++ b/packages/edit-post/src/store/reducer.js @@ -153,20 +153,6 @@ export function listViewPanel( state = false, action ) { return state; } -/** - * Reducer tracking whether template editing is on or off. - * - * @param {boolean} state - * @param {Object} action - */ -function isEditingTemplate( state = false, action ) { - switch ( action.type ) { - case 'SET_IS_EDITING_TEMPLATE': - return action.value; - } - return state; -} - /** * Reducer tracking whether meta boxes are initialized. * @@ -196,5 +182,4 @@ export default combineReducers( { deviceType, blockInserterPanel, listViewPanel, - isEditingTemplate, } ); diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js index 570c03d930a7ec..f7b8f91d380dc0 100644 --- a/packages/edit-post/src/store/selectors.js +++ b/packages/edit-post/src/store/selectors.js @@ -498,13 +498,15 @@ export function isListViewOpened( state ) { /** * Returns true if the template editing mode is enabled. * - * @param {Object} state Global application state. - * - * @return {boolean} Whether we're editing the template. + * @deprecated */ -export function isEditingTemplate( state ) { - return state.isEditingTemplate; -} +export const isEditingTemplate = createRegistrySelector( ( select ) => () => { + deprecated( `select( 'core/edit-post' ).isEditingTemplate`, { + since: '6.5', + alternative: `select( 'core/editor' ).getRenderingMode`, + } ); + return select( editorStore ).getRenderingMode() !== 'post-only'; +} ); /** * Returns true if meta boxes are initialized. diff --git a/packages/edit-post/src/store/test/actions.js b/packages/edit-post/src/store/test/actions.js index 76f527935cdf3e..39b889f2fdcbc0 100644 --- a/packages/edit-post/src/store/test/actions.js +++ b/packages/edit-post/src/store/test/actions.js @@ -146,34 +146,6 @@ describe( 'actions', () => { ).toBe( true ); } ); - describe( '__unstableSwitchToTemplateMode', () => { - it( 'welcome guide is active', () => { - // Activate `welcomeGuideTemplate` feature. - registry - .dispatch( editPostStore ) - .toggleFeature( 'welcomeGuideTemplate' ); - registry.dispatch( editPostStore ).__unstableSwitchToTemplateMode(); - expect( - registry.select( editPostStore ).isEditingTemplate() - ).toBeTruthy(); - const notices = registry.select( noticesStore ).getNotices(); - expect( notices ).toHaveLength( 0 ); - } ); - - it( 'welcome guide is inactive', () => { - expect( - registry.select( editPostStore ).isEditingTemplate() - ).toBeFalsy(); - registry.dispatch( editPostStore ).__unstableSwitchToTemplateMode(); - expect( - registry.select( editPostStore ).isEditingTemplate() - ).toBeTruthy(); - const notices = registry.select( noticesStore ).getNotices(); - expect( notices ).toHaveLength( 1 ); - expect( notices[ 0 ].content ).toMatch( 'template' ); - } ); - } ); - describe( 'hideBlockTypes', () => { it( 'adds the hidden block type to the preferences', () => { registry From 639385010e0ec43062ae4c74ac549b92431617b9 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 4 Dec 2023 09:10:52 +0100 Subject: [PATCH 2/2] Fix deprecations --- packages/edit-post/src/store/actions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js index fd1f48bbd4baa9..0380b0f7e98f33 100644 --- a/packages/edit-post/src/store/actions.js +++ b/packages/edit-post/src/store/actions.js @@ -516,9 +516,9 @@ export const setIsListViewOpened = * @deprecated */ export function setIsEditingTemplate() { - deprecated( "select( 'core/edit-post' ).setIsEditingTemplate", { + deprecated( "dispatch( 'core/edit-post' ).setIsEditingTemplate", { since: '6.5', - alternative: "select( 'core/editor').setRenderingMode", + alternative: "dispatch( 'core/editor').setRenderingMode", } ); return { type: 'NOTHING' }; }