Add editSite.NewTemplate.defaultTemplateSlugs filter

[albarin]

What?

This PR adds the new editSite.NewTemplate.defaultTemplateSlugs filter which will allow plugins to extend the list of default template slugs.

Why?

Currently, it is possible to extend the list of default templates via the default_template_types hook, but since there's no way to extend the DEFAULT_TEMPLATE_SLUGS in Gutenberg, the templates are filtered out from the Add new dropdown menu.

For example, via the WooCommerce plugin, we want to make a block template available in the Add menu user interface that will apply to all product attributes pages, which wouldn't be possible right now.

How?

This PRs is introducing a new filter that allows other plugins to modify the DEFAULT_TEMPLATE_SLUGS list.

const DEFAULT_TEMPLATE_SLUGS = applyFilters(
	'editSite.NewTemplate.defaultTemplateSlugs',
	[
		'front-page',
		'single',
		'page',
		'index',
		'archive',
		'author',
		'category',
		'date',
		'tag',
		'taxonomy',
		'search',
		'404',
	]
);

Testing Instructions

1. Add a new template to the list of default templates:

public function extend_default_block_template_types( $default_template_types ) {
	$default_template_types['my_new_template'] = array(
		'title'       => 'My new template',
		'description' => 'Displays my new template',
	);
	return $default_template_types;
}

2. Use the new filter to extend the list with the same template:

addFilter(
	'editSite.NewTemplate.defaultTemplateSlugs',
	'my-plugin/extend-default-template-slugs',
	( slugs ) => {
		return slugs.concat( [ 'my_new_template' ] );
	}
);

3. Go to the Site Editor > Browse all templates (/wp-admin/site-editor.php?postType=wp_template)
4. Click on the Add new button and make sure you see an item in the dropdown for the My new template template.

Screenshots

Before	After

[nerrad]

I'm generally wary of implementing JS filters because of the potential performance hit, but I don't think this is a hot path so it should be okay.

A question for other reviewers is I'm wondering if it'd be better to get these slugs from the server and filter them server side?

[ntsekouras]

Thanks for the PR @albarin! The issue here is how to extend this menu with more templates provided by third party devs.

Currently the template creation does quite a few tasks from enhancing menu items dynamically, fallback content and more, and uses the info provided by DEFAULT_TEMPLATE_SLUGS, so we need to be careful with the changes we'll make. I think what we need is to extend without changing the DEFAULT_TEMPLATE_SLUGS. Maybe instead use a new variable/setting(probably server side) and maybe change useMissingTemplates to add them in the end of the core suggestions? That would be my first thoughts. --cc @jorgefilipecosta

[albarin]

Currently the template creation does quite a few tasks from enhancing menu items dynamically, fallback content and more, and uses the info provided by DEFAULT_TEMPLATE_SLUGS, so we need to be careful with the changes we'll make. I think what we need is to extend without changing the DEFAULT_TEMPLATE_SLUGS. Maybe instead use a new variable/setting(probably server side) and maybe change useMissingTemplates to add them in the end of the core suggestions? That would be my first thoughts. --cc @jorgefilipecosta

Thanks for your feedback 🙏 Makes sense that it shouldn't be possible to remove anything from DEFAULT_TEMPLATE_SLUGS.
I've been exploring your suggestion, not sure if it's the right way to do it, but what about using the block_editor_settings_all to introduce a new setting allowed_template_slugs that would be filterable (not sure about the naming though ), something like:

function gutenberg_default_template_slugs_settings( $settings ) {
	$settings['allowedTemplateSlugs'] = apply_filters('allowed_template_slugs', []);

	return $settings;
}

add_filter( 'block_editor_settings_all', 'gutenberg_default_template_slugs_settings');

and then on the useMissingTemplate doing something like this:

export const useAllowedTemplatesSlugs = ( editSiteStore ) => {
	return useSelect(
		( select ) =>
			select( editSiteStore ).getSettings().allowedTemplateSlugs,
		[]
	);
};

const allowedTemplateSlugs = useAllowedTemplatesSlugs( editSiteStore );
...
const missingDefaultTemplates = ( defaultTemplateTypes || [] ).filter(
	( template ) =>
		[ ...DEFAULT_TEMPLATE_SLUGS, ...allowedTemplateSlugs ].includes(
			template.slug
		) && ! existingTemplateSlugs.includes( template.slug )
);

Thanks again! 🙌

[ntsekouras]

Yes, something like your above comment would be one approach. We'd need to explore a bit here though with some PR(s). Maybe another approach would to have a value that also lives in store that keeps the extra template types, and introduce an API like addTemplateTypeOption or something like that to be more declarative. It will need more thought, but I'd go with the declarative approach for the first try.

The issue here is how to extend this menu with more templates provided by third party devs.

I'm not sure if there is an issue about this, but if not could you create one? Thanks!