@wordpress/edit-site 4.10.0 → 4.12.1-next.d6164808d3.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 (204) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/components/add-new-template/add-custom-template-modal.js +26 -44
  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 +45 -23
  5. package/build/components/add-new-template/new-template.js.map +1 -1
  6. package/build/components/add-new-template/utils.js +493 -242
  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/block-editor/resizable-editor.js +26 -12
  11. package/build/components/block-editor/resizable-editor.js.map +1 -1
  12. package/build/components/global-styles/border-panel.js +3 -3
  13. package/build/components/global-styles/border-panel.js.map +1 -1
  14. package/build/components/global-styles/dimensions-panel.js +280 -20
  15. package/build/components/global-styles/dimensions-panel.js.map +1 -1
  16. package/build/components/global-styles/hooks.js +4 -4
  17. package/build/components/global-styles/hooks.js.map +1 -1
  18. package/build/components/global-styles/screen-color-palette.js +1 -1
  19. package/build/components/global-styles/screen-color-palette.js.map +1 -1
  20. package/build/components/global-styles/screen-colors.js +51 -7
  21. package/build/components/global-styles/screen-colors.js.map +1 -1
  22. package/build/components/global-styles/screen-heading-color.js +157 -0
  23. package/build/components/global-styles/screen-heading-color.js.map +1 -0
  24. package/build/components/global-styles/screen-typography-element.js +4 -0
  25. package/build/components/global-styles/screen-typography-element.js.map +1 -1
  26. package/build/components/global-styles/screen-typography.js +5 -0
  27. package/build/components/global-styles/screen-typography.js.map +1 -1
  28. package/build/components/global-styles/typography-panel.js +82 -14
  29. package/build/components/global-styles/typography-panel.js.map +1 -1
  30. package/build/components/global-styles/typography-utils.js +217 -0
  31. package/build/components/global-styles/typography-utils.js.map +1 -0
  32. package/build/components/global-styles/ui.js +11 -0
  33. package/build/components/global-styles/ui.js.map +1 -1
  34. package/build/components/global-styles/use-global-styles-output.js +183 -52
  35. package/build/components/global-styles/use-global-styles-output.js.map +1 -1
  36. package/build/components/global-styles/utils.js +85 -5
  37. package/build/components/global-styles/utils.js.map +1 -1
  38. package/build/components/header/document-actions/index.js +1 -0
  39. package/build/components/header/document-actions/index.js.map +1 -1
  40. package/build/components/header/index.js +27 -12
  41. package/build/components/header/index.js.map +1 -1
  42. package/build/components/header/mode-switcher/index.js +0 -4
  43. package/build/components/header/mode-switcher/index.js.map +1 -1
  44. package/build/components/header/more-menu/index.js +13 -3
  45. package/build/components/header/more-menu/index.js.map +1 -1
  46. package/build/components/header/undo-redo/redo.js +2 -1
  47. package/build/components/header/undo-redo/redo.js.map +1 -1
  48. package/build/components/list/actions/index.js +1 -1
  49. package/build/components/list/actions/index.js.map +1 -1
  50. package/build/components/save-button/index.js +2 -3
  51. package/build/components/save-button/index.js.map +1 -1
  52. package/build/components/sidebar/default-sidebar.js +11 -1
  53. package/build/components/sidebar/default-sidebar.js.map +1 -1
  54. package/build/components/sidebar/navigation-menu-sidebar/navigation-menu.js +2 -2
  55. package/build/components/sidebar/navigation-menu-sidebar/navigation-menu.js.map +1 -1
  56. package/build/components/sidebar/plugin-sidebar/index.js +11 -1
  57. package/build/components/sidebar/plugin-sidebar/index.js.map +1 -1
  58. package/build/components/sidebar/template-card/template-actions.js +1 -1
  59. package/build/components/sidebar/template-card/template-actions.js.map +1 -1
  60. package/build/components/template-details/edit-template-title.js +1 -1
  61. package/build/components/template-details/edit-template-title.js.map +1 -1
  62. package/build/components/template-details/index.js +19 -9
  63. package/build/components/template-details/index.js.map +1 -1
  64. package/build/components/template-details/template-areas.js +1 -1
  65. package/build/components/template-details/template-areas.js.map +1 -1
  66. package/build/components/template-details/template-part-area-selector.js +47 -0
  67. package/build/components/template-details/template-part-area-selector.js.map +1 -0
  68. package/build/components/template-part-converter/convert-to-template-part.js +4 -1
  69. package/build/components/template-part-converter/convert-to-template-part.js.map +1 -1
  70. package/build/hooks/index.js +2 -0
  71. package/build/hooks/index.js.map +1 -1
  72. package/build/hooks/template-part-edit.js +86 -0
  73. package/build/hooks/template-part-edit.js.map +1 -0
  74. package/build/index.js +1 -1
  75. package/build/index.js.map +1 -1
  76. package/build-module/components/add-new-template/add-custom-template-modal.js +27 -45
  77. package/build-module/components/add-new-template/add-custom-template-modal.js.map +1 -1
  78. package/build-module/components/add-new-template/new-template.js +45 -25
  79. package/build-module/components/add-new-template/new-template.js.map +1 -1
  80. package/build-module/components/add-new-template/utils.js +489 -230
  81. package/build-module/components/add-new-template/utils.js.map +1 -1
  82. package/build-module/components/block-editor/index.js +1 -2
  83. package/build-module/components/block-editor/index.js.map +1 -1
  84. package/build-module/components/block-editor/resizable-editor.js +26 -12
  85. package/build-module/components/block-editor/resizable-editor.js.map +1 -1
  86. package/build-module/components/global-styles/border-panel.js +3 -3
  87. package/build-module/components/global-styles/border-panel.js.map +1 -1
  88. package/build-module/components/global-styles/dimensions-panel.js +278 -22
  89. package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
  90. package/build-module/components/global-styles/hooks.js +4 -4
  91. package/build-module/components/global-styles/hooks.js.map +1 -1
  92. package/build-module/components/global-styles/screen-color-palette.js +1 -1
  93. package/build-module/components/global-styles/screen-color-palette.js.map +1 -1
  94. package/build-module/components/global-styles/screen-colors.js +51 -7
  95. package/build-module/components/global-styles/screen-colors.js.map +1 -1
  96. package/build-module/components/global-styles/screen-heading-color.js +143 -0
  97. package/build-module/components/global-styles/screen-heading-color.js.map +1 -0
  98. package/build-module/components/global-styles/screen-typography-element.js +4 -0
  99. package/build-module/components/global-styles/screen-typography-element.js.map +1 -1
  100. package/build-module/components/global-styles/screen-typography.js +5 -0
  101. package/build-module/components/global-styles/screen-typography.js.map +1 -1
  102. package/build-module/components/global-styles/typography-panel.js +83 -15
  103. package/build-module/components/global-styles/typography-panel.js.map +1 -1
  104. package/build-module/components/global-styles/typography-utils.js +204 -0
  105. package/build-module/components/global-styles/typography-utils.js.map +1 -0
  106. package/build-module/components/global-styles/ui.js +10 -0
  107. package/build-module/components/global-styles/ui.js.map +1 -1
  108. package/build-module/components/global-styles/use-global-styles-output.js +182 -61
  109. package/build-module/components/global-styles/use-global-styles-output.js.map +1 -1
  110. package/build-module/components/global-styles/utils.js +82 -5
  111. package/build-module/components/global-styles/utils.js.map +1 -1
  112. package/build-module/components/header/document-actions/index.js +1 -0
  113. package/build-module/components/header/document-actions/index.js.map +1 -1
  114. package/build-module/components/header/index.js +30 -14
  115. package/build-module/components/header/index.js.map +1 -1
  116. package/build-module/components/header/mode-switcher/index.js +0 -4
  117. package/build-module/components/header/mode-switcher/index.js.map +1 -1
  118. package/build-module/components/header/more-menu/index.js +13 -3
  119. package/build-module/components/header/more-menu/index.js.map +1 -1
  120. package/build-module/components/header/undo-redo/redo.js +3 -2
  121. package/build-module/components/header/undo-redo/redo.js.map +1 -1
  122. package/build-module/components/list/actions/index.js +1 -1
  123. package/build-module/components/list/actions/index.js.map +1 -1
  124. package/build-module/components/save-button/index.js +3 -4
  125. package/build-module/components/save-button/index.js.map +1 -1
  126. package/build-module/components/sidebar/default-sidebar.js +9 -1
  127. package/build-module/components/sidebar/default-sidebar.js.map +1 -1
  128. package/build-module/components/sidebar/navigation-menu-sidebar/navigation-menu.js +3 -3
  129. package/build-module/components/sidebar/navigation-menu-sidebar/navigation-menu.js.map +1 -1
  130. package/build-module/components/sidebar/plugin-sidebar/index.js +9 -1
  131. package/build-module/components/sidebar/plugin-sidebar/index.js.map +1 -1
  132. package/build-module/components/sidebar/template-card/template-actions.js +1 -1
  133. package/build-module/components/sidebar/template-card/template-actions.js.map +1 -1
  134. package/build-module/components/template-details/edit-template-title.js +1 -1
  135. package/build-module/components/template-details/edit-template-title.js.map +1 -1
  136. package/build-module/components/template-details/index.js +19 -10
  137. package/build-module/components/template-details/index.js.map +1 -1
  138. package/build-module/components/template-details/template-areas.js +1 -1
  139. package/build-module/components/template-details/template-areas.js.map +1 -1
  140. package/build-module/components/template-details/template-part-area-selector.js +35 -0
  141. package/build-module/components/template-details/template-part-area-selector.js.map +1 -0
  142. package/build-module/components/template-part-converter/convert-to-template-part.js +3 -1
  143. package/build-module/components/template-part-converter/convert-to-template-part.js.map +1 -1
  144. package/build-module/hooks/index.js +1 -0
  145. package/build-module/hooks/index.js.map +1 -1
  146. package/build-module/hooks/template-part-edit.js +67 -0
  147. package/build-module/hooks/template-part-edit.js.map +1 -0
  148. package/build-module/index.js +1 -1
  149. package/build-module/index.js.map +1 -1
  150. package/build-style/style-rtl.css +40 -33
  151. package/build-style/style.css +40 -33
  152. package/package.json +29 -29
  153. package/src/components/add-new-template/add-custom-template-modal.js +39 -48
  154. package/src/components/add-new-template/new-template.js +50 -58
  155. package/src/components/add-new-template/style.scss +20 -8
  156. package/src/components/add-new-template/utils.js +529 -231
  157. package/src/components/block-editor/index.js +0 -2
  158. package/src/components/block-editor/resizable-editor.js +28 -18
  159. package/src/components/editor/style.scss +1 -0
  160. package/src/components/global-styles/border-panel.js +3 -3
  161. package/src/components/global-styles/dimensions-panel.js +344 -45
  162. package/src/components/global-styles/hooks.js +6 -3
  163. package/src/components/global-styles/screen-color-palette.js +1 -1
  164. package/src/components/global-styles/screen-colors.js +46 -4
  165. package/src/components/global-styles/screen-heading-color.js +201 -0
  166. package/src/components/global-styles/screen-typography-element.js +4 -0
  167. package/src/components/global-styles/screen-typography.js +6 -0
  168. package/src/components/global-styles/style.scss +14 -6
  169. package/src/components/global-styles/test/typography-utils.js +130 -0
  170. package/src/components/global-styles/test/use-global-styles-output.js +143 -4
  171. package/src/components/global-styles/test/utils.js +68 -8
  172. package/src/components/global-styles/typography-panel.js +119 -48
  173. package/src/components/global-styles/typography-utils.js +228 -0
  174. package/src/components/global-styles/ui.js +13 -0
  175. package/src/components/global-styles/use-global-styles-output.js +203 -53
  176. package/src/components/global-styles/utils.js +70 -4
  177. package/src/components/header/document-actions/index.js +3 -0
  178. package/src/components/header/index.js +41 -14
  179. package/src/components/header/mode-switcher/index.js +0 -3
  180. package/src/components/header/more-menu/index.js +7 -2
  181. package/src/components/header/style.scss +5 -3
  182. package/src/components/header/undo-redo/redo.js +6 -2
  183. package/src/components/list/actions/index.js +3 -1
  184. package/src/components/save-button/index.js +10 -13
  185. package/src/components/sidebar/default-sidebar.js +12 -0
  186. package/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js +1 -5
  187. package/src/components/sidebar/plugin-sidebar/index.js +12 -0
  188. package/src/components/sidebar/style.scss +4 -0
  189. package/src/components/sidebar/template-card/template-actions.js +3 -1
  190. package/src/components/template-details/edit-template-title.js +7 -3
  191. package/src/components/template-details/index.js +23 -8
  192. package/src/components/template-details/style.scss +0 -5
  193. package/src/components/template-details/template-areas.js +3 -1
  194. package/src/components/template-details/template-part-area-selector.js +38 -0
  195. package/src/components/template-part-converter/convert-to-template-part.js +3 -1
  196. package/src/hooks/index.js +1 -0
  197. package/src/hooks/template-part-edit.js +82 -0
  198. package/src/index.js +1 -1
  199. package/src/style.scss +0 -1
  200. package/build/components/edit-template-part-menu-button/index.js +0 -90
  201. package/build/components/edit-template-part-menu-button/index.js.map +0 -1
  202. package/build-module/components/edit-template-part-menu-button/index.js +0 -72
  203. package/build-module/components/edit-template-part-menu-button/index.js.map +0 -1
  204. package/src/components/edit-template-part-menu-button/index.js +0 -82
@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
10
10
  import { store as coreStore } from '@wordpress/core-data';
11
11
  import { store as editorStore } from '@wordpress/editor';
12
12
  import { decodeEntities } from '@wordpress/html-entities';
13
- import { useMemo } from '@wordpress/element';
13
+ import { useMemo, useCallback } from '@wordpress/element';
14
14
  import { __, sprintf } from '@wordpress/i18n';
15
15
  import { blockMeta, post } from '@wordpress/icons';
16
16
 
@@ -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,305 @@ 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
+ ? {
156
+ ...defaultTemplateType,
157
+ templatePrefix: templatePrefixes[ slug ],
158
+ }
159
+ : {
160
+ slug: generalTemplateSlug,
161
+ title: menuItemTitle,
162
+ description: sprintf(
163
+ // translators: %s: Name of the post type e.g: "Post".
164
+ __( 'Displays a single item: %s.' ),
165
+ labels.singular_name
166
+ ),
167
+ // `icon` is the `menu_icon` property of a post type. We
168
+ // only handle `dashicons` for now, even if the `menu_icon`
169
+ // also supports urls and svg as values.
170
+ icon: icon?.startsWith( 'dashicons-' )
171
+ ? icon.slice( 10 )
172
+ : post,
173
+ templatePrefix: templatePrefixes[ slug ],
174
+ };
175
+ const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;
176
+ // We have a different template creation flow only if they have entities.
177
+ if ( hasEntities ) {
178
+ menuItem.onClick = ( template ) => {
179
+ onClickMenuItem( {
180
+ type: 'postType',
181
+ slug,
182
+ config: {
183
+ recordNamePath: 'title.rendered',
184
+ queryArgs: ( { search } ) => {
185
+ return {
186
+ _fields: 'id,title,slug,link',
187
+ orderBy: search ? 'relevance' : 'modified',
188
+ exclude:
189
+ postTypesInfo[ slug ]
190
+ .existingEntitiesIds,
191
+ };
192
+ },
193
+ getSpecificTemplate: ( suggestion ) => {
194
+ let title = sprintf(
195
+ // 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".
196
+ __( '%1$s: %2$s' ),
197
+ labels.singular_name,
198
+ suggestion.name
199
+ );
200
+ const description = sprintf(
201
+ // translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Page: Hello"
202
+ __( 'Template for %1$s' ),
203
+ title
204
+ );
205
+ if ( _needsUniqueIdentifier ) {
206
+ title = sprintf(
207
+ // 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)"
208
+ __( '%1$s (%2$s)' ),
209
+ title,
210
+ slug
211
+ );
212
+ }
213
+ return {
214
+ title,
215
+ description,
216
+ slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
217
+ templatePrefix: templatePrefixes[ slug ],
218
+ };
219
+ },
220
+ },
221
+ labels,
222
+ hasGeneralTemplate,
223
+ template,
266
224
  } );
267
- if ( postsWithTemplates?.length ) {
268
- accumulator[ slug ] = postsWithTemplates;
225
+ };
226
+ }
227
+ // We don't need to add the menu item if there are no
228
+ // entities and the general template exists.
229
+ if ( ! hasGeneralTemplate || hasEntities ) {
230
+ accumulator.push( menuItem );
231
+ }
232
+ return accumulator;
233
+ },
234
+ []
235
+ );
236
+ // Split menu items into two groups: one for the default post types
237
+ // and one for the rest.
238
+ const postTypesMenuItems = useMemo(
239
+ () =>
240
+ menuItems.reduce(
241
+ ( accumulator, postType ) => {
242
+ const { slug } = postType;
243
+ let key = 'postTypesMenuItems';
244
+ if ( slug === 'page' ) {
245
+ key = 'defaultPostTypesMenuItems';
269
246
  }
247
+ accumulator[ key ].push( postType );
270
248
  return accumulator;
271
249
  },
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 ]
250
+ { defaultPostTypesMenuItems: [], postTypesMenuItems: [] }
251
+ ),
252
+ [ menuItems ]
301
253
  );
302
- return entitiesInfo;
254
+ return postTypesMenuItems;
303
255
  };
304
256
 
305
- export const useExtraTemplates = (
306
- entities,
307
- entityConfig,
308
- onClickMenuItem
309
- ) => {
257
+ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
258
+ const publicTaxonomies = usePublicTaxonomies();
310
259
  const existingTemplates = useExistingTemplates();
311
260
  const defaultTemplateTypes = useDefaultTemplateTypes();
312
- const entitiesInfo = useEntitiesInfo(
313
- existingTemplates,
314
- entities,
315
- entityConfig
261
+ // `category` and `post_tag` are special cases in template hierarchy.
262
+ const templatePrefixes = useMemo(
263
+ () =>
264
+ publicTaxonomies?.reduce( ( accumulator, { slug } ) => {
265
+ let suffix = slug;
266
+ if ( ! [ 'category', 'post_tag' ].includes( slug ) ) {
267
+ suffix = `taxonomy-${ suffix }`;
268
+ }
269
+ if ( slug === 'post_tag' ) {
270
+ suffix = `tag`;
271
+ }
272
+ accumulator[ slug ] = suffix;
273
+ return accumulator;
274
+ }, {} ),
275
+ [ publicTaxonomies ]
276
+ );
277
+ // We need to keep track of naming conflicts. If a conflict
278
+ // occurs, we need to add slug.
279
+ const taxonomyLabels = publicTaxonomies?.reduce(
280
+ ( accumulator, { labels } ) => {
281
+ const singularName = labels.singular_name.toLowerCase();
282
+ accumulator[ singularName ] =
283
+ ( accumulator[ singularName ] || 0 ) + 1;
284
+ return accumulator;
285
+ },
286
+ {}
316
287
  );
288
+ const needsUniqueIdentifier = ( labels, slug ) => {
289
+ if ( [ 'category', 'post_tag' ].includes( slug ) ) {
290
+ return false;
291
+ }
292
+ const singularName = labels.singular_name.toLowerCase();
293
+ return taxonomyLabels[ singularName ] > 1 && singularName !== slug;
294
+ };
295
+ const taxonomiesInfo = useEntitiesInfo( 'taxonomy', templatePrefixes );
317
296
  const existingTemplateSlugs = ( existingTemplates || [] ).map(
318
297
  ( { slug } ) => slug
319
298
  );
320
- const extraTemplates = ( entities || [] ).reduce(
321
- ( accumulator, entity ) => {
322
- const { slug, labels, icon } = entity;
323
- const slugForGeneralTemplate = entityConfig.templateSlug || slug;
299
+ const menuItems = ( publicTaxonomies || [] ).reduce(
300
+ ( accumulator, taxonomy ) => {
301
+ const { slug, labels } = taxonomy;
324
302
  // We need to check if the general template is part of the
325
303
  // defaultTemplateTypes. If it is, just use that info and
326
304
  // augment it with the specific template functionality.
305
+ const generalTemplateSlug = templatePrefixes[ slug ];
327
306
  const defaultTemplateType = defaultTemplateTypes?.find(
328
- ( { slug: _slug } ) => _slug === slugForGeneralTemplate
307
+ ( { slug: _slug } ) => _slug === generalTemplateSlug
329
308
  );
330
- const generalTemplateSlug =
331
- defaultTemplateType?.slug ||
332
- `${ entityConfig.templatePrefix }${ slug }`;
333
309
  const hasGeneralTemplate =
334
310
  existingTemplateSlugs?.includes( generalTemplateSlug );
311
+ const _needsUniqueIdentifier = needsUniqueIdentifier(
312
+ labels,
313
+ slug
314
+ );
315
+ let menuItemTitle = labels.singular_name;
316
+ if ( _needsUniqueIdentifier ) {
317
+ menuItemTitle = sprintf(
318
+ // translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat".
319
+ __( '%1$s (%2$s)' ),
320
+ labels.singular_name,
321
+ slug
322
+ );
323
+ }
335
324
  const menuItem = defaultTemplateType
336
- ? { ...defaultTemplateType }
325
+ ? {
326
+ ...defaultTemplateType,
327
+ templatePrefix: templatePrefixes[ slug ],
328
+ }
337
329
  : {
338
330
  slug: generalTemplateSlug,
339
- title: entityConfig.getTitle( labels ),
340
- description: entityConfig.getDescription( labels ),
341
- icon: entityConfig.getIcon?.( icon ),
331
+ title: menuItemTitle,
332
+ description: sprintf(
333
+ // translators: %s: Name of the taxonomy e.g: "Product Categories".
334
+ __( 'Displays taxonomy: %s.' ),
335
+ labels.singular_name
336
+ ),
337
+ icon: blockMeta,
338
+ templatePrefix: templatePrefixes[ slug ],
342
339
  };
343
- const hasEntities = entitiesInfo?.[ slug ]?.hasEntities;
340
+ const hasEntities = taxonomiesInfo?.[ slug ]?.hasEntities;
344
341
  // We have a different template creation flow only if they have entities.
345
342
  if ( hasEntities ) {
346
343
  menuItem.onClick = ( template ) => {
347
344
  onClickMenuItem( {
348
- type: entityConfig.entityName,
345
+ type: 'taxonomy',
349
346
  slug,
350
- config: entityConfig,
347
+ config: {
348
+ queryArgs: ( { search } ) => {
349
+ return {
350
+ _fields: 'id,name,slug,link',
351
+ orderBy: search ? 'name' : 'count',
352
+ exclude:
353
+ taxonomiesInfo[ slug ]
354
+ .existingEntitiesIds,
355
+ };
356
+ },
357
+ getSpecificTemplate: ( suggestion ) => {
358
+ let title = sprintf(
359
+ // 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".
360
+ __( '%1$s: %2$s' ),
361
+ labels.singular_name,
362
+ suggestion.name
363
+ );
364
+ const description = sprintf(
365
+ // translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Category: shoes"
366
+ __( 'Template for %1$s' ),
367
+ title
368
+ );
369
+ if ( _needsUniqueIdentifier ) {
370
+ title = sprintf(
371
+ // 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)"
372
+ __( '%1$s (%2$s)' ),
373
+ title,
374
+ slug
375
+ );
376
+ }
377
+ return {
378
+ title,
379
+ description,
380
+ slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
381
+ templatePrefix: templatePrefixes[ slug ],
382
+ };
383
+ },
384
+ },
351
385
  labels,
352
386
  hasGeneralTemplate,
353
387
  template,
354
- postsToExclude:
355
- entitiesInfo[ slug ].existingEntitiesIds,
356
388
  } );
357
389
  };
358
390
  }
@@ -365,5 +397,271 @@ export const useExtraTemplates = (
365
397
  },
366
398
  []
367
399
  );
368
- return extraTemplates;
400
+ // Split menu items into two groups: one for the default taxonomies
401
+ // and one for the rest.
402
+ const taxonomiesMenuItems = useMemo(
403
+ () =>
404
+ menuItems.reduce(
405
+ ( accumulator, taxonomy ) => {
406
+ const { slug } = taxonomy;
407
+ let key = 'taxonomiesMenuItems';
408
+ if ( [ 'category', 'tag' ].includes( slug ) ) {
409
+ key = 'defaultTaxonomiesMenuItems';
410
+ }
411
+ accumulator[ key ].push( taxonomy );
412
+ return accumulator;
413
+ },
414
+ { defaultTaxonomiesMenuItems: [], taxonomiesMenuItems: [] }
415
+ ),
416
+ [ menuItems ]
417
+ );
418
+ return taxonomiesMenuItems;
419
+ };
420
+
421
+ function useAuthorNeedsUniqueIndentifier() {
422
+ const authors = useSelect(
423
+ ( select ) =>
424
+ select( coreStore ).getUsers( { who: 'authors', per_page: -1 } ),
425
+ []
426
+ );
427
+ const authorsCountByName = useMemo( () => {
428
+ return ( authors || [] ).reduce( ( authorsCount, { name } ) => {
429
+ authorsCount[ name ] = ( authorsCount[ name ] || 0 ) + 1;
430
+ return authorsCount;
431
+ }, {} );
432
+ }, [ authors ] );
433
+ return useCallback(
434
+ ( name ) => {
435
+ return authorsCountByName[ name ] > 1;
436
+ },
437
+ [ authorsCountByName ]
438
+ );
439
+ }
440
+
441
+ const USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX = { user: 'author' };
442
+ const USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS = { user: { who: 'authors' } };
443
+ export function useAuthorMenuItem( onClickMenuItem ) {
444
+ const existingTemplates = useExistingTemplates();
445
+ const defaultTemplateTypes = useDefaultTemplateTypes();
446
+ const authorInfo = useEntitiesInfo(
447
+ 'root',
448
+ USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX,
449
+ USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS
450
+ );
451
+ const authorNeedsUniqueId = useAuthorNeedsUniqueIndentifier();
452
+ let authorMenuItem = defaultTemplateTypes?.find(
453
+ ( { slug } ) => slug === 'author'
454
+ );
455
+ if ( ! authorMenuItem ) {
456
+ authorMenuItem = {
457
+ description: __(
458
+ 'Displays latest posts written by a single author.'
459
+ ),
460
+ slug: 'author',
461
+ title: 'Author',
462
+ };
463
+ }
464
+ const hasGeneralTemplate = !! existingTemplates?.find(
465
+ ( { slug } ) => slug === 'author'
466
+ );
467
+ if ( authorInfo.user?.hasEntities ) {
468
+ authorMenuItem = { ...authorMenuItem, templatePrefix: 'author' };
469
+ authorMenuItem.onClick = ( template ) => {
470
+ onClickMenuItem( {
471
+ type: 'root',
472
+ slug: 'user',
473
+ config: {
474
+ queryArgs: ( { search } ) => {
475
+ return {
476
+ _fields: 'id,name,slug,link',
477
+ orderBy: search ? 'name' : 'registered_date',
478
+ exclude: authorInfo.user.existingEntitiesIds,
479
+ who: 'authors',
480
+ };
481
+ },
482
+ getSpecificTemplate: ( suggestion ) => {
483
+ const needsUniqueId = authorNeedsUniqueId(
484
+ suggestion.name
485
+ );
486
+ const title = needsUniqueId
487
+ ? sprintf(
488
+ // translators: %1$s: Represents the name of an author e.g: "Jorge", %2$s: Represents the slug of an author e.g: "author-jorge-slug".
489
+ __( 'Author: %1$s (%2$s)' ),
490
+ suggestion.name,
491
+ suggestion.slug
492
+ )
493
+ : sprintf(
494
+ // translators: %s: Represents the name of an author e.g: "Jorge".
495
+ __( 'Author: %s' ),
496
+ suggestion.name
497
+ );
498
+ const description = sprintf(
499
+ // translators: %s: Represents the name of an author e.g: "Jorge".
500
+ __( 'Template for Author: %s' ),
501
+ suggestion.name
502
+ );
503
+ return {
504
+ title,
505
+ description,
506
+ slug: `author-${ suggestion.slug }`,
507
+ templatePrefix: 'author',
508
+ };
509
+ },
510
+ },
511
+ labels: {
512
+ singular_name: __( 'Author' ),
513
+ search_items: __( 'Search Authors' ),
514
+ not_found: __( 'No authors found.' ),
515
+ all_items: __( 'All Authors' ),
516
+ },
517
+ hasGeneralTemplate,
518
+ template,
519
+ } );
520
+ };
521
+ }
522
+ if ( ! hasGeneralTemplate || authorInfo.user?.hasEntities ) {
523
+ return authorMenuItem;
524
+ }
525
+ }
526
+
527
+ /**
528
+ * Helper hook that filters all the existing templates by the given
529
+ * object with the entity's slug as key and the template prefix as value.
530
+ *
531
+ * Example:
532
+ * `existingTemplates` is: [ { slug: 'tag-apple' }, { slug: 'page-about' }, { slug: 'tag' } ]
533
+ * `templatePrefixes` is: { post_tag: 'tag' }
534
+ * It will return: { post_tag: ['apple'] }
535
+ *
536
+ * Note: We append the `-` to the given template prefix in this function for our checks.
537
+ *
538
+ * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
539
+ * @return {Record<string,string[]>} An object with the entity's slug as key and an array with the existing template slugs as value.
540
+ */
541
+ const useExistingTemplateSlugs = ( templatePrefixes ) => {
542
+ const existingTemplates = useExistingTemplates();
543
+ const existingSlugs = useMemo( () => {
544
+ return Object.entries( templatePrefixes || {} ).reduce(
545
+ ( accumulator, [ slug, prefix ] ) => {
546
+ const slugsWithTemplates = ( existingTemplates || [] ).reduce(
547
+ ( _accumulator, existingTemplate ) => {
548
+ const _prefix = `${ prefix }-`;
549
+ if ( existingTemplate.slug.startsWith( _prefix ) ) {
550
+ _accumulator.push(
551
+ existingTemplate.slug.substring(
552
+ _prefix.length
553
+ )
554
+ );
555
+ }
556
+ return _accumulator;
557
+ },
558
+ []
559
+ );
560
+ if ( slugsWithTemplates.length ) {
561
+ accumulator[ slug ] = slugsWithTemplates;
562
+ }
563
+ return accumulator;
564
+ },
565
+ {}
566
+ );
567
+ }, [ templatePrefixes, existingTemplates ] );
568
+ return existingSlugs;
569
+ };
570
+
571
+ /**
572
+ * Helper hook that finds the existing records with an associated template,
573
+ * as they need to be excluded from the template suggestions.
574
+ *
575
+ * @param {string} entityName The entity's name.
576
+ * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
577
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
578
+ * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the existing records as value.
579
+ */
580
+ const useTemplatesToExclude = (
581
+ entityName,
582
+ templatePrefixes,
583
+ additionalQueryParameters = {}
584
+ ) => {
585
+ const slugsToExcludePerEntity =
586
+ useExistingTemplateSlugs( templatePrefixes );
587
+ const recordsToExcludePerEntity = useSelect(
588
+ ( select ) => {
589
+ return Object.entries( slugsToExcludePerEntity || {} ).reduce(
590
+ ( accumulator, [ slug, slugsWithTemplates ] ) => {
591
+ const entitiesWithTemplates = select(
592
+ coreStore
593
+ ).getEntityRecords( entityName, slug, {
594
+ _fields: 'id',
595
+ context: 'view',
596
+ slug: slugsWithTemplates,
597
+ ...additionalQueryParameters[ slug ],
598
+ } );
599
+ if ( entitiesWithTemplates?.length ) {
600
+ accumulator[ slug ] = entitiesWithTemplates;
601
+ }
602
+ return accumulator;
603
+ },
604
+ {}
605
+ );
606
+ },
607
+ [ slugsToExcludePerEntity ]
608
+ );
609
+ return recordsToExcludePerEntity;
610
+ };
611
+
612
+ /**
613
+ * Helper hook that returns information about an entity having
614
+ * records that we can create a specific template for.
615
+ *
616
+ * For example we can search for `terms` in `taxonomy` entity or
617
+ * `posts` in `postType` entity.
618
+ *
619
+ * First we need to find the existing records with an associated template,
620
+ * to query afterwards for any remaining record, by excluding them.
621
+ *
622
+ * @param {string} entityName The entity's name.
623
+ * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
624
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
625
+ * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the EntitiesInfo as value.
626
+ */
627
+ const useEntitiesInfo = (
628
+ entityName,
629
+ templatePrefixes,
630
+ additionalQueryParameters = {}
631
+ ) => {
632
+ const recordsToExcludePerEntity = useTemplatesToExclude(
633
+ entityName,
634
+ templatePrefixes,
635
+ additionalQueryParameters
636
+ );
637
+ const entitiesInfo = useSelect(
638
+ ( select ) => {
639
+ return Object.keys( templatePrefixes || {} ).reduce(
640
+ ( accumulator, slug ) => {
641
+ const existingEntitiesIds =
642
+ recordsToExcludePerEntity?.[ slug ]?.map(
643
+ ( { id } ) => id
644
+ ) || [];
645
+ accumulator[ slug ] = {
646
+ hasEntities: !! select( coreStore ).getEntityRecords(
647
+ entityName,
648
+ slug,
649
+ {
650
+ per_page: 1,
651
+ _fields: 'id',
652
+ context: 'view',
653
+ exclude: existingEntitiesIds,
654
+ ...additionalQueryParameters[ slug ],
655
+ }
656
+ )?.length,
657
+ existingEntitiesIds,
658
+ };
659
+ return accumulator;
660
+ },
661
+ {}
662
+ );
663
+ },
664
+ [ templatePrefixes, recordsToExcludePerEntity ]
665
+ );
666
+ return entitiesInfo;
369
667
  };