@wordpress/edit-site 5.10.0 → 5.12.0

package/build-module/components/add-new-template/{add-custom-template-modal.js → add-custom-template-modal-content.js}

@@ -5,8 +5,8 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { useState, useMemo, useEffect } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { Button, Flex, FlexItem, Modal, SearchControl, TextHighlight, __experimentalText as Text, __experimentalVStack as VStack, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Button, Flex, FlexItem, SearchControl, TextHighlight, __experimentalText as Text, __experimentalVStack as VStack, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -14,18 +14,16 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { mapToIHasNameAndId } from './utils';
 const EMPTY_ARRAY = [];
 
-function SuggestionListItem(_ref) {
-  let {
-    suggestion,
-    search,
-    onSelect,
-    entityForSuggestions,
-    composite
-  } = _ref;
+function SuggestionListItem({
+  suggestion,
+  search,
+  onSelect,
+  entityForSuggestions,
+  composite
+}) {
   const baseCssClass = 'edit-site-custom-template-modal__suggestions_list__list-item';
   return createElement(CompositeItem, _extends({
     role: "option",
@@ -82,7 +80,7 @@ function useSearchSuggestions(entityForSuggestions, search) {
     if (!searchHasResolved) return;
     let newSuggestions = EMPTY_ARRAY;
 
-    if (searchResults !== null && searchResults !== void 0 && searchResults.length) {
+    if (searchResults?.length) {
       newSuggestions = searchResults;
 
       if (config.recordNamePath) {
@@ -97,11 +95,10 @@ function useSearchSuggestions(entityForSuggestions, search) {
   return suggestions;
 }
 
-function SuggestionList(_ref2) {
-  let {
-    entityForSuggestions,
-    onSelect
-  } = _ref2;
+function SuggestionList({
+  entityForSuggestions,
+  onSelect
+}) {
   const composite = useCompositeState({
     orientation: 'vertical'
   });
@@ -112,7 +109,7 @@ function SuggestionList(_ref2) {
   } = entityForSuggestions;
   const [showSearchControl, setShowSearchControl] = useState(false);
 
-  if (!showSearchControl && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) > 9) {
+  if (!showSearchControl && suggestions?.length > 9) {
     setShowSearchControl(true);
   }
 
@@ -122,7 +119,7 @@ function SuggestionList(_ref2) {
     value: search,
     label: labels.search_items,
     placeholder: labels.search_items
-  }), !!(suggestions !== null && suggestions !== void 0 && suggestions.length) && createElement(Composite, _extends({}, composite, {
+  }), !!suggestions?.length && createElement(Composite, _extends({}, composite, {
     role: "listbox",
     className: "edit-site-custom-template-modal__suggestions_list",
     "aria-label": __('Suggestions list')
@@ -133,32 +130,25 @@ function SuggestionList(_ref2) {
     onSelect: onSelect,
     entityForSuggestions: entityForSuggestions,
     composite: composite
-  }))), debouncedSearch && !(suggestions !== null && suggestions !== void 0 && suggestions.length) && createElement(Text, {
+  }))), debouncedSearch && !suggestions?.length && createElement(Text, {
     as: "p",
     className: "edit-site-custom-template-modal__no-results"
   }, labels.not_found));
 }
 
-function AddCustomTemplateModal(_ref3) {
-  let {
-    onClose,
-    onSelect,
-    entityForSuggestions,
-    isCreatingTemplate
-  } = _ref3;
+function AddCustomTemplateModalContent({
+  onSelect,
+  entityForSuggestions
+}) {
   const [showSearchEntities, setShowSearchEntities] = useState(entityForSuggestions.hasGeneralTemplate);
-  const baseCssClass = 'edit-site-custom-template-modal';
-  return createElement(Modal, {
-    title: sprintf( // translators: %s: Name of the post type e.g: "Post".
-    __('Add template: %s'), entityForSuggestions.labels.singular_name),
-    className: baseCssClass,
-    onRequestClose: onClose
-  }, isCreatingTemplate && createElement(TemplateActionsLoadingScreen, null), !showSearchEntities && createElement(VStack, {
-    spacing: 4
-  }, createElement(Text, {
+  return createElement(VStack, {
+    spacing: 4,
+    className: "edit-site-custom-template-modal__contents-wrapper",
+    alignment: "left"
+  }, !showSearchEntities && createElement(Fragment, null, createElement(Text, {
     as: "p"
   }, __('Select whether to create a single template for all items or a specific one.')), createElement(Flex, {
-    className: `${baseCssClass}__contents`,
+    className: "edit-site-custom-template-modal__contents",
     gap: "4",
     align: "initial"
   }, createElement(FlexItem, {
@@ -204,9 +194,7 @@ function AddCustomTemplateModal(_ref3) {
     lineHeight: 1.53846153846 // 20px
 
   }, // translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
-  __('For a specific item'))))), showSearchEntities && createElement(VStack, {
-    spacing: 4
-  }, createElement(Text, {
+  __('For a specific item'))))), showSearchEntities && createElement(Fragment, null, createElement(Text, {
     as: "p"
   }, __('This template will be used only for the specific item chosen.')), createElement(SuggestionList, {
     entityForSuggestions: entityForSuggestions,
@@ -214,5 +202,5 @@ function AddCustomTemplateModal(_ref3) {
   })));
 }
 
-export default AddCustomTemplateModal;
-//# sourceMappingURL=add-custom-template-modal.js.map
+export default AddCustomTemplateModalContent;
+//# sourceMappingURL=add-custom-template-modal-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/add-custom-template-modal-content.js"],"names":["useState","useMemo","useEffect","__","Button","Flex","FlexItem","SearchControl","TextHighlight","__experimentalText","Text","__experimentalVStack","VStack","__unstableComposite","Composite","__unstableUseCompositeState","useCompositeState","__unstableCompositeItem","CompositeItem","useDebounce","useEntityRecords","decodeEntities","mapToIHasNameAndId","EMPTY_ARRAY","SuggestionListItem","suggestion","search","onSelect","entityForSuggestions","composite","baseCssClass","config","getSpecificTemplate","name","link","useDebouncedInput","input","setInput","debounced","setter","setDebounced","useSearchSuggestions","query","order","context","per_page","queryArgs","records","searchResults","hasResolved","searchHasResolved","type","slug","suggestions","setSuggestions","newSuggestions","length","recordNamePath","SuggestionList","orientation","setSearch","debouncedSearch","labels","showSearchControl","setShowSearchControl","search_items","map","not_found","AddCustomTemplateModalContent","showSearchEntities","setShowSearchEntities","hasGeneralTemplate","title","description","templatePrefix","template","all_items","singular_name"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tFlex,\n\tFlexItem,\n\tSearchControl,\n\tTextHighlight,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\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';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { mapToIHasNameAndId } from './utils';\n\nconst EMPTY_ARRAY = [];\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\tonSelect(\n\t\t\t\t\tentityForSuggestions.config.getSpecificTemplate(\n\t\t\t\t\t\tsuggestion\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Text\n\t\t\t\tsize=\"body\"\n\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\tweight={ 500 }\n\t\t\t\tclassName={ `${ baseCssClass }__title` }\n\t\t\t>\n\t\t\t\t<TextHighlight\n\t\t\t\t\ttext={ decodeEntities( suggestion.name ) }\n\t\t\t\t\thighlight={ search }\n\t\t\t\t/>\n\t\t\t</Text>\n\t\t\t{ suggestion.link && (\n\t\t\t\t<Text\n\t\t\t\t\tsize=\"body\"\n\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\t\tclassName={ `${ baseCssClass }__info` }\n\t\t\t\t>\n\t\t\t\t\t{ suggestion.link }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</CompositeItem>\n\t);\n}\n\nfunction useDebouncedInput() {\n\tconst [ input, setInput ] = useState( '' );\n\tconst [ debounced, setter ] = useState( '' );\n\tconst setDebounced = useDebounce( setter, 250 );\n\tuseEffect( () => {\n\t\tif ( debounced !== input ) {\n\t\t\tsetDebounced( input );\n\t\t}\n\t}, [ debounced, input ] );\n\treturn [ input, setInput, debounced ];\n}\n\nfunction useSearchSuggestions( entityForSuggestions, search ) {\n\tconst { config } = entityForSuggestions;\n\tconst query = useMemo(\n\t\t() => ( {\n\t\t\torder: 'asc',\n\t\t\tcontext: 'view',\n\t\t\tsearch,\n\t\t\tper_page: search ? 20 : 10,\n\t\t\t...config.queryArgs( search ),\n\t\t} ),\n\t\t[ search, config ]\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\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) return;\n\t\tlet newSuggestions = EMPTY_ARRAY;\n\t\tif ( searchResults?.length ) {\n\t\t\tnewSuggestions = searchResults;\n\t\t\tif ( config.recordNamePath ) {\n\t\t\t\tnewSuggestions = mapToIHasNameAndId(\n\t\t\t\t\tnewSuggestions,\n\t\t\t\t\tconfig.recordNamePath\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t\t// Update suggestions only when the query has resolved, so as to keep\n\t\t// the previous results in the UI.\n\t\tsetSuggestions( newSuggestions );\n\t}, [ searchResults, searchHasResolved ] );\n\treturn suggestions;\n}\n\nfunction SuggestionList( { entityForSuggestions, onSelect } ) {\n\tconst composite = useCompositeState( { orientation: 'vertical' } );\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput();\n\tconst suggestions = useSearchSuggestions(\n\t\tentityForSuggestions,\n\t\tdebouncedSearch\n\t);\n\tconst { labels } = entityForSuggestions;\n\tconst [ showSearchControl, setShowSearchControl ] = useState( false );\n\tif ( ! showSearchControl && suggestions?.length > 9 ) {\n\t\tsetShowSearchControl( true );\n\t}\n\treturn (\n\t\t<>\n\t\t\t{ showSearchControl && (\n\t\t\t\t<SearchControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tonChange={ setSearch }\n\t\t\t\t\tvalue={ search }\n\t\t\t\t\tlabel={ labels.search_items }\n\t\t\t\t\tplaceholder={ labels.search_items }\n\t\t\t\t/>\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\taria-label={ __( '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={ debouncedSearch }\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{ debouncedSearch && ! suggestions?.length && (\n\t\t\t\t<Text\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tclassName=\"edit-site-custom-template-modal__no-results\"\n\t\t\t\t>\n\t\t\t\t\t{ labels.not_found }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {\n\tconst [ showSearchEntities, setShowSearchEntities ] = useState(\n\t\tentityForSuggestions.hasGeneralTemplate\n\t);\n\treturn (\n\t\t<VStack\n\t\t\tspacing={ 4 }\n\t\t\tclassName=\"edit-site-custom-template-modal__contents-wrapper\"\n\t\t\talignment=\"left\"\n\t\t>\n\t\t\t{ ! showSearchEntities && (\n\t\t\t\t<>\n\t\t\t\t\t<Text as=\"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</Text>\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"edit-site-custom-template-modal__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\tas={ Button }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t\t\tslug,\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\ttemplatePrefix,\n\t\t\t\t\t\t\t\t} = entityForSuggestions.template;\n\t\t\t\t\t\t\t\tonSelect( {\n\t\t\t\t\t\t\t\t\tslug,\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\ttemplatePrefix,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tweight={ 500 }\n\t\t\t\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ entityForSuggestions.labels.all_items }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\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// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, 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\tas={ Button }\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<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tweight={ 500 }\n\t\t\t\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ entityForSuggestions.labels.singular_name }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tlineHeight={ 1.53846153846 } // 20px\n\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// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, 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<Text as=\"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</Text>\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</VStack>\n\t);\n}\n\nexport default AddCustomTemplateModalContent;\n"]}

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

@@ -12,11 +12,10 @@ import { store as coreStore } from '@wordpress/core-data';
 
 import NewTemplate from './new-template';
 import NewTemplatePart from './new-template-part';
-export default function AddNewTemplate(_ref) {
-  let {
-    templateType = 'wp_template',
-    ...props
-  } = _ref;
+export default function AddNewTemplate({
+  templateType = 'wp_template',
+  ...props
+}) {
   const postType = useSelect(select => select(coreStore).getPostType(templateType), [templateType]);
 
   if (!postType) {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/index.js"],"names":["useSelect","store","coreStore","NewTemplate","NewTemplatePart","AddNewTemplate","templateType","props","postType","select","getPostType"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AAEA,eAAe,SAASC,cAAT,OAGX;AAAA,MAHoC;AACvCC,IAAAA,YAAY,GAAG,aADwB;AAEvC,OAAGC;AAFoC,GAGpC;AACH,QAAMC,QAAQ,GAAGR,SAAS,CACvBS,MAAF,IAAcA,MAAM,CAAEP,SAAF,CAAN,CAAoBQ,WAApB,CAAiCJ,YAAjC,CADW,EAEzB,CAAEA,YAAF,CAFyB,CAA1B;;AAKA,MAAK,CAAEE,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,MAAKF,YAAY,KAAK,aAAtB,EAAsC;AACrC,WAAO,cAAC,WAAD,eAAkBC,KAAlB;AAA0B,MAAA,QAAQ,EAAGC;AAArC,OAAP;AACA,GAFD,MAEO,IAAKF,YAAY,KAAK,kBAAtB,EAA2C;AACjD,WAAO,cAAC,eAAD,eAAsBC,KAAtB;AAA8B,MAAA,QAAQ,EAAGC;AAAzC,OAAP;AACA;;AAED,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport NewTemplate from './new-template';\nimport NewTemplatePart from './new-template-part';\n\nexport default function AddNewTemplate( {\n\ttemplateType = 'wp_template',\n\t...props\n} ) {\n\tconst postType = useSelect(\n\t\t( select ) => select( coreStore ).getPostType( templateType ),\n\t\t[ templateType ]\n\t);\n\n\tif ( ! postType ) {\n\t\treturn null;\n\t}\n\n\tif ( templateType === 'wp_template' ) {\n\t\treturn <NewTemplate { ...props } postType={ postType } />;\n\t} else if ( templateType === 'wp_template_part' ) {\n\t\treturn <NewTemplatePart { ...props } postType={ postType } />;\n\t}\n\n\treturn null;\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/index.js"],"names":["useSelect","store","coreStore","NewTemplate","NewTemplatePart","AddNewTemplate","templateType","props","postType","select","getPostType"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AAEA,eAAe,SAASC,cAAT,CAAyB;AACvCC,EAAAA,YAAY,GAAG,aADwB;AAEvC,KAAGC;AAFoC,CAAzB,EAGX;AACH,QAAMC,QAAQ,GAAGR,SAAS,CACvBS,MAAF,IAAcA,MAAM,CAAEP,SAAF,CAAN,CAAoBQ,WAApB,CAAiCJ,YAAjC,CADW,EAEzB,CAAEA,YAAF,CAFyB,CAA1B;;AAKA,MAAK,CAAEE,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,MAAKF,YAAY,KAAK,aAAtB,EAAsC;AACrC,WAAO,cAAC,WAAD,eAAkBC,KAAlB;AAA0B,MAAA,QAAQ,EAAGC;AAArC,OAAP;AACA,GAFD,MAEO,IAAKF,YAAY,KAAK,kBAAtB,EAA2C;AACjD,WAAO,cAAC,eAAD,eAAsBC,KAAtB;AAA8B,MAAA,QAAQ,EAAGC;AAAzC,OAAP;AACA;;AAED,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport NewTemplate from './new-template';\nimport NewTemplatePart from './new-template-part';\n\nexport default function AddNewTemplate( {\n\ttemplateType = 'wp_template',\n\t...props\n} ) {\n\tconst postType = useSelect(\n\t\t( select ) => select( coreStore ).getPostType( templateType ),\n\t\t[ templateType ]\n\t);\n\n\tif ( ! postType ) {\n\t\treturn null;\n\t}\n\n\tif ( templateType === 'wp_template' ) {\n\t\treturn <NewTemplate { ...props } postType={ postType } />;\n\t} else if ( templateType === 'wp_template_part' ) {\n\t\treturn <NewTemplatePart { ...props } postType={ postType } />;\n\t}\n\n\treturn null;\n}\n"]}

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

@@ -22,12 +22,11 @@ import { unlock } from '../../private-apis';
 const {
   useHistory
 } = unlock(routerPrivateApis);
-export default function NewTemplatePart(_ref) {
-  let {
-    postType,
-    showIcon = true,
-    toggleProps
-  } = _ref;
+export default function NewTemplatePart({
+  postType,
+  showIcon = true,
+  toggleProps
+}) {
   const history = useHistory();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const {
@@ -38,12 +37,10 @@ export default function NewTemplatePart(_ref) {
   } = useDispatch(coreStore);
   const existingTemplateParts = useExistingTemplateParts();
 
-  async function createTemplatePart(_ref2) {
-    let {
-      title,
-      area
-    } = _ref2;
-
+  async function createTemplatePart({
+    title,
+    area
+  }) {
     if (!title) {
       createErrorNotice(__('Title is not defined.'), {
         type: 'snackbar'

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/new-template-part.js"],"names":["useState","useDispatch","Button","__","store","noticesStore","coreStore","plus","privateApis","routerPrivateApis","CreateTemplatePartModal","useExistingTemplateParts","getUniqueTemplatePartTitle","getCleanTemplatePartSlug","unlock","useHistory","NewTemplatePart","postType","showIcon","toggleProps","history","isModalOpen","setIsModalOpen","createErrorNotice","saveEntityRecord","existingTemplateParts","createTemplatePart","title","area","type","uniqueTitle","cleanSlug","templatePart","slug","content","throwOnError","push","postId","id","canvas","error","errorMessage","message","code","as","Toggle","restToggleProps","labels","add_new"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { plus } from '@wordpress/icons';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport CreateTemplatePartModal from '../create-template-part-modal';\nimport {\n\tuseExistingTemplateParts,\n\tgetUniqueTemplatePartTitle,\n\tgetCleanTemplatePartSlug,\n} from '../../utils/template-part-create';\nimport { unlock } from '../../private-apis';\n\nconst { useHistory } = unlock( routerPrivateApis );\n\nexport default function NewTemplatePart( {\n\tpostType,\n\tshowIcon = true,\n\ttoggleProps,\n} ) {\n\tconst history = useHistory();\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst existingTemplateParts = useExistingTemplateParts();\n\n\tasync function createTemplatePart( { title, area } ) {\n\t\tif ( ! title ) {\n\t\t\tcreateErrorNotice( __( 'Title is not defined.' ), {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tconst uniqueTitle = getUniqueTemplatePartTitle(\n\t\t\t\ttitle,\n\t\t\t\texistingTemplateParts\n\t\t\t);\n\t\t\tconst cleanSlug = getCleanTemplatePartSlug( uniqueTitle );\n\n\t\t\tconst templatePart = await saveEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template_part',\n\t\t\t\t{\n\t\t\t\t\tslug: cleanSlug,\n\t\t\t\t\ttitle: uniqueTitle,\n\t\t\t\t\tcontent: '',\n\t\t\t\t\tarea,\n\t\t\t\t},\n\t\t\t\t{ throwOnError: true }\n\t\t\t);\n\n\t\t\tsetIsModalOpen( false );\n\n\t\t\t// Navigate to the created template part editor.\n\t\t\thistory.push( {\n\t\t\t\tpostId: templatePart.id,\n\t\t\t\tpostType: 'wp_template_part',\n\t\t\t\tcanvas: 'edit',\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: __(\n\t\t\t\t\t\t\t'An error occurred while creating the template part.'\n\t\t\t\t\t  );\n\n\t\t\tcreateErrorNotice( errorMessage, { type: 'snackbar' } );\n\n\t\t\tsetIsModalOpen( false );\n\t\t}\n\t}\n\tconst { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};\n\n\treturn (\n\t\t<>\n\t\t\t<Toggle\n\t\t\t\t{ ...restToggleProps }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetIsModalOpen( true );\n\t\t\t\t} }\n\t\t\t\ticon={ showIcon ? plus : null }\n\t\t\t\tlabel={ postType.labels.add_new }\n\t\t\t>\n\t\t\t\t{ showIcon ? null : postType.labels.add_new }\n\t\t\t</Toggle>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<CreateTemplatePartModal\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\tonCreate={ createTemplatePart }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/new-template-part.js"],"names":["useState","useDispatch","Button","__","store","noticesStore","coreStore","plus","privateApis","routerPrivateApis","CreateTemplatePartModal","useExistingTemplateParts","getUniqueTemplatePartTitle","getCleanTemplatePartSlug","unlock","useHistory","NewTemplatePart","postType","showIcon","toggleProps","history","isModalOpen","setIsModalOpen","createErrorNotice","saveEntityRecord","existingTemplateParts","createTemplatePart","title","area","type","uniqueTitle","cleanSlug","templatePart","slug","content","throwOnError","push","postId","id","canvas","error","errorMessage","message","code","as","Toggle","restToggleProps","labels","add_new"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { plus } from '@wordpress/icons';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport CreateTemplatePartModal from '../create-template-part-modal';\nimport {\n\tuseExistingTemplateParts,\n\tgetUniqueTemplatePartTitle,\n\tgetCleanTemplatePartSlug,\n} from '../../utils/template-part-create';\nimport { unlock } from '../../private-apis';\n\nconst { useHistory } = unlock( routerPrivateApis );\n\nexport default function NewTemplatePart( {\n\tpostType,\n\tshowIcon = true,\n\ttoggleProps,\n} ) {\n\tconst history = useHistory();\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst existingTemplateParts = useExistingTemplateParts();\n\n\tasync function createTemplatePart( { title, area } ) {\n\t\tif ( ! title ) {\n\t\t\tcreateErrorNotice( __( 'Title is not defined.' ), {\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tconst uniqueTitle = getUniqueTemplatePartTitle(\n\t\t\t\ttitle,\n\t\t\t\texistingTemplateParts\n\t\t\t);\n\t\t\tconst cleanSlug = getCleanTemplatePartSlug( uniqueTitle );\n\n\t\t\tconst templatePart = await saveEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template_part',\n\t\t\t\t{\n\t\t\t\t\tslug: cleanSlug,\n\t\t\t\t\ttitle: uniqueTitle,\n\t\t\t\t\tcontent: '',\n\t\t\t\t\tarea,\n\t\t\t\t},\n\t\t\t\t{ throwOnError: true }\n\t\t\t);\n\n\t\t\tsetIsModalOpen( false );\n\n\t\t\t// Navigate to the created template part editor.\n\t\t\thistory.push( {\n\t\t\t\tpostId: templatePart.id,\n\t\t\t\tpostType: 'wp_template_part',\n\t\t\t\tcanvas: 'edit',\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: __(\n\t\t\t\t\t\t\t'An error occurred while creating the template part.'\n\t\t\t\t\t  );\n\n\t\t\tcreateErrorNotice( errorMessage, { type: 'snackbar' } );\n\n\t\t\tsetIsModalOpen( false );\n\t\t}\n\t}\n\tconst { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};\n\n\treturn (\n\t\t<>\n\t\t\t<Toggle\n\t\t\t\t{ ...restToggleProps }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetIsModalOpen( true );\n\t\t\t\t} }\n\t\t\t\ticon={ showIcon ? plus : null }\n\t\t\t\tlabel={ postType.labels.add_new }\n\t\t\t>\n\t\t\t\t{ showIcon ? null : postType.labels.add_new }\n\t\t\t</Toggle>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<CreateTemplatePartModal\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\tonCreate={ createTemplatePart }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

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

@@ -1,13 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { DropdownMenu, MenuGroup, MenuItem, Tooltip, VisuallyHidden } from '@wordpress/components';
+
+import { Button, Modal, __experimentalGrid as Grid, __experimentalText as Text, __experimentalVStack as VStack } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { archive, blockMeta, category, home, list, media, notFound, page, plus, post, postAuthor, postDate, postList, search, tag, layout as customGenericTemplateIcon } from '@wordpress/icons';
+import { plus } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -15,9 +22,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 
-import AddCustomTemplateModal from './add-custom-template-modal';
+import AddCustomTemplateModalContent from './add-custom-template-modal-content';
 import { useExistingTemplates, useDefaultTemplateTypes, useTaxonomiesMenuItems, usePostTypeMenuItems, useAuthorMenuItem, usePostTypeArchiveMenuItems } from './utils';
-import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
+import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
@@ -25,30 +32,43 @@ const {
   useHistory
 } = unlock(routerPrivateApis);
 const DEFAULT_TEMPLATE_SLUGS = ['front-page', 'home', 'single', 'page', 'index', 'archive', 'author', 'category', 'date', 'tag', 'taxonomy', 'search', '404'];
-const TEMPLATE_ICONS = {
-  'front-page': home,
-  home: postList,
-  single: post,
-  page,
-  archive,
-  search,
-  404: notFound,
-  index: list,
-  category,
-  author: postAuthor,
-  taxonomy: blockMeta,
-  date: postDate,
-  tag,
-  attachment: media
+
+function TemplateListItem({
+  title,
+  description,
+  onClick
+}) {
+  return createElement(Button, {
+    onClick: onClick
+  }, createElement(VStack, {
+    as: "span",
+    spacing: 2,
+    justify: "flex-start",
+    style: {
+      width: '100%'
+    }
+  }, createElement(Text, {
+    weight: 500,
+    lineHeight: 1.53846153846 // 20px
+
+  }, title), createElement(Text, {
+    lineHeight: 1.53846153846 // 20px
+
+  }, description)));
+}
+
+const modalContentMap = {
+  templatesList: 1,
+  customTemplate: 2,
+  customGenericTemplate: 3
 };
-export default function NewTemplate(_ref) {
-  let {
-    postType,
-    toggleProps,
-    showIcon = true
-  } = _ref;
-  const [showCustomTemplateModal, setShowCustomTemplateModal] = useState(false);
-  const [showCustomGenericTemplateModal, setShowCustomGenericTemplateModal] = useState(false);
+export default function NewTemplate({
+  postType,
+  toggleProps,
+  showIcon = true
+}) {
+  const [showModal, setShowModal] = useState(false);
+  const [modalContent, setModalContent] = useState(modalContentMap.templatesList);
   const [entityForSuggestions, setEntityForSuggestions] = useState({});
   const [isCreatingTemplate, setIsCreatingTemplate] = useState(false);
   const history = useHistory();
@@ -63,9 +83,7 @@ export default function NewTemplate(_ref) {
     setTemplate
   } = unlock(useDispatch(editSiteStore));
 
-  async function createTemplate(template) {
-    let isWPSuggestion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
+  async function createTemplate(template, isWPSuggestion = true) {
     if (isCreatingTemplate) {
       return;
     }
@@ -73,8 +91,6 @@ export default function NewTemplate(_ref) {
     setIsCreatingTemplate(true);
 
     try {
-      var _newTemplate$title;
-
       const {
         title,
         description,
@@ -100,7 +116,7 @@ export default function NewTemplate(_ref) {
         canvas: 'edit'
       });
       createSuccessNotice(sprintf( // translators: %s: Title of the created template e.g: "Category".
-      __('"%s" successfully created.'), ((_newTemplate$title = newTemplate.title) === null || _newTemplate$title === void 0 ? void 0 : _newTemplate$title.rendered) || title), {
+      __('"%s" successfully created.'), decodeEntities(newTemplate.title?.rendered || title)), {
         type: 'snackbar'
       });
     } catch (error) {
@@ -113,78 +129,85 @@ export default function NewTemplate(_ref) {
     }
   }
 
-  const missingTemplates = useMissingTemplates(setEntityForSuggestions, setShowCustomTemplateModal);
+  const onModalClose = () => {
+    setShowModal(false);
+    setModalContent(modalContentMap.templatesList);
+  };
+
+  const missingTemplates = useMissingTemplates(setEntityForSuggestions, () => setModalContent(modalContentMap.customTemplate));
 
   if (!missingTemplates.length) {
     return null;
   }
 
-  const customTemplateDescription = __('A custom template can be manually applied to any post or page.');
+  const {
+    as: Toggle = Button,
+    ...restToggleProps
+  } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};
+
+  let modalTitle = __('Add template');
+
+  if (modalContent === modalContentMap.customTemplate) {
+    modalTitle = sprintf( // translators: %s: Name of the post type e.g: "Post".
+    __('Add template: %s'), entityForSuggestions.labels.singular_name);
+  } else if (modalContent === modalContentMap.customGenericTemplate) {
+    modalTitle = __('Create custom template');
+  }
 
-  return createElement(Fragment, null, createElement(DropdownMenu, {
-    className: "edit-site-new-template-dropdown",
+  return createElement(Fragment, null, isCreatingTemplate && createElement(TemplateActionsLoadingScreen, null), createElement(Toggle, _extends({}, restToggleProps, {
+    onClick: () => setShowModal(true),
     icon: showIcon ? plus : null,
-    text: showIcon ? null : postType.labels.add_new,
-    label: postType.labels.add_new_item,
-    popoverProps: {
-      noArrow: false
-    },
-    toggleProps: toggleProps
-  }, () => createElement(Fragment, null, isCreatingTemplate && createElement(TemplateActionsLoadingScreen, null), createElement("div", {
-    className: "edit-site-new-template-dropdown__menu-groups"
-  }, createElement(MenuGroup, {
     label: postType.labels.add_new_item
+  }), showIcon ? null : postType.labels.add_new_item), showModal && createElement(Modal, {
+    title: modalTitle,
+    className: classnames('edit-site-add-new-template__modal', {
+      'edit-site-add-new-template__modal_template_list': modalContent === modalContentMap.templatesList,
+      'edit-site-custom-template-modal': modalContent === modalContentMap.customTemplate
+    }),
+    onRequestClose: onModalClose,
+    overlayClassName: modalContent === modalContentMap.customGenericTemplate ? 'edit-site-custom-generic-template__modal' : undefined
+  }, modalContent === modalContentMap.templatesList && createElement(Grid, {
+    columns: 3,
+    gap: 4,
+    align: "flex-start",
+    justify: "center",
+    className: "edit-site-add-new-template__template-list__contents"
   }, missingTemplates.map(template => {
     const {
       title,
       description,
       slug,
-      onClick,
-      icon
+      onClick
     } = template;
-    return createElement(Tooltip, {
+    return createElement(TemplateListItem, {
       key: slug,
-      position: "top right",
-      text: description,
-      className: "edit-site-new-template-dropdown__menu-item-tooltip"
-    }, createElement(MenuItem, {
-      icon: icon || TEMPLATE_ICONS[slug] || post,
-      iconPosition: "left",
+      title: title,
+      description: description,
       onClick: () => onClick ? onClick(template) : createTemplate(template)
-    }, title, createElement(VisuallyHidden, null, description)));
-  })), createElement(MenuGroup, null, createElement(Tooltip, {
-    position: "top right",
-    text: customTemplateDescription,
-    className: "edit-site-new-template-dropdown__menu-item-tooltip"
-  }, createElement(MenuItem, {
-    icon: customGenericTemplateIcon,
-    iconPosition: "left",
-    onClick: () => setShowCustomGenericTemplateModal(true)
-  }, __('Custom template'), createElement(VisuallyHidden, null, customTemplateDescription))))))), showCustomTemplateModal && createElement(AddCustomTemplateModal, {
-    onClose: () => setShowCustomTemplateModal(false),
+    });
+  }), createElement(TemplateListItem, {
+    title: __('Custom template'),
+    description: __('A custom template can be manually applied to any post or page.'),
+    onClick: () => setModalContent(modalContentMap.customGenericTemplate)
+  })), modalContent === modalContentMap.customTemplate && createElement(AddCustomTemplateModalContent, {
     onSelect: createTemplate,
-    entityForSuggestions: entityForSuggestions,
-    isCreatingTemplate: isCreatingTemplate
-  }), showCustomGenericTemplateModal && createElement(AddCustomGenericTemplateModal, {
-    onClose: () => setShowCustomGenericTemplateModal(false),
-    createTemplate: createTemplate,
-    isCreatingTemplate: isCreatingTemplate
-  }));
+    entityForSuggestions: entityForSuggestions
+  }), modalContent === modalContentMap.customGenericTemplate && createElement(AddCustomGenericTemplateModalContent, {
+    onClose: onModalClose,
+    createTemplate: createTemplate
+  })));
 }
 
-function useMissingTemplates(setEntityForSuggestions, setShowCustomTemplateModal) {
+function useMissingTemplates(setEntityForSuggestions, onClick) {
   const existingTemplates = useExistingTemplates();
   const defaultTemplateTypes = useDefaultTemplateTypes();
-  const existingTemplateSlugs = (existingTemplates || []).map(_ref2 => {
-    let {
-      slug
-    } = _ref2;
-    return slug;
-  });
+  const existingTemplateSlugs = (existingTemplates || []).map(({
+    slug
+  }) => slug);
   const missingDefaultTemplates = (defaultTemplateTypes || []).filter(template => DEFAULT_TEMPLATE_SLUGS.includes(template.slug) && !existingTemplateSlugs.includes(template.slug));
 
   const onClickMenuItem = _entityForSuggestions => {
-    setShowCustomTemplateModal(true);
+    onClick?.();
     setEntityForSuggestions(_entityForSuggestions);
   }; // We need to replace existing default template types with
   // the create specific template functionality. The original
@@ -220,7 +243,7 @@ function useMissingTemplates(setEntityForSuggestions, setShowCustomTemplateModal
     }
   }); // Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
 
-  enhancedMissingDefaultTemplateTypes === null || enhancedMissingDefaultTemplateTypes === void 0 ? void 0 : enhancedMissingDefaultTemplateTypes.sort((template1, template2) => {
+  enhancedMissingDefaultTemplateTypes?.sort((template1, template2) => {
     return DEFAULT_TEMPLATE_SLUGS.indexOf(template1.slug) - DEFAULT_TEMPLATE_SLUGS.indexOf(template2.slug);
   });
   const missingTemplates = [...enhancedMissingDefaultTemplateTypes, ...usePostTypeArchiveMenuItems(), ...postTypesMenuItems, ...taxonomiesMenuItems];