@wordpress/edit-site 4.10.0 → 4.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/add-new-template/add-custom-template-modal.js +22 -42
  3. package/build/components/add-new-template/add-custom-template-modal.js.map +1 -1
  4. package/build/components/add-new-template/new-template.js +17 -20
  5. package/build/components/add-new-template/new-template.js.map +1 -1
  6. package/build/components/add-new-template/utils.js +366 -239
  7. package/build/components/add-new-template/utils.js.map +1 -1
  8. package/build/components/block-editor/index.js +1 -3
  9. package/build/components/block-editor/index.js.map +1 -1
  10. package/build/components/global-styles/dimensions-panel.js +183 -13
  11. package/build/components/global-styles/dimensions-panel.js.map +1 -1
  12. package/build/components/global-styles/hooks.js +1 -1
  13. package/build/components/global-styles/hooks.js.map +1 -1
  14. package/build/components/global-styles/use-global-styles-output.js +95 -17
  15. package/build/components/global-styles/use-global-styles-output.js.map +1 -1
  16. package/build/components/global-styles/utils.js +31 -0
  17. package/build/components/global-styles/utils.js.map +1 -1
  18. package/build/components/header/index.js +7 -6
  19. package/build/components/header/index.js.map +1 -1
  20. package/build/hooks/index.js +2 -0
  21. package/build/hooks/index.js.map +1 -1
  22. package/build/hooks/template-part-edit.js +86 -0
  23. package/build/hooks/template-part-edit.js.map +1 -0
  24. package/build-module/components/add-new-template/add-custom-template-modal.js +23 -43
  25. package/build-module/components/add-new-template/add-custom-template-modal.js.map +1 -1
  26. package/build-module/components/add-new-template/new-template.js +18 -21
  27. package/build-module/components/add-new-template/new-template.js.map +1 -1
  28. package/build-module/components/add-new-template/utils.js +365 -227
  29. package/build-module/components/add-new-template/utils.js.map +1 -1
  30. package/build-module/components/block-editor/index.js +1 -2
  31. package/build-module/components/block-editor/index.js.map +1 -1
  32. package/build-module/components/global-styles/dimensions-panel.js +183 -14
  33. package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
  34. package/build-module/components/global-styles/hooks.js +1 -1
  35. package/build-module/components/global-styles/hooks.js.map +1 -1
  36. package/build-module/components/global-styles/use-global-styles-output.js +94 -22
  37. package/build-module/components/global-styles/use-global-styles-output.js.map +1 -1
  38. package/build-module/components/global-styles/utils.js +29 -0
  39. package/build-module/components/global-styles/utils.js.map +1 -1
  40. package/build-module/components/header/index.js +8 -6
  41. package/build-module/components/header/index.js.map +1 -1
  42. package/build-module/hooks/index.js +1 -0
  43. package/build-module/hooks/index.js.map +1 -1
  44. package/build-module/hooks/template-part-edit.js +67 -0
  45. package/build-module/hooks/template-part-edit.js.map +1 -0
  46. package/build-style/style-rtl.css +25 -25
  47. package/build-style/style.css +25 -25
  48. package/package.json +29 -29
  49. package/src/components/add-new-template/add-custom-template-modal.js +27 -45
  50. package/src/components/add-new-template/new-template.js +27 -64
  51. package/src/components/add-new-template/style.scss +20 -8
  52. package/src/components/add-new-template/utils.js +398 -229
  53. package/src/components/block-editor/index.js +0 -2
  54. package/src/components/global-styles/dimensions-panel.js +207 -14
  55. package/src/components/global-styles/hooks.js +2 -0
  56. package/src/components/global-styles/test/use-global-styles-output.js +64 -1
  57. package/src/components/global-styles/use-global-styles-output.js +100 -8
  58. package/src/components/global-styles/utils.js +31 -0
  59. package/src/components/header/index.js +9 -10
  60. package/src/components/header/style.scss +5 -3
  61. package/src/components/sidebar/style.scss +4 -0
  62. package/src/hooks/index.js +1 -0
  63. package/src/hooks/template-part-edit.js +82 -0
  64. package/src/style.scss +0 -1
  65. package/build/components/edit-template-part-menu-button/index.js +0 -90
  66. package/build/components/edit-template-part-menu-button/index.js.map +0 -1
  67. package/build-module/components/edit-template-part-menu-button/index.js +0 -72
  68. package/build-module/components/edit-template-part-menu-button/index.js.map +0 -1
  69. package/src/components/edit-template-part-menu-button/index.js +0 -82
@@ -42,79 +42,6 @@ export const mapToIHasNameAndId = ( entities, path ) => {
42
42
  * @property {number[]} existingEntitiesIds An array of the existing entities ids.
43
43
  */
44
44
 
45
- /**
46
- * @typedef {Object} EntityConfig
47
- * @property {string} entityName The entity's name.
48
- * @property {Function} getOrderBy Getter for an entity's `orderBy` query parameter, given the object
49
- * {search} as argument.
50
- * @property {Function} getIcon Getter function for returning an entity's icon for the menu item.
51
- * @property {Function} getTitle Getter function for returning an entity's title for the menu item.
52
- * @property {Function} getDescription Getter function for returning an entity's description for the menu item.
53
- * @property {string} recordNamePath The path to an entity's properties to use as a `name`. If not provided
54
- * is assumed that `name` property exists.
55
- * @property {string} templatePrefix The template prefix to create new templates and check against existing
56
- * templates. For example custom post types need a `single-` prefix to all
57
- * templates(`single-post-hello`), whereas `pages` don't (`page-hello`).
58
- * @property {string} templateSlug If this property is provided, it is going to be used for the creation of
59
- * new templates and the check against existing templates in the place
60
- * of the actual entity's `slug`. An example is `Tag` templates where the
61
- * the Tag's taxonomy slug is `post_tag`, but template hierarchy is based
62
- * on `tag` alias.
63
- */
64
-
65
- const taxonomyBaseConfig = {
66
- entityName: 'taxonomy',
67
- getOrderBy: ( { search } ) => ( search ? 'name' : 'count' ),
68
- getIcon: () => blockMeta,
69
- getTitle: ( labels ) =>
70
- sprintf(
71
- // translators: %s: Name of the taxonomy e.g: "Cagegory".
72
- __( 'Single taxonomy: %s' ),
73
- labels.singular_name
74
- ),
75
- getDescription: ( labels ) =>
76
- sprintf(
77
- // translators: %s: Name of the taxonomy e.g: "Product Categories".
78
- __( 'Displays a single taxonomy: %s.' ),
79
- labels.singular_name
80
- ),
81
- };
82
- const postTypeBaseConfig = {
83
- entityName: 'postType',
84
- getOrderBy: ( { search } ) => ( search ? 'relevance' : 'modified' ),
85
- recordNamePath: 'title.rendered',
86
- // `icon` is the `menu_icon` property of a post type. We
87
- // only handle `dashicons` for now, even if the `menu_icon`
88
- // also supports urls and svg as values.
89
- getIcon: ( _icon ) =>
90
- _icon?.startsWith( 'dashicons-' ) ? _icon.slice( 10 ) : post,
91
- getTitle: ( labels ) =>
92
- sprintf(
93
- // translators: %s: Name of the post type e.g: "Post".
94
- __( 'Single item: %s' ),
95
- labels.singular_name
96
- ),
97
- getDescription: ( labels ) =>
98
- sprintf(
99
- // translators: %s: Name of the post type e.g: "Post".
100
- __( 'Displays a single item: %s.' ),
101
- labels.singular_name
102
- ),
103
- };
104
- export const entitiesConfig = {
105
- postType: {
106
- ...postTypeBaseConfig,
107
- templatePrefix: 'single-',
108
- },
109
- page: { ...postTypeBaseConfig },
110
- taxonomy: {
111
- ...taxonomyBaseConfig,
112
- templatePrefix: 'taxonomy-',
113
- },
114
- category: { ...taxonomyBaseConfig },
115
- tag: { ...taxonomyBaseConfig, templateSlug: 'tag' },
116
- };
117
-
118
45
  export const useExistingTemplates = () => {
119
46
  return useSelect(
120
47
  ( select ) =>
@@ -147,22 +74,6 @@ const usePublicPostTypes = () => {
147
74
  }, [ postTypes ] );
148
75
  };
149
76
 
150
- // `page` post type is a special case in the template hierarchy,
151
- // so we exclude it from the list of post types and we handle it
152
- // separately.
153
- export const usePostTypes = () => {
154
- const postTypes = usePublicPostTypes();
155
- return useMemo( () => {
156
- return postTypes?.filter( ( { slug } ) => slug !== 'page' );
157
- }, [ postTypes ] );
158
- };
159
- export const usePostTypePage = () => {
160
- const postTypes = usePublicPostTypes();
161
- return useMemo( () => {
162
- return postTypes?.filter( ( { slug } ) => slug === 'page' );
163
- }, [ postTypes ] );
164
- };
165
-
166
77
  const usePublicTaxonomies = () => {
167
78
  const taxonomies = useSelect(
168
79
  ( select ) => select( coreStore ).getTaxonomies( { per_page: -1 } ),
@@ -175,184 +86,295 @@ const usePublicTaxonomies = () => {
175
86
  }, [ taxonomies ] );
176
87
  };
177
88
 
178
- /**
179
- * `category` and `post_tag` are handled specifically in template
180
- * hierarchy so we need to differentiate them and return the rest,
181
- * e.g. `category-$slug` and `taxonomy-$taxonomy-$term`.
182
- */
183
- export const useTaxonomies = () => {
184
- const taxonomies = usePublicTaxonomies();
185
- const specialTaxonomies = [ 'category', 'post_tag' ];
186
- return useMemo(
89
+ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
90
+ const publicPostTypes = usePublicPostTypes();
91
+ const existingTemplates = useExistingTemplates();
92
+ const defaultTemplateTypes = useDefaultTemplateTypes();
93
+ // `page`is a special case in template hierarchy.
94
+ const templatePrefixes = useMemo(
187
95
  () =>
188
- taxonomies?.filter(
189
- ( { slug } ) => ! specialTaxonomies.includes( slug )
190
- ),
191
- [ taxonomies ]
96
+ publicPostTypes?.reduce( ( accumulator, { slug } ) => {
97
+ let suffix = slug;
98
+ if ( slug !== 'page' ) {
99
+ suffix = `single-${ suffix }`;
100
+ }
101
+ accumulator[ slug ] = suffix;
102
+ return accumulator;
103
+ }, {} ),
104
+ [ publicPostTypes ]
192
105
  );
193
- };
194
-
195
- export const useTaxonomyCategory = () => {
196
- const taxonomies = usePublicTaxonomies();
197
- return useMemo(
198
- () => taxonomies?.filter( ( { slug } ) => slug === 'category' ),
199
- [ taxonomies ]
106
+ // We need to keep track of naming conflicts. If a conflict
107
+ // occurs, we need to add slug.
108
+ const postTypeLabels = publicPostTypes?.reduce(
109
+ ( accumulator, { labels } ) => {
110
+ const singularName = labels.singular_name.toLowerCase();
111
+ accumulator[ singularName ] =
112
+ ( accumulator[ singularName ] || 0 ) + 1;
113
+ return accumulator;
114
+ },
115
+ {}
200
116
  );
201
- };
202
- export const useTaxonomyTag = () => {
203
- const taxonomies = usePublicTaxonomies();
204
- return useMemo(
205
- () => taxonomies?.filter( ( { slug } ) => slug === 'post_tag' ),
206
- [ taxonomies ]
117
+ const needsUniqueIdentifier = ( labels, slug ) => {
118
+ const singularName = labels.singular_name.toLowerCase();
119
+ return postTypeLabels[ singularName ] > 1 && singularName !== slug;
120
+ };
121
+ const postTypesInfo = useEntitiesInfo( 'postType', templatePrefixes );
122
+ const existingTemplateSlugs = ( existingTemplates || [] ).map(
123
+ ( { slug } ) => slug
207
124
  );
208
- };
209
-
210
- /**
211
- * Helper hook that returns information about an entity having
212
- * records that we can create a specific template for.
213
- *
214
- * For example we can search for `terms` in `taxonomy` entity or
215
- * `posts` in `postType` entity.
216
- *
217
- * First we need to find the existing records with an associated template,
218
- * to query afterwards for any remaing record, by excluding them.
219
- *
220
- * @param {string[]} existingTemplates The existing templates.
221
- * @param {Object[]} entities The array of entities we need to get extra information.
222
- * @param {EntityConfig} entityConfig The entity config.
223
- * @return {Record<string,EntitiesInfo>} An object with the `entities.slug` as `keys` and EntitiesInfo as values.
224
- */
225
- const useEntitiesInfo = (
226
- existingTemplates,
227
- entities,
228
- { entityName, templatePrefix, templateSlug }
229
- ) => {
230
- const slugsToExcludePerEntity = useMemo( () => {
231
- return entities?.reduce( ( accumulator, entity ) => {
232
- let _prefix = `${ templateSlug || entity.slug }-`;
233
- if ( templatePrefix ) {
234
- _prefix = templatePrefix + _prefix;
235
- }
236
- const slugsWithTemplates = ( existingTemplates || [] ).reduce(
237
- ( _accumulator, existingTemplate ) => {
238
- if ( existingTemplate.slug.startsWith( _prefix ) ) {
239
- _accumulator.push(
240
- existingTemplate.slug.substring( _prefix.length )
241
- );
242
- }
243
- return _accumulator;
244
- },
245
- []
125
+ const menuItems = ( publicPostTypes || [] ).reduce(
126
+ ( accumulator, postType ) => {
127
+ const { slug, labels, icon } = postType;
128
+ // We need to check if the general template is part of the
129
+ // defaultTemplateTypes. If it is, just use that info and
130
+ // augment it with the specific template functionality.
131
+ const generalTemplateSlug = templatePrefixes[ slug ];
132
+ const defaultTemplateType = defaultTemplateTypes?.find(
133
+ ( { slug: _slug } ) => _slug === generalTemplateSlug
246
134
  );
247
- if ( slugsWithTemplates.length ) {
248
- accumulator[ entity.slug ] = slugsWithTemplates;
249
- }
250
- return accumulator;
251
- }, {} );
252
- }, [ entities, existingTemplates ] );
253
- const recordsToExcludePerEntity = useSelect(
254
- ( select ) => {
255
- if ( ! slugsToExcludePerEntity ) {
256
- return;
135
+ const hasGeneralTemplate =
136
+ existingTemplateSlugs?.includes( generalTemplateSlug );
137
+ const _needsUniqueIdentifier = needsUniqueIdentifier(
138
+ labels,
139
+ slug
140
+ );
141
+ let menuItemTitle = sprintf(
142
+ // translators: %s: Name of the post type e.g: "Post".
143
+ __( 'Single item: %s' ),
144
+ labels.singular_name
145
+ );
146
+ if ( _needsUniqueIdentifier ) {
147
+ menuItemTitle = sprintf(
148
+ // translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
149
+ __( 'Single item: %1$s (%2$s)' ),
150
+ labels.singular_name,
151
+ slug
152
+ );
257
153
  }
258
- return Object.entries( slugsToExcludePerEntity ).reduce(
259
- ( accumulator, [ slug, slugsWithTemplates ] ) => {
260
- const postsWithTemplates = select(
261
- coreStore
262
- ).getEntityRecords( entityName, slug, {
263
- _fields: 'id',
264
- context: 'view',
265
- slug: slugsWithTemplates,
154
+ const menuItem = defaultTemplateType
155
+ ? { ...defaultTemplateType }
156
+ : {
157
+ slug: generalTemplateSlug,
158
+ title: menuItemTitle,
159
+ description: sprintf(
160
+ // translators: %s: Name of the post type e.g: "Post".
161
+ __( 'Displays a single item: %s.' ),
162
+ labels.singular_name
163
+ ),
164
+ // `icon` is the `menu_icon` property of a post type. We
165
+ // only handle `dashicons` for now, even if the `menu_icon`
166
+ // also supports urls and svg as values.
167
+ icon: icon?.startsWith( 'dashicons-' )
168
+ ? icon.slice( 10 )
169
+ : post,
170
+ };
171
+ const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;
172
+ // We have a different template creation flow only if they have entities.
173
+ if ( hasEntities ) {
174
+ menuItem.onClick = ( template ) => {
175
+ onClickMenuItem( {
176
+ type: 'postType',
177
+ slug,
178
+ config: {
179
+ recordNamePath: 'title.rendered',
180
+ queryArgs: ( { search } ) => {
181
+ return {
182
+ _fields: 'id,title,slug,link',
183
+ orderBy: search ? 'relevance' : 'modified',
184
+ exclude:
185
+ postTypesInfo[ slug ]
186
+ .existingEntitiesIds,
187
+ };
188
+ },
189
+ getSpecificTemplate: ( suggestion ) => {
190
+ let title = sprintf(
191
+ // 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 and %2$s is the name of the post, e.g. "Page: Hello".
192
+ __( '%1$s: %2$s' ),
193
+ labels.singular_name,
194
+ suggestion.name
195
+ );
196
+ const description = sprintf(
197
+ // translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Page: Hello"
198
+ __( 'Template for %1$s' ),
199
+ title
200
+ );
201
+ if ( _needsUniqueIdentifier ) {
202
+ title = sprintf(
203
+ // translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title and %2$s is the slug of the post type, e.g. "Project: Hello (project_type)"
204
+ __( '%1$s %2$s' ),
205
+ title,
206
+ `(${ slug })`
207
+ );
208
+ }
209
+ return {
210
+ title,
211
+ description,
212
+ slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
213
+ };
214
+ },
215
+ },
216
+ labels,
217
+ hasGeneralTemplate,
218
+ template,
266
219
  } );
267
- if ( postsWithTemplates?.length ) {
268
- accumulator[ slug ] = postsWithTemplates;
220
+ };
221
+ }
222
+ // We don't need to add the menu item if there are no
223
+ // entities and the general template exists.
224
+ if ( ! hasGeneralTemplate || hasEntities ) {
225
+ accumulator.push( menuItem );
226
+ }
227
+ return accumulator;
228
+ },
229
+ []
230
+ );
231
+ // Split menu items into two groups: one for the default post types
232
+ // and one for the rest.
233
+ const postTypesMenuItems = useMemo(
234
+ () =>
235
+ menuItems.reduce(
236
+ ( accumulator, postType ) => {
237
+ const { slug } = postType;
238
+ let key = 'postTypesMenuItems';
239
+ if ( slug === 'page' ) {
240
+ key = 'defaultPostTypesMenuItems';
269
241
  }
242
+ accumulator[ key ].push( postType );
270
243
  return accumulator;
271
244
  },
272
- {}
273
- );
274
- },
275
- [ slugsToExcludePerEntity ]
276
- );
277
- const entitiesInfo = useSelect(
278
- ( select ) => {
279
- return entities?.reduce( ( accumulator, { slug } ) => {
280
- const existingEntitiesIds =
281
- recordsToExcludePerEntity?.[ slug ]?.map(
282
- ( { id } ) => id
283
- ) || [];
284
- accumulator[ slug ] = {
285
- hasEntities: !! select( coreStore ).getEntityRecords(
286
- entityName,
287
- slug,
288
- {
289
- per_page: 1,
290
- _fields: 'id',
291
- context: 'view',
292
- exclude: existingEntitiesIds,
293
- }
294
- )?.length,
295
- existingEntitiesIds,
296
- };
297
- return accumulator;
298
- }, {} );
299
- },
300
- [ entities, recordsToExcludePerEntity ]
245
+ { defaultPostTypesMenuItems: [], postTypesMenuItems: [] }
246
+ ),
247
+ [ menuItems ]
301
248
  );
302
- return entitiesInfo;
249
+ return postTypesMenuItems;
303
250
  };
304
251
 
305
- export const useExtraTemplates = (
306
- entities,
307
- entityConfig,
308
- onClickMenuItem
309
- ) => {
252
+ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
253
+ const publicTaxonomies = usePublicTaxonomies();
310
254
  const existingTemplates = useExistingTemplates();
311
255
  const defaultTemplateTypes = useDefaultTemplateTypes();
312
- const entitiesInfo = useEntitiesInfo(
313
- existingTemplates,
314
- entities,
315
- entityConfig
256
+ // `category` and `post_tag` are special cases in template hierarchy.
257
+ const templatePrefixes = useMemo(
258
+ () =>
259
+ publicTaxonomies?.reduce( ( accumulator, { slug } ) => {
260
+ let suffix = slug;
261
+ if ( ! [ 'category', 'post_tag' ].includes( slug ) ) {
262
+ suffix = `taxonomy-${ suffix }`;
263
+ }
264
+ if ( slug === 'post_tag' ) {
265
+ suffix = `tag`;
266
+ }
267
+ accumulator[ slug ] = suffix;
268
+ return accumulator;
269
+ }, {} ),
270
+ [ publicTaxonomies ]
316
271
  );
272
+ // We need to keep track of naming conflicts. If a conflict
273
+ // occurs, we need to add slug.
274
+ const taxonomyLabels = publicTaxonomies?.reduce(
275
+ ( accumulator, { labels } ) => {
276
+ const singularName = labels.singular_name.toLowerCase();
277
+ accumulator[ singularName ] =
278
+ ( accumulator[ singularName ] || 0 ) + 1;
279
+ return accumulator;
280
+ },
281
+ {}
282
+ );
283
+ const needsUniqueIdentifier = ( labels, slug ) => {
284
+ if ( [ 'category', 'post_tag' ].includes( slug ) ) {
285
+ return false;
286
+ }
287
+ const singularName = labels.singular_name.toLowerCase();
288
+ return taxonomyLabels[ singularName ] > 1 && singularName !== slug;
289
+ };
290
+ const taxonomiesInfo = useEntitiesInfo( 'taxonomy', templatePrefixes );
317
291
  const existingTemplateSlugs = ( existingTemplates || [] ).map(
318
292
  ( { slug } ) => slug
319
293
  );
320
- const extraTemplates = ( entities || [] ).reduce(
321
- ( accumulator, entity ) => {
322
- const { slug, labels, icon } = entity;
323
- const slugForGeneralTemplate = entityConfig.templateSlug || slug;
294
+ const menuItems = ( publicTaxonomies || [] ).reduce(
295
+ ( accumulator, taxonomy ) => {
296
+ const { slug, labels } = taxonomy;
324
297
  // We need to check if the general template is part of the
325
298
  // defaultTemplateTypes. If it is, just use that info and
326
299
  // augment it with the specific template functionality.
300
+ const generalTemplateSlug = templatePrefixes[ slug ];
327
301
  const defaultTemplateType = defaultTemplateTypes?.find(
328
- ( { slug: _slug } ) => _slug === slugForGeneralTemplate
302
+ ( { slug: _slug } ) => _slug === generalTemplateSlug
329
303
  );
330
- const generalTemplateSlug =
331
- defaultTemplateType?.slug ||
332
- `${ entityConfig.templatePrefix }${ slug }`;
333
304
  const hasGeneralTemplate =
334
305
  existingTemplateSlugs?.includes( generalTemplateSlug );
306
+ const _needsUniqueIdentifier = needsUniqueIdentifier(
307
+ labels,
308
+ slug
309
+ );
310
+ let menuItemTitle = labels.singular_name;
311
+ if ( _needsUniqueIdentifier ) {
312
+ menuItemTitle = sprintf(
313
+ // translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat".
314
+ __( '%1$s (%2$s)' ),
315
+ labels.singular_name,
316
+ slug
317
+ );
318
+ }
335
319
  const menuItem = defaultTemplateType
336
320
  ? { ...defaultTemplateType }
337
321
  : {
338
322
  slug: generalTemplateSlug,
339
- title: entityConfig.getTitle( labels ),
340
- description: entityConfig.getDescription( labels ),
341
- icon: entityConfig.getIcon?.( icon ),
323
+ title: menuItemTitle,
324
+ description: sprintf(
325
+ // translators: %s: Name of the taxonomy e.g: "Product Categories".
326
+ __( 'Displays taxonomy: %s.' ),
327
+ labels.singular_name
328
+ ),
329
+ icon: blockMeta,
342
330
  };
343
- const hasEntities = entitiesInfo?.[ slug ]?.hasEntities;
331
+ const hasEntities = taxonomiesInfo?.[ slug ]?.hasEntities;
344
332
  // We have a different template creation flow only if they have entities.
345
333
  if ( hasEntities ) {
346
334
  menuItem.onClick = ( template ) => {
347
335
  onClickMenuItem( {
348
- type: entityConfig.entityName,
336
+ type: 'taxonomy',
349
337
  slug,
350
- config: entityConfig,
338
+ config: {
339
+ queryArgs: ( { search } ) => {
340
+ return {
341
+ _fields: 'id,name,slug,link',
342
+ orderBy: search ? 'name' : 'count',
343
+ exclude:
344
+ taxonomiesInfo[ slug ]
345
+ .existingEntitiesIds,
346
+ };
347
+ },
348
+ getSpecificTemplate: ( suggestion ) => {
349
+ let title = sprintf(
350
+ // translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the singular name of a taxonomy and %2$s is the name of the term, e.g. "Category: shoes".
351
+ __( '%1$s: %2$s' ),
352
+ labels.singular_name,
353
+ suggestion.name
354
+ );
355
+ const description = sprintf(
356
+ // translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Category: shoes"
357
+ __( 'Template for %1$s' ),
358
+ title
359
+ );
360
+ if ( _needsUniqueIdentifier ) {
361
+ title = sprintf(
362
+ // translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title and %2$s is the slug of the taxonomy, e.g. "Category: shoes (product_tag)"
363
+ __( '%1$s %2$s' ),
364
+ title,
365
+ `(${ slug })`
366
+ );
367
+ }
368
+ return {
369
+ title,
370
+ description,
371
+ slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
372
+ };
373
+ },
374
+ },
351
375
  labels,
352
376
  hasGeneralTemplate,
353
377
  template,
354
- postsToExclude:
355
- entitiesInfo[ slug ].existingEntitiesIds,
356
378
  } );
357
379
  };
358
380
  }
@@ -365,5 +387,152 @@ export const useExtraTemplates = (
365
387
  },
366
388
  []
367
389
  );
368
- return extraTemplates;
390
+ // Split menu items into two groups: one for the default taxonomies
391
+ // and one for the rest.
392
+ const taxonomiesMenuItems = useMemo(
393
+ () =>
394
+ menuItems.reduce(
395
+ ( accumulator, taxonomy ) => {
396
+ const { slug } = taxonomy;
397
+ let key = 'taxonomiesMenuItems';
398
+ if ( [ 'category', 'tag' ].includes( slug ) ) {
399
+ key = 'defaultTaxonomiesMenuItems';
400
+ }
401
+ accumulator[ key ].push( taxonomy );
402
+ return accumulator;
403
+ },
404
+ { defaultTaxonomiesMenuItems: [], taxonomiesMenuItems: [] }
405
+ ),
406
+ [ menuItems ]
407
+ );
408
+ return taxonomiesMenuItems;
409
+ };
410
+
411
+ /**
412
+ * Helper hook that filters all the existing templates by the given
413
+ * object with the entity's slug as key and the template prefix as value.
414
+ *
415
+ * Example:
416
+ * `existingTemplates` is: [ { slug: tag-apple }, { slug: page-about }, { slug: tag } ]
417
+ * `templatePrefixes` is: { post_tag: 'tag' }
418
+ * It will return: { post_tag: [apple] }
419
+ *
420
+ * Note: We append the `-` to the given template prefix in this function for our checks.
421
+ *
422
+ * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
423
+ * @return {Record<string,string[]>} An object with the entity's slug as key and an array with the existing template slugs as value.
424
+ */
425
+ const useExistingTemplateSlugs = ( templatePrefixes ) => {
426
+ const existingTemplates = useExistingTemplates();
427
+ const existingSlugs = useMemo( () => {
428
+ return Object.entries( templatePrefixes || {} ).reduce(
429
+ ( accumulator, [ slug, prefix ] ) => {
430
+ const slugsWithTemplates = ( existingTemplates || [] ).reduce(
431
+ ( _accumulator, existingTemplate ) => {
432
+ const _prefix = `${ prefix }-`;
433
+ if ( existingTemplate.slug.startsWith( _prefix ) ) {
434
+ _accumulator.push(
435
+ existingTemplate.slug.substring(
436
+ _prefix.length
437
+ )
438
+ );
439
+ }
440
+ return _accumulator;
441
+ },
442
+ []
443
+ );
444
+ if ( slugsWithTemplates.length ) {
445
+ accumulator[ slug ] = slugsWithTemplates;
446
+ }
447
+ return accumulator;
448
+ },
449
+ {}
450
+ );
451
+ }, [ templatePrefixes, existingTemplates ] );
452
+ return existingSlugs;
453
+ };
454
+
455
+ /**
456
+ * Helper hook that finds the existing records with an associated template,
457
+ * as they need to be excluded from the template suggestions.
458
+ *
459
+ * @param {string} entityName The entity's name.
460
+ * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
461
+ * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the existing records as value.
462
+ */
463
+ const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
464
+ const slugsToExcludePerEntity =
465
+ useExistingTemplateSlugs( templatePrefixes );
466
+ const recordsToExcludePerEntity = useSelect(
467
+ ( select ) => {
468
+ return Object.entries( slugsToExcludePerEntity || {} ).reduce(
469
+ ( accumulator, [ slug, slugsWithTemplates ] ) => {
470
+ const entitiesWithTemplates = select(
471
+ coreStore
472
+ ).getEntityRecords( entityName, slug, {
473
+ _fields: 'id',
474
+ context: 'view',
475
+ slug: slugsWithTemplates,
476
+ } );
477
+ if ( entitiesWithTemplates?.length ) {
478
+ accumulator[ slug ] = entitiesWithTemplates;
479
+ }
480
+ return accumulator;
481
+ },
482
+ {}
483
+ );
484
+ },
485
+ [ slugsToExcludePerEntity ]
486
+ );
487
+ return recordsToExcludePerEntity;
488
+ };
489
+
490
+ /**
491
+ * Helper hook that returns information about an entity having
492
+ * records that we can create a specific template for.
493
+ *
494
+ * For example we can search for `terms` in `taxonomy` entity or
495
+ * `posts` in `postType` entity.
496
+ *
497
+ * First we need to find the existing records with an associated template,
498
+ * to query afterwards for any remaining record, by excluding them.
499
+ *
500
+ * @param {string} entityName The entity's name.
501
+ * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
502
+ * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the EntitiesInfo as value.
503
+ */
504
+ const useEntitiesInfo = ( entityName, templatePrefixes ) => {
505
+ const recordsToExcludePerEntity = useTemplatesToExclude(
506
+ entityName,
507
+ templatePrefixes
508
+ );
509
+ const entitiesInfo = useSelect(
510
+ ( select ) => {
511
+ return Object.keys( templatePrefixes || {} ).reduce(
512
+ ( accumulator, slug ) => {
513
+ const existingEntitiesIds =
514
+ recordsToExcludePerEntity?.[ slug ]?.map(
515
+ ( { id } ) => id
516
+ ) || [];
517
+ accumulator[ slug ] = {
518
+ hasEntities: !! select( coreStore ).getEntityRecords(
519
+ entityName,
520
+ slug,
521
+ {
522
+ per_page: 1,
523
+ _fields: 'id',
524
+ context: 'view',
525
+ exclude: existingEntitiesIds,
526
+ }
527
+ )?.length,
528
+ existingEntitiesIds,
529
+ };
530
+ return accumulator;
531
+ },
532
+ {}
533
+ );
534
+ },
535
+ [ templatePrefixes, recordsToExcludePerEntity ]
536
+ );
537
+ return entitiesInfo;
369
538
  };