Skip to content

Commit

Permalink
Site Editor: Avoid same key warnings in template parts area listings (#…
Browse files Browse the repository at this point in the history
…54863)

* TemplateAreas use template part clientId as key
* HomeTemplateDetails use template part clientId as key
* Cleanup useSelect hook
  • Loading branch information
Mamaduka authored Sep 28, 2023
1 parent 50a397d commit 3e85cc6
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 36 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default function TemplateAreas() {

<ul className="edit-site-template-card__template-areas-list">
{ templateParts.map( ( { templatePart, block } ) => (
<li key={ templatePart.slug }>
<li key={ block.clientId }>
<TemplateAreaItem
area={ templatePart.area }
clientId={ block.clientId }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import {
CheckboxControl,
__experimentalUseNavigator as useNavigator,
__experimentalInputControl as InputControl,
__experimentalNumberControl as NumberControl,
__experimentalTruncate as Truncate,
Expand Down Expand Up @@ -62,10 +61,6 @@ function TemplateAreaButton( { postId, icon, title } ) {
}

export default function HomeTemplateDetails() {
const navigator = useNavigator();
const {
params: { postType, postId },
} = navigator;
const { editEntityRecord } = useDispatch( coreStore );

const {
Expand All @@ -75,34 +70,30 @@ export default function HomeTemplateDetails() {
postsPageTitle,
postsPageId,
currentTemplateParts,
} = useSelect(
( select ) => {
const { getEntityRecord } = select( coreStore );
const siteSettings = getEntityRecord( 'root', 'site' );
const { getSettings } = unlock( select( editSiteStore ) );
const _currentTemplateParts =
select( editSiteStore ).getCurrentTemplateTemplateParts();
const siteEditorSettings = getSettings();
const _postsPageRecord = siteSettings?.page_for_posts
? select( coreStore ).getEntityRecord(
'postType',
'page',
siteSettings?.page_for_posts
)
: EMPTY_OBJECT;
} = useSelect( ( select ) => {
const { getEntityRecord } = select( coreStore );
const { getSettings, getCurrentTemplateTemplateParts } = unlock(
select( editSiteStore )
);
const siteSettings = getEntityRecord( 'root', 'site' );
const _postsPageRecord = siteSettings?.page_for_posts
? getEntityRecord(
'postType',
'page',
siteSettings?.page_for_posts
)
: EMPTY_OBJECT;

return {
allowCommentsOnNewPosts:
siteSettings?.default_comment_status === 'open',
postsPageTitle: _postsPageRecord?.title?.rendered,
postsPageId: _postsPageRecord?.id,
postsPerPage: siteSettings?.posts_per_page,
templatePartAreas: siteEditorSettings?.defaultTemplatePartAreas,
currentTemplateParts: _currentTemplateParts,
};
},
[ postType, postId ]
);
return {
allowCommentsOnNewPosts:
siteSettings?.default_comment_status === 'open',
postsPageTitle: _postsPageRecord?.title?.rendered,
postsPageId: _postsPageRecord?.id,
postsPerPage: siteSettings?.posts_per_page,
templatePartAreas: getSettings()?.defaultTemplatePartAreas,
currentTemplateParts: getCurrentTemplateTemplateParts(),
};
}, [] );

const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] =
useState( '' );
Expand All @@ -126,11 +117,12 @@ export default function HomeTemplateDetails() {
*/
const templateAreas = useMemo( () => {
return currentTemplateParts.length && templatePartAreas
? currentTemplateParts.map( ( { templatePart } ) => ( {
? currentTemplateParts.map( ( { templatePart, block } ) => ( {
...templatePartAreas?.find(
( { area } ) => area === templatePart?.area
),
...templatePart,
clientId: block.clientId,
} ) )
: [];
}, [ currentTemplateParts, templatePartAreas ] );
Expand Down Expand Up @@ -214,9 +206,9 @@ export default function HomeTemplateDetails() {
>
<ItemGroup>
{ templateAreas.map(
( { label, icon, theme, slug, title } ) => (
( { clientId, label, icon, theme, slug, title } ) => (
<SidebarNavigationScreenDetailsPanelRow
key={ slug }
key={ clientId }
>
<TemplateAreaButton
postId={ `${ theme }//${ slug }` }
Expand Down

0 comments on commit 3e85cc6

Please sign in to comment.