@wordpress/edit-site 4.9.0 → 4.12.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 (199) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/build/components/add-new-template/add-custom-generic-template-modal.js +84 -0
  3. package/build/components/add-new-template/add-custom-generic-template-modal.js.map +1 -0
  4. package/build/components/add-new-template/add-custom-template-modal.js +82 -61
  5. package/build/components/add-new-template/add-custom-template-modal.js.map +1 -1
  6. package/build/components/add-new-template/new-template.js +94 -81
  7. package/build/components/add-new-template/new-template.js.map +1 -1
  8. package/build/components/add-new-template/utils.js +574 -57
  9. package/build/components/add-new-template/utils.js.map +1 -1
  10. package/build/components/block-editor/index.js +1 -3
  11. package/build/components/block-editor/index.js.map +1 -1
  12. package/build/components/code-editor/index.js +17 -4
  13. package/build/components/code-editor/index.js.map +1 -1
  14. package/build/components/editor/index.js +16 -0
  15. package/build/components/editor/index.js.map +1 -1
  16. package/build/components/error-boundary/index.js +6 -0
  17. package/build/components/error-boundary/index.js.map +1 -1
  18. package/build/components/global-styles/dimensions-panel.js +191 -21
  19. package/build/components/global-styles/dimensions-panel.js.map +1 -1
  20. package/build/components/global-styles/global-styles-provider.js +4 -2
  21. package/build/components/global-styles/global-styles-provider.js.map +1 -1
  22. package/build/components/global-styles/hooks.js +11 -2
  23. package/build/components/global-styles/hooks.js.map +1 -1
  24. package/build/components/global-styles/screen-color-palette.js +13 -17
  25. package/build/components/global-styles/screen-color-palette.js.map +1 -1
  26. package/build/components/global-styles/screen-colors.js +59 -7
  27. package/build/components/global-styles/screen-colors.js.map +1 -1
  28. package/build/components/global-styles/screen-heading-color.js +157 -0
  29. package/build/components/global-styles/screen-heading-color.js.map +1 -0
  30. package/build/components/global-styles/screen-link-color.js +48 -14
  31. package/build/components/global-styles/screen-link-color.js.map +1 -1
  32. package/build/components/global-styles/screen-typography-element.js +4 -0
  33. package/build/components/global-styles/screen-typography-element.js.map +1 -1
  34. package/build/components/global-styles/screen-typography.js +5 -0
  35. package/build/components/global-styles/screen-typography.js.map +1 -1
  36. package/build/components/global-styles/typography-panel.js +73 -12
  37. package/build/components/global-styles/typography-panel.js.map +1 -1
  38. package/build/components/global-styles/typography-utils.js +217 -0
  39. package/build/components/global-styles/typography-utils.js.map +1 -0
  40. package/build/components/global-styles/ui.js +11 -0
  41. package/build/components/global-styles/ui.js.map +1 -1
  42. package/build/components/global-styles/use-global-styles-output.js +298 -61
  43. package/build/components/global-styles/use-global-styles-output.js.map +1 -1
  44. package/build/components/global-styles/utils.js +49 -3
  45. package/build/components/global-styles/utils.js.map +1 -1
  46. package/build/components/header/index.js +22 -10
  47. package/build/components/header/index.js.map +1 -1
  48. package/build/components/header/undo-redo/redo.js +2 -1
  49. package/build/components/header/undo-redo/redo.js.map +1 -1
  50. package/build/components/keyboard-shortcut-help-modal/index.js +1 -3
  51. package/build/components/keyboard-shortcut-help-modal/index.js.map +1 -1
  52. package/build/components/list/actions/index.js +1 -1
  53. package/build/components/list/actions/index.js.map +1 -1
  54. package/build/components/save-button/index.js +2 -3
  55. package/build/components/save-button/index.js.map +1 -1
  56. package/build/components/sidebar/navigation-menu-sidebar/navigation-menu.js +2 -2
  57. package/build/components/sidebar/navigation-menu-sidebar/navigation-menu.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 +11 -3
  61. package/build/components/template-details/edit-template-title.js.map +1 -1
  62. package/build/components/template-details/index.js +2 -21
  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-part-converter/convert-to-template-part.js +4 -1
  67. package/build/components/template-part-converter/convert-to-template-part.js.map +1 -1
  68. package/build/hooks/index.js +2 -0
  69. package/build/hooks/index.js.map +1 -1
  70. package/build/hooks/template-part-edit.js +86 -0
  71. package/build/hooks/template-part-edit.js.map +1 -0
  72. package/build/store/selectors.js +4 -1
  73. package/build/store/selectors.js.map +1 -1
  74. package/build-module/components/add-new-template/add-custom-generic-template-modal.js +77 -0
  75. package/build-module/components/add-new-template/add-custom-generic-template-modal.js.map +1 -0
  76. package/build-module/components/add-new-template/add-custom-template-modal.js +82 -61
  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 +96 -84
  79. package/build-module/components/add-new-template/new-template.js.map +1 -1
  80. package/build-module/components/add-new-template/utils.js +555 -50
  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/code-editor/index.js +18 -5
  85. package/build-module/components/code-editor/index.js.map +1 -1
  86. package/build-module/components/editor/index.js +16 -0
  87. package/build-module/components/editor/index.js.map +1 -1
  88. package/build-module/components/error-boundary/index.js +5 -0
  89. package/build-module/components/error-boundary/index.js.map +1 -1
  90. package/build-module/components/global-styles/dimensions-panel.js +191 -22
  91. package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
  92. package/build-module/components/global-styles/global-styles-provider.js +4 -2
  93. package/build-module/components/global-styles/global-styles-provider.js.map +1 -1
  94. package/build-module/components/global-styles/hooks.js +11 -2
  95. package/build-module/components/global-styles/hooks.js.map +1 -1
  96. package/build-module/components/global-styles/screen-color-palette.js +14 -19
  97. package/build-module/components/global-styles/screen-color-palette.js.map +1 -1
  98. package/build-module/components/global-styles/screen-colors.js +59 -7
  99. package/build-module/components/global-styles/screen-colors.js.map +1 -1
  100. package/build-module/components/global-styles/screen-heading-color.js +143 -0
  101. package/build-module/components/global-styles/screen-heading-color.js.map +1 -0
  102. package/build-module/components/global-styles/screen-link-color.js +47 -14
  103. package/build-module/components/global-styles/screen-link-color.js.map +1 -1
  104. package/build-module/components/global-styles/screen-typography-element.js +4 -0
  105. package/build-module/components/global-styles/screen-typography-element.js.map +1 -1
  106. package/build-module/components/global-styles/screen-typography.js +5 -0
  107. package/build-module/components/global-styles/screen-typography.js.map +1 -1
  108. package/build-module/components/global-styles/typography-panel.js +74 -13
  109. package/build-module/components/global-styles/typography-panel.js.map +1 -1
  110. package/build-module/components/global-styles/typography-utils.js +204 -0
  111. package/build-module/components/global-styles/typography-utils.js.map +1 -0
  112. package/build-module/components/global-styles/ui.js +10 -0
  113. package/build-module/components/global-styles/ui.js.map +1 -1
  114. package/build-module/components/global-styles/use-global-styles-output.js +294 -69
  115. package/build-module/components/global-styles/use-global-styles-output.js.map +1 -1
  116. package/build-module/components/global-styles/utils.js +47 -4
  117. package/build-module/components/global-styles/utils.js.map +1 -1
  118. package/build-module/components/header/index.js +25 -12
  119. package/build-module/components/header/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/keyboard-shortcut-help-modal/index.js +1 -2
  123. package/build-module/components/keyboard-shortcut-help-modal/index.js.map +1 -1
  124. package/build-module/components/list/actions/index.js +1 -1
  125. package/build-module/components/list/actions/index.js.map +1 -1
  126. package/build-module/components/save-button/index.js +3 -4
  127. package/build-module/components/save-button/index.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/template-card/template-actions.js +1 -1
  131. package/build-module/components/sidebar/template-card/template-actions.js.map +1 -1
  132. package/build-module/components/template-details/edit-template-title.js +12 -3
  133. package/build-module/components/template-details/edit-template-title.js.map +1 -1
  134. package/build-module/components/template-details/index.js +3 -22
  135. package/build-module/components/template-details/index.js.map +1 -1
  136. package/build-module/components/template-details/template-areas.js +1 -1
  137. package/build-module/components/template-details/template-areas.js.map +1 -1
  138. package/build-module/components/template-part-converter/convert-to-template-part.js +3 -1
  139. package/build-module/components/template-part-converter/convert-to-template-part.js.map +1 -1
  140. package/build-module/hooks/index.js +1 -0
  141. package/build-module/hooks/index.js.map +1 -1
  142. package/build-module/hooks/template-part-edit.js +67 -0
  143. package/build-module/hooks/template-part-edit.js.map +1 -0
  144. package/build-module/store/selectors.js +5 -2
  145. package/build-module/store/selectors.js.map +1 -1
  146. package/build-style/style-rtl.css +55 -48
  147. package/build-style/style.css +55 -48
  148. package/package.json +29 -29
  149. package/src/components/add-new-template/add-custom-generic-template-modal.js +97 -0
  150. package/src/components/add-new-template/add-custom-template-modal.js +93 -68
  151. package/src/components/add-new-template/new-template.js +126 -95
  152. package/src/components/add-new-template/style.scss +41 -8
  153. package/src/components/add-new-template/utils.js +622 -80
  154. package/src/components/block-editor/index.js +0 -2
  155. package/src/components/code-editor/index.js +15 -5
  156. package/src/components/editor/index.js +11 -0
  157. package/src/components/error-boundary/index.js +5 -0
  158. package/src/components/global-styles/dimensions-panel.js +214 -24
  159. package/src/components/global-styles/global-styles-provider.js +8 -9
  160. package/src/components/global-styles/hooks.js +18 -0
  161. package/src/components/global-styles/screen-color-palette.js +25 -27
  162. package/src/components/global-styles/screen-colors.js +55 -7
  163. package/src/components/global-styles/screen-heading-color.js +201 -0
  164. package/src/components/global-styles/screen-link-color.js +65 -23
  165. package/src/components/global-styles/screen-typography-element.js +4 -0
  166. package/src/components/global-styles/screen-typography.js +6 -0
  167. package/src/components/global-styles/style.scss +14 -11
  168. package/src/components/global-styles/test/typography-utils.js +130 -0
  169. package/src/components/global-styles/test/use-global-styles-output.js +296 -2
  170. package/src/components/global-styles/typography-panel.js +85 -16
  171. package/src/components/global-styles/typography-utils.js +228 -0
  172. package/src/components/global-styles/ui.js +13 -0
  173. package/src/components/global-styles/use-global-styles-output.js +387 -89
  174. package/src/components/global-styles/utils.js +43 -2
  175. package/src/components/header/index.js +37 -13
  176. package/src/components/header/style.scss +5 -3
  177. package/src/components/header/undo-redo/redo.js +6 -2
  178. package/src/components/keyboard-shortcut-help-modal/index.js +1 -2
  179. package/src/components/keyboard-shortcut-help-modal/style.scss +0 -5
  180. package/src/components/list/actions/index.js +3 -1
  181. package/src/components/list/style.scss +0 -8
  182. package/src/components/save-button/index.js +10 -13
  183. package/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js +1 -5
  184. package/src/components/sidebar/style.scss +4 -0
  185. package/src/components/sidebar/template-card/template-actions.js +3 -1
  186. package/src/components/template-details/edit-template-title.js +10 -2
  187. package/src/components/template-details/index.js +7 -22
  188. package/src/components/template-details/template-areas.js +3 -1
  189. package/src/components/template-part-converter/convert-to-template-part.js +3 -1
  190. package/src/components/test/error-boundary.js +38 -0
  191. package/src/hooks/index.js +1 -0
  192. package/src/hooks/template-part-edit.js +82 -0
  193. package/src/store/selectors.js +11 -5
  194. package/src/style.scss +0 -1
  195. package/build/components/edit-template-part-menu-button/index.js +0 -90
  196. package/build/components/edit-template-part-menu-button/index.js.map +0 -1
  197. package/build-module/components/edit-template-part-menu-button/index.js +0 -72
  198. package/build-module/components/edit-template-part-menu-button/index.js.map +0 -1
  199. package/src/components/edit-template-part-menu-button/index.js +0 -82
@@ -8,16 +8,65 @@ import { get } from 'lodash';
8
8
  */
9
9
  import { useSelect } from '@wordpress/data';
10
10
  import { store as coreStore } from '@wordpress/core-data';
11
+ import { store as editorStore } from '@wordpress/editor';
11
12
  import { decodeEntities } from '@wordpress/html-entities';
12
- import { useMemo } from '@wordpress/element';
13
+ import { useMemo, useCallback } from '@wordpress/element';
14
+ import { __, sprintf } from '@wordpress/i18n';
15
+ import { blockMeta, post } from '@wordpress/icons';
13
16
 
14
- export const usePostTypes = () => {
17
+ /**
18
+ * @typedef IHasNameAndId
19
+ * @property {string|number} id The entity's id.
20
+ * @property {string} name The entity's name.
21
+ */
22
+
23
+ /**
24
+ * Helper util to map records to add a `name` prop from a
25
+ * provided path, in order to handle all entities in the same
26
+ * fashion(implementing`IHasNameAndId` interface).
27
+ *
28
+ * @param {Object[]} entities The array of entities.
29
+ * @param {string} path The path to map a `name` property from the entity.
30
+ * @return {IHasNameAndId[]} An array of enitities that now implement the `IHasNameAndId` interface.
31
+ */
32
+ export const mapToIHasNameAndId = ( entities, path ) => {
33
+ return ( entities || [] ).map( ( entity ) => ( {
34
+ ...entity,
35
+ name: decodeEntities( get( entity, path ) ),
36
+ } ) );
37
+ };
38
+
39
+ /**
40
+ * @typedef {Object} EntitiesInfo
41
+ * @property {boolean} hasEntities If an entity has available records(posts, terms, etc..).
42
+ * @property {number[]} existingEntitiesIds An array of the existing entities ids.
43
+ */
44
+
45
+ export const useExistingTemplates = () => {
46
+ return useSelect(
47
+ ( select ) =>
48
+ select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
49
+ per_page: -1,
50
+ } ),
51
+ []
52
+ );
53
+ };
54
+
55
+ export const useDefaultTemplateTypes = () => {
56
+ return useSelect(
57
+ ( select ) =>
58
+ select( editorStore ).__experimentalGetDefaultTemplateTypes(),
59
+ []
60
+ );
61
+ };
62
+
63
+ const usePublicPostTypes = () => {
15
64
  const postTypes = useSelect(
16
65
  ( select ) => select( coreStore ).getPostTypes( { per_page: -1 } ),
17
66
  []
18
67
  );
19
68
  return useMemo( () => {
20
- const excludedPostTypes = [ 'attachment', 'page' ];
69
+ const excludedPostTypes = [ 'attachment' ];
21
70
  return postTypes?.filter(
22
71
  ( { viewable, slug } ) =>
23
72
  viewable && ! excludedPostTypes.includes( slug )
@@ -25,101 +74,594 @@ export const usePostTypes = () => {
25
74
  }, [ postTypes ] );
26
75
  };
27
76
 
28
- /**
29
- * @typedef {Object} PostTypeEntitiesInfo
30
- * @property {boolean} hasEntities If a postType has available entities.
31
- * @property {number[]} existingPosts An array of the existing entities ids.
32
- */
77
+ const usePublicTaxonomies = () => {
78
+ const taxonomies = useSelect(
79
+ ( select ) => select( coreStore ).getTaxonomies( { per_page: -1 } ),
80
+ []
81
+ );
82
+ return useMemo( () => {
83
+ return taxonomies?.filter(
84
+ ( { visibility } ) => visibility?.publicly_queryable
85
+ );
86
+ }, [ taxonomies ] );
87
+ };
33
88
 
34
- /**
35
- * Helper hook that returns information about a post type having
36
- * posts that we can create a specific template for.
37
- *
38
- * First we need to find the existing posts with an associated template,
39
- * to query afterwards for any remaing post, by excluding them.
40
- *
41
- * @param {string[]} existingTemplates The existing templates.
42
- * @return {Record<string,PostTypeEntitiesInfo>} An object with the postTypes as `keys` and PostTypeEntitiesInfo as values.
43
- */
44
- export const usePostTypesEntitiesInfo = ( existingTemplates ) => {
45
- const postTypes = usePostTypes();
46
- const slugsToExcludePerEntity = useMemo( () => {
47
- return postTypes?.reduce( ( accumulator, _postType ) => {
48
- const slugsWithTemplates = ( existingTemplates || [] ).reduce(
49
- ( _accumulator, existingTemplate ) => {
50
- const prefix = `single-${ _postType.slug }-`;
51
- if ( existingTemplate.slug.startsWith( prefix ) ) {
52
- _accumulator.push(
53
- existingTemplate.slug.substring( prefix.length )
54
- );
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(
95
+ () =>
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 ]
105
+ );
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
+ {}
116
+ );
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
124
+ );
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
134
+ );
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
+ );
153
+ }
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,
224
+ } );
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';
55
246
  }
56
- return _accumulator;
247
+ accumulator[ key ].push( postType );
248
+ return accumulator;
57
249
  },
58
- []
250
+ { defaultPostTypesMenuItems: [], postTypesMenuItems: [] }
251
+ ),
252
+ [ menuItems ]
253
+ );
254
+ return postTypesMenuItems;
255
+ };
256
+
257
+ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
258
+ const publicTaxonomies = usePublicTaxonomies();
259
+ const existingTemplates = useExistingTemplates();
260
+ const defaultTemplateTypes = useDefaultTemplateTypes();
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
+ {}
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 );
296
+ const existingTemplateSlugs = ( existingTemplates || [] ).map(
297
+ ( { slug } ) => slug
298
+ );
299
+ const menuItems = ( publicTaxonomies || [] ).reduce(
300
+ ( accumulator, taxonomy ) => {
301
+ const { slug, labels } = taxonomy;
302
+ // We need to check if the general template is part of the
303
+ // defaultTemplateTypes. If it is, just use that info and
304
+ // augment it with the specific template functionality.
305
+ const generalTemplateSlug = templatePrefixes[ slug ];
306
+ const defaultTemplateType = defaultTemplateTypes?.find(
307
+ ( { slug: _slug } ) => _slug === generalTemplateSlug
308
+ );
309
+ const hasGeneralTemplate =
310
+ existingTemplateSlugs?.includes( generalTemplateSlug );
311
+ const _needsUniqueIdentifier = needsUniqueIdentifier(
312
+ labels,
313
+ slug
59
314
  );
60
- if ( slugsWithTemplates.length ) {
61
- accumulator[ _postType.slug ] = slugsWithTemplates;
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
+ }
324
+ const menuItem = defaultTemplateType
325
+ ? {
326
+ ...defaultTemplateType,
327
+ templatePrefix: templatePrefixes[ slug ],
328
+ }
329
+ : {
330
+ slug: generalTemplateSlug,
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 ],
339
+ };
340
+ const hasEntities = taxonomiesInfo?.[ slug ]?.hasEntities;
341
+ // We have a different template creation flow only if they have entities.
342
+ if ( hasEntities ) {
343
+ menuItem.onClick = ( template ) => {
344
+ onClickMenuItem( {
345
+ type: 'taxonomy',
346
+ slug,
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
+ },
385
+ labels,
386
+ hasGeneralTemplate,
387
+ template,
388
+ } );
389
+ };
390
+ }
391
+ // We don't need to add the menu item if there are no
392
+ // entities and the general template exists.
393
+ if ( ! hasGeneralTemplate || hasEntities ) {
394
+ accumulator.push( menuItem );
62
395
  }
63
396
  return accumulator;
397
+ },
398
+ []
399
+ );
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;
64
431
  }, {} );
65
- }, [ postTypes, existingTemplates ] );
66
- const postsToExcludePerEntity = useSelect(
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(
67
588
  ( select ) => {
68
- if ( ! slugsToExcludePerEntity ) {
69
- return;
70
- }
71
- const postsToExclude = Object.entries(
72
- slugsToExcludePerEntity
73
- ).reduce( ( accumulator, [ slug, slugsWithTemplates ] ) => {
74
- const postsWithTemplates = select( coreStore ).getEntityRecords(
75
- 'postType',
76
- slug,
77
- {
589
+ return Object.entries( slugsToExcludePerEntity || {} ).reduce(
590
+ ( accumulator, [ slug, slugsWithTemplates ] ) => {
591
+ const entitiesWithTemplates = select(
592
+ coreStore
593
+ ).getEntityRecords( entityName, slug, {
78
594
  _fields: 'id',
79
595
  context: 'view',
80
596
  slug: slugsWithTemplates,
597
+ ...additionalQueryParameters[ slug ],
598
+ } );
599
+ if ( entitiesWithTemplates?.length ) {
600
+ accumulator[ slug ] = entitiesWithTemplates;
81
601
  }
82
- );
83
- if ( postsWithTemplates?.length ) {
84
- accumulator[ slug ] = postsWithTemplates;
85
- }
86
- return accumulator;
87
- }, {} );
88
- return postsToExclude;
602
+ return accumulator;
603
+ },
604
+ {}
605
+ );
89
606
  },
90
607
  [ slugsToExcludePerEntity ]
91
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
+ );
92
637
  const entitiesInfo = useSelect(
93
638
  ( select ) => {
94
- return postTypes?.reduce( ( accumulator, { slug } ) => {
95
- const existingPosts =
96
- postsToExcludePerEntity?.[ slug ]?.map(
97
- ( { id } ) => id
98
- ) || [];
99
- accumulator[ slug ] = {
100
- hasEntities: !! select( coreStore ).getEntityRecords(
101
- 'postType',
102
- slug,
103
- {
104
- per_page: 1,
105
- _fields: 'id',
106
- context: 'view',
107
- exclude: existingPosts,
108
- }
109
- )?.length,
110
- existingPosts,
111
- };
112
- return accumulator;
113
- }, {} );
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
+ );
114
663
  },
115
- [ postTypes, postsToExcludePerEntity ]
664
+ [ templatePrefixes, recordsToExcludePerEntity ]
116
665
  );
117
666
  return entitiesInfo;
118
667
  };
119
-
120
- export const mapToIHasNameAndId = ( entities, path ) => {
121
- return ( entities || [] ).map( ( entity ) => ( {
122
- ...entity,
123
- name: decodeEntities( get( entity, path ) ),
124
- } ) );
125
- };