Skip to content
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

[Site Editor]: Re-architect templates addition #42457

Merged
merged 3 commits into from
Jul 19, 2022
Merged

[Site Editor]: Re-architect templates addition #42457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3f9a44
[Full Site Editing]: Re-architect templates addition
ntsekouras Jul 15, 2022
30d4c5a
update taxonomy menu item title
ntsekouras Jul 15, 2022
9403668
feedback
ntsekouras Jul 19, 2022
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
42 changes: 8 additions & 34 deletions packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,34 +26,6 @@ import { mapToIHasNameAndId } from './utils';

const EMPTY_ARRAY = [];

function selectSuggestion( suggestion, onSelect, entityForSuggestions ) {
const {
labels,
slug,
config: { templateSlug, templatePrefix },
} = entityForSuggestions;
const title = sprintf(
// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the singular name of a post type or taxonomy and %2$s is the name of the post or term, e.g. "Post: Hello, WordPress", "Category: shoes"
__( '%1$s: %2$s' ),
labels.singular_name,
suggestion.name
);
let newTemplateSlug = `${ templateSlug || slug }-${ suggestion.slug }`;
if ( templatePrefix ) {
newTemplateSlug = templatePrefix + newTemplateSlug;
}
const newTemplate = {
title,
description: sprintf(
// translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Post: Hello, WordPress"
__( 'Template for %1$s' ),
title
),
slug: newTemplateSlug,
};
onSelect( newTemplate );
}

function SuggestionListItem( {
suggestion,
search,
Expand All @@ -70,7 +42,11 @@ function SuggestionListItem( {
{ ...composite }
className={ baseCssClass }
onClick={ () =>
selectSuggestion( suggestion, onSelect, entityForSuggestions )
onSelect(
entityForSuggestions.config.getSpecificTemplate(
suggestion
)
)
}
>
<span className={ `${ baseCssClass }__title` }>
Expand Down Expand Up @@ -98,18 +74,16 @@ function useDebouncedInput() {
}

function useSearchSuggestions( entityForSuggestions, search ) {
const { config, postsToExclude } = entityForSuggestions;
const { config } = entityForSuggestions;
const query = useMemo(
() => ( {
order: 'asc',
_fields: 'id,name,title,slug,link',
context: 'view',
search,
orderBy: config.getOrderBy( { search } ),
exclude: postsToExclude,
per_page: search ? 20 : 10,
...config.queryArgs( search ),
} ),
[ search, config, postsToExclude ]
[ search, config ]
);
const { records: searchResults, hasResolved: searchHasResolved } =
useEntityRecords(
Expand Down
91 changes: 27 additions & 64 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 @@ -36,13 +36,8 @@ import AddCustomTemplateModal from './add-custom-template-modal';
import {
useExistingTemplates,
useDefaultTemplateTypes,
entitiesConfig,
usePostTypes,
usePostTypePage,
useTaxonomies,
useTaxonomyCategory,
useTaxonomyTag,
useExtraTemplates,
useTaxonomiesMenuItems,
usePostTypeMenuItems,
} from './utils';
import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
import { useHistory } from '../routes';
Expand Down Expand Up @@ -225,19 +220,11 @@ function useMissingTemplates(
setEntityForSuggestions,
setShowCustomTemplateModal
) {
const postTypes = usePostTypes();
const pagePostType = usePostTypePage();
const taxonomies = useTaxonomies();
const categoryTaxonomy = useTaxonomyCategory();
const tagTaxonomy = useTaxonomyTag();

const existingTemplates = useExistingTemplates();
const defaultTemplateTypes = useDefaultTemplateTypes();

const existingTemplateSlugs = ( existingTemplates || [] ).map(
( { slug } ) => slug
);

const missingDefaultTemplates = ( defaultTemplateTypes || [] ).filter(
( template ) =>
DEFAULT_TEMPLATE_SLUGS.includes( template.slug ) &&
Expand All @@ -247,70 +234,46 @@ function useMissingTemplates(
setShowCustomTemplateModal( true );
setEntityForSuggestions( _entityForSuggestions );
};
// TODO: find better names for these variables. `useExtraTemplates` returns an array of items.
const categoryMenuItem = useExtraTemplates(
categoryTaxonomy,
entitiesConfig.category,
onClickMenuItem
);
const tagMenuItem = useExtraTemplates(
tagTaxonomy,
entitiesConfig.tag,
onClickMenuItem
);
const pageMenuItem = useExtraTemplates(
pagePostType,
entitiesConfig.page,
onClickMenuItem
);
// We need to replace existing default template types with
// the create specific template functionality. The original
// info (title, description, etc.) is preserved in the
// `useExtraTemplates` hook.
// used hooks.
const enhancedMissingDefaultTemplateTypes = [ ...missingDefaultTemplates ];
[ categoryMenuItem, tagMenuItem, pageMenuItem ].forEach( ( menuItem ) => {
if ( ! menuItem?.length ) {
return;
}
const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
( template ) => template.slug === menuItem[ 0 ].slug
);
// Some default template types might have been filtered above from
// `missingDefaultTemplates` because they only check for the general
// template. So here we either replace or append the item, augmented
// with the check if it has available specific item to create a
// template for.
if ( matchIndex > -1 ) {
enhancedMissingDefaultTemplateTypes.splice(
matchIndex,
1,
menuItem[ 0 ]
const { defaultTaxonomiesMenuItems, taxonomiesMenuItems } =
useTaxonomiesMenuItems( onClickMenuItem );
const { defaultPostTypesMenuItems, postTypesMenuItems } =
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we separating between defaults ( defaultPostTypesMenuItems) and non-defaults (postTypesMenuItems) it seems we can just return a single array and remove the separation code. Then all of the items would pass by the next forEach loop, but just the defaults would be found on enhancedMissingDefaultTemplateTypes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This way we can control where we want to append the extra menu items besides the default ones. It's also related to the current sorting which might be subject to change(DEFAULT_TEMPLATE_SLUGS and the such) - not in this PR 😄

usePostTypeMenuItems( onClickMenuItem );
[ ...defaultTaxonomiesMenuItems, ...defaultPostTypesMenuItems ].forEach(
( menuItem ) => {
if ( ! menuItem ) {
return;
}
const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
( template ) => template.slug === menuItem.slug
);
} else {
enhancedMissingDefaultTemplateTypes.push( menuItem[ 0 ] );
// Some default template types might have been filtered above from
// `missingDefaultTemplates` because they only check for the general
// template. So here we either replace or append the item, augmented
// with the check if it has available specific item to create a
// template for.
if ( matchIndex > -1 ) {
enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
} else {
enhancedMissingDefaultTemplateTypes.push( menuItem );
}
}
} );
);
// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
return (
DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
);
} );
const extraPostTypeTemplates = useExtraTemplates(
postTypes,
entitiesConfig.postType,
onClickMenuItem
);
const extraTaxonomyTemplates = useExtraTemplates(
taxonomies,
entitiesConfig.taxonomy,
onClickMenuItem
);
const missingTemplates = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are returning a new array reference on every rerender. The array computation is also not trivial, e.g.: it has sorting operations. I guess we compute missingTemplates inside a useMemo.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you referring to missingTemplates? If yes I'm not sure what we'll gain with useMemo here..

...enhancedMissingDefaultTemplateTypes,
...extraPostTypeTemplates,
...extraTaxonomyTemplates,
...postTypesMenuItems,
...taxonomiesMenuItems,
];
return missingTemplates;
}
Loading