@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.
- package/CHANGELOG.md +2 -0
- package/build/components/add-new-template/add-custom-template-modal.js +22 -42
- package/build/components/add-new-template/add-custom-template-modal.js.map +1 -1
- package/build/components/add-new-template/new-template.js +17 -20
- package/build/components/add-new-template/new-template.js.map +1 -1
- package/build/components/add-new-template/utils.js +366 -239
- package/build/components/add-new-template/utils.js.map +1 -1
- package/build/components/block-editor/index.js +1 -3
- package/build/components/block-editor/index.js.map +1 -1
- package/build/components/global-styles/dimensions-panel.js +183 -13
- package/build/components/global-styles/dimensions-panel.js.map +1 -1
- package/build/components/global-styles/hooks.js +1 -1
- package/build/components/global-styles/hooks.js.map +1 -1
- package/build/components/global-styles/use-global-styles-output.js +95 -17
- package/build/components/global-styles/use-global-styles-output.js.map +1 -1
- package/build/components/global-styles/utils.js +31 -0
- package/build/components/global-styles/utils.js.map +1 -1
- package/build/components/header/index.js +7 -6
- package/build/components/header/index.js.map +1 -1
- package/build/hooks/index.js +2 -0
- package/build/hooks/index.js.map +1 -1
- package/build/hooks/template-part-edit.js +86 -0
- package/build/hooks/template-part-edit.js.map +1 -0
- package/build-module/components/add-new-template/add-custom-template-modal.js +23 -43
- package/build-module/components/add-new-template/add-custom-template-modal.js.map +1 -1
- package/build-module/components/add-new-template/new-template.js +18 -21
- package/build-module/components/add-new-template/new-template.js.map +1 -1
- package/build-module/components/add-new-template/utils.js +365 -227
- package/build-module/components/add-new-template/utils.js.map +1 -1
- package/build-module/components/block-editor/index.js +1 -2
- package/build-module/components/block-editor/index.js.map +1 -1
- package/build-module/components/global-styles/dimensions-panel.js +183 -14
- package/build-module/components/global-styles/dimensions-panel.js.map +1 -1
- package/build-module/components/global-styles/hooks.js +1 -1
- package/build-module/components/global-styles/hooks.js.map +1 -1
- package/build-module/components/global-styles/use-global-styles-output.js +94 -22
- package/build-module/components/global-styles/use-global-styles-output.js.map +1 -1
- package/build-module/components/global-styles/utils.js +29 -0
- package/build-module/components/global-styles/utils.js.map +1 -1
- package/build-module/components/header/index.js +8 -6
- package/build-module/components/header/index.js.map +1 -1
- package/build-module/hooks/index.js +1 -0
- package/build-module/hooks/index.js.map +1 -1
- package/build-module/hooks/template-part-edit.js +67 -0
- package/build-module/hooks/template-part-edit.js.map +1 -0
- package/build-style/style-rtl.css +25 -25
- package/build-style/style.css +25 -25
- package/package.json +29 -29
- package/src/components/add-new-template/add-custom-template-modal.js +27 -45
- package/src/components/add-new-template/new-template.js +27 -64
- package/src/components/add-new-template/style.scss +20 -8
- package/src/components/add-new-template/utils.js +398 -229
- package/src/components/block-editor/index.js +0 -2
- package/src/components/global-styles/dimensions-panel.js +207 -14
- package/src/components/global-styles/hooks.js +2 -0
- package/src/components/global-styles/test/use-global-styles-output.js +64 -1
- package/src/components/global-styles/use-global-styles-output.js +100 -8
- package/src/components/global-styles/utils.js +31 -0
- package/src/components/header/index.js +9 -10
- package/src/components/header/style.scss +5 -3
- package/src/components/sidebar/style.scss +4 -0
- package/src/hooks/index.js +1 -0
- package/src/hooks/template-part-edit.js +82 -0
- package/src/style.scss +0 -1
- package/build/components/edit-template-part-menu-button/index.js +0 -90
- package/build/components/edit-template-part-menu-button/index.js.map +0 -1
- package/build-module/components/edit-template-part-menu-button/index.js +0 -72
- package/build-module/components/edit-template-part-menu-button/index.js.map +0 -1
- 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
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
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
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
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
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
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
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
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
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
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
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
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
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
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
|
-
|
|
268
|
-
|
|
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
|
|
249
|
+
return postTypesMenuItems;
|
|
303
250
|
};
|
|
304
251
|
|
|
305
|
-
export const
|
|
306
|
-
|
|
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
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
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
|
|
321
|
-
( accumulator,
|
|
322
|
-
const { slug, labels
|
|
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 ===
|
|
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:
|
|
340
|
-
description:
|
|
341
|
-
|
|
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 =
|
|
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:
|
|
336
|
+
type: 'taxonomy',
|
|
349
337
|
slug,
|
|
350
|
-
config:
|
|
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
|
-
|
|
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
|
};
|