From 6add64218c93940a1aa7315bdec024d5cfc3a71b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 5 Jul 2023 14:08:32 +0100 Subject: [PATCH 1/8] Coerce Navigation postId to number --- .../sidebar-navigation-screen-navigation-menu/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 5ae860d4bb8298..562b18def4fcfb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -22,9 +22,10 @@ import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/ export const postType = `wp_navigation`; export default function SidebarNavigationScreenNavigationMenu() { - const { - params: { postId }, - } = useNavigator(); + const { params } = useNavigator(); + + // See https://github.com/WordPress/gutenberg/pull/52120. + const postId = Number( params?.postId ); const { record: navigationMenu, isResolving } = useEntityRecord( 'postType', From 0fdff62a4944002d0aebb485f4be1f52406e9999 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 5 Jul 2023 14:13:52 +0100 Subject: [PATCH 2/8] Normalize postId argument depending on entity type --- .../sync-state-with-url/use-init-edited-entity-from-url.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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/sync-state-with-url/use-init-edited-entity-from-url.js index 19518f650c0be3..3e16081bda4b03 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js @@ -49,10 +49,10 @@ export default function useInitEditedEntityFromURL() { setTemplatePart( postId ); break; case 'wp_navigation': - setNavigationMenu( postId ); + setNavigationMenu( Number( postId ) ); break; case 'wp_block': - setEditedEntity( postType, postId ); + setEditedEntity( postType, Number( postId ) ); break; default: setPage( { @@ -66,7 +66,7 @@ export default function useInitEditedEntityFromURL() { // In all other cases, we need to set the home page in the site editor view. if ( homepageId ) { setPage( { - context: { postType: 'page', postId: homepageId }, + context: { postType: 'page', postId: Number( homepageId ) }, } ); } else if ( ! isRequestingSite ) { setPage( { From 6397fd69812733fd767d86922fbf90dd3b89a5b9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 5 Jul 2023 14:23:32 +0100 Subject: [PATCH 3/8] Elminate additional resolver calls by passing correct recordKey type --- .../use-pattern-details.js | 9 +++++++++ .../src/components/use-edited-entity-record/index.js | 12 +++++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 9853e2e6de23bc..14be2abb6db27f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -21,6 +21,15 @@ import { } from '../sidebar-navigation-screen-details-panel'; export default function usePatternDetails( postType, postId ) { + const postTypesThatUseStringBasedIds = [ + 'wp_template', + 'wp_template_part', + ]; + + postId = ! postTypesThatUseStringBasedIds?.includes( postType ) + ? Number( postId ) + : postId; + const { getDescription, getTitle, record } = useEditedEntityRecord( postType, postId diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index 22a8bdc32a94a0..c73a11d6c2460a 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -21,7 +21,17 @@ export default function useEditedEntityRecord( postType, postId ) { const { __experimentalGetTemplateInfo: getTemplateInfo } = select( editorStore ); const usedPostType = postType ?? getEditedPostType(); - const usedPostId = postId ?? getEditedPostId(); + const postTypesThatUseStringBasedIds = [ + 'wp_template', + 'wp_template_part', + ]; + + let usedPostId = postId ?? getEditedPostId(); + + usedPostId = ! postTypesThatUseStringBasedIds?.includes( postType ) + ? Number( usedPostId ) + : usedPostId; + const _record = getEditedEntityRecord( 'postType', usedPostType, From 643cb8b5d5a305ccec158a6df9cfa3868dbf1638 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 5 Jul 2023 14:32:08 +0100 Subject: [PATCH 4/8] Use the correct post type in comparison --- .../src/components/use-edited-entity-record/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index c73a11d6c2460a..ef1e6fdf4ac806 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -28,7 +28,9 @@ export default function useEditedEntityRecord( postType, postId ) { let usedPostId = postId ?? getEditedPostId(); - usedPostId = ! postTypesThatUseStringBasedIds?.includes( postType ) + usedPostId = ! postTypesThatUseStringBasedIds?.includes( + usedPostType + ) ? Number( usedPostId ) : usedPostId; From 457ba2d4a5b350b0ddef44423e23ef67844ab160 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 5 Jul 2023 14:32:41 +0100 Subject: [PATCH 5/8] Standardzie normalizing postId when reading postID from URL --- .../use-init-edited-entity-from-url.js | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) 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/sync-state-with-url/use-init-edited-entity-from-url.js index 3e16081bda4b03..14a9d91f6522ee 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js @@ -15,7 +15,12 @@ import { unlock } from '../../lock-unlock'; const { useLocation } = unlock( routerPrivateApis ); export default function useInitEditedEntityFromURL() { - const { params: { postId, postType } = {} } = useLocation(); + const { params } = useLocation(); + + const { postType } = params; + + let postId = params?.postId; + const { isRequestingSite, homepageId, url } = useSelect( ( select ) => { const { getSite, getUnstableBase } = select( coreDataStore ); const siteData = getSite(); @@ -39,6 +44,15 @@ export default function useInitEditedEntityFromURL() { setNavigationMenu, } = useDispatch( editSiteStore ); + const postTypesThatUseStringBasedIds = [ + 'wp_template', + 'wp_template_part', + ]; + + postId = ! postTypesThatUseStringBasedIds?.includes( postType ) + ? Number( postId ) + : postId; + useEffect( () => { if ( postType && postId ) { switch ( postType ) { @@ -49,10 +63,10 @@ export default function useInitEditedEntityFromURL() { setTemplatePart( postId ); break; case 'wp_navigation': - setNavigationMenu( Number( postId ) ); + setNavigationMenu( postId ); break; case 'wp_block': - setEditedEntity( postType, Number( postId ) ); + setEditedEntity( postType, postId ); break; default: setPage( { From 37560fbe8f7104d2ddffa5d77d2aada71c9bda72 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 5 Jul 2023 14:32:54 +0100 Subject: [PATCH 6/8] Normalize postId for a Page --- .../src/components/sidebar-navigation-screen-page/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js index c5799d97a80645..cd5869cfceb8fb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -30,9 +30,9 @@ import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-d export default function SidebarNavigationScreenPage() { const navigator = useNavigator(); const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { - params: { postId }, - } = useNavigator(); + const { params } = useNavigator(); + + const postId = Number( params?.postId ); const { record } = useEntityRecord( 'postType', 'page', postId ); const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect( From 9d701042aa5743d11e0415c377ae477a5bd702e3 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 5 Jul 2023 16:21:41 +0100 Subject: [PATCH 7/8] Extract common util --- .../sidebar-navigation-screen-pattern/index.js | 7 +++++-- .../use-pattern-details.js | 10 ++-------- .../use-init-edited-entity-from-url.js | 12 ++---------- .../src/components/use-edited-entity-record/index.js | 11 ++--------- .../src/utils/normalize-post-id-for-post-type.js | 9 +++++++++ 5 files changed, 20 insertions(+), 29 deletions(-) create mode 100644 packages/edit-site/src/utils/normalize-post-id-for-post-type.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js index 39f28dba6d5204..4bf3a3e4da4565 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js @@ -16,13 +16,16 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e import usePatternDetails from './use-pattern-details'; import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import normalizePostIdForPostType from '../../utils/normalize-post-id-for-post-type'; export default function SidebarNavigationScreenPattern() { - const { params } = useNavigator(); const { categoryType } = getQueryArgs( window.location.href ); - const { postType, postId } = params; const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const { params } = useNavigator(); + const { postType } = params; + const postId = normalizePostIdForPostType( params?.postId, postType ); + useInitEditedEntityFromURL(); const patternDetails = usePatternDetails( postType, postId ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 14be2abb6db27f..068ec1f5606499 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -19,16 +19,10 @@ import { SidebarNavigationScreenDetailsPanelLabel, SidebarNavigationScreenDetailsPanelValue, } from '../sidebar-navigation-screen-details-panel'; +import normalizePostIdForPostType from '../../utils/normalize-post-id-for-post-type'; export default function usePatternDetails( postType, postId ) { - const postTypesThatUseStringBasedIds = [ - 'wp_template', - 'wp_template_part', - ]; - - postId = ! postTypesThatUseStringBasedIds?.includes( postType ) - ? Number( postId ) - : postId; + postId = normalizePostIdForPostType( postId, postType ); const { getDescription, getTitle, record } = useEditedEntityRecord( postType, 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/sync-state-with-url/use-init-edited-entity-from-url.js index 14a9d91f6522ee..3abaf952fd1fa1 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js @@ -11,6 +11,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import normalizePostIdForPostType from '../../utils/normalize-post-id-for-post-type'; const { useLocation } = unlock( routerPrivateApis ); @@ -19,7 +20,7 @@ export default function useInitEditedEntityFromURL() { const { postType } = params; - let postId = params?.postId; + const postId = normalizePostIdForPostType( params?.postId, postType ); const { isRequestingSite, homepageId, url } = useSelect( ( select ) => { const { getSite, getUnstableBase } = select( coreDataStore ); @@ -44,15 +45,6 @@ export default function useInitEditedEntityFromURL() { setNavigationMenu, } = useDispatch( editSiteStore ); - const postTypesThatUseStringBasedIds = [ - 'wp_template', - 'wp_template_part', - ]; - - postId = ! postTypesThatUseStringBasedIds?.includes( postType ) - ? Number( postId ) - : postId; - useEffect( () => { if ( postType && postId ) { switch ( postType ) { diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index ef1e6fdf4ac806..b0aff7800191c7 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -10,6 +10,7 @@ import { decodeEntities } from '@wordpress/html-entities'; * Internal dependencies */ import { store as editSiteStore } from '../../store'; +import normalizePostIdForPostType from '../../utils/normalize-post-id-for-post-type'; export default function useEditedEntityRecord( postType, postId ) { const { record, title, description, isLoaded, icon } = useSelect( @@ -21,18 +22,10 @@ export default function useEditedEntityRecord( postType, postId ) { const { __experimentalGetTemplateInfo: getTemplateInfo } = select( editorStore ); const usedPostType = postType ?? getEditedPostType(); - const postTypesThatUseStringBasedIds = [ - 'wp_template', - 'wp_template_part', - ]; let usedPostId = postId ?? getEditedPostId(); - usedPostId = ! postTypesThatUseStringBasedIds?.includes( - usedPostType - ) - ? Number( usedPostId ) - : usedPostId; + usedPostId = normalizePostIdForPostType( usedPostId, usedPostType ); const _record = getEditedEntityRecord( 'postType', diff --git a/packages/edit-site/src/utils/normalize-post-id-for-post-type.js b/packages/edit-site/src/utils/normalize-post-id-for-post-type.js new file mode 100644 index 00000000000000..8eb5153a77407a --- /dev/null +++ b/packages/edit-site/src/utils/normalize-post-id-for-post-type.js @@ -0,0 +1,9 @@ +const POST_TYPES_THAT_USE_STRING_BASED_IDS = [ + 'wp_template', + 'wp_template_part', +]; +export default function normalizePostIdForPostType( postId, postType ) { + return ! POST_TYPES_THAT_USE_STRING_BASED_IDS?.includes( postType ) + ? Number( postId ) + : postId; +} From 7fe87553e1504a4d0134152904db5c78edf09090 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 7 Jul 2023 13:24:02 +0100 Subject: [PATCH 8/8] Apply numericID test instead of maintaining list of recordKey types --- .../sidebar-navigation-screen-pattern/index.js | 4 ++-- .../use-pattern-details.js | 4 ++-- .../use-init-edited-entity-from-url.js | 4 ++-- .../src/components/use-edited-entity-record/index.js | 4 ++-- .../src/utils/normalize-post-id-for-post-type.js | 9 --------- packages/edit-site/src/utils/normalize-record-key.js | 11 +++++++++++ 6 files changed, 19 insertions(+), 17 deletions(-) delete mode 100644 packages/edit-site/src/utils/normalize-post-id-for-post-type.js create mode 100644 packages/edit-site/src/utils/normalize-record-key.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js index 4bf3a3e4da4565..5815c4818fe9b0 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js @@ -16,7 +16,7 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e import usePatternDetails from './use-pattern-details'; import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import normalizePostIdForPostType from '../../utils/normalize-post-id-for-post-type'; +import normalizeRecordKey from '../../utils/normalize-record-key'; export default function SidebarNavigationScreenPattern() { const { categoryType } = getQueryArgs( window.location.href ); @@ -24,7 +24,7 @@ export default function SidebarNavigationScreenPattern() { const { params } = useNavigator(); const { postType } = params; - const postId = normalizePostIdForPostType( params?.postId, postType ); + const postId = normalizeRecordKey( params?.postId ); useInitEditedEntityFromURL(); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 068ec1f5606499..a889e3f6ffcf59 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -19,10 +19,10 @@ import { SidebarNavigationScreenDetailsPanelLabel, SidebarNavigationScreenDetailsPanelValue, } from '../sidebar-navigation-screen-details-panel'; -import normalizePostIdForPostType from '../../utils/normalize-post-id-for-post-type'; +import normalizeRecordKey from '../../utils/normalize-record-key'; export default function usePatternDetails( postType, postId ) { - postId = normalizePostIdForPostType( postId, postType ); + postId = normalizeRecordKey( postId ); const { getDescription, getTitle, record } = useEditedEntityRecord( postType, 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/sync-state-with-url/use-init-edited-entity-from-url.js index 3abaf952fd1fa1..dee20963cfc60c 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js @@ -11,7 +11,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import normalizePostIdForPostType from '../../utils/normalize-post-id-for-post-type'; +import normalizeRecordKey from '../../utils/normalize-record-key'; const { useLocation } = unlock( routerPrivateApis ); @@ -20,7 +20,7 @@ export default function useInitEditedEntityFromURL() { const { postType } = params; - const postId = normalizePostIdForPostType( params?.postId, postType ); + const postId = normalizeRecordKey( params?.postId ); const { isRequestingSite, homepageId, url } = useSelect( ( select ) => { const { getSite, getUnstableBase } = select( coreDataStore ); diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index b0aff7800191c7..30d1429ff92472 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -10,7 +10,7 @@ import { decodeEntities } from '@wordpress/html-entities'; * Internal dependencies */ import { store as editSiteStore } from '../../store'; -import normalizePostIdForPostType from '../../utils/normalize-post-id-for-post-type'; +import normalizeRecordKey from '../../utils/normalize-record-key'; export default function useEditedEntityRecord( postType, postId ) { const { record, title, description, isLoaded, icon } = useSelect( @@ -25,7 +25,7 @@ export default function useEditedEntityRecord( postType, postId ) { let usedPostId = postId ?? getEditedPostId(); - usedPostId = normalizePostIdForPostType( usedPostId, usedPostType ); + usedPostId = normalizeRecordKey( usedPostId, usedPostType ); const _record = getEditedEntityRecord( 'postType', diff --git a/packages/edit-site/src/utils/normalize-post-id-for-post-type.js b/packages/edit-site/src/utils/normalize-post-id-for-post-type.js deleted file mode 100644 index 8eb5153a77407a..00000000000000 --- a/packages/edit-site/src/utils/normalize-post-id-for-post-type.js +++ /dev/null @@ -1,9 +0,0 @@ -const POST_TYPES_THAT_USE_STRING_BASED_IDS = [ - 'wp_template', - 'wp_template_part', -]; -export default function normalizePostIdForPostType( postId, postType ) { - return ! POST_TYPES_THAT_USE_STRING_BASED_IDS?.includes( postType ) - ? Number( postId ) - : postId; -} diff --git a/packages/edit-site/src/utils/normalize-record-key.js b/packages/edit-site/src/utils/normalize-record-key.js new file mode 100644 index 00000000000000..48036656c8a646 --- /dev/null +++ b/packages/edit-site/src/utils/normalize-record-key.js @@ -0,0 +1,11 @@ +function isNumericID( str ) { + return /^\s*\d+\s*$/.test( str ); +} + +export default function normalizeRecordKey( postId ) { + if ( isNumericID( postId ) ) { + postId = Number( postId ); + } + + return postId; +}