From 4ee67d64fd844077d6dc096893351476cdee72f4 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 4 Jul 2023 13:39:12 +1000 Subject: [PATCH 1/5] This commit: - links the posts page to the homepage template when a post page is set - abstracts logic to get page item props --- .../sidebar-navigation-screen-pages/index.js | 62 ++++++++++--------- 1 file changed, 34 insertions(+), 28 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js index 567bf91aca69f..20a80e6c9bc1e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js @@ -106,6 +106,26 @@ export default function SidebarNavigationScreenPages() { setShowAddPage( false ); }; + const getPageProps = ( id ) => { + let itemIcon = page; + const isPostsPage = postsPage && postsPage === id; + + switch ( id ) { + case frontPage: + itemIcon = home; + break; + case postsPage: + itemIcon = verse; + break; + } + + return { + icon: itemIcon, + postType: isPostsPage ? 'wp_template' : 'page', + postId: isPostsPage ? homeTemplate.id : id, + }; + }; + return ( <> { showAddPage && ( @@ -152,34 +172,20 @@ export default function SidebarNavigationScreenPages() { ) } - { reorderedPages?.map( ( item ) => { - let itemIcon; - switch ( item.id ) { - case frontPage: - itemIcon = home; - break; - case postsPage: - itemIcon = verse; - break; - default: - itemIcon = page; - } - return ( - - - { decodeEntities( - item?.title?.rendered || - __( '(no title)' ) - ) } - - - ); - } ) } + { reorderedPages?.map( ( { id, title } ) => ( + + + { decodeEntities( + title?.rendered || + __( '(no title)' ) + ) } + + + ) ) } ) } From f719f4b6f075fac7adddddf1b7956dc44ff2b34f Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 5 Jul 2023 09:18:03 +1000 Subject: [PATCH 2/5] The Posts Page resolves to display the Home or Index template only. Adding a check to skip the Front Page --- .../src/components/sidebar-navigation-screen-pages/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js index 20a80e6c9bc1e..a11e48812a50f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js @@ -108,7 +108,8 @@ export default function SidebarNavigationScreenPages() { const getPageProps = ( id ) => { let itemIcon = page; - const isPostsPage = postsPage && postsPage === id; + const isPostsPage = + postsPage && postsPage === id && homeTemplate.slug !== 'front-page'; switch ( id ) { case frontPage: From cfce63313ad1c66e5a6d7d274cefa782b95edfe7 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 6 Jul 2023 11:59:41 +1000 Subject: [PATCH 3/5] Showing homepage settings for posts pages that are set as the post page in reading settings --- .../sidebar-navigation-screen-page/index.js | 152 +++++++++++------- 1 file changed, 92 insertions(+), 60 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 c5799d97a8064..3bef9ed51083e 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 @@ -9,7 +9,7 @@ import { ExternalLink, __experimentalTruncate as Truncate, } from '@wordpress/components'; -import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; +import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { pencil } from '@wordpress/icons'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; @@ -26,28 +26,36 @@ import SidebarButton from '../sidebar-button'; import PageDetails from './page-details'; import PageActions from '../page-actions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; +import HomeTemplateDetails from '../sidebar-navigation-screen-template/home-template-details'; -export default function SidebarNavigationScreenPage() { - const navigator = useNavigator(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); +function usePageDetails( postId ) { const { - params: { postId }, - } = useNavigator(); - const { record } = useEntityRecord( 'postType', 'page', postId ); - - const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect( + isPostsPage, + record, + featuredMediaSourceUrl, + featuredMediaAltText, + } = useSelect( ( select ) => { const { getEntityRecord } = select( coreStore ); + const siteSettings = getEntityRecord( 'root', 'site' ); + const pageRecord = select( coreStore ).getEntityRecord( + 'postType', + 'page', + postId + ); + // Featured image. - const attachedMedia = record?.featured_media + const attachedMedia = pageRecord?.featured_media ? getEntityRecord( 'postType', 'attachment', - record?.featured_media + pageRecord?.featured_media ) : null; - return { + record: pageRecord, + isPostsPage: + parseInt( postId, 10 ) === siteSettings?.page_for_posts, featuredMediaSourceUrl: attachedMedia?.media_details.sizes?.medium?.source_url || attachedMedia?.source_url, @@ -58,18 +66,81 @@ export default function SidebarNavigationScreenPage() { ), }; }, - [ record ] + [ postId ] + ); + + const title = decodeEntities( + record?.title?.rendered || __( '(no title)' ) ); + const description = isPostsPage + ? __( 'This page displays your latest posts' ) + : ''; const featureImageAltText = featuredMediaAltText ? decodeEntities( featuredMediaAltText ) : decodeEntities( record?.title?.rendered || __( 'Featured image' ) ); - return record ? ( - + ) : ( + <> + { !! featuredMediaSourceUrl && ! isPostsPage && ( + +
+ { +
+ ) } + { !! record?.excerpt?.rendered && ! isPostsPage && ( + + { stripHTML( record.excerpt.rendered ) } + + ) } + + + ); + + const meta = record?.link ? ( + + { filterURLForDisplay( safeDecodeURIComponent( record.link ) ) } + + ) : null; + + const footer = !! record?.modified ? ( + + ) : null; + + return { title, meta, description, content, footer }; +} + +export default function SidebarNavigationScreenPage() { + const navigator = useNavigator(); + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const { + params: { postId }, + } = useNavigator(); + const { title, meta, content, description, footer } = + usePageDetails( postId ); + + return ( + } - meta={ - - { filterURLForDisplay( - safeDecodeURIComponent( record.link ) - ) } - - } - content={ - <> - { !! featuredMediaSourceUrl && ( - -
- { -
- - ) } - { !! record?.excerpt?.rendered && ( - - { stripHTML( record.excerpt.rendered ) } - - ) } - - - } - footer={ - - } + meta={ meta } + content={ content } + footer={ footer } /> - ) : null; + ); } From 47a2684c2c842d524edc8daa06d2a4f636f6306c Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 7 Jul 2023 11:37:50 +1000 Subject: [PATCH 4/5] Post pages that have been set to display posts will redirect to first the home template, then the index template. The fallback is the post id of the page. --- .../sidebar-navigation-screen-page/index.js | 28 ++++--------------- .../sidebar-navigation-screen-pages/index.js | 13 +++++---- 2 files changed, 14 insertions(+), 27 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 3bef9ed51083e..b539b82736467 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 @@ -26,18 +26,11 @@ import SidebarButton from '../sidebar-button'; import PageDetails from './page-details'; import PageActions from '../page-actions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; -import HomeTemplateDetails from '../sidebar-navigation-screen-template/home-template-details'; function usePageDetails( postId ) { - const { - isPostsPage, - record, - featuredMediaSourceUrl, - featuredMediaAltText, - } = useSelect( + const { record, featuredMediaSourceUrl, featuredMediaAltText } = useSelect( ( select ) => { const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( 'root', 'site' ); const pageRecord = select( coreStore ).getEntityRecord( 'postType', 'page', @@ -54,8 +47,6 @@ function usePageDetails( postId ) { : null; return { record: pageRecord, - isPostsPage: - parseInt( postId, 10 ) === siteSettings?.page_for_posts, featuredMediaSourceUrl: attachedMedia?.media_details.sizes?.medium?.source_url || attachedMedia?.source_url, @@ -72,19 +63,14 @@ function usePageDetails( postId ) { const title = decodeEntities( record?.title?.rendered || __( '(no title)' ) ); - const description = isPostsPage - ? __( 'This page displays your latest posts' ) - : ''; const featureImageAltText = featuredMediaAltText ? decodeEntities( featuredMediaAltText ) : decodeEntities( record?.title?.rendered || __( 'Featured image' ) ); - const content = isPostsPage ? ( - - ) : ( + const content = ( <> - { !! featuredMediaSourceUrl && ! isPostsPage && ( + { !! featuredMediaSourceUrl && ( ) } - { !! record?.excerpt?.rendered && ! isPostsPage && ( + { !! record?.excerpt?.rendered && ( ) : null; - return { title, meta, description, content, footer }; + return { title, meta, content, footer }; } export default function SidebarNavigationScreenPage() { @@ -134,13 +120,11 @@ export default function SidebarNavigationScreenPage() { const { params: { postId }, } = useNavigator(); - const { title, meta, content, description, footer } = - usePageDetails( postId ); + const { title, meta, content, footer } = usePageDetails( postId ); return ( template.slug === 'home' ) || templates?.find( ( template ) => template.slug === 'index' ); + const getPostsPageTemplate = () => + templates?.find( ( template ) => template.slug === 'home' ) || + templates?.find( ( template ) => template.slug === 'index' ); + const pagesAndTemplates = pages?.concat( dynamicPageTemplates, [ homeTemplate, ] ); const { frontPage, postsPage } = useSelect( ( select ) => { const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( 'root', 'site' ); return { frontPage: siteSettings?.page_on_front, @@ -108,8 +111,8 @@ export default function SidebarNavigationScreenPages() { const getPageProps = ( id ) => { let itemIcon = page; - const isPostsPage = - postsPage && postsPage === id && homeTemplate.slug !== 'front-page'; + const postsPageTemplateId = + postsPage && postsPage === id ? getPostsPageTemplate()?.id : null; switch ( id ) { case frontPage: @@ -122,8 +125,8 @@ export default function SidebarNavigationScreenPages() { return { icon: itemIcon, - postType: isPostsPage ? 'wp_template' : 'page', - postId: isPostsPage ? homeTemplate.id : id, + postType: postsPageTemplateId ? 'wp_template' : 'page', + postId: postsPageTemplateId || id, }; }; From b893a71b23dc5b9907cde8613da95b6cfdbd9f8e Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 7 Jul 2023 14:58:43 +1000 Subject: [PATCH 5/5] Reverted refactor of packages/edit-site/src/components/sidebar-navigation-screen-page/index.js Will do it in a follow up --- .../sidebar-navigation-screen-page/index.js | 138 ++++++++---------- 1 file changed, 61 insertions(+), 77 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 b539b82736467..c5799d97a8064 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 @@ -9,7 +9,7 @@ import { ExternalLink, __experimentalTruncate as Truncate, } from '@wordpress/components'; -import { store as coreStore } from '@wordpress/core-data'; +import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { pencil } from '@wordpress/icons'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; @@ -27,26 +27,27 @@ import PageDetails from './page-details'; import PageActions from '../page-actions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; -function usePageDetails( postId ) { - const { record, featuredMediaSourceUrl, featuredMediaAltText } = useSelect( +export default function SidebarNavigationScreenPage() { + const navigator = useNavigator(); + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const { + params: { postId }, + } = useNavigator(); + const { record } = useEntityRecord( 'postType', 'page', postId ); + + const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect( ( select ) => { const { getEntityRecord } = select( coreStore ); - const pageRecord = select( coreStore ).getEntityRecord( - 'postType', - 'page', - postId - ); - // Featured image. - const attachedMedia = pageRecord?.featured_media + const attachedMedia = record?.featured_media ? getEntityRecord( 'postType', 'attachment', - pageRecord?.featured_media + record?.featured_media ) : null; + return { - record: pageRecord, featuredMediaSourceUrl: attachedMedia?.media_details.sizes?.medium?.source_url || attachedMedia?.source_url, @@ -57,74 +58,18 @@ function usePageDetails( postId ) { ), }; }, - [ postId ] - ); - - const title = decodeEntities( - record?.title?.rendered || __( '(no title)' ) + [ record ] ); const featureImageAltText = featuredMediaAltText ? decodeEntities( featuredMediaAltText ) : decodeEntities( record?.title?.rendered || __( 'Featured image' ) ); - const content = ( - <> - { !! featuredMediaSourceUrl && ( - -
- { -
- - ) } - { !! record?.excerpt?.rendered && ( - - { stripHTML( record.excerpt.rendered ) } - - ) } - - - ); - - const meta = record?.link ? ( - - { filterURLForDisplay( safeDecodeURIComponent( record.link ) ) } - - ) : null; - - const footer = !! record?.modified ? ( - - ) : null; - - return { title, meta, content, footer }; -} - -export default function SidebarNavigationScreenPage() { - const navigator = useNavigator(); - const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { - params: { postId }, - } = useNavigator(); - const { title, meta, content, footer } = usePageDetails( postId ); - - return ( + return record ? ( } - meta={ meta } - content={ content } - footer={ footer } + meta={ + + { filterURLForDisplay( + safeDecodeURIComponent( record.link ) + ) } + + } + content={ + <> + { !! featuredMediaSourceUrl && ( + +
+ { +
+ + ) } + { !! record?.excerpt?.rendered && ( + + { stripHTML( record.excerpt.rendered ) } + + ) } + + + } + footer={ + + } /> - ); + ) : null; }