Skip to content

Update the add template modal design #51806

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ntsekouras merged 18 commits into from
Jun 23, 2023
Merged

Update the add template modal design #51806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
79878b6
Add icons
jameskoster Jun 15, 2023
a866689
alignment
jameskoster Jun 16, 2023
6b567ba
Custom descriptions
jameskoster Jun 16, 2023
35f2b60
justify content
jameskoster Jun 16, 2023
599d55a
Style custom template button
jameskoster Jun 16, 2023
907dea7
Remove min-height
jameskoster Jun 20, 2023
1fa7b15
Don't display description when there isn't one
jameskoster Jun 20, 2023
7cd424f
Reduce space between template + description
jameskoster Jun 20, 2023
1684faf
Style icon
jameskoster Jun 20, 2023
582f71a
Style custom template
jameskoster Jun 20, 2023
a7f3191
increase button size
jameskoster Jun 20, 2023
87e9f03
Add prompt
jameskoster Jun 20, 2023
22d2ae5
Update template icons
jameskoster Jun 20, 2023
47e6d7b
Make year dynamic
jameskoster Jun 21, 2023
36f3a3b
Remove short descriptions
jameskoster Jun 21, 2023
63018ee
Revert "Remove short descriptions"
jameskoster Jun 22, 2023
8401e7a
re-instate descriptions but only show as a tooltip
jameskoster Jun 22, 2023
3d1d9cf
simplify a bit
ntsekouras Jun 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 120 additions & 24 deletions packages/edit-site/src/components/add-new-template/new-template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 (
<Button onClick={ onClick }>
<VStack
<Button
className={ className }
onClick={ onClick }
label={ description }
showTooltip={ !! description }
>
<Flex
as="span"
spacing={ 2 }
justify="flex-start"
align="center"
justify="center"
style={ { width: '100%' } }
direction={ direction }
>
<Text
weight={ 500 }
lineHeight={ 1.53846153846 } // 20px
<div className="edit-site-add-new-template__template-icon">
<Icon icon={ icon } />
</div>
<VStack
className="edit-site-add-new-template__template-name"
alignment="center"
spacing={ 0 }
>
{ title }
</Text>
<Text
lineHeight={ 1.53846153846 } // 20px
>
{ description }
</Text>
</VStack>
<Text
weight={ 500 }
lineHeight={ 1.53846153846 } // 20px
>
{ title }
</Text>
{ children }
</VStack>
</Flex>
</Button>
);
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -220,14 +297,25 @@ export default function NewTemplate( {
justify="center"
className="edit-site-add-new-template__template-list__contents"
>
<Flex className="edit-site-add-new-template__template-list__prompt">
{ __(
'Select what the new template should apply to:'
) }
</Flex>
{ missingTemplates.map( ( template ) => {
const { title, description, slug, onClick } =
template;
const { title, slug, onClick } = template;
return (
<TemplateListItem
key={ slug }
title={ title }
description={ description }
direction="column"
className="edit-site-add-new-template__template-button"
description={
TEMPLATE_SHORT_DESCRIPTIONS[ slug ]
}
icon={
TEMPLATE_ICONS[ slug ] || layout
}
onClick={ () =>
onClick
? onClick( template )
Expand All @@ -238,15 +326,23 @@ export default function NewTemplate( {
} ) }
<TemplateListItem
title={ __( 'Custom template' ) }
description={ __(
'A custom template can be manually applied to any post or page.'
) }
direction="row"
className="edit-site-add-new-template__custom-template-button"
icon={ edit }
onClick={ () =>
setModalContent(
modalContentMap.customGenericTemplate
)
}
/>
>
<Text
lineHeight={ 1.53846153846 } // 20px
>
{ __(
'A custom template can be manually applied to any post or page.'
) }
</Text>
</TemplateListItem>
</Grid>
) }
{ modalContent === modalContentMap.customTemplate && (
Expand Down
32 changes: 30 additions & 2 deletions packages/edit-site/src/components/add-new-template/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down