@wordpress/edit-site 4.8.0 → 4.9.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.9.0 (2022-06-29)
+
 ## 4.8.0 (2022-06-15)
 
 ## 4.7.0 (2022-06-01)

package/build/components/add-new-template/add-custom-template-modal.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _compose = require("@wordpress/compose");
+
+var _coreData = require("@wordpress/core-data");
+
+var _utils = require("./utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const EMPTY_ARRAY = [];
+const BASE_QUERY = {
+  order: 'asc',
+  _fields: 'id,title,slug,link',
+  context: 'view'
+};
+
+function SuggestionListItem(_ref) {
+  let {
+    suggestion,
+    search,
+    onSelect,
+    entityForSuggestions,
+    composite
+  } = _ref;
+  const baseCssClass = 'edit-site-custom-template-modal__suggestions_list__list-item';
+  return (0, _element.createElement)(_components.__unstableCompositeItem, (0, _extends2.default)({
+    role: "option",
+    as: _components.Button
+  }, composite, {
+    className: baseCssClass,
+    onClick: () => {
+      const title = (0, _i18n.sprintf)( // 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. "Post: Hello, WordPress"
+      (0, _i18n.__)('%1$s: %2$s'), entityForSuggestions.labels.singular_name, suggestion.name);
+      onSelect({
+        title,
+        description: (0, _i18n.sprintf)( // translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Post: Hello, WordPress"
+        (0, _i18n.__)('Template for %1$s'), title),
+        slug: `single-${entityForSuggestions.slug}-${suggestion.slug}`
+      });
+    }
+  }), (0, _element.createElement)("span", {
+    className: `${baseCssClass}__title`
+  }, (0, _element.createElement)(_components.TextHighlight, {
+    text: suggestion.name,
+    highlight: search
+  })), suggestion.link && (0, _element.createElement)("span", {
+    className: `${baseCssClass}__info`
+  }, suggestion.link));
+}
+
+function SuggestionList(_ref2) {
+  let {
+    entityForSuggestions,
+    onSelect
+  } = _ref2;
+  const composite = (0, _components.__unstableUseCompositeState)({
+    orientation: 'vertical'
+  });
+  const [suggestions, setSuggestions] = (0, _element.useState)(EMPTY_ARRAY); // We need to track two values, the search input's value(searchInputValue)
+  // and the one we want to debounce(search) and make REST API requests.
+
+  const [searchInputValue, setSearchInputValue] = (0, _element.useState)('');
+  const [search, setSearch] = (0, _element.useState)('');
+  const debouncedSearch = (0, _compose.useDebounce)(setSearch, 250);
+  const query = { ...BASE_QUERY,
+    search,
+    orderby: search ? 'relevance' : 'modified',
+    exclude: entityForSuggestions.postsToExclude,
+    per_page: search ? 20 : 10
+  };
+  const {
+    records: searchResults,
+    hasResolved: searchHasResolved
+  } = (0, _coreData.useEntityRecords)(entityForSuggestions.type, entityForSuggestions.slug, query);
+  (0, _element.useEffect)(() => {
+    if (search !== searchInputValue) {
+      debouncedSearch(searchInputValue);
+    }
+  }, [search, searchInputValue]);
+  const entitiesInfo = (0, _element.useMemo)(() => {
+    if (!(searchResults !== null && searchResults !== void 0 && searchResults.length)) return EMPTY_ARRAY;
+    return (0, _utils.mapToIHasNameAndId)(searchResults, 'title.rendered');
+  }, [searchResults]); // Update suggestions only when the query has resolved.
+
+  (0, _element.useEffect)(() => {
+    if (!searchHasResolved) return;
+    setSuggestions(entitiesInfo);
+  }, [entitiesInfo, searchHasResolved]);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.SearchControl, {
+    onChange: setSearchInputValue,
+    value: searchInputValue,
+    label: entityForSuggestions.labels.search_items,
+    placeholder: entityForSuggestions.labels.search_items
+  }), !!(suggestions !== null && suggestions !== void 0 && suggestions.length) && (0, _element.createElement)(_components.__unstableComposite, (0, _extends2.default)({}, composite, {
+    role: "listbox",
+    className: "edit-site-custom-template-modal__suggestions_list"
+  }), suggestions.map(suggestion => (0, _element.createElement)(SuggestionListItem, {
+    key: suggestion.slug,
+    suggestion: suggestion,
+    search: search,
+    onSelect: onSelect,
+    entityForSuggestions: entityForSuggestions,
+    composite: composite
+  }))), search && !(suggestions !== null && suggestions !== void 0 && suggestions.length) && (0, _element.createElement)("p", {
+    className: "edit-site-custom-template-modal__no-results"
+  }, entityForSuggestions.labels.not_found));
+}
+
+function AddCustomTemplateModal(_ref3) {
+  let {
+    onClose,
+    onSelect,
+    entityForSuggestions
+  } = _ref3;
+  const [showSearchEntities, setShowSearchEntities] = (0, _element.useState)(entityForSuggestions.hasGeneralTemplate);
+  const baseCssClass = 'edit-site-custom-template-modal';
+  return (0, _element.createElement)(_components.Modal, {
+    title: (0, _i18n.sprintf)( // translators: %s: Name of the post type e.g: "Post".
+    (0, _i18n.__)('Add template: %s'), entityForSuggestions.labels.singular_name),
+    className: baseCssClass,
+    closeLabel: (0, _i18n.__)('Close'),
+    onRequestClose: onClose
+  }, !showSearchEntities && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("p", null, (0, _i18n.__)('Select whether to create a single template for all items or a specific one.')), (0, _element.createElement)(_components.Flex, {
+    className: `${baseCssClass}__contents`,
+    gap: "4",
+    align: "initial"
+  }, (0, _element.createElement)(_components.FlexItem, {
+    isBlock: true,
+    onClick: () => {
+      const {
+        slug,
+        title,
+        description
+      } = entityForSuggestions.template;
+      onSelect({
+        slug,
+        title,
+        description
+      });
+    }
+  }, (0, _element.createElement)(_components.__experimentalHeading, {
+    level: 5
+  }, entityForSuggestions.labels.all_items), (0, _element.createElement)(_components.__experimentalText, {
+    as: "span"
+  }, // translators: The user is given the choice to set up a template for all items of a post type, or just a specific one.
+  (0, _i18n.__)('For all items'))), (0, _element.createElement)(_components.FlexItem, {
+    isBlock: true,
+    onClick: () => {
+      setShowSearchEntities(true);
+    }
+  }, (0, _element.createElement)(_components.__experimentalHeading, {
+    level: 5
+  }, entityForSuggestions.labels.singular_name), (0, _element.createElement)(_components.__experimentalText, {
+    as: "span"
+  }, // translators: The user is given the choice to set up a template for all items of a post type, or just a specific one.
+  (0, _i18n.__)('For a specific item'))))), showSearchEntities && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("p", null, (0, _i18n.__)('This template will be used only for the specific item chosen.')), (0, _element.createElement)(SuggestionList, {
+    entityForSuggestions: entityForSuggestions,
+    onSelect: onSelect
+  })));
+}
+
+var _default = AddCustomTemplateModal;
+exports.default = _default;
+//# sourceMappingURL=add-custom-template-modal.js.map

package/build/components/add-new-template/add-custom-template-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/add-custom-template-modal.js"],"names":["EMPTY_ARRAY","BASE_QUERY","order","_fields","context","SuggestionListItem","suggestion","search","onSelect","entityForSuggestions","composite","baseCssClass","Button","title","labels","singular_name","name","description","slug","link","SuggestionList","orientation","suggestions","setSuggestions","searchInputValue","setSearchInputValue","setSearch","debouncedSearch","query","orderby","exclude","postsToExclude","per_page","records","searchResults","hasResolved","searchHasResolved","type","entitiesInfo","length","search_items","map","not_found","AddCustomTemplateModal","onClose","showSearchEntities","setShowSearchEntities","hasGeneralTemplate","template","all_items"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\tFlex,\n\tFlexItem,\n\tModal,\n\tSearchControl,\n\tTextHighlight,\n\t__experimentalText as Text,\n\t__experimentalHeading as Heading,\n\t__unstableComposite as Composite,\n\t__unstableUseCompositeState as useCompositeState,\n\t__unstableCompositeItem as CompositeItem,\n} from '@wordpress/components';\nimport { useDebounce } from '@wordpress/compose';\nimport { useEntityRecords } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { mapToIHasNameAndId } from './utils';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,title,slug,link',\n\tcontext: 'view',\n};\n\nfunction SuggestionListItem( {\n\tsuggestion,\n\tsearch,\n\tonSelect,\n\tentityForSuggestions,\n\tcomposite,\n} ) {\n\tconst baseCssClass =\n\t\t'edit-site-custom-template-modal__suggestions_list__list-item';\n\treturn (\n\t\t<CompositeItem\n\t\t\trole=\"option\"\n\t\t\tas={ Button }\n\t\t\t{ ...composite }\n\t\t\tclassName={ baseCssClass }\n\t\t\tonClick={ () => {\n\t\t\t\tconst title = sprintf(\n\t\t\t\t\t// 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. \"Post: Hello, WordPress\"\n\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\tentityForSuggestions.labels.singular_name,\n\t\t\t\t\tsuggestion.name\n\t\t\t\t);\n\t\t\t\tonSelect( {\n\t\t\t\t\ttitle,\n\t\t\t\t\tdescription: sprintf(\n\t\t\t\t\t\t// translators: Represents the description of a user's custom template in the Site Editor, e.g. \"Template for Post: Hello, WordPress\"\n\t\t\t\t\t\t__( 'Template for %1$s' ),\n\t\t\t\t\t\ttitle\n\t\t\t\t\t),\n\t\t\t\t\tslug: `single-${ entityForSuggestions.slug }-${ suggestion.slug }`,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t<span className={ `${ baseCssClass }__title` }>\n\t\t\t\t<TextHighlight text={ suggestion.name } highlight={ search } />\n\t\t\t</span>\n\t\t\t{ suggestion.link && (\n\t\t\t\t<span className={ `${ baseCssClass }__info` }>\n\t\t\t\t\t{ suggestion.link }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</CompositeItem>\n\t);\n}\n\nfunction SuggestionList( { entityForSuggestions, onSelect } ) {\n\tconst composite = useCompositeState( { orientation: 'vertical' } );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\t// We need to track two values, the search input's value(searchInputValue)\n\t// and the one we want to debounce(search) and make REST API requests.\n\tconst [ searchInputValue, setSearchInputValue ] = useState( '' );\n\tconst [ search, setSearch ] = useState( '' );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\tconst query = {\n\t\t...BASE_QUERY,\n\t\tsearch,\n\t\torderby: search ? 'relevance' : 'modified',\n\t\texclude: entityForSuggestions.postsToExclude,\n\t\tper_page: search ? 20 : 10,\n\t};\n\tconst { records: searchResults, hasResolved: searchHasResolved } =\n\t\tuseEntityRecords(\n\t\t\tentityForSuggestions.type,\n\t\t\tentityForSuggestions.slug,\n\t\t\tquery\n\t\t);\n\tuseEffect( () => {\n\t\tif ( search !== searchInputValue ) {\n\t\t\tdebouncedSearch( searchInputValue );\n\t\t}\n\t}, [ search, searchInputValue ] );\n\tconst entitiesInfo = useMemo( () => {\n\t\tif ( ! searchResults?.length ) return EMPTY_ARRAY;\n\t\treturn mapToIHasNameAndId( searchResults, 'title.rendered' );\n\t}, [ searchResults ] );\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) return;\n\t\tsetSuggestions( entitiesInfo );\n\t}, [ entitiesInfo, searchHasResolved ] );\n\treturn (\n\t\t<>\n\t\t\t<SearchControl\n\t\t\t\tonChange={ setSearchInputValue }\n\t\t\t\tvalue={ searchInputValue }\n\t\t\t\tlabel={ entityForSuggestions.labels.search_items }\n\t\t\t\tplaceholder={ entityForSuggestions.labels.search_items }\n\t\t\t/>\n\t\t\t{ !! suggestions?.length && (\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...composite }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tclassName=\"edit-site-custom-template-modal__suggestions_list\"\n\t\t\t\t>\n\t\t\t\t\t{ suggestions.map( ( suggestion ) => (\n\t\t\t\t\t\t<SuggestionListItem\n\t\t\t\t\t\t\tkey={ suggestion.slug }\n\t\t\t\t\t\t\tsuggestion={ suggestion }\n\t\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tentityForSuggestions={ entityForSuggestions }\n\t\t\t\t\t\t\tcomposite={ composite }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Composite>\n\t\t\t) }\n\t\t\t{ search && ! suggestions?.length && (\n\t\t\t\t<p className=\"edit-site-custom-template-modal__no-results\">\n\t\t\t\t\t{ entityForSuggestions.labels.not_found }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {\n\tconst [ showSearchEntities, setShowSearchEntities ] = useState(\n\t\tentityForSuggestions.hasGeneralTemplate\n\t);\n\tconst baseCssClass = 'edit-site-custom-template-modal';\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ sprintf(\n\t\t\t\t// translators: %s: Name of the post type e.g: \"Post\".\n\t\t\t\t__( 'Add template: %s' ),\n\t\t\t\tentityForSuggestions.labels.singular_name\n\t\t\t) }\n\t\t\tclassName={ baseCssClass }\n\t\t\tcloseLabel={ __( 'Close' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t>\n\t\t\t{ ! showSearchEntities && (\n\t\t\t\t<>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Select whether to create a single template for all items or a specific one.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName={ `${ baseCssClass }__contents` }\n\t\t\t\t\t\tgap=\"4\"\n\t\t\t\t\t\talign=\"initial\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst { slug, title, description } =\n\t\t\t\t\t\t\t\t\tentityForSuggestions.template;\n\t\t\t\t\t\t\t\tonSelect( { slug, title, description } );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Heading level={ 5 }>\n\t\t\t\t\t\t\t\t{ entityForSuggestions.labels.all_items }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t<Text as=\"span\">\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// translators: The user is given the choice to set up a template for all items of a post type, or just a specific one.\n\t\t\t\t\t\t\t\t\t__( 'For all items' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetShowSearchEntities( true );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Heading level={ 5 }>\n\t\t\t\t\t\t\t\t{ entityForSuggestions.labels.singular_name }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t<Text as=\"span\">\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t// translators: The user is given the choice to set up a template for all items of a post type, or just a specific one.\n\t\t\t\t\t\t\t\t\t__( 'For a specific item' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t</Flex>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ showSearchEntities && (\n\t\t\t\t<>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'This template will be used only for the specific item chosen.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<SuggestionList\n\t\t\t\t\t\tentityForSuggestions={ entityForSuggestions }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</Modal>\n\t);\n}\n\nexport default AddCustomTemplateModal;\n"]}

package/build/components/add-new-template/new-template.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,6 +25,10 @@ var _i18n = require("@wordpress/i18n");
 
 var _notices = require("@wordpress/notices");
 
+var _addCustomTemplateModal = _interopRequireDefault(require("./add-custom-template-modal"));
+
+var _utils = require("./utils");
+
 var _routes = require("../routes");
 
 var _store = require("../../store");
@@ -60,15 +66,19 @@ function NewTemplate(_ref) {
     postType
   } = _ref;
   const history = (0, _routes.useHistory)();
+  const postTypes = (0, _utils.usePostTypes)();
+  const [showCustomTemplateModal, setShowCustomTemplateModal] = (0, _element.useState)(false);
+  const [entityForSuggestions, setEntityForSuggestions] = (0, _element.useState)({});
   const {
-    templates,
+    existingTemplates,
     defaultTemplateTypes
   } = (0, _data.useSelect)(select => ({
-    templates: select(_coreData.store).getEntityRecords('postType', 'wp_template', {
+    existingTemplates: select(_coreData.store).getEntityRecords('postType', 'wp_template', {
       per_page: -1
     }),
     defaultTemplateTypes: select(_editor.store).__experimentalGetDefaultTemplateTypes()
   }), []);
+  const postTypesEntitiesInfo = (0, _utils.usePostTypesEntitiesInfo)(existingTemplates);
   const {
     saveEntityRecord
   } = (0, _data.useDispatch)(_coreData.store);
@@ -112,18 +122,69 @@ function NewTemplate(_ref) {
     }
   }
 
-  const existingTemplateSlugs = (0, _lodash.map)(templates, 'slug');
+  const existingTemplateSlugs = (existingTemplates || []).map(_ref2 => {
+    let {
+      slug
+    } = _ref2;
+    return slug;
+  });
   const missingTemplates = (0, _lodash.filter)(defaultTemplateTypes, template => (0, _lodash.includes)(DEFAULT_TEMPLATE_SLUGS, template.slug) && !(0, _lodash.includes)(existingTemplateSlugs, template.slug));
+  const extraTemplates = (postTypes || []).reduce((accumulator, _postType) => {
+    var _postTypesEntitiesInf;
+
+    const {
+      slug,
+      labels,
+      icon
+    } = _postType;
+    const hasGeneralTemplate = existingTemplateSlugs === null || existingTemplateSlugs === void 0 ? void 0 : existingTemplateSlugs.includes(`single-${slug}`);
+    const hasEntities = postTypesEntitiesInfo === null || postTypesEntitiesInfo === void 0 ? void 0 : (_postTypesEntitiesInf = postTypesEntitiesInfo[slug]) === null || _postTypesEntitiesInf === void 0 ? void 0 : _postTypesEntitiesInf.hasEntities;
+    const menuItem = {
+      slug: `single-${slug}`,
+      title: (0, _i18n.sprintf)( // translators: %s: Name of the post type e.g: "Post".
+      (0, _i18n.__)('Single item: %s'), labels.singular_name),
+      description: (0, _i18n.sprintf)( // translators: %s: Name of the post type e.g: "Post".
+      (0, _i18n.__)('Displays a single item: %s.'), labels.singular_name),
+      // `icon` is the `menu_icon` property of a post type. We
+      // only handle `dashicons` for now, even if the `menu_icon`
+      // also supports urls and svg as values.
+      icon: icon !== null && icon !== void 0 && icon.startsWith('dashicons-') ? icon.slice(10) : null
+    }; // We have a different template creation flow only if they have entities.
+
+    if (hasEntities) {
+      menuItem.onClick = template => {
+        setShowCustomTemplateModal(true);
+        setEntityForSuggestions({
+          type: 'postType',
+          slug,
+          labels,
+          hasGeneralTemplate,
+          template,
+          postsToExclude: postTypesEntitiesInfo[slug].existingPosts
+        });
+      };
+    } // We don't need to add the menu item if there are no
+    // entities and the general template exists.
+
+
+    if (!hasGeneralTemplate || hasEntities) {
+      accumulator.push(menuItem);
+    }
+
+    return accumulator;
+  }, []);
 
-  if (!missingTemplates.length) {
+  if (!missingTemplates.length && !extraTemplates.length) {
     return null;
   } // Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
 
 
-  missingTemplates.sort((template1, template2) => {
+  missingTemplates === null || missingTemplates === void 0 ? void 0 : missingTemplates.sort((template1, template2) => {
     return DEFAULT_TEMPLATE_SLUGS.indexOf(template1.slug) - DEFAULT_TEMPLATE_SLUGS.indexOf(template2.slug);
-  });
-  return (0, _element.createElement)(_components.DropdownMenu, {
+  }); // Append all extra templates at the end of the list for now.
+
+  missingTemplates.push(...extraTemplates);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.DropdownMenu, {
     className: "edit-site-new-template-dropdown",
     icon: null,
     text: postType.labels.add_new,
@@ -138,21 +199,25 @@ function NewTemplate(_ref) {
     className: "edit-site-new-template-dropdown__popover"
   }, (0, _element.createElement)(_components.MenuGroup, {
     label: postType.labels.add_new_item
-  }, (0, _lodash.map)(missingTemplates, template => {
+  }, missingTemplates.map(template => {
     const {
       title,
       description,
-      slug
+      slug,
+      onClick,
+      icon
     } = template;
     return (0, _element.createElement)(_components.MenuItem, {
-      icon: TEMPLATE_ICONS[slug],
+      icon: icon || TEMPLATE_ICONS[slug] || _icons.post,
       iconPosition: "left",
       info: description,
       key: slug,
-      onClick: () => {
-        createTemplate(template); // We will be navigated way so no need to close the dropdown.
-      }
+      onClick: () => onClick ? onClick(template) : createTemplate(template)
     }, title);
-  }))));
+  })))), showCustomTemplateModal && (0, _element.createElement)(_addCustomTemplateModal.default, {
+    onClose: () => setShowCustomTemplateModal(false),
+    onSelect: createTemplate,
+    entityForSuggestions: entityForSuggestions
+  }));
 }
 //# sourceMappingURL=new-template.js.map

package/build/components/add-new-template/new-template.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/new-template.js"],"names":["DEFAULT_TEMPLATE_SLUGS","TEMPLATE_ICONS","home","single","post","page","archive","search","notFound","index","list","category","author","postAuthor","taxonomy","blockMeta","date","postDate","tag","attachment","media","NewTemplate","postType","history","templates","defaultTemplateTypes","select","coreStore","getEntityRecords","per_page","editorStore","__experimentalGetDefaultTemplateTypes","saveEntityRecord","createErrorNotice","noticesStore","setTemplate","editSiteStore","createTemplate","template","title","description","slug","newTemplate","toString","status","is_wp_suggestion","throwOnError","id","push","postId","type","error","errorMessage","message","code","existingTemplateSlugs","missingTemplates","length","sort","template1","template2","indexOf","labels","add_new","add_new_item","noArrow","variant"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { filter, includes, map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tNavigableMenu,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as editorStore } from '@wordpress/editor';\nimport {\n\tarchive,\n\tblockMeta,\n\tcategory,\n\thome,\n\tlist,\n\tmedia,\n\tnotFound,\n\tpage,\n\tpost,\n\tpostAuthor,\n\tpostDate,\n\tsearch,\n\ttag,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport { useHistory } from '../routes';\nimport { store as editSiteStore } from '../../store';\n\nconst DEFAULT_TEMPLATE_SLUGS = [\n\t'front-page',\n\t'single',\n\t'page',\n\t'index',\n\t'archive',\n\t'author',\n\t'category',\n\t'date',\n\t'tag',\n\t'taxonomy',\n\t'search',\n\t'404',\n];\n\nconst TEMPLATE_ICONS = {\n\t'front-page': home,\n\tsingle: post,\n\tpage,\n\tarchive,\n\tsearch,\n\t404: notFound,\n\tindex: list,\n\tcategory,\n\tauthor: postAuthor,\n\ttaxonomy: blockMeta,\n\tdate: postDate,\n\ttag,\n\tattachment: media,\n};\n\nexport default function NewTemplate( { postType } ) {\n\tconst history = useHistory();\n\tconst { templates, defaultTemplateTypes } = useSelect(\n\t\t( select ) => ( {\n\t\t\ttemplates: select( coreStore ).getEntityRecords(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template',\n\t\t\t\t{ per_page: -1 }\n\t\t\t),\n\t\t\tdefaultTemplateTypes:\n\t\t\t\tselect( editorStore ).__experimentalGetDefaultTemplateTypes(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst { setTemplate } = useDispatch( editSiteStore );\n\n\tasync function createTemplate( template ) {\n\t\ttry {\n\t\t\tconst { title, description, slug } = template;\n\n\t\t\tconst newTemplate = await saveEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template',\n\t\t\t\t{\n\t\t\t\t\tdescription,\n\t\t\t\t\t// Slugs need to be strings, so this is for template `404`\n\t\t\t\t\tslug: slug.toString(),\n\t\t\t\t\tstatus: 'publish',\n\t\t\t\t\ttitle,\n\t\t\t\t\t// This adds a post meta field in template that is part of `is_custom` value calculation.\n\t\t\t\t\tis_wp_suggestion: true,\n\t\t\t\t},\n\t\t\t\t{ throwOnError: true }\n\t\t\t);\n\n\t\t\t// Set template before navigating away to avoid initial stale value.\n\t\t\tsetTemplate( newTemplate.id, newTemplate.slug );\n\n\t\t\t// Navigate to the created template editor.\n\t\t\thistory.push( {\n\t\t\t\tpostId: newTemplate.id,\n\t\t\t\tpostType: newTemplate.type,\n\t\t\t} );\n\n\t\t\t// TODO: Add a success notice?\n\t\t} catch ( error ) {\n\t\t\tconst errorMessage =\n\t\t\t\terror.message && error.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __( 'An error occurred while creating the template.' );\n\n\t\t\tcreateErrorNotice( errorMessage, {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t}\n\t}\n\n\tconst existingTemplateSlugs = map( templates, 'slug' );\n\n\tconst missingTemplates = filter(\n\t\tdefaultTemplateTypes,\n\t\t( template ) =>\n\t\t\tincludes( DEFAULT_TEMPLATE_SLUGS, template.slug ) &&\n\t\t\t! includes( existingTemplateSlugs, template.slug )\n\t);\n\n\tif ( ! missingTemplates.length ) {\n\t\treturn null;\n\t}\n\n\t// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.\n\tmissingTemplates.sort( ( template1, template2 ) => {\n\t\treturn (\n\t\t\tDEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -\n\t\t\tDEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )\n\t\t);\n\t} );\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"edit-site-new-template-dropdown\"\n\t\t\ticon={ null }\n\t\t\ttext={ postType.labels.add_new }\n\t\t\tlabel={ postType.labels.add_new_item }\n\t\t\tpopoverProps={ {\n\t\t\t\tnoArrow: false,\n\t\t\t} }\n\t\t\ttoggleProps={ {\n\t\t\t\tvariant: 'primary',\n\t\t\t} }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<NavigableMenu className=\"edit-site-new-template-dropdown__popover\">\n\t\t\t\t\t<MenuGroup label={ postType.labels.add_new_item }>\n\t\t\t\t\t\t{ map( missingTemplates, ( template ) => {\n\t\t\t\t\t\t\tconst { title, description, slug } = template;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\ticon={ TEMPLATE_ICONS[ slug ] }\n\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\tinfo={ description }\n\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tcreateTemplate( template );\n\t\t\t\t\t\t\t\t\t\t// We will be navigated way so no need to close the dropdown.\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t</NavigableMenu>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/new-template.js"],"names":["DEFAULT_TEMPLATE_SLUGS","TEMPLATE_ICONS","home","single","post","page","archive","search","notFound","index","list","category","author","postAuthor","taxonomy","blockMeta","date","postDate","tag","attachment","media","NewTemplate","postType","history","postTypes","showCustomTemplateModal","setShowCustomTemplateModal","entityForSuggestions","setEntityForSuggestions","existingTemplates","defaultTemplateTypes","select","coreStore","getEntityRecords","per_page","editorStore","__experimentalGetDefaultTemplateTypes","postTypesEntitiesInfo","saveEntityRecord","createErrorNotice","noticesStore","setTemplate","editSiteStore","createTemplate","template","title","description","slug","newTemplate","toString","status","is_wp_suggestion","throwOnError","id","push","postId","type","error","errorMessage","message","code","existingTemplateSlugs","map","missingTemplates","extraTemplates","reduce","accumulator","_postType","labels","icon","hasGeneralTemplate","includes","hasEntities","menuItem","singular_name","startsWith","slice","onClick","postsToExclude","existingPosts","length","sort","template1","template2","indexOf","add_new","add_new_item","noArrow","variant"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { filter, includes } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tNavigableMenu,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as editorStore } from '@wordpress/editor';\nimport {\n\tarchive,\n\tblockMeta,\n\tcategory,\n\thome,\n\tlist,\n\tmedia,\n\tnotFound,\n\tpage,\n\tpost,\n\tpostAuthor,\n\tpostDate,\n\tsearch,\n\ttag,\n} from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport AddCustomTemplateModal from './add-custom-template-modal';\nimport { usePostTypes, usePostTypesEntitiesInfo } from './utils';\nimport { useHistory } from '../routes';\nimport { store as editSiteStore } from '../../store';\n\nconst DEFAULT_TEMPLATE_SLUGS = [\n\t'front-page',\n\t'single',\n\t'page',\n\t'index',\n\t'archive',\n\t'author',\n\t'category',\n\t'date',\n\t'tag',\n\t'taxonomy',\n\t'search',\n\t'404',\n];\n\nconst TEMPLATE_ICONS = {\n\t'front-page': home,\n\tsingle: post,\n\tpage,\n\tarchive,\n\tsearch,\n\t404: notFound,\n\tindex: list,\n\tcategory,\n\tauthor: postAuthor,\n\ttaxonomy: blockMeta,\n\tdate: postDate,\n\ttag,\n\tattachment: media,\n};\n\nexport default function NewTemplate( { postType } ) {\n\tconst history = useHistory();\n\tconst postTypes = usePostTypes();\n\tconst [ showCustomTemplateModal, setShowCustomTemplateModal ] =\n\t\tuseState( false );\n\tconst [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );\n\tconst { existingTemplates, defaultTemplateTypes } = useSelect(\n\t\t( select ) => ( {\n\t\t\texistingTemplates: select( coreStore ).getEntityRecords(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template',\n\t\t\t\t{ per_page: -1 }\n\t\t\t),\n\t\t\tdefaultTemplateTypes:\n\t\t\t\tselect( editorStore ).__experimentalGetDefaultTemplateTypes(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst postTypesEntitiesInfo = usePostTypesEntitiesInfo( existingTemplates );\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst { setTemplate } = useDispatch( editSiteStore );\n\n\tasync function createTemplate( template ) {\n\t\ttry {\n\t\t\tconst { title, description, slug } = template;\n\t\t\tconst newTemplate = await saveEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template',\n\t\t\t\t{\n\t\t\t\t\tdescription,\n\t\t\t\t\t// Slugs need to be strings, so this is for template `404`\n\t\t\t\t\tslug: slug.toString(),\n\t\t\t\t\tstatus: 'publish',\n\t\t\t\t\ttitle,\n\t\t\t\t\t// This adds a post meta field in template that is part of `is_custom` value calculation.\n\t\t\t\t\tis_wp_suggestion: true,\n\t\t\t\t},\n\t\t\t\t{ throwOnError: true }\n\t\t\t);\n\n\t\t\t// Set template before navigating away to avoid initial stale value.\n\t\t\tsetTemplate( newTemplate.id, newTemplate.slug );\n\n\t\t\t// Navigate to the created template editor.\n\t\t\thistory.push( {\n\t\t\t\tpostId: newTemplate.id,\n\t\t\t\tpostType: newTemplate.type,\n\t\t\t} );\n\n\t\t\t// TODO: Add a success notice?\n\t\t} catch ( error ) {\n\t\t\tconst errorMessage =\n\t\t\t\terror.message && error.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __( 'An error occurred while creating the template.' );\n\n\t\t\tcreateErrorNotice( errorMessage, {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t}\n\t}\n\tconst existingTemplateSlugs = ( existingTemplates || [] ).map(\n\t\t( { slug } ) => slug\n\t);\n\tconst missingTemplates = filter(\n\t\tdefaultTemplateTypes,\n\t\t( template ) =>\n\t\t\tincludes( DEFAULT_TEMPLATE_SLUGS, template.slug ) &&\n\t\t\t! includes( existingTemplateSlugs, template.slug )\n\t);\n\n\tconst extraTemplates = ( postTypes || [] ).reduce(\n\t\t( accumulator, _postType ) => {\n\t\t\tconst { slug, labels, icon } = _postType;\n\t\t\tconst hasGeneralTemplate = existingTemplateSlugs?.includes(\n\t\t\t\t`single-${ slug }`\n\t\t\t);\n\t\t\tconst hasEntities = postTypesEntitiesInfo?.[ slug ]?.hasEntities;\n\t\t\tconst menuItem = {\n\t\t\t\tslug: `single-${ slug }`,\n\t\t\t\ttitle: sprintf(\n\t\t\t\t\t// translators: %s: Name of the post type e.g: \"Post\".\n\t\t\t\t\t__( 'Single item: %s' ),\n\t\t\t\t\tlabels.singular_name\n\t\t\t\t),\n\t\t\t\tdescription: sprintf(\n\t\t\t\t\t// translators: %s: Name of the post type e.g: \"Post\".\n\t\t\t\t\t__( 'Displays a single item: %s.' ),\n\t\t\t\t\tlabels.singular_name\n\t\t\t\t),\n\t\t\t\t// `icon` is the `menu_icon` property of a post type. We\n\t\t\t\t// only handle `dashicons` for now, even if the `menu_icon`\n\t\t\t\t// also supports urls and svg as values.\n\t\t\t\ticon: icon?.startsWith( 'dashicons-' )\n\t\t\t\t\t? icon.slice( 10 )\n\t\t\t\t\t: null,\n\t\t\t};\n\t\t\t// We have a different template creation flow only if they have entities.\n\t\t\tif ( hasEntities ) {\n\t\t\t\tmenuItem.onClick = ( template ) => {\n\t\t\t\t\tsetShowCustomTemplateModal( true );\n\t\t\t\t\tsetEntityForSuggestions( {\n\t\t\t\t\t\ttype: 'postType',\n\t\t\t\t\t\tslug,\n\t\t\t\t\t\tlabels,\n\t\t\t\t\t\thasGeneralTemplate,\n\t\t\t\t\t\ttemplate,\n\t\t\t\t\t\tpostsToExclude:\n\t\t\t\t\t\t\tpostTypesEntitiesInfo[ slug ].existingPosts,\n\t\t\t\t\t} );\n\t\t\t\t};\n\t\t\t}\n\t\t\t// We don't need to add the menu item if there are no\n\t\t\t// entities and the general template exists.\n\t\t\tif ( ! hasGeneralTemplate || hasEntities ) {\n\t\t\t\taccumulator.push( menuItem );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t},\n\t\t[]\n\t);\n\tif ( ! missingTemplates.length && ! extraTemplates.length ) {\n\t\treturn null;\n\t}\n\t// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.\n\tmissingTemplates?.sort( ( template1, template2 ) => {\n\t\treturn (\n\t\t\tDEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -\n\t\t\tDEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )\n\t\t);\n\t} );\n\t// Append all extra templates at the end of the list for now.\n\tmissingTemplates.push( ...extraTemplates );\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenu\n\t\t\t\tclassName=\"edit-site-new-template-dropdown\"\n\t\t\t\ticon={ null }\n\t\t\t\ttext={ postType.labels.add_new }\n\t\t\t\tlabel={ postType.labels.add_new_item }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tnoArrow: false,\n\t\t\t\t} }\n\t\t\t\ttoggleProps={ {\n\t\t\t\t\tvariant: 'primary',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ () => (\n\t\t\t\t\t<NavigableMenu className=\"edit-site-new-template-dropdown__popover\">\n\t\t\t\t\t\t<MenuGroup label={ postType.labels.add_new_item }>\n\t\t\t\t\t\t\t{ missingTemplates.map( ( template ) => {\n\t\t\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\t\t\tdescription,\n\t\t\t\t\t\t\t\t\tslug,\n\t\t\t\t\t\t\t\t\tonClick,\n\t\t\t\t\t\t\t\t\ticon,\n\t\t\t\t\t\t\t\t} = template;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\ticon ||\n\t\t\t\t\t\t\t\t\t\t\tTEMPLATE_ICONS[ slug ] ||\n\t\t\t\t\t\t\t\t\t\t\tpost\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\t\tinfo={ description }\n\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tonClick\n\t\t\t\t\t\t\t\t\t\t\t\t? onClick( template )\n\t\t\t\t\t\t\t\t\t\t\t\t: createTemplate( template )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t\t{ showCustomTemplateModal && (\n\t\t\t\t<AddCustomTemplateModal\n\t\t\t\t\tonClose={ () => setShowCustomTemplateModal( false ) }\n\t\t\t\t\tonSelect={ createTemplate }\n\t\t\t\t\tentityForSuggestions={ entityForSuggestions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build/components/add-new-template/utils.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePostTypesEntitiesInfo = exports.usePostTypes = exports.mapToIHasNameAndId = void 0;
+
+var _lodash = require("lodash");
+
+var _data = require("@wordpress/data");
+
+var _coreData = require("@wordpress/core-data");
+
+var _htmlEntities = require("@wordpress/html-entities");
+
+var _element = require("@wordpress/element");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+const usePostTypes = () => {
+  const postTypes = (0, _data.useSelect)(select => select(_coreData.store).getPostTypes({
+    per_page: -1
+  }), []);
+  return (0, _element.useMemo)(() => {
+    const excludedPostTypes = ['attachment', 'page'];
+    return postTypes === null || postTypes === void 0 ? void 0 : postTypes.filter(_ref => {
+      let {
+        viewable,
+        slug
+      } = _ref;
+      return viewable && !excludedPostTypes.includes(slug);
+    });
+  }, [postTypes]);
+};
+/**
+ * @typedef {Object} PostTypeEntitiesInfo
+ * @property {boolean}  hasEntities   If a postType has available entities.
+ * @property {number[]} existingPosts An array of the existing entities ids.
+ */
+
+/**
+ * Helper hook that returns information about a post type having
+ * posts that we can create a specific template for.
+ *
+ * First we need to find the existing posts with an associated template,
+ * to query afterwards for any remaing post, by excluding them.
+ *
+ * @param {string[]} existingTemplates The existing templates.
+ * @return {Record<string,PostTypeEntitiesInfo>} An object with the postTypes as `keys` and PostTypeEntitiesInfo as values.
+ */
+
+
+exports.usePostTypes = usePostTypes;
+
+const usePostTypesEntitiesInfo = existingTemplates => {
+  const postTypes = usePostTypes();
+  const slugsToExcludePerEntity = (0, _element.useMemo)(() => {
+    return postTypes === null || postTypes === void 0 ? void 0 : postTypes.reduce((accumulator, _postType) => {
+      const slugsWithTemplates = (existingTemplates || []).reduce((_accumulator, existingTemplate) => {
+        const prefix = `single-${_postType.slug}-`;
+
+        if (existingTemplate.slug.startsWith(prefix)) {
+          _accumulator.push(existingTemplate.slug.substring(prefix.length));
+        }
+
+        return _accumulator;
+      }, []);
+
+      if (slugsWithTemplates.length) {
+        accumulator[_postType.slug] = slugsWithTemplates;
+      }
+
+      return accumulator;
+    }, {});
+  }, [postTypes, existingTemplates]);
+  const postsToExcludePerEntity = (0, _data.useSelect)(select => {
+    if (!slugsToExcludePerEntity) {
+      return;
+    }
+
+    const postsToExclude = Object.entries(slugsToExcludePerEntity).reduce((accumulator, _ref2) => {
+      let [slug, slugsWithTemplates] = _ref2;
+      const postsWithTemplates = select(_coreData.store).getEntityRecords('postType', slug, {
+        _fields: 'id',
+        context: 'view',
+        slug: slugsWithTemplates
+      });
+
+      if (postsWithTemplates !== null && postsWithTemplates !== void 0 && postsWithTemplates.length) {
+        accumulator[slug] = postsWithTemplates;
+      }
+
+      return accumulator;
+    }, {});
+    return postsToExclude;
+  }, [slugsToExcludePerEntity]);
+  const entitiesInfo = (0, _data.useSelect)(select => {
+    return postTypes === null || postTypes === void 0 ? void 0 : postTypes.reduce((accumulator, _ref3) => {
+      var _postsToExcludePerEnt, _select$getEntityReco;
+
+      let {
+        slug
+      } = _ref3;
+      const existingPosts = (postsToExcludePerEntity === null || postsToExcludePerEntity === void 0 ? void 0 : (_postsToExcludePerEnt = postsToExcludePerEntity[slug]) === null || _postsToExcludePerEnt === void 0 ? void 0 : _postsToExcludePerEnt.map(_ref4 => {
+        let {
+          id
+        } = _ref4;
+        return id;
+      })) || [];
+      accumulator[slug] = {
+        hasEntities: !!((_select$getEntityReco = select(_coreData.store).getEntityRecords('postType', slug, {
+          per_page: 1,
+          _fields: 'id',
+          context: 'view',
+          exclude: existingPosts
+        })) !== null && _select$getEntityReco !== void 0 && _select$getEntityReco.length),
+        existingPosts
+      };
+      return accumulator;
+    }, {});
+  }, [postTypes, postsToExcludePerEntity]);
+  return entitiesInfo;
+};
+
+exports.usePostTypesEntitiesInfo = usePostTypesEntitiesInfo;
+
+const mapToIHasNameAndId = (entities, path) => {
+  return (entities || []).map(entity => ({ ...entity,
+    name: (0, _htmlEntities.decodeEntities)((0, _lodash.get)(entity, path))
+  }));
+};
+
+exports.mapToIHasNameAndId = mapToIHasNameAndId;
+//# sourceMappingURL=utils.js.map

package/build/components/add-new-template/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/utils.js"],"names":["usePostTypes","postTypes","select","coreStore","getPostTypes","per_page","excludedPostTypes","filter","viewable","slug","includes","usePostTypesEntitiesInfo","existingTemplates","slugsToExcludePerEntity","reduce","accumulator","_postType","slugsWithTemplates","_accumulator","existingTemplate","prefix","startsWith","push","substring","length","postsToExcludePerEntity","postsToExclude","Object","entries","postsWithTemplates","getEntityRecords","_fields","context","entitiesInfo","existingPosts","map","id","hasEntities","exclude","mapToIHasNameAndId","entities","path","entity","name"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useMemo } from '@wordpress/element';\n\nexport const usePostTypes = () => {\n\tconst postTypes = useSelect(\n\t\t( select ) => select( coreStore ).getPostTypes( { per_page: -1 } ),\n\t\t[]\n\t);\n\treturn useMemo( () => {\n\t\tconst excludedPostTypes = [ 'attachment', 'page' ];\n\t\treturn postTypes?.filter(\n\t\t\t( { viewable, slug } ) =>\n\t\t\t\tviewable && ! excludedPostTypes.includes( slug )\n\t\t);\n\t}, [ postTypes ] );\n};\n\n/**\n * @typedef {Object} PostTypeEntitiesInfo\n * @property {boolean}  hasEntities   If a postType has available entities.\n * @property {number[]} existingPosts An array of the existing entities ids.\n */\n\n/**\n * Helper hook that returns information about a post type having\n * posts that we can create a specific template for.\n *\n * First we need to find the existing posts with an associated template,\n * to query afterwards for any remaing post, by excluding them.\n *\n * @param {string[]} existingTemplates The existing templates.\n * @return {Record<string,PostTypeEntitiesInfo>} An object with the postTypes as `keys` and PostTypeEntitiesInfo as values.\n */\nexport const usePostTypesEntitiesInfo = ( existingTemplates ) => {\n\tconst postTypes = usePostTypes();\n\tconst slugsToExcludePerEntity = useMemo( () => {\n\t\treturn postTypes?.reduce( ( accumulator, _postType ) => {\n\t\t\tconst slugsWithTemplates = ( existingTemplates || [] ).reduce(\n\t\t\t\t( _accumulator, existingTemplate ) => {\n\t\t\t\t\tconst prefix = `single-${ _postType.slug }-`;\n\t\t\t\t\tif ( existingTemplate.slug.startsWith( prefix ) ) {\n\t\t\t\t\t\t_accumulator.push(\n\t\t\t\t\t\t\texistingTemplate.slug.substring( prefix.length )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\treturn _accumulator;\n\t\t\t\t},\n\t\t\t\t[]\n\t\t\t);\n\t\t\tif ( slugsWithTemplates.length ) {\n\t\t\t\taccumulator[ _postType.slug ] = slugsWithTemplates;\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, {} );\n\t}, [ postTypes, existingTemplates ] );\n\tconst postsToExcludePerEntity = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! slugsToExcludePerEntity ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst postsToExclude = Object.entries(\n\t\t\t\tslugsToExcludePerEntity\n\t\t\t).reduce( ( accumulator, [ slug, slugsWithTemplates ] ) => {\n\t\t\t\tconst postsWithTemplates = select( coreStore ).getEntityRecords(\n\t\t\t\t\t'postType',\n\t\t\t\t\tslug,\n\t\t\t\t\t{\n\t\t\t\t\t\t_fields: 'id',\n\t\t\t\t\t\tcontext: 'view',\n\t\t\t\t\t\tslug: slugsWithTemplates,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\tif ( postsWithTemplates?.length ) {\n\t\t\t\t\taccumulator[ slug ] = postsWithTemplates;\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t}, {} );\n\t\t\treturn postsToExclude;\n\t\t},\n\t\t[ slugsToExcludePerEntity ]\n\t);\n\tconst entitiesInfo = useSelect(\n\t\t( select ) => {\n\t\t\treturn postTypes?.reduce( ( accumulator, { slug } ) => {\n\t\t\t\tconst existingPosts =\n\t\t\t\t\tpostsToExcludePerEntity?.[ slug ]?.map(\n\t\t\t\t\t\t( { id } ) => id\n\t\t\t\t\t) || [];\n\t\t\t\taccumulator[ slug ] = {\n\t\t\t\t\thasEntities: !! select( coreStore ).getEntityRecords(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\tslug,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tper_page: 1,\n\t\t\t\t\t\t\t_fields: 'id',\n\t\t\t\t\t\t\tcontext: 'view',\n\t\t\t\t\t\t\texclude: existingPosts,\n\t\t\t\t\t\t}\n\t\t\t\t\t)?.length,\n\t\t\t\t\texistingPosts,\n\t\t\t\t};\n\t\t\t\treturn accumulator;\n\t\t\t}, {} );\n\t\t},\n\t\t[ postTypes, postsToExcludePerEntity ]\n\t);\n\treturn entitiesInfo;\n};\n\nexport const mapToIHasNameAndId = ( entities, path ) => {\n\treturn ( entities || [] ).map( ( entity ) => ( {\n\t\t...entity,\n\t\tname: decodeEntities( get( entity, path ) ),\n\t} ) );\n};\n"]}

package/build/components/global-styles/context-menu.js

@@ -42,13 +42,16 @@ function ContextMenu(_ref) {
   const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
   return (0, _element.createElement)(_components.__experimentalItemGroup, null, hasTypographyPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     icon: _icons.typography,
-    path: parentMenu + '/typography'
+    path: parentMenu + '/typography',
+    "aria-label": (0, _i18n.__)('Typography styles')
   }, (0, _i18n.__)('Typography')), hasColorPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     icon: _icons.color,
-    path: parentMenu + '/colors'
+    path: parentMenu + '/colors',
+    "aria-label": (0, _i18n.__)('Colors styles')
   }, (0, _i18n.__)('Colors')), hasLayoutPanel && (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
     icon: _icons.layout,
-    path: parentMenu + '/layout'
+    path: parentMenu + '/layout',
+    "aria-label": (0, _i18n.__)('Layout styles')
   }, (0, _i18n.__)('Layout')));
 }
 

package/build/components/global-styles/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["ContextMenu","name","parentMenu","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","typography","color","layout"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAKA;AACA;AACA;AAOA,SAASA,WAAT,OAAkD;AAAA,MAA5B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAU,GAAG;AAArB,GAA4B;AACjD,QAAMC,kBAAkB,GAAG,4CAAuBF,IAAvB,CAA3B;AACA,QAAMG,aAAa,GAAG,kCAAkBH,IAAlB,CAAtB;AACA,QAAMI,cAAc,GAAG,oCAAmBJ,IAAnB,CAAvB;AACA,QAAMK,kBAAkB,GAAG,4CAAuBL,IAAvB,CAA3B;AACA,QAAMM,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AAEA,SACC,4BAAC,mCAAD,QACGH,kBAAkB,IACnB,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGK,iBADR;AAEC,IAAA,IAAI,EAAGN,UAAU,GAAG;AAFrB,KAIG,cAAI,YAAJ,CAJH,CAFF,EASGE,aAAa,IACd,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGK,YADR;AAEC,IAAA,IAAI,EAAGP,UAAU,GAAG;AAFrB,KAIG,cAAI,QAAJ,CAJH,CAVF,EAiBGK,cAAc,IACf,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGG,aADR;AAEC,IAAA,IAAI,EAAGR,UAAU,GAAG;AAFrB,KAIG,cAAI,QAAJ,CAJH,CAlBF,CADD;AA4BA;;eAEcF,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( name );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\n\treturn (\n\t\t<ItemGroup>\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ typography }\n\t\t\t\t\tpath={ parentMenu + '/typography' }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ color }\n\t\t\t\t\tpath={ parentMenu + '/colors' }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t\t{ hasLayoutPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ layout }\n\t\t\t\t\tpath={ parentMenu + '/layout' }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t</ItemGroup>\n\t);\n}\n\nexport default ContextMenu;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["ContextMenu","name","parentMenu","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","typography","color","layout"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAKA;AACA;AACA;AAOA,SAASA,WAAT,OAAkD;AAAA,MAA5B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,UAAU,GAAG;AAArB,GAA4B;AACjD,QAAMC,kBAAkB,GAAG,4CAAuBF,IAAvB,CAA3B;AACA,QAAMG,aAAa,GAAG,kCAAkBH,IAAlB,CAAtB;AACA,QAAMI,cAAc,GAAG,oCAAmBJ,IAAnB,CAAvB;AACA,QAAMK,kBAAkB,GAAG,4CAAuBL,IAAvB,CAA3B;AACA,QAAMM,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AAEA,SACC,4BAAC,mCAAD,QACGH,kBAAkB,IACnB,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGK,iBADR;AAEC,IAAA,IAAI,EAAGN,UAAU,GAAG,aAFrB;AAGC,kBAAa,cAAI,mBAAJ;AAHd,KAKG,cAAI,YAAJ,CALH,CAFF,EAUGE,aAAa,IACd,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGK,YADR;AAEC,IAAA,IAAI,EAAGP,UAAU,GAAG,SAFrB;AAGC,kBAAa,cAAI,eAAJ;AAHd,KAKG,cAAI,QAAJ,CALH,CAXF,EAmBGK,cAAc,IACf,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGG,aADR;AAEC,IAAA,IAAI,EAAGR,UAAU,GAAG,SAFrB;AAGC,kBAAa,cAAI,eAAJ;AAHd,KAKG,cAAI,QAAJ,CALH,CApBF,CADD;AA+BA;;eAEcF,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( name );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\n\treturn (\n\t\t<ItemGroup>\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ typography }\n\t\t\t\t\tpath={ parentMenu + '/typography' }\n\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ color }\n\t\t\t\t\tpath={ parentMenu + '/colors' }\n\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t\t{ hasLayoutPanel && (\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\ticon={ layout }\n\t\t\t\t\tpath={ parentMenu + '/layout' }\n\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t) }\n\t\t</ItemGroup>\n\t);\n}\n\nexport default ContextMenu;\n"]}

package/build/components/global-styles/hooks.js

@@ -154,7 +154,7 @@ function useStyle(path, blockName) {
   return [result, setStyle];
 }
 
-const ROOT_BLOCK_SUPPORTS = ['background', 'backgroundColor', 'color', 'linkColor', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight', 'textDecoration', 'textTransform', 'padding'];
+const ROOT_BLOCK_SUPPORTS = ['background', 'backgroundColor', 'color', 'linkColor', 'buttonColor', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight', 'textDecoration', 'textTransform', 'padding'];
 
 function getSupportedGlobalStylesPanels(name) {
   if (!name) {