Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add support for basic tab navigation when selecting template

Browse Source 
MAILPOET-6331
This commit is contained in:
Oluwaseun Olorunsola
2024-12-03 17:08:37 +01:00
committed by Oluwaseun Olorunsola
parent 5743ccbc5f
commit cb091e0dc6
4 changed files with 143 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
packages/js/email-editor/src/components/template-select/select-modal.tsx
View File

@ -1,4 +1,4 @@
import { useState } from '@wordpress/element';
import { store as editorStore } from '@wordpress/editor';
import { dispatch } from '@wordpress/data';
import {
@ -15,12 +15,39 @@ import { TemplateCategoriesListSidebar } from './template-categories-list-sideba
const BLANK_TEMPLATE = 'email-general';
export function SelectTemplateModal( {
onSelectCallback,
closeCallback = null,
previewContent = '',
function SelectTemplateBody( {
initialCategory,
templateCategories,
templates,
handleTemplateSelection,
} ) {
const [ templates ] = usePreviewTemplates( previewContent );
const [ selectedCategory, setSelectedCategory ] = useState(
initialCategory?.name
);
return (
<div className="block-editor-block-patterns-explorer">
<TemplateCategoriesListSidebar
templateCategories={ templateCategories }
selectedCategory={ selectedCategory }
onClickCategory={ setSelectedCategory }
/>
<TemplateList
templates={ templates }
onTemplateSelection={ handleTemplateSelection }
selectedCategory={ selectedCategory }
/>
</div>
);
}
export function SelectTemplateModal( {
onSelectCallback,
closeCallback = null,
previewContent = '',
} ) {
const [ templates ] = usePreviewTemplates( previewContent );
const hasTemplates = templates?.length > 0;
@ -49,44 +76,43 @@ export function SelectTemplateModal( {
handleTemplateSelection( blankTemplate );
};
const dummyTemplateCategories = [
{
name: 'recent',
label: 'Recent'
},
{
name: 'basic',
label: 'Basic'
}
];
const onClickCategory = () => {}
const dummyTemplateCategories = [
{
name: 'recent',
label: 'Recent',
},
{
name: 'basic',
label: 'Basic',
},
];
return (
<Modal
title="Select a template"
onRequestClose={ () =>
closeCallback ? closeCallback() : handleCloseWithoutSelection()
}
title={ __( 'Select a template', 'mailpoet' ) }
onRequestClose={ () =>
closeCallback ? closeCallback() : handleCloseWithoutSelection()
}
isFullScreen
>
<div className="block-editor-block-patterns-explorer">
<TemplateCategoriesListSidebar templateCategories={dummyTemplateCategories} selectedCategory={dummyTemplateCategories[0].name} onClickCategory={onClickCategory} />
<SelectTemplateBody
initialCategory={ dummyTemplateCategories[ 0 ] }
templateCategories={ dummyTemplateCategories }
templates={ templates }
handleTemplateSelection={ handleTemplateSelection }
/>
<TemplateList templates={templates} onTemplateSelection={ handleTemplateSelection} />
<Flex justify="flex-end">
<FlexItem>
<Button
variant="tertiary"
onClick={ () => handleCloseWithoutSelection() }
isBusy={ ! hasTemplates }
>
{ __( 'Start from scratch', 'mailpoet' ) }
</Button>
</FlexItem>
</Flex>
</div>
<Flex justify="flex-end">
<FlexItem>
<Button
variant="tertiary"
onClick={ () => handleCloseWithoutSelection() }
isBusy={ ! hasTemplates }
>
{ __( 'Start from scratch', 'mailpoet' ) }
</Button>
</FlexItem>
</Flex>
</Modal>
);
}

134
packages/js/email-editor/src/components/template-select/template-list.tsx
View File

@ -1,67 +1,83 @@
import { useMemo } from '@wordpress/element';
// @ts-expect-error No types available for this component
import { BlockPreview } from '@wordpress/block-editor';
import {
__experimentalHStack as HStack, // eslint-disable-line
__experimentalHStack as HStack, // eslint-disable-line
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Async } from './async';
export function TemplateList({templates, onTemplateSelection}) {
function TemplateListBox( { templates, onTemplateSelection } ) {
return (
<div className="block-editor-block-patterns-list" role="listbox">
{ templates.map( ( template ) => (
<div
key={ template.slug }
className="block-editor-block-patterns-list__list-item"
>
<div
className="block-editor-block-patterns-list__item"
role="button"
tabIndex={ 0 }
onClick={ () => {
onTemplateSelection( template );
} }
onKeyPress={ ( event ) => {
if ( event.key === 'Enter' || event.key === ' ' ) {
onTemplateSelection( template );
}
} }
>
<Async
placeholder={
<p>
{ __( 'rendering template', 'mailpoet' ) }
</p>
}
>
<BlockPreview
blocks={ template.previewContentParsed }
viewportWidth={ 900 }
minHeight={ 300 }
additionalStyles={ [
{
css: template.template.email_theme_css,
},
] }
/>
return (
<div className="block-editor-block-patterns-explorer__list">
<div
className="block-editor-block-patterns-list"
role="listbox"
>
{templates.map((template) => (
<div
key={template.slug}
className="block-editor-block-patterns-list__list-item"
>
<div
className="block-editor-block-patterns-list__item"
role="button"
tabIndex={0}
onClick={() => {
onTemplateSelection(template);
}}
onKeyPress={(event) => {
if (
event.key === 'Enter' ||
event.key === ' '
) {
onTemplateSelection(template);
}
}}
>
<Async
placeholder={
<p>rendering template</p>
}
>
<BlockPreview
blocks={template.previewContentParsed}
viewportWidth={900}
minHeight={300}
additionalStyles={[
{
css: template.template.email_theme_css,
},
]}
/>
<HStack className="block-editor-patterns__pattern-details">
<div className="block-editor-block-patterns-list__item-title">
{
template.template.title.rendered
}
</div>
</HStack>
</Async>
</div>
</div>
))}
</div>
</div>
);
<HStack className="block-editor-patterns__pattern-details">
<div className="block-editor-block-patterns-list__item-title">
{ template.template.title.rendered }
</div>
</HStack>
</Async>
</div>
</div>
) ) }
</div>
);
}
export function TemplateList( {
templates,
onTemplateSelection,
selectedCategory,
} ) {
const filteredTemplates = useMemo(
() =>
templates.filter(
( template ) => template.category === selectedCategory
),
[ selectedCategory, templates ]
);
return (
<div className="block-editor-block-patterns-explorer__list">
<TemplateListBox
templates={ filteredTemplates }
onTemplateSelection={ onTemplateSelection }
/>
</div>
);
}

1
packages/js/email-editor/src/hooks/use-preview-templates.ts
View File

@ -103,6 +103,7 @@ export function usePreviewTemplates(
? contentPatternBlocksGeneral
: contentPatternBlocks,
template,
category: 'basic', // TODO: This will be updated once template category is implemented
};
} ),
];

3
packages/js/email-editor/src/store/types.ts
View File

@ -228,8 +228,11 @@ export type TemplatePreview = {
previewContentParsed: BlockInstance[];
emailParsed: BlockInstance[];
template: EmailTemplatePreview;
category?: TemplateCategory;
};
export type TemplateCategory = 'recent' | 'basic';
export type Feature =
| 'fullscreenMode'
| 'showIconLabels'