From d01dd603b89107d3f11781e51ed717e735d88034 Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 23 Jun 2023 12:53:22 +0100 Subject: [PATCH] Update the add template modal design (#51806) * Add icons * alignment * Custom descriptions * justify content * Style custom template button * Remove min-height * Don't display description when there isn't one * Reduce space between template + description * Style icon * Style custom template * increase button size * Add prompt * Update template icons * Make year dynamic * Remove short descriptions * Revert "Remove short descriptions" This reverts commit 7eb06e8ab845b9cda3975989456614df5b221c29. * re-instate descriptions but only show as a tooltip * simplify a bit --------- Co-authored-by: ntsekouras --- .../add-new-template/new-template.js | 144 +++++++++++++++--- .../components/add-new-template/style.scss | 32 +++- 2 files changed, 150 insertions(+), 26 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 b32ce67c7d3174..0c6ab03899cc81 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,32 @@ import { __experimentalGrid as Grid, __experimentalText as Text, __experimentalVStack as VStack, + Flex, + Icon, } 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 { plus } from '@wordpress/icons'; +import { + archive, + blockMeta, + calendar, + category, + commentAuthorAvatar, + edit, + home, + layout, + list, + media, + notFound, + page, + plus, + pin, + 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,27 +76,64 @@ const DEFAULT_TEMPLATE_SLUGS = [ '404', ]; -function TemplateListItem( { title, description, onClick } ) { +const TEMPLATE_ICONS = { + 'front-page': home, + home: postList, + single: pin, + page, + archive, + search, + 404: notFound, + index: list, + category, + author: commentAuthorAvatar, + taxonomy: blockMeta, + date: calendar, + tag, + attachment: media, +}; + +function TemplateListItem( { + title, + direction, + className, + description, + icon, + onClick, + children, +} ) { return ( - ); } @@ -104,6 +161,26 @@ export default function NewTemplate( { const { createErrorNotice, createSuccessNotice } = 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; @@ -220,14 +297,25 @@ 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, description, slug, onClick } = - template; + const { title, slug, onClick } = template; return ( onClick ? onClick( template ) @@ -238,15 +326,23 @@ export default function NewTemplate( { } ) } setModalContent( modalContentMap.customGenericTemplate ) } - /> + > + + { __( + 'A custom template can be manually applied to any post or page.' + ) } + + ) } { modalContent === modalContentMap.customTemplate && ( 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 c8c2ef9f54a071..b1c2b669e24cef 100644 --- a/packages/edit-site/src/components/add-new-template/style.scss +++ b/packages/edit-site/src/components/add-new-template/style.scss @@ -138,17 +138,39 @@ @include break-large() { width: calc(100% - #{$grid-unit-80 * 2}); } + + .edit-site-add-new-template__template-button, + .edit-site-add-new-template__custom-template-button { + svg { + fill: var(--wp-admin-theme-color); + } + } + + .edit-site-add-new-template__custom-template-button { + .edit-site-add-new-template__template-name { + flex-grow: 1; + align-items: flex-start; + } + } + + .edit-site-add-new-template__template-icon { + padding: $grid-unit-10; + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + border-radius: 100%; + max-height: $grid-unit-50; + max-width: $grid-unit-50; + } } .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; border: $border-width solid $gray-300; - min-height: $grid-unit-80 * 3; + justify-content: center; // Show the boundary of the button, in High Contrast Mode. outline: 1px solid transparent; @@ -183,6 +205,12 @@ } } } + + .edit-site-add-new-template__custom-template-button, + .edit-site-add-new-template__template-list__prompt { + grid-column-start: 1; + grid-column-end: 4; + } } .edit-site-add-new-template__template-list__contents {