@wordpress/edit-site 5.9.0 → 5.11.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 5.11.0 (2023-05-24)
+
+## 5.10.0 (2023-05-10)
+
 ## 5.9.0 (2023-04-26)
 
 ## 5.8.0 (2023-04-12)

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,8 +13,6 @@ var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
-var _templateActionsLoadingScreen = _interopRequireDefault(require("./template-actions-loading-screen"));
-
 /**
  * External dependencies
  */
@@ -24,15 +20,10 @@ var _templateActionsLoadingScreen = _interopRequireDefault(require("./template-a
 /**
  * WordPress dependencies
  */
-
-/**
- * Internal dependencies
- */
-function AddCustomGenericTemplateModal(_ref) {
+function AddCustomGenericTemplateModalContent(_ref) {
   let {
     onClose,
-    createTemplate,
-    isCreatingTemplate
+    createTemplate
   } = _ref;
   const [title, setTitle] = (0, _element.useState)('');
   const defaultTitle = (0, _i18n.__)('Custom Template');
@@ -57,13 +48,7 @@ function AddCustomGenericTemplateModal(_ref) {
     }
   }
 
-  return (0, _element.createElement)(_components.Modal, {
-    title: (0, _i18n.__)('Create custom template'),
-    onRequestClose: () => {
-      onClose();
-    },
-    overlayClassName: "edit-site-custom-generic-template__modal"
-  }, isCreatingTemplate && (0, _element.createElement)(_templateActionsLoadingScreen.default, null), (0, _element.createElement)("form", {
+  return (0, _element.createElement)("form", {
     onSubmit: onCreateTemplate
   }, (0, _element.createElement)(_components.__experimentalVStack, {
     spacing: 6
@@ -74,7 +59,7 @@ function AddCustomGenericTemplateModal(_ref) {
     onChange: setTitle,
     placeholder: defaultTitle,
     disabled: isBusy,
-    help: (0, _i18n.__)('Describe the template, e.g. "Post with sidebar".')
+    help: (0, _i18n.__)('Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.')
   }), (0, _element.createElement)(_components.__experimentalHStack, {
     className: "edit-site-custom-generic-template__modal-actions",
     justify: "right"
@@ -88,9 +73,9 @@ function AddCustomGenericTemplateModal(_ref) {
     type: "submit",
     isBusy: isBusy,
     "aria-disabled": isBusy
-  }, (0, _i18n.__)('Create'))))));
+  }, (0, _i18n.__)('Create')))));
 }
 
-var _default = AddCustomGenericTemplateModal;
+var _default = AddCustomGenericTemplateModalContent;
 exports.default = _default;
-//# sourceMappingURL=add-custom-generic-template-modal.js.map
+//# sourceMappingURL=add-custom-generic-template-modal-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js"],"names":["AddCustomGenericTemplateModalContent","onClose","createTemplate","title","setTitle","defaultTitle","isBusy","setIsBusy","onCreateTemplate","event","preventDefault","slug"],"mappings":";;;;;;;AAQA;;AALA;;AAMA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAUA,SAASA,oCAAT,OAA6E;AAAA,MAA9B;AAAEC,IAAAA,OAAF;AAAWC,IAAAA;AAAX,GAA8B;AAC5E,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAU,EAAV,CAA5B;AACA,QAAMC,YAAY,GAAG,cAAI,iBAAJ,CAArB;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;;AACA,iBAAeC,gBAAf,CAAiCC,KAAjC,EAAyC;AACxCA,IAAAA,KAAK,CAACC,cAAN;;AACA,QAAKJ,MAAL,EAAc;AACb;AACA;;AACDC,IAAAA,SAAS,CAAE,IAAF,CAAT;;AACA,QAAI;AACH,YAAML,cAAc,CACnB;AACCS,QAAAA,IAAI,EACH,wBACA,uBAAWR,KAAK,IAAIE,YAApB,CAHF;AAICF,QAAAA,KAAK,EAAEA,KAAK,IAAIE;AAJjB,OADmB,EAOnB,KAPmB,CAApB;AASA,KAVD,SAUU;AACTE,MAAAA,SAAS,CAAE,KAAF,CAAT;AACA;AACD;;AACD,SACC;AAAM,IAAA,QAAQ,EAAGC;AAAjB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,uBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EAAG,cAAI,MAAJ,CAFT;AAGC,IAAA,KAAK,EAAGL,KAHT;AAIC,IAAA,QAAQ,EAAGC,QAJZ;AAKC,IAAA,WAAW,EAAGC,YALf;AAMC,IAAA,QAAQ,EAAGC,MANZ;AAOC,IAAA,IAAI,EAAG,cACN,iHADM;AAPR,IADD,EAYC,4BAAC,gCAAD;AACC,IAAA,SAAS,EAAC,kDADX;AAEC,IAAA,OAAO,EAAC;AAFT,KAIC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAG,MAAM;AACfL,MAAAA,OAAO;AACP;AAJF,KAMG,cAAI,QAAJ,CANH,CAJD,EAYC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,SADT;AAEC,IAAA,IAAI,EAAC,QAFN;AAGC,IAAA,MAAM,EAAGK,MAHV;AAIC,qBAAgBA;AAJjB,KAMG,cAAI,QAAJ,CANH,CAZD,CAZD,CADD,CADD;AAsCA;;eAEcN,oC","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tTextControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\nfunction AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {\n\tconst [ title, setTitle ] = useState( '' );\n\tconst defaultTitle = __( 'Custom Template' );\n\tconst [ isBusy, setIsBusy ] = useState( false );\n\tasync function onCreateTemplate( event ) {\n\t\tevent.preventDefault();\n\t\tif ( isBusy ) {\n\t\t\treturn;\n\t\t}\n\t\tsetIsBusy( true );\n\t\ttry {\n\t\t\tawait createTemplate(\n\t\t\t\t{\n\t\t\t\t\tslug:\n\t\t\t\t\t\t'wp-custom-template-' +\n\t\t\t\t\t\tkebabCase( title || defaultTitle ),\n\t\t\t\t\ttitle: title || defaultTitle,\n\t\t\t\t},\n\t\t\t\tfalse\n\t\t\t);\n\t\t} finally {\n\t\t\tsetIsBusy( false );\n\t\t}\n\t}\n\treturn (\n\t\t<form onSubmit={ onCreateTemplate }>\n\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t<TextControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\tvalue={ title }\n\t\t\t\t\tonChange={ setTitle }\n\t\t\t\t\tplaceholder={ defaultTitle }\n\t\t\t\t\tdisabled={ isBusy }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'Describe the template, e.g. \"Post with sidebar\". A custom template can be manually applied to any post or page.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"edit-site-custom-generic-template__modal-actions\"\n\t\t\t\t\tjustify=\"right\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tisBusy={ isBusy }\n\t\t\t\t\t\taria-disabled={ isBusy }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Create' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t</form>\n\t);\n}\n\nexport default AddCustomGenericTemplateModalContent;\n"]}

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

@@ -21,8 +21,6 @@ var _coreData = require("@wordpress/core-data");
 
 var _htmlEntities = require("@wordpress/html-entities");
 
-var _templateActionsLoadingScreen = _interopRequireDefault(require("./template-actions-loading-screen"));
-
 var _utils = require("./utils");
 
 /**
@@ -49,12 +47,19 @@ function SuggestionListItem(_ref) {
   }, composite, {
     className: baseCssClass,
     onClick: () => onSelect(entityForSuggestions.config.getSpecificTemplate(suggestion))
-  }), (0, _element.createElement)("span", {
+  }), (0, _element.createElement)(_components.__experimentalText, {
+    size: "body",
+    lineHeight: 1.53846153846 // 20px
+    ,
+    weight: 500,
     className: `${baseCssClass}__title`
   }, (0, _element.createElement)(_components.TextHighlight, {
     text: (0, _htmlEntities.decodeEntities)(suggestion.name),
     highlight: search
-  })), suggestion.link && (0, _element.createElement)("span", {
+  })), suggestion.link && (0, _element.createElement)(_components.__experimentalText, {
+    size: "body",
+    lineHeight: 1.53846153846 // 20px
+    ,
     className: `${baseCssClass}__info`
   }, suggestion.link));
 }
@@ -148,26 +153,20 @@ function SuggestionList(_ref2) {
   }, labels.not_found));
 }
 
-function AddCustomTemplateModal(_ref3) {
+function AddCustomTemplateModalContent(_ref3) {
   let {
-    onClose,
     onSelect,
-    entityForSuggestions,
-    isCreatingTemplate
+    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,
-    onRequestClose: onClose
-  }, isCreatingTemplate && (0, _element.createElement)(_templateActionsLoadingScreen.default, null), !showSearchEntities && (0, _element.createElement)(_components.__experimentalVStack, {
-    spacing: 4
-  }, (0, _element.createElement)(_components.__experimentalText, {
+  return (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 4,
+    className: "edit-site-custom-template-modal__contents-wrapper",
+    alignment: "left"
+  }, !showSearchEntities && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalText, {
     as: "p"
   }, (0, _i18n.__)('Select whether to create a single template for all items or a specific one.')), (0, _element.createElement)(_components.Flex, {
-    className: `${baseCssClass}__contents`,
+    className: "edit-site-custom-template-modal__contents",
     gap: "4",
     align: "initial"
   }, (0, _element.createElement)(_components.FlexItem, {
@@ -189,9 +188,13 @@ function AddCustomTemplateModal(_ref3) {
     }
   }, (0, _element.createElement)(_components.__experimentalText, {
     as: "span",
-    weight: 600
+    weight: 500,
+    lineHeight: 1.53846153846 // 20px
+
   }, entityForSuggestions.labels.all_items), (0, _element.createElement)(_components.__experimentalText, {
-    as: "span"
+    as: "span",
+    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.
   (0, _i18n.__)('For all items'))), (0, _element.createElement)(_components.FlexItem, {
     isBlock: true,
@@ -201,13 +204,15 @@ function AddCustomTemplateModal(_ref3) {
     }
   }, (0, _element.createElement)(_components.__experimentalText, {
     as: "span",
-    weight: 600
+    weight: 500,
+    lineHeight: 1.53846153846 // 20px
+
   }, entityForSuggestions.labels.singular_name), (0, _element.createElement)(_components.__experimentalText, {
-    as: "span"
+    as: "span",
+    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.
-  (0, _i18n.__)('For a specific item'))))), showSearchEntities && (0, _element.createElement)(_components.__experimentalVStack, {
-    spacing: 4
-  }, (0, _element.createElement)(_components.__experimentalText, {
+  (0, _i18n.__)('For a specific item'))))), showSearchEntities && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalText, {
     as: "p"
   }, (0, _i18n.__)('This template will be used only for the specific item chosen.')), (0, _element.createElement)(SuggestionList, {
     entityForSuggestions: entityForSuggestions,
@@ -215,6 +220,6 @@ function AddCustomTemplateModal(_ref3) {
   })));
 }
 
-var _default = AddCustomTemplateModal;
+var _default = AddCustomTemplateModalContent;
 exports.default = _default;
-//# sourceMappingURL=add-custom-template-modal.js.map
+//# sourceMappingURL=add-custom-template-modal-content.js.map

package/build/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":["EMPTY_ARRAY","SuggestionListItem","suggestion","search","onSelect","entityForSuggestions","composite","baseCssClass","Button","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":";;;;;;;;;AAGA;;;;AACA;;AACA;;AAYA;;AACA;;AACA;;AAKA;;AAxBA;AACA;AACA;;AAmBA;AACA;AACA;AAGA,MAAMA,WAAW,GAAG,EAApB;;AAEA,SAASC,kBAAT,OAMI;AAAA,MANyB;AAC5BC,IAAAA,UAD4B;AAE5BC,IAAAA,MAF4B;AAG5BC,IAAAA,QAH4B;AAI5BC,IAAAA,oBAJ4B;AAK5BC,IAAAA;AAL4B,GAMzB;AACH,QAAMC,YAAY,GACjB,8DADD;AAEA,SACC,4BAAC,mCAAD;AACC,IAAA,IAAI,EAAC,QADN;AAEC,IAAA,EAAE,EAAGC;AAFN,KAGMF,SAHN;AAIC,IAAA,SAAS,EAAGC,YAJb;AAKC,IAAA,OAAO,EAAG,MACTH,QAAQ,CACPC,oBAAoB,CAACI,MAArB,CAA4BC,mBAA5B,CACCR,UADD,CADO;AANV,MAaC,4BAAC,8BAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,UAAU,EAAG,aAFd,CAE8B;AAF9B;AAGC,IAAA,MAAM,EAAG,GAHV;AAIC,IAAA,SAAS,EAAI,GAAGK,YAAc;AAJ/B,KAMC,4BAAC,yBAAD;AACC,IAAA,IAAI,EAAG,kCAAgBL,UAAU,CAACS,IAA3B,CADR;AAEC,IAAA,SAAS,EAAGR;AAFb,IAND,CAbD,EAwBGD,UAAU,CAACU,IAAX,IACD,4BAAC,8BAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,UAAU,EAAG,aAFd,CAE8B;AAF9B;AAGC,IAAA,SAAS,EAAI,GAAGL,YAAc;AAH/B,KAKGL,UAAU,CAACU,IALd,CAzBF,CADD;AAoCA;;AAED,SAASC,iBAAT,GAA6B;AAC5B,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAU,EAAV,CAA5B;AACA,QAAM,CAAEC,SAAF,EAAaC,MAAb,IAAwB,uBAAU,EAAV,CAA9B;AACA,QAAMC,YAAY,GAAG,0BAAaD,MAAb,EAAqB,GAArB,CAArB;AACA,0BAAW,MAAM;AAChB,QAAKD,SAAS,KAAKF,KAAnB,EAA2B;AAC1BI,MAAAA,YAAY,CAAEJ,KAAF,CAAZ;AACA;AACD,GAJD,EAIG,CAAEE,SAAF,EAAaF,KAAb,CAJH;AAKA,SAAO,CAAEA,KAAF,EAASC,QAAT,EAAmBC,SAAnB,CAAP;AACA;;AAED,SAASG,oBAAT,CAA+Bd,oBAA/B,EAAqDF,MAArD,EAA8D;AAC7D,QAAM;AAAEM,IAAAA;AAAF,MAAaJ,oBAAnB;AACA,QAAMe,KAAK,GAAG,sBACb,OAAQ;AACPC,IAAAA,KAAK,EAAE,KADA;AAEPC,IAAAA,OAAO,EAAE,MAFF;AAGPnB,IAAAA,MAHO;AAIPoB,IAAAA,QAAQ,EAAEpB,MAAM,GAAG,EAAH,GAAQ,EAJjB;AAKP,OAAGM,MAAM,CAACe,SAAP,CAAkBrB,MAAlB;AALI,GAAR,CADa,EAQb,CAAEA,MAAF,EAAUM,MAAV,CARa,CAAd;AAUA,QAAM;AAAEgB,IAAAA,OAAO,EAAEC,aAAX;AAA0BC,IAAAA,WAAW,EAAEC;AAAvC,MACL,gCACCvB,oBAAoB,CAACwB,IADtB,EAECxB,oBAAoB,CAACyB,IAFtB,EAGCV,KAHD,CADD;AAMA,QAAM,CAAEW,WAAF,EAAeC,cAAf,IAAkC,uBAAUhC,WAAV,CAAxC;AACA,0BAAW,MAAM;AAChB,QAAK,CAAE4B,iBAAP,EAA2B;AAC3B,QAAIK,cAAc,GAAGjC,WAArB;;AACA,QAAK0B,aAAL,aAAKA,aAAL,eAAKA,aAAa,CAAEQ,MAApB,EAA6B;AAC5BD,MAAAA,cAAc,GAAGP,aAAjB;;AACA,UAAKjB,MAAM,CAAC0B,cAAZ,EAA6B;AAC5BF,QAAAA,cAAc,GAAG,+BAChBA,cADgB,EAEhBxB,MAAM,CAAC0B,cAFS,CAAjB;AAIA;AACD,KAXe,CAYhB;AACA;;;AACAH,IAAAA,cAAc,CAAEC,cAAF,CAAd;AACA,GAfD,EAeG,CAAEP,aAAF,EAAiBE,iBAAjB,CAfH;AAgBA,SAAOG,WAAP;AACA;;AAED,SAASK,cAAT,QAA8D;AAAA,MAArC;AAAE/B,IAAAA,oBAAF;AAAwBD,IAAAA;AAAxB,GAAqC;AAC7D,QAAME,SAAS,GAAG,6CAAmB;AAAE+B,IAAAA,WAAW,EAAE;AAAf,GAAnB,CAAlB;AACA,QAAM,CAAElC,MAAF,EAAUmC,SAAV,EAAqBC,eAArB,IAAyC1B,iBAAiB,EAAhE;AACA,QAAMkB,WAAW,GAAGZ,oBAAoB,CACvCd,oBADuC,EAEvCkC,eAFuC,CAAxC;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAanC,oBAAnB;AACA,QAAM,CAAEoC,iBAAF,EAAqBC,oBAArB,IAA8C,uBAAU,KAAV,CAApD;;AACA,MAAK,CAAED,iBAAF,IAAuB,CAAAV,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEG,MAAb,IAAsB,CAAlD,EAAsD;AACrDQ,IAAAA,oBAAoB,CAAE,IAAF,CAApB;AACA;;AACD,SACC,qDACGD,iBAAiB,IAClB,4BAAC,yBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,QAAQ,EAAGH,SAFZ;AAGC,IAAA,KAAK,EAAGnC,MAHT;AAIC,IAAA,KAAK,EAAGqC,MAAM,CAACG,YAJhB;AAKC,IAAA,WAAW,EAAGH,MAAM,CAACG;AALtB,IAFF,EAUG,CAAC,EAAEZ,WAAF,aAAEA,WAAF,eAAEA,WAAW,CAAEG,MAAf,CAAD,IACD,4BAAC,+BAAD,6BACM5B,SADN;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,IAAA,SAAS,EAAC,mDAHX;AAIC,kBAAa,cAAI,kBAAJ;AAJd,MAMGyB,WAAW,CAACa,GAAZ,CAAmB1C,UAAF,IAClB,4BAAC,kBAAD;AACC,IAAA,GAAG,EAAGA,UAAU,CAAC4B,IADlB;AAEC,IAAA,UAAU,EAAG5B,UAFd;AAGC,IAAA,MAAM,EAAGqC,eAHV;AAIC,IAAA,QAAQ,EAAGnC,QAJZ;AAKC,IAAA,oBAAoB,EAAGC,oBALxB;AAMC,IAAA,SAAS,EAAGC;AANb,IADC,CANH,CAXF,EA6BGiC,eAAe,IAAI,EAAER,WAAF,aAAEA,WAAF,eAAEA,WAAW,CAAEG,MAAf,CAAnB,IACD,4BAAC,8BAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGM,MAAM,CAACK,SAJV,CA9BF,CADD;AAwCA;;AAED,SAASC,6BAAT,QAA6E;AAAA,MAArC;AAAE1C,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAqC;AAC5E,QAAM,CAAE0C,kBAAF,EAAsBC,qBAAtB,IAAgD,uBACrD3C,oBAAoB,CAAC4C,kBADgC,CAAtD;AAGA,SACC,4BAAC,gCAAD;AACC,IAAA,OAAO,EAAG,CADX;AAEC,IAAA,SAAS,EAAC,mDAFX;AAGC,IAAA,SAAS,EAAC;AAHX,KAKG,CAAEF,kBAAF,IACD,qDACC,4BAAC,8BAAD;AAAM,IAAA,EAAE,EAAC;AAAT,KACG,cACD,6EADC,CADH,CADD,EAMC,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAC,2CADX;AAEC,IAAA,GAAG,EAAC,GAFL;AAGC,IAAA,KAAK,EAAC;AAHP,KAKC,4BAAC,oBAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,EAAE,EAAGvC,kBAFN;AAGC,IAAA,OAAO,EAAG,MAAM;AACf,YAAM;AACLsB,QAAAA,IADK;AAELoB,QAAAA,KAFK;AAGLC,QAAAA,WAHK;AAILC,QAAAA;AAJK,UAKF/C,oBAAoB,CAACgD,QALzB;AAMAjD,MAAAA,QAAQ,CAAE;AACT0B,QAAAA,IADS;AAEToB,QAAAA,KAFS;AAGTC,QAAAA,WAHS;AAITC,QAAAA;AAJS,OAAF,CAAR;AAMA;AAhBF,KAkBC,4BAAC,8BAAD;AACC,IAAA,EAAE,EAAC,MADJ;AAEC,IAAA,MAAM,EAAG,GAFV;AAGC,IAAA,UAAU,EAAG,aAHd,CAG8B;;AAH9B,KAKG/C,oBAAoB,CAACmC,MAArB,CAA4Bc,SAL/B,CAlBD,EAyBC,4BAAC,8BAAD;AACC,IAAA,EAAE,EAAC,MADJ;AAEC,IAAA,UAAU,EAAG,aAFd,CAE8B;;AAF9B,KAKE;AACA,gBAAI,eAAJ,CANF,CAzBD,CALD,EAwCC,4BAAC,oBAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,EAAE,EAAG9C,kBAFN;AAGC,IAAA,OAAO,EAAG,MAAM;AACfwC,MAAAA,qBAAqB,CAAE,IAAF,CAArB;AACA;AALF,KAOC,4BAAC,8BAAD;AACC,IAAA,EAAE,EAAC,MADJ;AAEC,IAAA,MAAM,EAAG,GAFV;AAGC,IAAA,UAAU,EAAG,aAHd,CAG8B;;AAH9B,KAKG3C,oBAAoB,CAACmC,MAArB,CAA4Be,aAL/B,CAPD,EAcC,4BAAC,8BAAD;AACC,IAAA,EAAE,EAAC,MADJ;AAEC,IAAA,UAAU,EAAG,aAFd,CAE8B;;AAF9B,KAKE;AACA,gBAAI,qBAAJ,CANF,CAdD,CAxCD,CAND,CANF,EA+EGR,kBAAkB,IACnB,qDACC,4BAAC,8BAAD;AAAM,IAAA,EAAE,EAAC;AAAT,KACG,cACD,+DADC,CADH,CADD,EAMC,4BAAC,cAAD;AACC,IAAA,oBAAoB,EAAG1C,oBADxB;AAEC,IAAA,QAAQ,EAAGD;AAFZ,IAND,CAhFF,CADD;AA+FA;;eAEc0C,6B","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/components/add-new-template/new-template-part.js

@@ -23,12 +23,14 @@ var _coreData = require("@wordpress/core-data");
 
 var _icons = require("@wordpress/icons");
 
-var _routes = require("../routes");
+var _router = require("@wordpress/router");
 
 var _createTemplatePartModal = _interopRequireDefault(require("../create-template-part-modal"));
 
 var _templatePartCreate = require("../../utils/template-part-create");
 
+var _privateApis = require("../../private-apis");
+
 /**
  * WordPress dependencies
  */
@@ -36,13 +38,17 @@ var _templatePartCreate = require("../../utils/template-part-create");
 /**
  * Internal dependencies
  */
+const {
+  useHistory
+} = (0, _privateApis.unlock)(_router.privateApis);
+
 function NewTemplatePart(_ref) {
   let {
     postType,
     showIcon = true,
     toggleProps
   } = _ref;
-  const history = (0, _routes.useHistory)();
+  const history = useHistory();
   const [isModalOpen, setIsModalOpen] = (0, _element.useState)(false);
   const {
     createErrorNotice

package/build/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":["NewTemplatePart","postType","showIcon","toggleProps","history","isModalOpen","setIsModalOpen","createErrorNotice","noticesStore","saveEntityRecord","coreStore","existingTemplateParts","createTemplatePart","title","area","type","uniqueTitle","cleanSlug","templatePart","slug","content","throwOnError","push","postId","id","canvas","error","errorMessage","message","code","as","Toggle","Button","restToggleProps","plus","labels","add_new"],"mappings":";;;;;;;;;AAGA;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAhBA;AACA;AACA;;AASA;AACA;AACA;AASe,SAASA,eAAT,OAIX;AAAA,MAJqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,QAAQ,GAAG,IAF6B;AAGxCC,IAAAA;AAHwC,GAIrC;AACH,QAAMC,OAAO,GAAG,yBAAhB;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAwB,uBAAaC,cAAb,CAA9B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,uBAAaC,eAAb,CAA7B;AACA,QAAMC,qBAAqB,GAAG,mDAA9B;;AAEA,iBAAeC,kBAAf,QAAqD;AAAA,QAAlB;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAkB;;AACpD,QAAK,CAAED,KAAP,EAAe;AACdN,MAAAA,iBAAiB,CAAE,cAAI,uBAAJ,CAAF,EAAiC;AACjDQ,QAAAA,IAAI,EAAE;AAD2C,OAAjC,CAAjB;AAGA;AACA;;AAED,QAAI;AACH,YAAMC,WAAW,GAAG,oDACnBH,KADmB,EAEnBF,qBAFmB,CAApB;AAIA,YAAMM,SAAS,GAAG,kDAA0BD,WAA1B,CAAlB;AAEA,YAAME,YAAY,GAAG,MAAMT,gBAAgB,CAC1C,UAD0C,EAE1C,kBAF0C,EAG1C;AACCU,QAAAA,IAAI,EAAEF,SADP;AAECJ,QAAAA,KAAK,EAAEG,WAFR;AAGCI,QAAAA,OAAO,EAAE,EAHV;AAICN,QAAAA;AAJD,OAH0C,EAS1C;AAAEO,QAAAA,YAAY,EAAE;AAAhB,OAT0C,CAA3C;AAYAf,MAAAA,cAAc,CAAE,KAAF,CAAd,CAnBG,CAqBH;;AACAF,MAAAA,OAAO,CAACkB,IAAR,CAAc;AACbC,QAAAA,MAAM,EAAEL,YAAY,CAACM,EADR;AAEbvB,QAAAA,QAAQ,EAAE,kBAFG;AAGbwB,QAAAA,MAAM,EAAE;AAHK,OAAd,EAtBG,CA4BH;AACA,KA7BD,CA6BE,OAAQC,KAAR,EAAgB;AACjB,YAAMC,YAAY,GACjBD,KAAK,CAACE,OAAN,IAAiBF,KAAK,CAACG,IAAN,KAAe,eAAhC,GACGH,KAAK,CAACE,OADT,GAEG,cACA,qDADA,CAHJ;AAOArB,MAAAA,iBAAiB,CAAEoB,YAAF,EAAgB;AAAEZ,QAAAA,IAAI,EAAE;AAAR,OAAhB,CAAjB;AAEAT,MAAAA,cAAc,CAAE,KAAF,CAAd;AACA;AACD;;AACD,QAAM;AAAEwB,IAAAA,EAAE,EAAEC,MAAM,GAAGC,kBAAf;AAAuB,OAAGC;AAA1B,MAA8C9B,WAA9C,aAA8CA,WAA9C,cAA8CA,WAA9C,GAA6D,EAAnE;AAEA,SACC,qDACC,4BAAC,MAAD,6BACM8B,eADN;AAEC,IAAA,OAAO,EAAG,MAAM;AACf3B,MAAAA,cAAc,CAAE,IAAF,CAAd;AACA,KAJF;AAKC,IAAA,IAAI,EAAGJ,QAAQ,GAAGgC,WAAH,GAAU,IAL1B;AAMC,IAAA,KAAK,EAAGjC,QAAQ,CAACkC,MAAT,CAAgBC;AANzB,MAQGlC,QAAQ,GAAG,IAAH,GAAUD,QAAQ,CAACkC,MAAT,CAAgBC,OARrC,CADD,EAWG/B,WAAW,IACZ,4BAAC,gCAAD;AACC,IAAA,UAAU,EAAG,MAAMC,cAAc,CAAE,KAAF,CADlC;AAEC,IAAA,QAAQ,EAAGM;AAFZ,IAZF,CADD;AAoBA","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';\n\n/**\n * Internal dependencies\n */\nimport { useHistory } from '../routes';\nimport CreateTemplatePartModal from '../create-template-part-modal';\nimport {\n\tuseExistingTemplateParts,\n\tgetUniqueTemplatePartTitle,\n\tgetCleanTemplatePartSlug,\n} from '../../utils/template-part-create';\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":["useHistory","routerPrivateApis","NewTemplatePart","postType","showIcon","toggleProps","history","isModalOpen","setIsModalOpen","createErrorNotice","noticesStore","saveEntityRecord","coreStore","existingTemplateParts","createTemplatePart","title","area","type","uniqueTitle","cleanSlug","templatePart","slug","content","throwOnError","push","postId","id","canvas","error","errorMessage","message","code","as","Toggle","Button","restToggleProps","plus","labels","add_new"],"mappings":";;;;;;;;;AAGA;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAKA;;AArBA;AACA;AACA;;AAUA;AACA;AACA;AASA,MAAM;AAAEA,EAAAA;AAAF,IAAiB,yBAAQC,mBAAR,CAAvB;;AAEe,SAASC,eAAT,OAIX;AAAA,MAJqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,QAAQ,GAAG,IAF6B;AAGxCC,IAAAA;AAHwC,GAIrC;AACH,QAAMC,OAAO,GAAGN,UAAU,EAA1B;AACA,QAAM,CAAEO,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAwB,uBAAaC,cAAb,CAA9B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,uBAAaC,eAAb,CAA7B;AACA,QAAMC,qBAAqB,GAAG,mDAA9B;;AAEA,iBAAeC,kBAAf,QAAqD;AAAA,QAAlB;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAkB;;AACpD,QAAK,CAAED,KAAP,EAAe;AACdN,MAAAA,iBAAiB,CAAE,cAAI,uBAAJ,CAAF,EAAiC;AACjDQ,QAAAA,IAAI,EAAE;AAD2C,OAAjC,CAAjB;AAGA;AACA;;AAED,QAAI;AACH,YAAMC,WAAW,GAAG,oDACnBH,KADmB,EAEnBF,qBAFmB,CAApB;AAIA,YAAMM,SAAS,GAAG,kDAA0BD,WAA1B,CAAlB;AAEA,YAAME,YAAY,GAAG,MAAMT,gBAAgB,CAC1C,UAD0C,EAE1C,kBAF0C,EAG1C;AACCU,QAAAA,IAAI,EAAEF,SADP;AAECJ,QAAAA,KAAK,EAAEG,WAFR;AAGCI,QAAAA,OAAO,EAAE,EAHV;AAICN,QAAAA;AAJD,OAH0C,EAS1C;AAAEO,QAAAA,YAAY,EAAE;AAAhB,OAT0C,CAA3C;AAYAf,MAAAA,cAAc,CAAE,KAAF,CAAd,CAnBG,CAqBH;;AACAF,MAAAA,OAAO,CAACkB,IAAR,CAAc;AACbC,QAAAA,MAAM,EAAEL,YAAY,CAACM,EADR;AAEbvB,QAAAA,QAAQ,EAAE,kBAFG;AAGbwB,QAAAA,MAAM,EAAE;AAHK,OAAd,EAtBG,CA4BH;AACA,KA7BD,CA6BE,OAAQC,KAAR,EAAgB;AACjB,YAAMC,YAAY,GACjBD,KAAK,CAACE,OAAN,IAAiBF,KAAK,CAACG,IAAN,KAAe,eAAhC,GACGH,KAAK,CAACE,OADT,GAEG,cACA,qDADA,CAHJ;AAOArB,MAAAA,iBAAiB,CAAEoB,YAAF,EAAgB;AAAEZ,QAAAA,IAAI,EAAE;AAAR,OAAhB,CAAjB;AAEAT,MAAAA,cAAc,CAAE,KAAF,CAAd;AACA;AACD;;AACD,QAAM;AAAEwB,IAAAA,EAAE,EAAEC,MAAM,GAAGC,kBAAf;AAAuB,OAAGC;AAA1B,MAA8C9B,WAA9C,aAA8CA,WAA9C,cAA8CA,WAA9C,GAA6D,EAAnE;AAEA,SACC,qDACC,4BAAC,MAAD,6BACM8B,eADN;AAEC,IAAA,OAAO,EAAG,MAAM;AACf3B,MAAAA,cAAc,CAAE,IAAF,CAAd;AACA,KAJF;AAKC,IAAA,IAAI,EAAGJ,QAAQ,GAAGgC,WAAH,GAAU,IAL1B;AAMC,IAAA,KAAK,EAAGjC,QAAQ,CAACkC,MAAT,CAAgBC;AANzB,MAQGlC,QAAQ,GAAG,IAAH,GAAUD,QAAQ,CAACkC,MAAT,CAAgBC,OARrC,CADD,EAWG/B,WAAW,IACZ,4BAAC,gCAAD;AACC,IAAA,UAAU,EAAG,MAAMC,cAAc,CAAE,KAAF,CADlC;AAEC,IAAA,QAAQ,EAAGM;AAFZ,IAZF,CADD;AAoBA","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/components/add-new-template/new-template.js

@@ -9,6 +9,10 @@ exports.default = NewTemplate;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _components = require("@wordpress/components");
 
 var _data = require("@wordpress/data");
@@ -21,20 +25,24 @@ var _i18n = require("@wordpress/i18n");
 
 var _notices = require("@wordpress/notices");
 
-var _addCustomTemplateModal = _interopRequireDefault(require("./add-custom-template-modal"));
+var _router = require("@wordpress/router");
+
+var _addCustomTemplateModalContent = _interopRequireDefault(require("./add-custom-template-modal-content"));
 
 var _utils = require("./utils");
 
-var _addCustomGenericTemplateModal = _interopRequireDefault(require("./add-custom-generic-template-modal"));
+var _addCustomGenericTemplateModalContent = _interopRequireDefault(require("./add-custom-generic-template-modal-content"));
 
 var _templateActionsLoadingScreen = _interopRequireDefault(require("./template-actions-loading-screen"));
 
-var _routes = require("../routes");
-
 var _store = require("../../store");
 
 var _privateApis = require("../../private-apis");
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -42,35 +50,53 @@ var _privateApis = require("../../private-apis");
 /**
  * Internal dependencies
  */
+const {
+  useHistory
+} = (0, _privateApis.unlock)(_router.privateApis);
 const DEFAULT_TEMPLATE_SLUGS = ['front-page', 'home', 'single', 'page', 'index', 'archive', 'author', 'category', 'date', 'tag', 'taxonomy', 'search', '404'];
-const TEMPLATE_ICONS = {
-  'front-page': _icons.home,
-  home: _icons.postList,
-  single: _icons.post,
-  page: _icons.page,
-  archive: _icons.archive,
-  search: _icons.search,
-  404: _icons.notFound,
-  index: _icons.list,
-  category: _icons.category,
-  author: _icons.postAuthor,
-  taxonomy: _icons.blockMeta,
-  date: _icons.postDate,
-  tag: _icons.tag,
-  attachment: _icons.media
+
+function TemplateListItem(_ref) {
+  let {
+    title,
+    description,
+    onClick
+  } = _ref;
+  return (0, _element.createElement)(_components.Button, {
+    onClick: onClick
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    as: "span",
+    spacing: 2,
+    justify: "flex-start",
+    style: {
+      width: '100%'
+    }
+  }, (0, _element.createElement)(_components.__experimentalText, {
+    weight: 500,
+    lineHeight: 1.53846153846 // 20px
+
+  }, title), (0, _element.createElement)(_components.__experimentalText, {
+    lineHeight: 1.53846153846 // 20px
+
+  }, description)));
+}
+
+const modalContentMap = {
+  templatesList: 1,
+  customTemplate: 2,
+  customGenericTemplate: 3
 };
 
-function NewTemplate(_ref) {
+function NewTemplate(_ref2) {
   let {
     postType,
     toggleProps,
     showIcon = true
-  } = _ref;
-  const [showCustomTemplateModal, setShowCustomTemplateModal] = (0, _element.useState)(false);
-  const [showCustomGenericTemplateModal, setShowCustomGenericTemplateModal] = (0, _element.useState)(false);
+  } = _ref2;
+  const [showModal, setShowModal] = (0, _element.useState)(false);
+  const [modalContent, setModalContent] = (0, _element.useState)(modalContentMap.templatesList);
   const [entityForSuggestions, setEntityForSuggestions] = (0, _element.useState)({});
   const [isCreatingTemplate, setIsCreatingTemplate] = (0, _element.useState)(false);
-  const history = (0, _routes.useHistory)();
+  const history = useHistory();
   const {
     saveEntityRecord
   } = (0, _data.useDispatch)(_coreData.store);
@@ -132,77 +158,87 @@ 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 = (0, _i18n.__)('A custom template can be manually applied to any post or page.');
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.DropdownMenu, {
-    className: "edit-site-new-template-dropdown",
+  const {
+    as: Toggle = _components.Button,
+    ...restToggleProps
+  } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {};
+  let modalTitle = (0, _i18n.__)('Add template');
+
+  if (modalContent === modalContentMap.customTemplate) {
+    modalTitle = (0, _i18n.sprintf)( // translators: %s: Name of the post type e.g: "Post".
+    (0, _i18n.__)('Add template: %s'), entityForSuggestions.labels.singular_name);
+  } else if (modalContent === modalContentMap.customGenericTemplate) {
+    modalTitle = (0, _i18n.__)('Create custom template');
+  }
+
+  return (0, _element.createElement)(_element.Fragment, null, isCreatingTemplate && (0, _element.createElement)(_templateActionsLoadingScreen.default, null), (0, _element.createElement)(Toggle, (0, _extends2.default)({}, restToggleProps, {
+    onClick: () => setShowModal(true),
     icon: showIcon ? _icons.plus : null,
-    text: showIcon ? null : postType.labels.add_new,
-    label: postType.labels.add_new_item,
-    popoverProps: {
-      noArrow: false
-    },
-    toggleProps: toggleProps
-  }, () => (0, _element.createElement)(_element.Fragment, null, isCreatingTemplate && (0, _element.createElement)(_templateActionsLoadingScreen.default, null), (0, _element.createElement)("div", {
-    className: "edit-site-new-template-dropdown__menu-groups"
-  }, (0, _element.createElement)(_components.MenuGroup, {
     label: postType.labels.add_new_item
+  }), showIcon ? null : postType.labels.add_new_item), showModal && (0, _element.createElement)(_components.Modal, {
+    title: modalTitle,
+    className: (0, _classnames.default)('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 && (0, _element.createElement)(_components.__experimentalGrid, {
+    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 (0, _element.createElement)(_components.Tooltip, {
+    return (0, _element.createElement)(TemplateListItem, {
       key: slug,
-      position: "top right",
-      text: description,
-      className: "edit-site-new-template-dropdown__menu-item-tooltip"
-    }, (0, _element.createElement)(_components.MenuItem, {
-      icon: icon || TEMPLATE_ICONS[slug] || _icons.post,
-      iconPosition: "left",
+      title: title,
+      description: description,
       onClick: () => onClick ? onClick(template) : createTemplate(template)
-    }, title, (0, _element.createElement)(_components.VisuallyHidden, null, description)));
-  })), (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.Tooltip, {
-    position: "top right",
-    text: customTemplateDescription,
-    className: "edit-site-new-template-dropdown__menu-item-tooltip"
-  }, (0, _element.createElement)(_components.MenuItem, {
-    icon: _icons.layout,
-    iconPosition: "left",
-    onClick: () => setShowCustomGenericTemplateModal(true)
-  }, (0, _i18n.__)('Custom template'), (0, _element.createElement)(_components.VisuallyHidden, null, customTemplateDescription))))))), showCustomTemplateModal && (0, _element.createElement)(_addCustomTemplateModal.default, {
-    onClose: () => setShowCustomTemplateModal(false),
+    });
+  }), (0, _element.createElement)(TemplateListItem, {
+    title: (0, _i18n.__)('Custom template'),
+    description: (0, _i18n.__)('A custom template can be manually applied to any post or page.'),
+    onClick: () => setModalContent(modalContentMap.customGenericTemplate)
+  })), modalContent === modalContentMap.customTemplate && (0, _element.createElement)(_addCustomTemplateModalContent.default, {
     onSelect: createTemplate,
-    entityForSuggestions: entityForSuggestions,
-    isCreatingTemplate: isCreatingTemplate
-  }), showCustomGenericTemplateModal && (0, _element.createElement)(_addCustomGenericTemplateModal.default, {
-    onClose: () => setShowCustomGenericTemplateModal(false),
-    createTemplate: createTemplate,
-    isCreatingTemplate: isCreatingTemplate
-  }));
+    entityForSuggestions: entityForSuggestions
+  }), modalContent === modalContentMap.customGenericTemplate && (0, _element.createElement)(_addCustomGenericTemplateModalContent.default, {
+    onClose: onModalClose,
+    createTemplate: createTemplate
+  })));
 }
 
-function useMissingTemplates(setEntityForSuggestions, setShowCustomTemplateModal) {
+function useMissingTemplates(setEntityForSuggestions, onClick) {
   const existingTemplates = (0, _utils.useExistingTemplates)();
   const defaultTemplateTypes = (0, _utils.useDefaultTemplateTypes)();
-  const existingTemplateSlugs = (existingTemplates || []).map(_ref2 => {
+  const existingTemplateSlugs = (existingTemplates || []).map(_ref3 => {
     let {
       slug
-    } = _ref2;
+    } = _ref3;
     return slug;
   });
   const missingDefaultTemplates = (defaultTemplateTypes || []).filter(template => DEFAULT_TEMPLATE_SLUGS.includes(template.slug) && !existingTemplateSlugs.includes(template.slug));
 
   const onClickMenuItem = _entityForSuggestions => {
-    setShowCustomTemplateModal(true);
+    onClick === null || onClick === void 0 ? void 0 : onClick();
     setEntityForSuggestions(_entityForSuggestions);
   }; // We need to replace existing default template types with
   // the create specific template functionality. The original