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 {