From 7d21c9badf9318a6097d09669ecc86f63dfeac61 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 14 Nov 2024 11:11:25 +0100 Subject: [PATCH] Site Editor: Deprecate edited entity state (#66965) Co-authored-by: youknowriad Co-authored-by: Mamaduka --- .../data/data-core-edit-site.md | 14 ++++ packages/e2e-test-utils/src/site-editor.js | 8 +- .../edit-site/src/components/app/index.js | 3 - .../block-editor/use-site-editor-settings.js | 29 +++---- .../edit-site/src/components/editor/index.js | 59 ++++++------- .../use-resolve-edited-entity.js} | 27 +++--- .../src/components/posts-app/index.js | 3 - packages/edit-site/src/store/actions.js | 15 ++++ packages/edit-site/src/store/selectors.js | 25 +++++- packages/edit-site/src/store/test/actions.js | 83 ------------------- packages/edit-site/src/store/test/reducer.js | 69 --------------- .../edit-site/src/store/test/selectors.js | 41 --------- .../specs/site-editor/template-revert.spec.js | 8 +- 13 files changed, 108 insertions(+), 276 deletions(-) rename packages/edit-site/src/components/{sync-state-with-url/use-init-edited-entity-from-url.js => editor/use-resolve-edited-entity.js} (93%) delete mode 100644 packages/edit-site/src/store/test/actions.js delete mode 100644 packages/edit-site/src/store/test/reducer.js delete mode 100644 packages/edit-site/src/store/test/selectors.js diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index 775dd66a821ef..a16c53861daad 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -52,6 +52,8 @@ _Returns_ ### getEditedPostId +> **Deprecated** + Returns the ID of the currently edited template or template part. _Parameters_ @@ -64,6 +66,8 @@ _Returns_ ### getEditedPostType +> **Deprecated** + Returns the current edited post type (wp_template or wp_template_part). _Parameters_ @@ -189,6 +193,8 @@ _Returns_ ### isPage +> **Deprecated** + Whether or not the editor has a page loaded into it. _Related_ @@ -273,6 +279,8 @@ _Parameters_ ### setEditedEntity +> **Deprecated** + Action that sets an edited entity. _Parameters_ @@ -287,6 +295,8 @@ _Returns_ ### setEditedPostContext +> **Deprecated** + Set's the current block editor context. _Parameters_ @@ -345,6 +355,8 @@ _Parameters_ ### setNavigationMenu +> **Deprecated** + Action that sets a navigation menu. _Parameters_ @@ -385,6 +397,8 @@ _Returns_ ### setTemplatePart +> **Deprecated** + Action that sets a template part. _Parameters_ diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js index 98ba34f7db4f5..d3717982ba3a5 100644 --- a/packages/e2e-test-utils/src/site-editor.js +++ b/packages/e2e-test-utils/src/site-editor.js @@ -44,11 +44,11 @@ export async function disableSiteEditorWelcomeGuide() { export function getCurrentSiteEditorContent() { return page.evaluate( () => { const postId = window.wp.data - .select( 'core/edit-site' ) - .getEditedPostId(); + .select( 'core/editor' ) + .getCurrentPostId(); const postType = window.wp.data - .select( 'core/edit-site' ) - .getEditedPostType(); + .select( 'core/editor' ) + .getCurrentPostType(); const record = window.wp.data .select( 'core' ) .getEditedEntityRecord( 'postType', postType, postId ); diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js index 0551e6b295fbc..3588565fcb3c1 100644 --- a/packages/edit-site/src/components/app/index.js +++ b/packages/edit-site/src/components/app/index.js @@ -18,7 +18,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import Layout from '../layout'; import { unlock } from '../../lock-unlock'; import { useCommonCommands } from '../../hooks/commands/use-common-commands'; -import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import useActiveRoute from '../layout/router'; import useSetCommandContext from '../../hooks/commands/use-set-command-context'; import { useRegisterSiteEditorRoutes } from '../site-editor-routes'; @@ -27,8 +26,6 @@ const { RouterProvider } = unlock( routerPrivateApis ); const { GlobalStylesProvider } = unlock( editorPrivateApis ); function AppLayout() { - // This ensures the edited entity id and type are initialized properly. - useInitEditedEntityFromURL(); useCommonCommands(); useSetCommandContext(); useRegisterSiteEditorRoutes(); diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index 37fa0a2eaf30c..5c75de6d81e72 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -36,26 +36,21 @@ function useNavigateToPreviousEntityRecord() { return goBack; } -export function useSpecificEditorSettings() { +export function useSpecificEditorSettings( + shouldUseTemplateAsDefaultRenderingMode +) { const { params } = useLocation(); const { canvas = 'view' } = params; const onNavigateToEntityRecord = useNavigateToEntityRecord(); - const { settings, shouldUseTemplateAsDefaultRenderingMode } = useSelect( - ( select ) => { - const { getEditedPostContext, getSettings } = unlock( - select( editSiteStore ) - ); - const _context = getEditedPostContext(); - return { - settings: getSettings(), - // TODO: The `postType` check should be removed when the default rendering mode per post type is merged. - // @see https://github.com/WordPress/gutenberg/pull/62304/ - shouldUseTemplateAsDefaultRenderingMode: - _context?.postId && _context?.postType !== 'post', - }; - }, - [] - ); + const { settings } = useSelect( ( select ) => { + const { getSettings } = select( editSiteStore ); + return { + settings: getSettings(), + }; + }, [] ); + + // TODO: The `shouldUseTemplateAsDefaultRenderingMode` check should be removed when the default rendering mode per post type is merged. + // @see https://github.com/WordPress/gutenberg/pull/62304/ const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode ? 'template-locked' : 'post-only'; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 7eff0da660d27..51d734f25c6ad 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -50,6 +50,10 @@ import useEditorTitle from './use-editor-title'; import { useIsSiteEditorLoading } from '../layout/hooks'; import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas'; import { TEMPLATE_POST_TYPE } from '../../utils/constants'; +import { + useResolveEditedEntity, + useSyncDeprecatedEntityIntoState, +} from './use-resolve-edited-entity'; const { Editor, BackButton } = unlock( editorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); @@ -85,38 +89,25 @@ export default function EditSiteEditor( { isPostsList = false } ) { const { canvas = 'view' } = params; const isLoading = useIsSiteEditorLoading(); useAdaptEditorToCanvas( canvas ); + const entity = useResolveEditedEntity(); + // deprecated sync state with url + useSyncDeprecatedEntityIntoState( entity ); + const { postType, postId, context } = entity; const { - editedPostType, - editedPostId, - contextPostType, - contextPostId, - isEditingPage, supportsGlobalStyles, showIconLabels, editorCanvasView, currentPostIsTrashed, hasSiteIcon, } = useSelect( ( select ) => { - const { - getEditorCanvasContainerView, - getEditedPostContext, - isPage, - getEditedPostType, - getEditedPostId, - } = unlock( select( editSiteStore ) ); + const { getEditorCanvasContainerView } = unlock( + select( editSiteStore ) + ); const { get } = select( preferencesStore ); const { getCurrentTheme, getEntityRecord } = select( coreDataStore ); - const _context = getEditedPostContext(); const siteData = getEntityRecord( 'root', '__unstableBase', undefined ); - // The currently selected entity to display. - // Typically template or template part in the site editor. return { - editedPostType: getEditedPostType(), - editedPostId: getEditedPostId(), - contextPostType: _context?.postId ? _context.postType : undefined, - contextPostId: _context?.postId ? _context.postId : undefined, - isEditingPage: isPage(), supportsGlobalStyles: getCurrentTheme()?.is_block_theme, showIconLabels: get( 'core', 'showIconLabels' ), editorCanvasView: getEditorCanvasContainerView(), @@ -126,10 +117,10 @@ export default function EditSiteEditor( { isPostsList = false } ) { hasSiteIcon: !! siteData?.site_icon_url, }; }, [] ); - const postWithTemplate = !! contextPostId; + const postWithTemplate = !! context?.postId; useEditorTitle( - postWithTemplate ? contextPostType : editedPostType, - postWithTemplate ? contextPostId : editedPostId + postWithTemplate ? context.postType : postType, + postWithTemplate ? context.postId : postId ); const _isPreviewingTheme = isPreviewingTheme(); const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); @@ -140,7 +131,9 @@ export default function EditSiteEditor( { isPostsList = false } ) { 'edit-site-editor__loading-progress' ); - const settings = useSpecificEditorSettings(); + const settings = useSpecificEditorSettings( + !! context?.postId && context?.postType !== 'post' + ); const styles = useMemo( () => [ ...settings.styles, @@ -219,25 +212,21 @@ export default function EditSiteEditor( { isPostsList = false } ) { return ( <> { isEditMode && } { ! isReady ? : null } { isEditMode && ( ) } { isReady && ( + ! postWithTemplate && ( + + ) } > { isEditMode && ( diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/editor/use-resolve-edited-entity.js similarity index 93% rename from packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js rename to packages/edit-site/src/components/editor/use-resolve-edited-entity.js index 2dbd143766e67..eb19b3cea9537 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +++ b/packages/edit-site/src/components/editor/use-resolve-edited-entity.js @@ -5,7 +5,6 @@ import { useEffect, useMemo } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreDataStore } from '@wordpress/core-data'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -30,7 +29,9 @@ const postTypesWithoutParentTemplate = [ const authorizedPostTypes = [ 'page', 'post' ]; -function useResolveEditedEntityAndContext( { postId, postType } ) { +export function useResolveEditedEntity() { + const { params = {} } = useLocation(); + const { postId, postType } = params; const { hasLoadedAllDependencies, homepageId, postsPageId } = useSelect( ( select ) => { const { getEntityRecord } = select( coreDataStore ); @@ -233,25 +234,17 @@ function useResolveEditedEntityAndContext( { postId, postType } ) { return { isReady: false }; } -export default function useInitEditedEntityFromURL() { - const { params = {} } = useLocation(); - const { postType, postId, context, isReady } = - useResolveEditedEntityAndContext( params ); - +export function useSyncDeprecatedEntityIntoState( { + postType, + postId, + context, + isReady, +} ) { const { setEditedEntity } = useDispatch( editSiteStore ); - const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); useEffect( () => { if ( isReady ) { - resetZoomLevel(); setEditedEntity( postType, postId, context ); } - }, [ - isReady, - postType, - postId, - context, - setEditedEntity, - resetZoomLevel, - ] ); + }, [ isReady, postType, postId, context, setEditedEntity ] ); } diff --git a/packages/edit-site/src/components/posts-app/index.js b/packages/edit-site/src/components/posts-app/index.js index 8b5377bb2e65b..80d2c1c7eba86 100644 --- a/packages/edit-site/src/components/posts-app/index.js +++ b/packages/edit-site/src/components/posts-app/index.js @@ -10,7 +10,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies */ -import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import Layout from '../layout'; import useActiveRoute from './router'; import { unlock } from '../../lock-unlock'; @@ -19,8 +18,6 @@ const { RouterProvider } = unlock( routerPrivateApis ); const { GlobalStylesProvider } = unlock( editorPrivateApis ); function PostsLayout() { - // This ensures the edited entity id and type are initialized properly. - useInitEditedEntityFromURL(); const route = useActiveRoute(); return ; } diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 127dd9993b68f..269f58c57d00a 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -142,11 +142,16 @@ export const removeTemplate = /** * Action that sets a template part. * + * @deprecated * @param {string} templatePartId The template part ID. * * @return {Object} Action object. */ export function setTemplatePart( templatePartId ) { + deprecated( "dispatch( 'core/edit-site' ).setTemplatePart", { + since: '6.8', + } ); + return { type: 'SET_EDITED_POST', postType: TEMPLATE_PART_POST_TYPE, @@ -157,11 +162,16 @@ export function setTemplatePart( templatePartId ) { /** * Action that sets a navigation menu. * + * @deprecated * @param {string} navigationMenuId The Navigation Menu Post ID. * * @return {Object} Action object. */ export function setNavigationMenu( navigationMenuId ) { + deprecated( "dispatch( 'core/edit-site' ).setNavigationMenu", { + since: '6.8', + } ); + return { type: 'SET_EDITED_POST', postType: NAVIGATION_POST_TYPE, @@ -172,6 +182,7 @@ export function setNavigationMenu( navigationMenuId ) { /** * Action that sets an edited entity. * + * @deprecated * @param {string} postType The entity's post type. * @param {string} postId The entity's ID. * @param {Object} context The entity's context. @@ -204,11 +215,15 @@ export function setHomeTemplateId() { /** * Set's the current block editor context. * + * @deprecated * @param {Object} context The context object. * * @return {Object} Action object. */ export function setEditedPostContext( context ) { + deprecated( "dispatch( 'core/edit-site' ).setEditedPostContext", { + since: '6.8', + } ); return { type: 'SET_EDITED_POST_CONTEXT', context, diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index ddef4a71d0a91..cd50200e42cad 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -135,22 +135,32 @@ export function getHomeTemplateId() { /** * Returns the current edited post type (wp_template or wp_template_part). * + * @deprecated * @param {Object} state Global application state. * * @return {?TemplateType} Template type. */ export function getEditedPostType( state ) { + deprecated( "select( 'core/edit-site' ).getEditedPostType", { + since: '6.8', + alternative: "select( 'core/editor' ).getCurrentPostType", + } ); return state.editedPost.postType; } /** * Returns the ID of the currently edited template or template part. * + * @deprecated * @param {Object} state Global application state. * * @return {?string} Post ID. */ export function getEditedPostId( state ) { + deprecated( "select( 'core/edit-site' ).getEditedPostId", { + since: '6.8', + alternative: "select( 'core/editor' ).getCurrentPostId", + } ); return state.editedPost.id; } @@ -163,6 +173,10 @@ export function getEditedPostId( state ) { * @return {Object} Page. */ export function getEditedPostContext( state ) { + deprecated( "select( 'core/edit-site' ).getEditedPostContext", { + since: '6.8', + } ); + return state.editedPost.context; } @@ -175,6 +189,10 @@ export function getEditedPostContext( state ) { * @return {Object} Page. */ export function getPage( state ) { + deprecated( "select( 'core/edit-site' ).getPage", { + since: '6.8', + } ); + return { context: state.editedPost.context }; } @@ -333,12 +351,17 @@ export function isNavigationOpened() { * Whether or not the editor has a page loaded into it. * * @see setPage - * + * @deprecated * @param {Object} state Global application state. * * @return {boolean} Whether or not the editor has a page loaded into it. */ export function isPage( state ) { + deprecated( "select( 'core/edit-site' ).isPage", { + since: '6.8', + alternative: "select( 'core/editor' ).getCurrentPostType", + } ); + return !! state.editedPost.context?.postId; } diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js deleted file mode 100644 index 3fbe5d19aa94e..0000000000000 --- a/packages/edit-site/src/store/test/actions.js +++ /dev/null @@ -1,83 +0,0 @@ -/** - * WordPress dependencies - */ -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { store as coreStore } from '@wordpress/core-data'; -import { createRegistry } from '@wordpress/data'; -import { store as noticesStore } from '@wordpress/notices'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '..'; -import { unlock } from '../../lock-unlock'; - -const { interfaceStore } = unlock( editorPrivateApis ); - -function createRegistryWithStores() { - // create a registry - const registry = createRegistry(); - - // register stores - registry.register( editorStore ); - registry.register( blockEditorStore ); - registry.register( coreStore ); - registry.register( editSiteStore ); - registry.register( interfaceStore ); - registry.register( noticesStore ); - registry.register( preferencesStore ); - - return registry; -} - -describe( 'actions', () => { - describe( 'toggleFeature', () => { - it( 'should toggle a feature flag', () => { - const registry = createRegistryWithStores(); - - // Should start as undefined. - expect( - registry - .select( preferencesStore ) - .get( 'core/edit-site', 'name' ) - ).toBe( undefined ); - - // Toggle on. - registry.dispatch( editSiteStore ).toggleFeature( 'name' ); - expect( - registry - .select( preferencesStore ) - .get( 'core/edit-site', 'name' ) - ).toBe( true ); - - // Toggle off again. - registry.dispatch( editSiteStore ).toggleFeature( 'name' ); - expect( - registry - .select( preferencesStore ) - .get( 'core/edit-site', 'name' ) - ).toBe( false ); - - // Expect a deprecation warning. - expect( console ).toHaveWarned(); - } ); - } ); - - describe( 'setTemplatePart', () => { - it( 'should set template part', () => { - const registry = createRegistryWithStores(); - - const ID = 1; - registry.dispatch( editSiteStore ).setTemplatePart( ID ); - - const select = registry.select( editSiteStore ); - expect( select.getEditedPostId() ).toBe( ID ); - expect( select.getEditedPostType() ).toBe( 'wp_template_part' ); - } ); - } ); -} ); diff --git a/packages/edit-site/src/store/test/reducer.js b/packages/edit-site/src/store/test/reducer.js deleted file mode 100644 index 9e7929e737fb3..0000000000000 --- a/packages/edit-site/src/store/test/reducer.js +++ /dev/null @@ -1,69 +0,0 @@ -/** - * External dependencies - */ -import deepFreeze from 'deep-freeze'; - -/** - * Internal dependencies - */ -import { settings, editedPost } from '../reducer'; - -describe( 'state', () => { - describe( 'settings()', () => { - it( 'should apply default state', () => { - expect( settings( undefined, {} ) ).toEqual( {} ); - } ); - - it( 'should default to returning the same state', () => { - const state = {}; - expect( settings( state, {} ) ).toBe( state ); - } ); - - it( 'should update settings with a shallow merge', () => { - expect( - settings( - deepFreeze( { - setting: { key: 'value' }, - otherSetting: 'value', - } ), - { - type: 'UPDATE_SETTINGS', - settings: { setting: { newKey: 'newValue' } }, - } - ) - ).toEqual( { - setting: { newKey: 'newValue' }, - otherSetting: 'value', - } ); - } ); - } ); - - describe( 'editedPost()', () => { - it( 'should apply default state', () => { - expect( editedPost( undefined, {} ) ).toEqual( {} ); - } ); - - it( 'should default to returning the same state', () => { - const state = []; - expect( editedPost( state, {} ) ).toBe( state ); - } ); - - it( 'should update when a template is set', () => { - expect( - editedPost( - { id: 1, type: 'wp_template' }, - { - type: 'SET_EDITED_POST', - postType: 'wp_template', - id: 2, - context: { templateSlug: 'slug' }, - } - ) - ).toEqual( { - postType: 'wp_template', - id: 2, - context: { templateSlug: 'slug' }, - } ); - } ); - } ); -} ); diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js deleted file mode 100644 index c0bb074f8f036..0000000000000 --- a/packages/edit-site/src/store/test/selectors.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Internal dependencies - */ -import { getEditedPostType, getEditedPostId, isPage } from '../selectors'; - -describe( 'selectors', () => { - describe( 'getEditedPostId', () => { - it( 'returns the template ID', () => { - const state = { editedPost: { id: 10 } }; - expect( getEditedPostId( state ) ).toBe( 10 ); - } ); - } ); - - describe( 'getEditedPostType', () => { - it( 'returns the template type', () => { - const state = { editedPost: { postType: 'wp_template' } }; - expect( getEditedPostType( state ) ).toBe( 'wp_template' ); - } ); - } ); - - describe( 'isPage', () => { - it( 'returns true if the edited post type is a page', () => { - const state = { - editedPost: { - postType: 'wp_template', - context: { postType: 'page', postId: 123 }, - }, - }; - expect( isPage( state ) ).toBe( true ); - } ); - - it( 'returns false if the edited post type is a template', () => { - const state = { - editedPost: { - postType: 'wp_template', - }, - }; - expect( isPage( state ) ).toBe( false ); - } ); - } ); -} ); diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js index 1f8d9ea73d7fd..50a5598f400eb 100644 --- a/test/e2e/specs/site-editor/template-revert.spec.js +++ b/test/e2e/specs/site-editor/template-revert.spec.js @@ -232,11 +232,11 @@ class TemplateRevertUtils { async getCurrentSiteEditorContent() { return this.page.evaluate( () => { const postId = window.wp.data - .select( 'core/edit-site' ) - .getEditedPostId(); + .select( 'core/editor' ) + .getCurrentPostId(); const postType = window.wp.data - .select( 'core/edit-site' ) - .getEditedPostType(); + .select( 'core/editor' ) + .getCurrentPostType(); const record = window.wp.data .select( 'core' ) .getEditedEntityRecord( 'postType', postType, postId );