From 163e85be3ca2a0ecd0444bef0878863cbfb6da2c Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Wed, 23 Oct 2024 11:41:19 +0530 Subject: [PATCH 1/5] Add the correct consistent label on document bar --- .../src/components/document-bar/index.js | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 904a877734cef9..dad860ed8d521f 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -59,6 +59,8 @@ export default function DocumentBar( props ) { isUnsyncedPattern, templateTitle, onNavigateToPreviousEntityRecord, + isFrontPage, + isPostsPage, } = useSelect( ( select ) => { const { getCurrentPostType, @@ -67,6 +69,7 @@ export default function DocumentBar( props ) { __experimentalGetTemplateInfo: getTemplateInfo, } = select( editorStore ); const { + canUser, getEditedEntityRecord, getPostType, isResolving: isResolvingSelector, @@ -80,6 +83,12 @@ export default function DocumentBar( props ) { ); const _templateInfo = getTemplateInfo( _document ); const _postTypeLabel = getPostType( _postType )?.labels?.singular_name; + const siteSettings = canUser( 'read', { + kind: 'root', + name: 'site', + } ) + ? getEditedEntityRecord( 'root', 'site' ) + : undefined; return { postType: _postType, @@ -97,6 +106,8 @@ export default function DocumentBar( props ) { templateTitle: _templateInfo.title, onNavigateToPreviousEntityRecord: getEditorSettings().onNavigateToPreviousEntityRecord, + isFrontPage: siteSettings?.page_on_front === _postId, + isPostsPage: siteSettings?.page_for_posts === _postId, }; }, [] ); @@ -184,11 +195,25 @@ export default function DocumentBar( props ) { ? decodeEntities( title ) : __( 'No title' ) } - { postTypeLabel && ! props.title && ( + { isFrontPage && ! props.title && ( - { '· ' + decodeEntities( postTypeLabel ) } + { '. ' + __( 'Homepage' ) } ) } + { isPostsPage && ! props.title && ( + + { '. ' + __( 'Posts Page' ) } + + ) } + { postTypeLabel && + ! props.title && + ! isFrontPage && + ! isPostsPage && ( + + { '· ' + + decodeEntities( postTypeLabel ) } + + ) } From 2d508af99cd04eddde80f742b415e296c773625a Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Wed, 23 Oct 2024 12:31:28 +0530 Subject: [PATCH 2/5] Add the utililty custom hook to get the page badge based on current view --- .../src/components/document-bar/index.js | 31 ++++---------- .../src/components/post-card-panel/index.js | 25 ++++------- packages/editor/src/utils/pageTypeBadge.js | 41 +++++++++++++++++++ 3 files changed, 56 insertions(+), 41 deletions(-) create mode 100644 packages/editor/src/utils/pageTypeBadge.js diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index dad860ed8d521f..a9207fb57f1826 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -28,6 +28,7 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants'; import { store as editorStore } from '../../store'; +import usePageTypeBadge from '../../utils/pageTypeBadge'; /** @typedef {import("@wordpress/components").IconType} IconType */ @@ -59,8 +60,6 @@ export default function DocumentBar( props ) { isUnsyncedPattern, templateTitle, onNavigateToPreviousEntityRecord, - isFrontPage, - isPostsPage, } = useSelect( ( select ) => { const { getCurrentPostType, @@ -69,7 +68,6 @@ export default function DocumentBar( props ) { __experimentalGetTemplateInfo: getTemplateInfo, } = select( editorStore ); const { - canUser, getEditedEntityRecord, getPostType, isResolving: isResolvingSelector, @@ -83,12 +81,6 @@ export default function DocumentBar( props ) { ); const _templateInfo = getTemplateInfo( _document ); const _postTypeLabel = getPostType( _postType )?.labels?.singular_name; - const siteSettings = canUser( 'read', { - kind: 'root', - name: 'site', - } ) - ? getEditedEntityRecord( 'root', 'site' ) - : undefined; return { postType: _postType, @@ -106,8 +98,6 @@ export default function DocumentBar( props ) { templateTitle: _templateInfo.title, onNavigateToPreviousEntityRecord: getEditorSettings().onNavigateToPreviousEntityRecord, - isFrontPage: siteSettings?.page_on_front === _postId, - isPostsPage: siteSettings?.page_for_posts === _postId, }; }, [] ); @@ -121,6 +111,8 @@ export default function DocumentBar( props ) { const title = props.title || entityTitle; const icon = props.icon; + const pageType = usePageTypeBadge(); + const mountedRef = useRef( false ); useEffect( () => { mountedRef.current = true; @@ -195,25 +187,16 @@ export default function DocumentBar( props ) { ? decodeEntities( title ) : __( 'No title' ) } - { isFrontPage && ! props.title && ( + { pageType && ! props.title && ( - { '. ' + __( 'Homepage' ) } + { '. ' + pageType } ) } - { isPostsPage && ! props.title && ( + { postTypeLabel && ! props.title && ! pageType && ( - { '. ' + __( 'Posts Page' ) } + { '· ' + decodeEntities( postTypeLabel ) } ) } - { postTypeLabel && - ! props.title && - ! isFrontPage && - ! isPostsPage && ( - - { '· ' + - decodeEntities( postTypeLabel ) } - - ) } diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index ed13af9b55a4aa..934af186fae598 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -27,22 +27,17 @@ import { } from '../../store/constants'; import { unlock } from '../../lock-unlock'; import PostActions from '../post-actions'; +import usePageTypeBadge from '../../utils/pageTypeBadge'; export default function PostCardPanel( { postType, postId, onActionPerformed, } ) { - const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect( + const { title, icon, isSync } = useSelect( ( select ) => { const { __experimentalGetTemplateInfo } = select( editorStore ); - const { canUser, getEditedEntityRecord } = select( coreStore ); - const siteSettings = canUser( 'read', { - kind: 'root', - name: 'site', - } ) - ? getEditedEntityRecord( 'root', 'site' ) - : undefined; + const { getEditedEntityRecord } = select( coreStore ); const _record = getEditedEntityRecord( 'postType', postType, @@ -71,12 +66,13 @@ export default function PostCardPanel( { area: _record?.area, } ), isSync: _isSync, - isFrontPage: siteSettings?.page_on_front === postId, - isPostsPage: siteSettings?.page_for_posts === postId, }; }, [ postId, postType ] ); + + const pageType = usePageTypeBadge(); + return (
{ title ? decodeEntities( title ) : __( 'No title' ) } - { isFrontPage && ( - - { __( 'Homepage' ) } - - ) } - { isPostsPage && ( + { pageType && ( - { __( 'Posts Page' ) } + { pageType } ) } diff --git a/packages/editor/src/utils/pageTypeBadge.js b/packages/editor/src/utils/pageTypeBadge.js new file mode 100644 index 00000000000000..d7543e32d96696 --- /dev/null +++ b/packages/editor/src/utils/pageTypeBadge.js @@ -0,0 +1,41 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../store'; + +/** + * Custom hook to get the page type badge for the current post on edit site view. + */ +export default function usePageTypeBadge() { + const { isFrontPage, isPostsPage } = useSelect( ( select ) => { + const { getCurrentPostId } = select( editorStore ); + const { canUser, getEditedEntityRecord } = select( coreStore ); + const _postId = getCurrentPostId(); + const siteSettings = canUser( 'read', { + kind: 'root', + name: 'site', + } ) + ? getEditedEntityRecord( 'root', 'site' ) + : undefined; + + return { + isFrontPage: siteSettings?.page_on_front === _postId, + isPostsPage: siteSettings?.page_for_posts === _postId, + }; + } ); + + if ( isFrontPage ) { + return __( 'Homepage' ); + } else if ( isPostsPage ) { + return __( 'Posts Page' ); + } + + return false; +} From e190e74ac1d5e5ab7f9fa58e19290b76baf478f5 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Wed, 23 Oct 2024 12:41:19 +0530 Subject: [PATCH 3/5] Change the variable name to be more precise --- .../src/components/document-bar/index.js | 19 +++++++++++-------- .../src/components/post-card-panel/index.js | 6 +++--- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index a9207fb57f1826..3378abd60f1eca 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -111,7 +111,7 @@ export default function DocumentBar( props ) { const title = props.title || entityTitle; const icon = props.icon; - const pageType = usePageTypeBadge(); + const pageTypeBadge = usePageTypeBadge(); const mountedRef = useRef( false ); useEffect( () => { @@ -187,16 +187,19 @@ export default function DocumentBar( props ) { ? decodeEntities( title ) : __( 'No title' ) } - { pageType && ! props.title && ( + { pageTypeBadge && ! props.title && ( - { '. ' + pageType } - - ) } - { postTypeLabel && ! props.title && ! pageType && ( - - { '· ' + decodeEntities( postTypeLabel ) } + { '. ' + pageTypeBadge } ) } + { postTypeLabel && + ! props.title && + ! pageTypeBadge && ( + + { '· ' + + decodeEntities( postTypeLabel ) } + + ) } diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index 934af186fae598..b1f60961a48612 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -71,7 +71,7 @@ export default function PostCardPanel( { [ postId, postType ] ); - const pageType = usePageTypeBadge(); + const pageTypeBadge = usePageTypeBadge(); return (
@@ -95,9 +95,9 @@ export default function PostCardPanel( { lineHeight="20px" > { title ? decodeEntities( title ) : __( 'No title' ) } - { pageType && ( + { pageTypeBadge && ( - { pageType } + { pageTypeBadge } ) } From 8970e6465513f53173e20921b6e6ffc3e5641f41 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Thu, 24 Oct 2024 08:39:59 +0530 Subject: [PATCH 4/5] Update the document bar label display logic --- .../src/components/document-bar/index.js | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 3378abd60f1eca..23ab527c837d23 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -187,19 +187,15 @@ export default function DocumentBar( props ) { ? decodeEntities( title ) : __( 'No title' ) } - { pageTypeBadge && ! props.title && ( - - { '. ' + pageTypeBadge } - - ) } - { postTypeLabel && - ! props.title && - ! pageTypeBadge && ( - - { '· ' + - decodeEntities( postTypeLabel ) } - - ) } + + { `. ${ + postTypeLabel && + ! props.title && + ! pageTypeBadge + ? decodeEntities( postTypeLabel ) + : pageTypeBadge + }` } + From 6b42a02d1b26c9ccf76481daaa360c1a1ff6d85a Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Fri, 25 Oct 2024 09:43:54 +0530 Subject: [PATCH 5/5] Address the PR feedbacks --- .../src/components/document-bar/index.js | 23 +++++++++++-------- packages/editor/src/utils/pageTypeBadge.js | 6 ++--- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 23ab527c837d23..797f2db41d06fb 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -187,15 +187,20 @@ export default function DocumentBar( props ) { ? decodeEntities( title ) : __( 'No title' ) } - - { `. ${ - postTypeLabel && - ! props.title && - ! pageTypeBadge - ? decodeEntities( postTypeLabel ) - : pageTypeBadge - }` } - + { pageTypeBadge && ( + + { `· ${ pageTypeBadge }` } + + ) } + { postTypeLabel && + ! props.title && + ! pageTypeBadge && ( + + { `· ${ decodeEntities( + postTypeLabel + ) }` } + + ) } diff --git a/packages/editor/src/utils/pageTypeBadge.js b/packages/editor/src/utils/pageTypeBadge.js index d7543e32d96696..321b9caa17769e 100644 --- a/packages/editor/src/utils/pageTypeBadge.js +++ b/packages/editor/src/utils/pageTypeBadge.js @@ -17,7 +17,7 @@ export default function usePageTypeBadge() { const { isFrontPage, isPostsPage } = useSelect( ( select ) => { const { getCurrentPostId } = select( editorStore ); const { canUser, getEditedEntityRecord } = select( coreStore ); - const _postId = getCurrentPostId(); + const postId = getCurrentPostId(); const siteSettings = canUser( 'read', { kind: 'root', name: 'site', @@ -26,8 +26,8 @@ export default function usePageTypeBadge() { : undefined; return { - isFrontPage: siteSettings?.page_on_front === _postId, - isPostsPage: siteSettings?.page_for_posts === _postId, + isFrontPage: siteSettings?.page_on_front === postId, + isPostsPage: siteSettings?.page_for_posts === postId, }; } );