From 79878b63a37876e3009ec22dcb3569791ddc4e8d Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 15 Jun 2023 17:21:37 +0100 Subject: [PATCH 01/18] Add icons --- .../add-new-template/new-template.js | 42 ++++++++++++++++++- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index b32ce67c7d317..683acfcd7ad48 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -12,12 +12,30 @@ import { __experimentalGrid as Grid, __experimentalText as Text, __experimentalVStack as VStack, + Icon, } from '@wordpress/components'; import { decodeEntities } from '@wordpress/html-entities'; import { useState } from '@wordpress/element'; import { useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { plus } from '@wordpress/icons'; +import { + archive, + blockMeta, + category, + home, + layout, + list, + media, + notFound, + page, + plus, + post, + postAuthor, + postDate, + postList, + search, + tag, +} from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { privateApis as routerPrivateApis } from '@wordpress/router'; @@ -56,7 +74,24 @@ const DEFAULT_TEMPLATE_SLUGS = [ '404', ]; -function TemplateListItem( { title, description, onClick } ) { +const TEMPLATE_ICONS = { + 'front-page': home, + home: postList, + single: post, + page, + archive, + search, + 404: notFound, + index: list, + category, + author: postAuthor, + taxonomy: blockMeta, + date: postDate, + tag, + attachment: media, +}; + +function TemplateListItem( { title, description, icon, onClick } ) { return ( ); From 7cd424f2b723ac31cbc50d4cf8cc084820614a6d Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 20 Jun 2023 13:51:43 +0100 Subject: [PATCH 08/18] Reduce space between template + description --- .../add-new-template/new-template.js | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 901486ce90d85..18add40097738 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -101,19 +101,21 @@ function TemplateListItem( { title, className, description, icon, onClick } ) { style={ { width: '100%' } } > - - { title } - - { description && ( + - { description } + { title } - ) } + { description && ( + + { description } + + ) } + ); From 1684faf3a4cd2194911d6ab2d996c5f6b75b6f78 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 20 Jun 2023 15:18:22 +0100 Subject: [PATCH 09/18] Style icon --- .../components/add-new-template/new-template.js | 5 ++++- .../src/components/add-new-template/style.scss | 15 +++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 18add40097738..afd7cfd738013 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -100,7 +100,9 @@ function TemplateListItem( { title, className, description, icon, onClick } ) { alignment="center" style={ { width: '100%' } } > - +
+ +
Date: Tue, 20 Jun 2023 15:26:39 +0100 Subject: [PATCH 10/18] Style custom template --- .../add-new-template/new-template.js | 26 +++++++++++++++---- .../components/add-new-template/style.scss | 7 +++++ 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index afd7cfd738013..577fe10ce47f7 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -12,6 +12,7 @@ import { __experimentalGrid as Grid, __experimentalText as Text, __experimentalVStack as VStack, + Flex, Icon, } from '@wordpress/components'; import { decodeEntities } from '@wordpress/html-entities'; @@ -91,19 +92,32 @@ const TEMPLATE_ICONS = { attachment: media, }; -function TemplateListItem( { title, className, description, icon, onClick } ) { +function TemplateListItem( { + title, + direction, + className, + description, + icon, + onClick, +} ) { return ( ); } @@ -288,6 +302,7 @@ export default function NewTemplate( { Date: Tue, 20 Jun 2023 15:28:13 +0100 Subject: [PATCH 11/18] increase button size --- packages/edit-site/src/components/add-new-template/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss index da72c1e0e72e7..44d3e63f1802a 100644 --- a/packages/edit-site/src/components/add-new-template/style.scss +++ b/packages/edit-site/src/components/add-new-template/style.scss @@ -165,7 +165,7 @@ .edit-site-custom-template-modal__contents, .edit-site-add-new-template__template-list__contents { > .components-button { - padding: $grid-unit-30; + padding: $grid-unit-40; border-radius: $radius-block-ui; display: flex; flex-direction: column; From 87e9f0365e3263fdce8c04bbc2fc2786a78c2a4e Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 20 Jun 2023 16:06:23 +0100 Subject: [PATCH 12/18] Add prompt --- .../src/components/add-new-template/new-template.js | 5 +++++ .../edit-site/src/components/add-new-template/style.scss | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 577fe10ce47f7..9ad8dbf208f45 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -296,6 +296,11 @@ export default function NewTemplate( { justify="center" className="edit-site-add-new-template__template-list__contents" > + + { __( + 'Select what the new template should apply to:' + ) } + { missingTemplates.map( ( template ) => { const { title, slug, onClick } = template; return ( diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss index 44d3e63f1802a..b1c2b669e24ce 100644 --- a/packages/edit-site/src/components/add-new-template/style.scss +++ b/packages/edit-site/src/components/add-new-template/style.scss @@ -206,7 +206,8 @@ } } - .edit-site-add-new-template__custom-template-button { + .edit-site-add-new-template__custom-template-button, + .edit-site-add-new-template__template-list__prompt { grid-column-start: 1; grid-column-end: 4; } From 22d2ae58d679e4cae0625c7fa73be820c4479b49 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 20 Jun 2023 16:19:15 +0100 Subject: [PATCH 13/18] Update template icons --- .../add-new-template/new-template.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 9ad8dbf208f45..436bb69fcc6f4 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -22,7 +22,10 @@ import { store as coreStore } from '@wordpress/core-data'; import { archive, blockMeta, + calendar, category, + commentAuthorAvatar, + edit, home, layout, list, @@ -30,9 +33,7 @@ import { notFound, page, plus, - post, - postAuthor, - postDate, + pin, postList, search, tag, @@ -78,16 +79,16 @@ const DEFAULT_TEMPLATE_SLUGS = [ const TEMPLATE_ICONS = { 'front-page': home, home: postList, - single: post, + single: pin, page, archive, search, 404: notFound, index: list, category, - author: postAuthor, + author: commentAuthorAvatar, taxonomy: blockMeta, - date: postDate, + date: calendar, tag, attachment: media, }; @@ -312,7 +313,9 @@ export default function NewTemplate( { description={ TEMPLATE_SHORT_DESCRIPTIONS[ slug ] } - icon={ TEMPLATE_ICONS[ slug ] || post } + icon={ + TEMPLATE_ICONS[ slug ] || layout + } onClick={ () => onClick ? onClick( template ) @@ -328,7 +331,7 @@ export default function NewTemplate( { description={ __( 'A custom template can be manually applied to any post or page.' ) } - icon={ layout } + icon={ edit } onClick={ () => setModalContent( modalContentMap.customGenericTemplate From 47e6d7b7a3a9281e54da2d96c9a223d85a0138a5 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 21 Jun 2023 11:59:31 +0100 Subject: [PATCH 14/18] Make year dynamic --- .../edit-site/src/components/add-new-template/new-template.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 436bb69fcc6f4..1067cf9388486 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -176,8 +176,8 @@ export default function NewTemplate( { 'front-page': homeUrl, date: sprintf( // translators: %s: The homepage url. - __( 'E.g. %s/2023/' ), - homeUrl + __( 'E.g. %s' ), + homeUrl + '/' + new Date().getFullYear() ), }; From 36f3a3bfe83212daae1cc12d4fd37e468aff8c61 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 21 Jun 2023 13:54:58 +0100 Subject: [PATCH 15/18] Remove short descriptions --- .../add-new-template/new-template.js | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 1067cf9388486..c7a6559644185 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -17,7 +17,7 @@ import { } from '@wordpress/components'; import { decodeEntities } from '@wordpress/html-entities'; import { useState } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { archive, @@ -162,25 +162,6 @@ export default function NewTemplate( { useDispatch( noticesStore ); const { setTemplate } = unlock( useDispatch( editSiteStore ) ); - const { homeUrl } = useSelect( ( select ) => { - const { - getUnstableBase, // Site index. - } = select( coreStore ); - - return { - homeUrl: getUnstableBase()?.home, - }; - }, [] ); - - const TEMPLATE_SHORT_DESCRIPTIONS = { - 'front-page': homeUrl, - date: sprintf( - // translators: %s: The homepage url. - __( 'E.g. %s' ), - homeUrl + '/' + new Date().getFullYear() - ), - }; - async function createTemplate( template, isWPSuggestion = true ) { if ( isCreatingTemplate ) { return; @@ -310,9 +291,6 @@ export default function NewTemplate( { title={ title } direction="column" className="edit-site-add-new-template__template-button" - description={ - TEMPLATE_SHORT_DESCRIPTIONS[ slug ] - } icon={ TEMPLATE_ICONS[ slug ] || layout } From 63018ee6c7bc471b6e571ded4dbda600011b2f7e Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 22 Jun 2023 11:10:54 +0100 Subject: [PATCH 16/18] Revert "Remove short descriptions" This reverts commit 7eb06e8ab845b9cda3975989456614df5b221c29. --- .../add-new-template/new-template.js | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index c7a6559644185..1067cf9388486 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -17,7 +17,7 @@ import { } from '@wordpress/components'; import { decodeEntities } from '@wordpress/html-entities'; import { useState } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { archive, @@ -162,6 +162,25 @@ export default function NewTemplate( { useDispatch( noticesStore ); const { setTemplate } = unlock( useDispatch( editSiteStore ) ); + const { homeUrl } = useSelect( ( select ) => { + const { + getUnstableBase, // Site index. + } = select( coreStore ); + + return { + homeUrl: getUnstableBase()?.home, + }; + }, [] ); + + const TEMPLATE_SHORT_DESCRIPTIONS = { + 'front-page': homeUrl, + date: sprintf( + // translators: %s: The homepage url. + __( 'E.g. %s' ), + homeUrl + '/' + new Date().getFullYear() + ), + }; + async function createTemplate( template, isWPSuggestion = true ) { if ( isCreatingTemplate ) { return; @@ -291,6 +310,9 @@ export default function NewTemplate( { title={ title } direction="column" className="edit-site-add-new-template__template-button" + description={ + TEMPLATE_SHORT_DESCRIPTIONS[ slug ] + } icon={ TEMPLATE_ICONS[ slug ] || layout } From 8401e7a6a4f4270d8cd252b3acdd8cc1b843d3b0 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 22 Jun 2023 13:45:33 +0100 Subject: [PATCH 17/18] re-instate descriptions but only show as a tooltip --- .../src/components/add-new-template/new-template.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 1067cf9388486..5405c426e52ff 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -98,11 +98,18 @@ function TemplateListItem( { direction, className, description, + hideDescription = true, icon, onClick, + showTooltip = true, } ) { return ( - @@ -335,18 +328,21 @@ export default function NewTemplate( { title={ __( 'Custom template' ) } direction="row" className="edit-site-add-new-template__custom-template-button" - description={ __( - 'A custom template can be manually applied to any post or page.' - ) } - hideDescription={ false } - showTooltip={ false } icon={ edit } onClick={ () => setModalContent( modalContentMap.customGenericTemplate ) } - /> + > + + { __( + 'A custom template can be manually applied to any post or page.' + ) } + + ) } { modalContent === modalContentMap.customTemplate && (