@wordpress/edit-site 3.0.15 → 3.0.18

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

@@ -15,10 +15,14 @@ var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
+var _data = require("@wordpress/data");
+
 var _defaultSidebar = _interopRequireDefault(require("./default-sidebar"));
 
 var _globalStyles = require("../global-styles");
 
+var _store = require("../../store");
+
 /**
  * WordPress dependencies
  */
@@ -28,6 +32,9 @@ var _globalStyles = require("../global-styles");
  */
 function GlobalStylesSidebar() {
   const [canReset, onReset] = (0, _globalStyles.useGlobalStylesReset)();
+  const {
+    toggleFeature
+  } = (0, _data.useDispatch)(_store.store);
   return (0, _element.createElement)(_defaultSidebar.default, {
     className: "edit-site-global-styles-sidebar",
     identifier: "edit-site/global-styles",
@@ -45,6 +52,9 @@ function GlobalStylesSidebar() {
       controls: [{
         title: (0, _i18n.__)('Reset to defaults'),
         onClick: onReset
+      }, {
+        title: (0, _i18n.__)('Welcome Guide'),
+        onClick: () => toggleFeature('welcomeGuideStyles')
       }]
     })))
   }, (0, _element.createElement)(_globalStyles.GlobalStylesUI, null));

package/build/components/sidebar/global-styles-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/global-styles-sidebar.js"],"names":["GlobalStylesSidebar","canReset","onReset","styles","moreVertical","disabled","title","onClick"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAIe,SAASA,mBAAT,GAA+B;AAC7C,QAAM,CAAEC,QAAF,EAAYC,OAAZ,IAAwB,yCAA9B;AAEA,SACC,4BAAC,uBAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,UAAU,EAAC,yBAFZ;AAGC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAHT;AAIC,IAAA,IAAI,EAAGC,aAJR;AAKC,IAAA,UAAU,EAAG,cAAI,6BAAJ,CALd;AAMC,IAAA,MAAM,EACL,4BAAC,gBAAD,QACC,4BAAC,qBAAD,QACC,4CAAU,cAAI,QAAJ,CAAV,CADD,EAEC;AAAM,MAAA,SAAS,EAAC;AAAhB,OACG,cAAI,MAAJ,CADH,CAFD,CADD,EAOC,4BAAC,oBAAD,QACC,4BAAC,wBAAD;AACC,MAAA,IAAI,EAAGC,mBADR;AAEC,MAAA,KAAK,EAAG,cAAI,4BAAJ,CAFT;AAGC,MAAA,WAAW,EAAG;AAAEC,QAAAA,QAAQ,EAAE,CAAEJ;AAAd,OAHf;AAIC,MAAA,QAAQ,EAAG,CACV;AACCK,QAAAA,KAAK,EAAE,cAAI,mBAAJ,CADR;AAECC,QAAAA,OAAO,EAAEL;AAFV,OADU;AAJZ,MADD,CAPD;AAPF,KA8BC,4BAAC,4BAAD,OA9BD,CADD;AAkCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, moreVertical } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';\n\nexport default function GlobalStylesSidebar() {\n\tconst [ canReset, onReset ] = useGlobalStylesReset();\n\n\treturn (\n\t\t<DefaultSidebar\n\t\t\tclassName=\"edit-site-global-styles-sidebar\"\n\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\ticon={ styles }\n\t\t\tcloseLabel={ __( 'Close global styles sidebar' ) }\n\t\t\theader={\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<strong>{ __( 'Styles' ) }</strong>\n\t\t\t\t\t\t<span className=\"edit-site-global-styles-sidebar__beta\">\n\t\t\t\t\t\t\t{ __( 'Beta' ) }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'More Global Styles Actions' ) }\n\t\t\t\t\t\t\ttoggleProps={ { disabled: ! canReset } }\n\t\t\t\t\t\t\tcontrols={ [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttitle: __( 'Reset to defaults' ),\n\t\t\t\t\t\t\t\t\tonClick: onReset,\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</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t}\n\t\t>\n\t\t\t<GlobalStylesUI />\n\t\t</DefaultSidebar>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/global-styles-sidebar.js"],"names":["GlobalStylesSidebar","canReset","onReset","toggleFeature","editSiteStore","styles","moreVertical","disabled","title","onClick"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAbA;AACA;AACA;;AAMA;AACA;AACA;AAKe,SAASA,mBAAT,GAA+B;AAC7C,QAAM,CAAEC,QAAF,EAAYC,OAAZ,IAAwB,yCAA9B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAoB,uBAAaC,YAAb,CAA1B;AAEA,SACC,4BAAC,uBAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,UAAU,EAAC,yBAFZ;AAGC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAHT;AAIC,IAAA,IAAI,EAAGC,aAJR;AAKC,IAAA,UAAU,EAAG,cAAI,6BAAJ,CALd;AAMC,IAAA,MAAM,EACL,4BAAC,gBAAD,QACC,4BAAC,qBAAD,QACC,4CAAU,cAAI,QAAJ,CAAV,CADD,EAEC;AAAM,MAAA,SAAS,EAAC;AAAhB,OACG,cAAI,MAAJ,CADH,CAFD,CADD,EAOC,4BAAC,oBAAD,QACC,4BAAC,wBAAD;AACC,MAAA,IAAI,EAAGC,mBADR;AAEC,MAAA,KAAK,EAAG,cAAI,4BAAJ,CAFT;AAGC,MAAA,WAAW,EAAG;AAAEC,QAAAA,QAAQ,EAAE,CAAEN;AAAd,OAHf;AAIC,MAAA,QAAQ,EAAG,CACV;AACCO,QAAAA,KAAK,EAAE,cAAI,mBAAJ,CADR;AAECC,QAAAA,OAAO,EAAEP;AAFV,OADU,EAKV;AACCM,QAAAA,KAAK,EAAE,cAAI,eAAJ,CADR;AAECC,QAAAA,OAAO,EAAE,MACRN,aAAa,CAAE,oBAAF;AAHf,OALU;AAJZ,MADD,CAPD;AAPF,KAmCC,4BAAC,4BAAD,OAnCD,CADD;AAuCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, moreVertical } from '@wordpress/icons';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';\nimport { store as editSiteStore } from '../../store';\n\nexport default function GlobalStylesSidebar() {\n\tconst [ canReset, onReset ] = useGlobalStylesReset();\n\tconst { toggleFeature } = useDispatch( editSiteStore );\n\n\treturn (\n\t\t<DefaultSidebar\n\t\t\tclassName=\"edit-site-global-styles-sidebar\"\n\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\ticon={ styles }\n\t\t\tcloseLabel={ __( 'Close global styles sidebar' ) }\n\t\t\theader={\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<strong>{ __( 'Styles' ) }</strong>\n\t\t\t\t\t\t<span className=\"edit-site-global-styles-sidebar__beta\">\n\t\t\t\t\t\t\t{ __( 'Beta' ) }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'More Global Styles Actions' ) }\n\t\t\t\t\t\t\ttoggleProps={ { disabled: ! canReset } }\n\t\t\t\t\t\t\tcontrols={ [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttitle: __( 'Reset to defaults' ),\n\t\t\t\t\t\t\t\t\tonClick: onReset,\n\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\ttitle: __( 'Welcome Guide' ),\n\t\t\t\t\t\t\t\t\tonClick: () =>\n\t\t\t\t\t\t\t\t\t\ttoggleFeature( 'welcomeGuideStyles' ),\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</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t}\n\t\t>\n\t\t\t<GlobalStylesUI />\n\t\t</DefaultSidebar>\n\t);\n}\n"]}

package/build/components/sidebar/template-card/template-areas.js

@@ -19,8 +19,6 @@ var _i18n = require("@wordpress/i18n");
 
 var _store = require("../../../store");
 
-var _constants = require("../../../store/constants");
-
 /**
  * WordPress dependencies
  */
@@ -37,6 +35,11 @@ function TemplateAreaItem(_ref) {
     selectBlock,
     toggleBlockHighlight
   } = (0, _data.useDispatch)(_blockEditor.store);
+  const templatePartArea = (0, _data.useSelect)(select => {
+    const defaultAreas = select(_editor.store).__experimentalGetDefaultTemplatePartAreas();
+
+    return defaultAreas.find(defaultArea => defaultArea.area === area);
+  }, [area]);
 
   const highlightBlock = () => toggleBlockHighlight(clientId, true);
 
@@ -44,7 +47,7 @@ function TemplateAreaItem(_ref) {
 
   return (0, _element.createElement)(_components.Button, {
     className: "edit-site-template-card__template-areas-item",
-    icon: (0, _editor.getTemplatePartIcon)(area),
+    icon: templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.icon,
     onMouseOver: highlightBlock,
     onMouseLeave: cancelHighlightBlock,
     onFocus: highlightBlock,
@@ -52,7 +55,7 @@ function TemplateAreaItem(_ref) {
     onClick: () => {
       selectBlock(clientId);
     }
-  }, _constants.TEMPLATE_PART_AREA_TO_NAME[area]);
+  }, templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.label);
 }
 
 function TemplateAreas() {

package/build/components/sidebar/template-card/template-areas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/template-card/template-areas.js"],"names":["TemplateAreaItem","area","clientId","selectBlock","toggleBlockHighlight","blockEditorStore","highlightBlock","cancelHighlightBlock","TEMPLATE_PART_AREA_TO_NAME","TemplateAreas","templateParts","select","editSiteStore","getCurrentTemplateTemplateParts","length","map","templatePart","block","slug"],"mappings":";;;;;;;;;AAGA;;AACA;;AAIA;;AACA;;AACA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAUA;AACA;AACA;AAIA,SAASA,gBAAT,OAAgD;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAC/C,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAwC,uBAC7CC,kBAD6C,CAA9C;;AAGA,QAAMC,cAAc,GAAG,MAAMF,oBAAoB,CAAEF,QAAF,EAAY,IAAZ,CAAjD;;AACA,QAAMK,oBAAoB,GAAG,MAAMH,oBAAoB,CAAEF,QAAF,EAAY,KAAZ,CAAvD;;AAEA,SACC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,8CADX;AAEC,IAAA,IAAI,EAAG,iCAAqBD,IAArB,CAFR;AAGC,IAAA,WAAW,EAAGK,cAHf;AAIC,IAAA,YAAY,EAAGC,oBAJhB;AAKC,IAAA,OAAO,EAAGD,cALX;AAMC,IAAA,MAAM,EAAGC,oBANV;AAOC,IAAA,OAAO,EAAG,MAAM;AACfJ,MAAAA,WAAW,CAAED,QAAF,CAAX;AACA;AATF,KAWGM,sCAA4BP,IAA5B,CAXH,CADD;AAeA;;AAEc,SAASQ,aAAT,GAAyB;AACvC,QAAMC,aAAa,GAAG,qBACnBC,MAAF,IAAcA,MAAM,CAAEC,YAAF,CAAN,CAAwBC,+BAAxB,EADO,EAErB,EAFqB,CAAtB;;AAKA,MAAK,CAAEH,aAAa,CAACI,MAArB,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,4BAAC,iCAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,SAAS,EAAC;AAFX,KAIG,cAAI,OAAJ,CAJH,CADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGJ,aAAa,CAACK,GAAd,CAAmB;AAAA,QAAE;AAAEC,MAAAA,YAAF;AAAgBC,MAAAA;AAAhB,KAAF;AAAA,WACpB;AAAI,MAAA,GAAG,EAAGD,YAAY,CAACE;AAAvB,OACC,4BAAC,gBAAD;AACC,MAAA,IAAI,EAAGF,YAAY,CAACf,IADrB;AAEC,MAAA,QAAQ,EAAGgB,KAAK,CAACf;AAFlB,MADD,CADoB;AAAA,GAAnB,CADH,CARD,CADD;AAqBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalHeading as Heading,\n} from '@wordpress/components';\nimport { getTemplatePartIcon } from '@wordpress/editor';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\nimport { TEMPLATE_PART_AREA_TO_NAME } from '../../../store/constants';\n\nfunction TemplateAreaItem( { area, clientId } ) {\n\tconst { selectBlock, toggleBlockHighlight } = useDispatch(\n\t\tblockEditorStore\n\t);\n\tconst highlightBlock = () => toggleBlockHighlight( clientId, true );\n\tconst cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );\n\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"edit-site-template-card__template-areas-item\"\n\t\t\ticon={ getTemplatePartIcon( area ) }\n\t\t\tonMouseOver={ highlightBlock }\n\t\t\tonMouseLeave={ cancelHighlightBlock }\n\t\t\tonFocus={ highlightBlock }\n\t\t\tonBlur={ cancelHighlightBlock }\n\t\t\tonClick={ () => {\n\t\t\t\tselectBlock( clientId );\n\t\t\t} }\n\t\t>\n\t\t\t{ TEMPLATE_PART_AREA_TO_NAME[ area ] }\n\t\t</Button>\n\t);\n}\n\nexport default function TemplateAreas() {\n\tconst templateParts = useSelect(\n\t\t( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),\n\t\t[]\n\t);\n\n\tif ( ! templateParts.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<section className=\"edit-site-template-card__template-areas\">\n\t\t\t<Heading\n\t\t\t\tlevel={ 3 }\n\t\t\t\tclassName=\"edit-site-template-card__template-areas-title\"\n\t\t\t>\n\t\t\t\t{ __( 'Areas' ) }\n\t\t\t</Heading>\n\n\t\t\t<ul className=\"edit-site-template-card__template-areas-list\">\n\t\t\t\t{ templateParts.map( ( { templatePart, block } ) => (\n\t\t\t\t\t<li key={ templatePart.slug }>\n\t\t\t\t\t\t<TemplateAreaItem\n\t\t\t\t\t\t\tarea={ templatePart.area }\n\t\t\t\t\t\t\tclientId={ block.clientId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</section>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/template-card/template-areas.js"],"names":["TemplateAreaItem","area","clientId","selectBlock","toggleBlockHighlight","blockEditorStore","templatePartArea","select","defaultAreas","editorStore","__experimentalGetDefaultTemplatePartAreas","find","defaultArea","highlightBlock","cancelHighlightBlock","icon","label","TemplateAreas","templateParts","editSiteStore","getCurrentTemplateTemplateParts","length","map","templatePart","block","slug"],"mappings":";;;;;;;;;AAGA;;AACA;;AAIA;;AACA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAUA;AACA;AACA;AAGA,SAASA,gBAAT,OAAgD;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAC/C,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAwC,uBAC7CC,kBAD6C,CAA9C;AAGA,QAAMC,gBAAgB,GAAG,qBACtBC,MAAF,IAAc;AACb,UAAMC,YAAY,GAAGD,MAAM,CAC1BE,aAD0B,CAAN,CAEnBC,yCAFmB,EAArB;;AAIA,WAAOF,YAAY,CAACG,IAAb,CACJC,WAAF,IAAmBA,WAAW,CAACX,IAAZ,KAAqBA,IADlC,CAAP;AAGA,GATuB,EAUxB,CAAEA,IAAF,CAVwB,CAAzB;;AAaA,QAAMY,cAAc,GAAG,MAAMT,oBAAoB,CAAEF,QAAF,EAAY,IAAZ,CAAjD;;AACA,QAAMY,oBAAoB,GAAG,MAAMV,oBAAoB,CAAEF,QAAF,EAAY,KAAZ,CAAvD;;AAEA,SACC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,8CADX;AAEC,IAAA,IAAI,EAAGI,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAES,IAF1B;AAGC,IAAA,WAAW,EAAGF,cAHf;AAIC,IAAA,YAAY,EAAGC,oBAJhB;AAKC,IAAA,OAAO,EAAGD,cALX;AAMC,IAAA,MAAM,EAAGC,oBANV;AAOC,IAAA,OAAO,EAAG,MAAM;AACfX,MAAAA,WAAW,CAAED,QAAF,CAAX;AACA;AATF,KAWGI,gBAXH,aAWGA,gBAXH,uBAWGA,gBAAgB,CAAEU,KAXrB,CADD;AAeA;;AAEc,SAASC,aAAT,GAAyB;AACvC,QAAMC,aAAa,GAAG,qBACnBX,MAAF,IAAcA,MAAM,CAAEY,YAAF,CAAN,CAAwBC,+BAAxB,EADO,EAErB,EAFqB,CAAtB;;AAKA,MAAK,CAAEF,aAAa,CAACG,MAArB,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,4BAAC,iCAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,SAAS,EAAC;AAFX,KAIG,cAAI,OAAJ,CAJH,CADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGH,aAAa,CAACI,GAAd,CAAmB;AAAA,QAAE;AAAEC,MAAAA,YAAF;AAAgBC,MAAAA;AAAhB,KAAF;AAAA,WACpB;AAAI,MAAA,GAAG,EAAGD,YAAY,CAACE;AAAvB,OACC,4BAAC,gBAAD;AACC,MAAA,IAAI,EAAGF,YAAY,CAACtB,IADrB;AAEC,MAAA,QAAQ,EAAGuB,KAAK,CAACtB;AAFlB,MADD,CADoB;AAAA,GAAnB,CADH,CARD,CADD;AAqBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalHeading as Heading,\n} from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\n\nfunction TemplateAreaItem( { area, clientId } ) {\n\tconst { selectBlock, toggleBlockHighlight } = useDispatch(\n\t\tblockEditorStore\n\t);\n\tconst templatePartArea = useSelect(\n\t\t( select ) => {\n\t\t\tconst defaultAreas = select(\n\t\t\t\teditorStore\n\t\t\t).__experimentalGetDefaultTemplatePartAreas();\n\n\t\t\treturn defaultAreas.find(\n\t\t\t\t( defaultArea ) => defaultArea.area === area\n\t\t\t);\n\t\t},\n\t\t[ area ]\n\t);\n\n\tconst highlightBlock = () => toggleBlockHighlight( clientId, true );\n\tconst cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );\n\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"edit-site-template-card__template-areas-item\"\n\t\t\ticon={ templatePartArea?.icon }\n\t\t\tonMouseOver={ highlightBlock }\n\t\t\tonMouseLeave={ cancelHighlightBlock }\n\t\t\tonFocus={ highlightBlock }\n\t\t\tonBlur={ cancelHighlightBlock }\n\t\t\tonClick={ () => {\n\t\t\t\tselectBlock( clientId );\n\t\t\t} }\n\t\t>\n\t\t\t{ templatePartArea?.label }\n\t\t</Button>\n\t);\n}\n\nexport default function TemplateAreas() {\n\tconst templateParts = useSelect(\n\t\t( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),\n\t\t[]\n\t);\n\n\tif ( ! templateParts.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<section className=\"edit-site-template-card__template-areas\">\n\t\t\t<Heading\n\t\t\t\tlevel={ 3 }\n\t\t\t\tclassName=\"edit-site-template-card__template-areas-title\"\n\t\t\t>\n\t\t\t\t{ __( 'Areas' ) }\n\t\t\t</Heading>\n\n\t\t\t<ul className=\"edit-site-template-card__template-areas-list\">\n\t\t\t\t{ templateParts.map( ( { templatePart, block } ) => (\n\t\t\t\t\t<li key={ templatePart.slug }>\n\t\t\t\t\t\t<TemplateAreaItem\n\t\t\t\t\t\t\tarea={ templatePart.area }\n\t\t\t\t\t\t\tclientId={ block.clientId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</section>\n\t);\n}\n"]}

package/build/components/template-details/index.js

@@ -9,6 +9,8 @@ exports.default = TemplateDetails;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
@@ -17,8 +19,6 @@ var _data = require("@wordpress/data");
 
 var _editor = require("@wordpress/editor");
 
-var _url = require("@wordpress/url");
-
 var _isTemplateRevertable = _interopRequireDefault(require("../../utils/is-template-revertable"));
 
 var _constants = require("../navigation-sidebar/navigation-panel/constants");
@@ -29,6 +29,8 @@ var _templateAreas = _interopRequireDefault(require("./template-areas"));
 
 var _editTemplateTitle = _interopRequireDefault(require("./edit-template-title"));
 
+var _link = require("../routes/link");
+
 /**
  * WordPress dependencies
  */
@@ -63,6 +65,11 @@ function TemplateDetails(_ref) {
       return area === (template === null || template === void 0 ? void 0 : template.area);
     });
   }, [template]);
+  const browseAllLinkProps = (0, _link.useLink)({
+    // TODO: We should update this to filter by template part's areas as well.
+    postType: template.type,
+    postId: undefined
+  });
 
   if (!template) {
     return null;
@@ -95,14 +102,9 @@ function TemplateDetails(_ref) {
     className: "edit-site-template-details__revert-button",
     info: (0, _i18n.__)('Restore template to default state'),
     onClick: revert
-  }, (0, _i18n.__)('Clear customizations'))), (0, _element.createElement)(_components.Button, {
-    className: "edit-site-template-details__show-all-button",
-    href: (0, _url.addQueryArgs)(window.location.href, {
-      // TODO: We should update this to filter by template part's areas as well.
-      postId: undefined,
-      postType: template.type
-    })
-  }, (0, _i18n.sprintf)(
+  }, (0, _i18n.__)('Clear customizations'))), (0, _element.createElement)(_components.Button, (0, _extends2.default)({
+    className: "edit-site-template-details__show-all-button"
+  }, browseAllLinkProps), (0, _i18n.sprintf)(
   /* translators: the template part's area name ("Headers", "Sidebars") or "templates". */
   (0, _i18n.__)('Browse all %s'), templateSubMenu.title)));
 }

package/build/components/template-details/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/index.js"],"names":["TemplateDetails","template","onClose","title","description","select","editorStore","__experimentalGetTemplateInfo","revertTemplate","editSiteStore","templateSubMenu","type","menu","MENU_TEMPLATES","TEMPLATE_PARTS_SUB_MENUS","find","area","revert","is_custom","window","location","href","postId","undefined","postType"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAKA;;AACA;;AAIA;;AACA;;AACA;;AA1BA;AACA;AACA;;AAcA;AACA;AACA;AAUe,SAASA,eAAT,OAAkD;AAAA,MAAxB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwB;AAChE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyB,qBAC5BC,MAAF,IACCA,MAAM,CAAEC,aAAF,CAAN,CAAsBC,6BAAtB,CAAqDN,QAArD,CAF6B,EAG9B,EAH8B,CAA/B;AAKA,QAAM;AAAEO,IAAAA;AAAF,MAAqB,uBAAaC,YAAb,CAA3B;AAEA,QAAMC,eAAe,GAAG,sBAAS,MAAM;AACtC,QAAK,CAAAT,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEU,IAAV,MAAmB,aAAxB,EAAwC;AACvC,aAAO;AAAER,QAAAA,KAAK,EAAE,cAAI,WAAJ,CAAT;AAA4BS,QAAAA,IAAI,EAAEC;AAAlC,OAAP;AACA;;AAED,WAAOC,oCAAyBC,IAAzB,CACN;AAAA,UAAE;AAAEC,QAAAA;AAAF,OAAF;AAAA,aAAgBA,IAAI,MAAKf,QAAL,aAAKA,QAAL,uBAAKA,QAAQ,CAAEe,IAAf,CAApB;AAAA,KADM,CAAP;AAGA,GARuB,EAQrB,CAAEf,QAAF,CARqB,CAAxB;;AAUA,MAAK,CAAEA,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,QAAMgB,MAAM,GAAG,MAAM;AACpBT,IAAAA,cAAc,CAAEP,QAAF,CAAd;AACAC,IAAAA,OAAO;AACP,GAHD;;AAKA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,QAAQ,CAACiB,SAAT,GACD,4BAAC,0BAAD;AAAmB,IAAA,QAAQ,EAAGjB;AAA9B,IADC,GAGD,4BAAC,iCAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,MAAM,EAAG,GAFV;AAGC,IAAA,SAAS,EAAC;AAHX,KAKGE,KALH,CAJF,EAaGC,WAAW,IACZ,4BAAC,8BAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,SAAS,EAAC,yCAFX;AAGC,IAAA,EAAE,EAAC;AAHJ,KAKGA,WALH,CAdF,CADD,EAyBC,4BAAC,sBAAD;AAAe,IAAA,4BAA4B,EAAGF;AAA9C,IAzBD,EA2BG,mCAAsBD,QAAtB,KACD,4BAAC,qBAAD;AAAW,IAAA,SAAS,EAAC;AAArB,KACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,2CADX;AAEC,IAAA,IAAI,EAAG,cAAI,mCAAJ,CAFR;AAGC,IAAA,OAAO,EAAGgB;AAHX,KAKG,cAAI,sBAAJ,CALH,CADD,CA5BF,EAuCC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,IAAI,EAAG,uBAAcE,MAAM,CAACC,QAAP,CAAgBC,IAA9B,EAAoC;AAC1C;AACAC,MAAAA,MAAM,EAAEC,SAFkC;AAG1CC,MAAAA,QAAQ,EAAEvB,QAAQ,CAACU;AAHuB,KAApC;AAFR,KAQG;AACD;AACA,gBAAI,eAAJ,CAFC,EAGDD,eAAe,CAACP,KAHf,CARH,CAvCD,CADD;AAwDA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tMenuGroup,\n\tMenuItem,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { addQueryArgs } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport isTemplateRevertable from '../../utils/is-template-revertable';\nimport {\n\tMENU_TEMPLATES,\n\tTEMPLATE_PARTS_SUB_MENUS,\n} from '../navigation-sidebar/navigation-panel/constants';\nimport { store as editSiteStore } from '../../store';\nimport TemplateAreas from './template-areas';\nimport EditTemplateTitle from './edit-template-title';\n\nexport default function TemplateDetails( { template, onClose } ) {\n\tconst { title, description } = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).__experimentalGetTemplateInfo( template ),\n\t\t[]\n\t);\n\tconst { revertTemplate } = useDispatch( editSiteStore );\n\n\tconst templateSubMenu = useMemo( () => {\n\t\tif ( template?.type === 'wp_template' ) {\n\t\t\treturn { title: __( 'templates' ), menu: MENU_TEMPLATES };\n\t\t}\n\n\t\treturn TEMPLATE_PARTS_SUB_MENUS.find(\n\t\t\t( { area } ) => area === template?.area\n\t\t);\n\t}, [ template ] );\n\n\tif ( ! template ) {\n\t\treturn null;\n\t}\n\n\tconst revert = () => {\n\t\trevertTemplate( template );\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<div className=\"edit-site-template-details\">\n\t\t\t<div className=\"edit-site-template-details__group\">\n\t\t\t\t{ template.is_custom ? (\n\t\t\t\t\t<EditTemplateTitle template={ template } />\n\t\t\t\t) : (\n\t\t\t\t\t<Heading\n\t\t\t\t\t\tlevel={ 4 }\n\t\t\t\t\t\tweight={ 600 }\n\t\t\t\t\t\tclassName=\"edit-site-template-details__title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Heading>\n\t\t\t\t) }\n\n\t\t\t\t{ description && (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tsize=\"body\"\n\t\t\t\t\t\tclassName=\"edit-site-template-details__description\"\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</div>\n\n\t\t\t<TemplateAreas closeTemplateDetailsDropdown={ onClose } />\n\n\t\t\t{ isTemplateRevertable( template ) && (\n\t\t\t\t<MenuGroup className=\"edit-site-template-details__group edit-site-template-details__revert\">\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tclassName=\"edit-site-template-details__revert-button\"\n\t\t\t\t\t\tinfo={ __( 'Restore template to default state' ) }\n\t\t\t\t\t\tonClick={ revert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-template-details__show-all-button\"\n\t\t\t\thref={ addQueryArgs( window.location.href, {\n\t\t\t\t\t// TODO: We should update this to filter by template part's areas as well.\n\t\t\t\t\tpostId: undefined,\n\t\t\t\t\tpostType: template.type,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t/* translators: the template part's area name (\"Headers\", \"Sidebars\") or \"templates\". */\n\t\t\t\t\t__( 'Browse all %s' ),\n\t\t\t\t\ttemplateSubMenu.title\n\t\t\t\t) }\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/index.js"],"names":["TemplateDetails","template","onClose","title","description","select","editorStore","__experimentalGetTemplateInfo","revertTemplate","editSiteStore","templateSubMenu","type","menu","MENU_TEMPLATES","TEMPLATE_PARTS_SUB_MENUS","find","area","browseAllLinkProps","postType","postId","undefined","revert","is_custom"],"mappings":";;;;;;;;;AAGA;;;;AACA;;AACA;;AAOA;;AACA;;AAKA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AA1BA;AACA;AACA;;AAaA;AACA;AACA;AAWe,SAASA,eAAT,OAAkD;AAAA,MAAxB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwB;AAChE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyB,qBAC5BC,MAAF,IACCA,MAAM,CAAEC,aAAF,CAAN,CAAsBC,6BAAtB,CAAqDN,QAArD,CAF6B,EAG9B,EAH8B,CAA/B;AAKA,QAAM;AAAEO,IAAAA;AAAF,MAAqB,uBAAaC,YAAb,CAA3B;AAEA,QAAMC,eAAe,GAAG,sBAAS,MAAM;AACtC,QAAK,CAAAT,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEU,IAAV,MAAmB,aAAxB,EAAwC;AACvC,aAAO;AAAER,QAAAA,KAAK,EAAE,cAAI,WAAJ,CAAT;AAA4BS,QAAAA,IAAI,EAAEC;AAAlC,OAAP;AACA;;AAED,WAAOC,oCAAyBC,IAAzB,CACN;AAAA,UAAE;AAAEC,QAAAA;AAAF,OAAF;AAAA,aAAgBA,IAAI,MAAKf,QAAL,aAAKA,QAAL,uBAAKA,QAAQ,CAAEe,IAAf,CAApB;AAAA,KADM,CAAP;AAGA,GARuB,EAQrB,CAAEf,QAAF,CARqB,CAAxB;AAUA,QAAMgB,kBAAkB,GAAG,mBAAS;AACnC;AACAC,IAAAA,QAAQ,EAAEjB,QAAQ,CAACU,IAFgB;AAGnCQ,IAAAA,MAAM,EAAEC;AAH2B,GAAT,CAA3B;;AAMA,MAAK,CAAEnB,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,QAAMoB,MAAM,GAAG,MAAM;AACpBb,IAAAA,cAAc,CAAEP,QAAF,CAAd;AACAC,IAAAA,OAAO;AACP,GAHD;;AAKA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,QAAQ,CAACqB,SAAT,GACD,4BAAC,0BAAD;AAAmB,IAAA,QAAQ,EAAGrB;AAA9B,IADC,GAGD,4BAAC,iCAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,MAAM,EAAG,GAFV;AAGC,IAAA,SAAS,EAAC;AAHX,KAKGE,KALH,CAJF,EAaGC,WAAW,IACZ,4BAAC,8BAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,SAAS,EAAC,yCAFX;AAGC,IAAA,EAAE,EAAC;AAHJ,KAKGA,WALH,CAdF,CADD,EAyBC,4BAAC,sBAAD;AAAe,IAAA,4BAA4B,EAAGF;AAA9C,IAzBD,EA2BG,mCAAsBD,QAAtB,KACD,4BAAC,qBAAD;AAAW,IAAA,SAAS,EAAC;AAArB,KACC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,2CADX;AAEC,IAAA,IAAI,EAAG,cAAI,mCAAJ,CAFR;AAGC,IAAA,OAAO,EAAGoB;AAHX,KAKG,cAAI,sBAAJ,CALH,CADD,CA5BF,EAuCC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC;AADX,KAEMJ,kBAFN,GAIG;AACD;AACA,gBAAI,eAAJ,CAFC,EAGDP,eAAe,CAACP,KAHf,CAJH,CAvCD,CADD;AAoDA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tMenuGroup,\n\tMenuItem,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport isTemplateRevertable from '../../utils/is-template-revertable';\nimport {\n\tMENU_TEMPLATES,\n\tTEMPLATE_PARTS_SUB_MENUS,\n} from '../navigation-sidebar/navigation-panel/constants';\nimport { store as editSiteStore } from '../../store';\nimport TemplateAreas from './template-areas';\nimport EditTemplateTitle from './edit-template-title';\nimport { useLink } from '../routes/link';\n\nexport default function TemplateDetails( { template, onClose } ) {\n\tconst { title, description } = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).__experimentalGetTemplateInfo( template ),\n\t\t[]\n\t);\n\tconst { revertTemplate } = useDispatch( editSiteStore );\n\n\tconst templateSubMenu = useMemo( () => {\n\t\tif ( template?.type === 'wp_template' ) {\n\t\t\treturn { title: __( 'templates' ), menu: MENU_TEMPLATES };\n\t\t}\n\n\t\treturn TEMPLATE_PARTS_SUB_MENUS.find(\n\t\t\t( { area } ) => area === template?.area\n\t\t);\n\t}, [ template ] );\n\n\tconst browseAllLinkProps = useLink( {\n\t\t// TODO: We should update this to filter by template part's areas as well.\n\t\tpostType: template.type,\n\t\tpostId: undefined,\n\t} );\n\n\tif ( ! template ) {\n\t\treturn null;\n\t}\n\n\tconst revert = () => {\n\t\trevertTemplate( template );\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<div className=\"edit-site-template-details\">\n\t\t\t<div className=\"edit-site-template-details__group\">\n\t\t\t\t{ template.is_custom ? (\n\t\t\t\t\t<EditTemplateTitle template={ template } />\n\t\t\t\t) : (\n\t\t\t\t\t<Heading\n\t\t\t\t\t\tlevel={ 4 }\n\t\t\t\t\t\tweight={ 600 }\n\t\t\t\t\t\tclassName=\"edit-site-template-details__title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Heading>\n\t\t\t\t) }\n\n\t\t\t\t{ description && (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tsize=\"body\"\n\t\t\t\t\t\tclassName=\"edit-site-template-details__description\"\n\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</div>\n\n\t\t\t<TemplateAreas closeTemplateDetailsDropdown={ onClose } />\n\n\t\t\t{ isTemplateRevertable( template ) && (\n\t\t\t\t<MenuGroup className=\"edit-site-template-details__group edit-site-template-details__revert\">\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tclassName=\"edit-site-template-details__revert-button\"\n\t\t\t\t\t\tinfo={ __( 'Restore template to default state' ) }\n\t\t\t\t\t\tonClick={ revert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-template-details__show-all-button\"\n\t\t\t\t{ ...browseAllLinkProps }\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t/* translators: the template part's area name (\"Headers\", \"Sidebars\") or \"templates\". */\n\t\t\t\t\t__( 'Browse all %s' ),\n\t\t\t\t\ttemplateSubMenu.title\n\t\t\t\t) }\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"]}

package/build/components/template-details/template-areas.js

@@ -9,6 +9,8 @@ exports.default = TemplateAreas;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
@@ -23,10 +25,12 @@ var _icons = require("@wordpress/icons");
 
 var _store = require("../../store");
 
-var _constants = require("../../store/constants");
-
 var _isTemplateRevertable = _interopRequireDefault(require("../../utils/is-template-revertable"));
 
+var _routes = require("../routes");
+
+var _link = require("../routes/link");
+
 /**
  * WordPress dependencies
  */
@@ -43,12 +47,20 @@ function TemplatePartItemMore(_ref) {
     closeTemplateDetailsDropdown
   } = _ref;
   const {
-    pushTemplatePart,
     revertTemplate
   } = (0, _data.useDispatch)(_store.store);
-
-  function editTemplatePart() {
-    pushTemplatePart(templatePart.id);
+  const {
+    params
+  } = (0, _routes.useLocation)();
+  const editLinkProps = (0, _link.useLink)({
+    postId: templatePart.id,
+    postType: templatePart.type
+  }, {
+    fromTemplateId: params.postId
+  });
+
+  function editTemplatePart(event) {
+    editLinkProps.onClick(event);
     onClose();
     closeTemplateDetailsDropdown();
   }
@@ -59,9 +71,9 @@ function TemplatePartItemMore(_ref) {
     closeTemplateDetailsDropdown();
   }
 
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, (0, _extends2.default)({}, editLinkProps, {
     onClick: editTemplatePart
-  }, (0, _i18n.sprintf)(
+  }), (0, _i18n.sprintf)(
   /* translators: %s: template part title */
   (0, _i18n.__)('Edit %s'), (_templatePart$title = templatePart.title) === null || _templatePart$title === void 0 ? void 0 : _templatePart$title.rendered))), (0, _isTemplateRevertable.default)(templatePart) && (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
     info: (0, _i18n.__)('Restore template to default state'),
@@ -79,6 +91,11 @@ function TemplatePartItem(_ref2) {
     selectBlock,
     toggleBlockHighlight
   } = (0, _data.useDispatch)(_blockEditor.store);
+  const templatePartArea = (0, _data.useSelect)(select => {
+    const defaultAreas = select(_editor.store).__experimentalGetDefaultTemplatePartAreas();
+
+    return defaultAreas.find(defaultArea => defaultArea.area === templatePart.area);
+  }, [templatePart.area]);
 
   const highlightBlock = () => toggleBlockHighlight(clientId, true);
 
@@ -89,7 +106,7 @@ function TemplatePartItem(_ref2) {
     className: "edit-site-template-details__template-areas-item"
   }, (0, _element.createElement)(_components.MenuItem, {
     role: "button",
-    icon: (0, _editor.getTemplatePartIcon)(templatePart.area),
+    icon: templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.icon,
     iconPosition: "left",
     onClick: () => {
       selectBlock(clientId);
@@ -98,7 +115,7 @@ function TemplatePartItem(_ref2) {
     onMouseLeave: cancelHighlightBlock,
     onFocus: highlightBlock,
     onBlur: cancelHighlightBlock
-  }, _constants.TEMPLATE_PART_AREA_TO_NAME[templatePart.area]), (0, _element.createElement)(_components.DropdownMenu, {
+  }, templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.label), (0, _element.createElement)(_components.DropdownMenu, {
     icon: _icons.moreVertical,
     label: (0, _i18n.__)('More options'),
     className: "edit-site-template-details__template-areas-item-more"

package/build/components/template-details/template-areas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/template-areas.js"],"names":["TemplatePartItemMore","onClose","templatePart","closeTemplateDetailsDropdown","pushTemplatePart","revertTemplate","editSiteStore","editTemplatePart","id","clearCustomizations","title","rendered","TemplatePartItem","clientId","selectBlock","toggleBlockHighlight","blockEditorStore","highlightBlock","cancelHighlightBlock","area","TEMPLATE_PART_AREA_TO_NAME","moreVertical","TemplateAreas","templateParts","select","getCurrentTemplateTemplateParts","length","map","block","slug"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { getTemplatePartIcon } from '@wordpress/editor';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { moreVertical } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { TEMPLATE_PART_AREA_TO_NAME } from '../../store/constants';\nimport isTemplateRevertable from '../../utils/is-template-revertable';\n\nfunction TemplatePartItemMore( {\n\tonClose,\n\ttemplatePart,\n\tcloseTemplateDetailsDropdown,\n} ) {\n\tconst { pushTemplatePart, revertTemplate } = useDispatch( editSiteStore );\n\n\tfunction editTemplatePart() {\n\t\tpushTemplatePart( templatePart.id );\n\t\tonClose();\n\t\tcloseTemplateDetailsDropdown();\n\t}\n\n\tfunction clearCustomizations() {\n\t\trevertTemplate( templatePart );\n\t\tonClose();\n\t\tcloseTemplateDetailsDropdown();\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<MenuGroup>\n\t\t\t\t<MenuItem onClick={ editTemplatePart }>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %s: template part title */\n\t\t\t\t\t\t__( 'Edit %s' ),\n\t\t\t\t\t\ttemplatePart.title?.rendered\n\t\t\t\t\t) }\n\t\t\t\t</MenuItem>\n\t\t\t</MenuGroup>\n\t\t\t{ isTemplateRevertable( templatePart ) && (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tinfo={ __( 'Restore template to default state' ) }\n\t\t\t\t\t\tonClick={ clearCustomizations }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction TemplatePartItem( {\n\ttemplatePart,\n\tclientId,\n\tcloseTemplateDetailsDropdown,\n} ) {\n\tconst { selectBlock, toggleBlockHighlight } = useDispatch(\n\t\tblockEditorStore\n\t);\n\tconst highlightBlock = () => toggleBlockHighlight( clientId, true );\n\tconst cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );\n\n\treturn (\n\t\t<div\n\t\t\trole=\"menuitem\"\n\t\t\tclassName=\"edit-site-template-details__template-areas-item\"\n\t\t>\n\t\t\t<MenuItem\n\t\t\t\trole=\"button\"\n\t\t\t\ticon={ getTemplatePartIcon( templatePart.area ) }\n\t\t\t\ticonPosition=\"left\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tselectBlock( clientId );\n\t\t\t\t} }\n\t\t\t\tonMouseOver={ highlightBlock }\n\t\t\t\tonMouseLeave={ cancelHighlightBlock }\n\t\t\t\tonFocus={ highlightBlock }\n\t\t\t\tonBlur={ cancelHighlightBlock }\n\t\t\t>\n\t\t\t\t{ TEMPLATE_PART_AREA_TO_NAME[ templatePart.area ] }\n\t\t\t</MenuItem>\n\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ moreVertical }\n\t\t\t\tlabel={ __( 'More options' ) }\n\t\t\t\tclassName=\"edit-site-template-details__template-areas-item-more\"\n\t\t\t>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<TemplatePartItemMore\n\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\ttemplatePart={ templatePart }\n\t\t\t\t\t\tcloseTemplateDetailsDropdown={\n\t\t\t\t\t\t\tcloseTemplateDetailsDropdown\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</div>\n\t);\n}\n\nexport default function TemplateAreas( { closeTemplateDetailsDropdown } ) {\n\tconst templateParts = useSelect(\n\t\t( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),\n\t\t[]\n\t);\n\n\tif ( ! templateParts.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup\n\t\t\tlabel={ __( 'Areas' ) }\n\t\t\tclassName=\"edit-site-template-details__group edit-site-template-details__template-areas\"\n\t\t>\n\t\t\t{ templateParts.map( ( { templatePart, block } ) => (\n\t\t\t\t<TemplatePartItem\n\t\t\t\t\tkey={ templatePart.slug }\n\t\t\t\t\tclientId={ block.clientId }\n\t\t\t\t\ttemplatePart={ templatePart }\n\t\t\t\t\tcloseTemplateDetailsDropdown={\n\t\t\t\t\t\tcloseTemplateDetailsDropdown\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</MenuGroup>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/template-areas.js"],"names":["TemplatePartItemMore","onClose","templatePart","closeTemplateDetailsDropdown","revertTemplate","editSiteStore","params","editLinkProps","postId","id","postType","type","fromTemplateId","editTemplatePart","event","onClick","clearCustomizations","title","rendered","TemplatePartItem","clientId","selectBlock","toggleBlockHighlight","blockEditorStore","templatePartArea","select","defaultAreas","editorStore","__experimentalGetDefaultTemplatePartAreas","find","defaultArea","area","highlightBlock","cancelHighlightBlock","icon","label","moreVertical","TemplateAreas","templateParts","getCurrentTemplateTemplateParts","length","map","block","slug"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { moreVertical } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport isTemplateRevertable from '../../utils/is-template-revertable';\nimport { useLocation } from '../routes';\nimport { useLink } from '../routes/link';\n\nfunction TemplatePartItemMore( {\n\tonClose,\n\ttemplatePart,\n\tcloseTemplateDetailsDropdown,\n} ) {\n\tconst { revertTemplate } = useDispatch( editSiteStore );\n\tconst { params } = useLocation();\n\tconst editLinkProps = useLink(\n\t\t{\n\t\t\tpostId: templatePart.id,\n\t\t\tpostType: templatePart.type,\n\t\t},\n\t\t{\n\t\t\tfromTemplateId: params.postId,\n\t\t}\n\t);\n\n\tfunction editTemplatePart( event ) {\n\t\teditLinkProps.onClick( event );\n\t\tonClose();\n\t\tcloseTemplateDetailsDropdown();\n\t}\n\n\tfunction clearCustomizations() {\n\t\trevertTemplate( templatePart );\n\t\tonClose();\n\t\tcloseTemplateDetailsDropdown();\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<MenuGroup>\n\t\t\t\t<MenuItem { ...editLinkProps } onClick={ editTemplatePart }>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %s: template part title */\n\t\t\t\t\t\t__( 'Edit %s' ),\n\t\t\t\t\t\ttemplatePart.title?.rendered\n\t\t\t\t\t) }\n\t\t\t\t</MenuItem>\n\t\t\t</MenuGroup>\n\t\t\t{ isTemplateRevertable( templatePart ) && (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tinfo={ __( 'Restore template to default state' ) }\n\t\t\t\t\t\tonClick={ clearCustomizations }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction TemplatePartItem( {\n\ttemplatePart,\n\tclientId,\n\tcloseTemplateDetailsDropdown,\n} ) {\n\tconst { selectBlock, toggleBlockHighlight } = useDispatch(\n\t\tblockEditorStore\n\t);\n\tconst templatePartArea = useSelect(\n\t\t( select ) => {\n\t\t\tconst defaultAreas = select(\n\t\t\t\teditorStore\n\t\t\t).__experimentalGetDefaultTemplatePartAreas();\n\n\t\t\treturn defaultAreas.find(\n\t\t\t\t( defaultArea ) => defaultArea.area === templatePart.area\n\t\t\t);\n\t\t},\n\t\t[ templatePart.area ]\n\t);\n\tconst highlightBlock = () => toggleBlockHighlight( clientId, true );\n\tconst cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );\n\n\treturn (\n\t\t<div\n\t\t\trole=\"menuitem\"\n\t\t\tclassName=\"edit-site-template-details__template-areas-item\"\n\t\t>\n\t\t\t<MenuItem\n\t\t\t\trole=\"button\"\n\t\t\t\ticon={ templatePartArea?.icon }\n\t\t\t\ticonPosition=\"left\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tselectBlock( clientId );\n\t\t\t\t} }\n\t\t\t\tonMouseOver={ highlightBlock }\n\t\t\t\tonMouseLeave={ cancelHighlightBlock }\n\t\t\t\tonFocus={ highlightBlock }\n\t\t\t\tonBlur={ cancelHighlightBlock }\n\t\t\t>\n\t\t\t\t{ templatePartArea?.label }\n\t\t\t</MenuItem>\n\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ moreVertical }\n\t\t\t\tlabel={ __( 'More options' ) }\n\t\t\t\tclassName=\"edit-site-template-details__template-areas-item-more\"\n\t\t\t>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<TemplatePartItemMore\n\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\ttemplatePart={ templatePart }\n\t\t\t\t\t\tcloseTemplateDetailsDropdown={\n\t\t\t\t\t\t\tcloseTemplateDetailsDropdown\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</div>\n\t);\n}\n\nexport default function TemplateAreas( { closeTemplateDetailsDropdown } ) {\n\tconst templateParts = useSelect(\n\t\t( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),\n\t\t[]\n\t);\n\n\tif ( ! templateParts.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup\n\t\t\tlabel={ __( 'Areas' ) }\n\t\t\tclassName=\"edit-site-template-details__group edit-site-template-details__template-areas\"\n\t\t>\n\t\t\t{ templateParts.map( ( { templatePart, block } ) => (\n\t\t\t\t<TemplatePartItem\n\t\t\t\t\tkey={ templatePart.slug }\n\t\t\t\t\tclientId={ block.clientId }\n\t\t\t\t\ttemplatePart={ templatePart }\n\t\t\t\t\tcloseTemplateDetailsDropdown={\n\t\t\t\t\t\tcloseTemplateDetailsDropdown\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</MenuGroup>\n\t);\n}\n"]}

package/build/components/template-part-converter/convert-to-template-part.js

@@ -71,20 +71,15 @@ function ConvertToTemplatePart(_ref) {
     }));
     createSuccessNotice((0, _i18n.__)('Template part created.'), {
       type: 'snackbar'
-    });
+    }); // The modal and this component will be unmounted because of `replaceBlocks` above,
+    // so no need to call `closeModal` or `onClose`.
   };
 
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockSettingsMenuControls, null, _ref3 => {
-    let {
-      onClose
-    } = _ref3;
-    return (0, _element.createElement)(_components.MenuItem, {
-      onClick: () => {
-        setIsModalOpen(true);
-        onClose();
-      }
-    }, (0, _i18n.__)('Make template part'));
-  }), isModalOpen && (0, _element.createElement)(_createTemplatePartModal.default, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockSettingsMenuControls, null, () => (0, _element.createElement)(_components.MenuItem, {
+    onClick: () => {
+      setIsModalOpen(true);
+    }
+  }, (0, _i18n.__)('Make template part'))), isModalOpen && (0, _element.createElement)(_createTemplatePartModal.default, {
     closeModal: () => {
       setIsModalOpen(false);
     },

package/build/components/template-part-converter/convert-to-template-part.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/template-part-converter/convert-to-template-part.js"],"names":["ConvertToTemplatePart","clientIds","blocks","isModalOpen","setIsModalOpen","replaceBlocks","blockEditorStore","saveEntityRecord","coreStore","createSuccessNotice","noticesStore","onConvert","title","area","templatePart","slug","content","theme","type","onClose"],"mappings":";;;;;;;;;AAgBA;;AAbA;;AAKA;;AACA;;AAIA;;AACA;;AACA;;AAEA;;AACA;;AAKA;;AAvBA;AACA;AACA;;AAGA;AACA;AACA;;AAaA;AACA;AACA;AAGe,SAASA,qBAAT,OAAwD;AAAA,MAAxB;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GAAwB;AACtE,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAoB,uBAAaC,kBAAb,CAA1B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,uBAAaC,eAAb,CAA7B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,cAAb,CAAhC;;AAEA,QAAMC,SAAS,GAAG,eAA6B;AAAA,QAArB;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAqB;AAC9C,UAAMC,YAAY,GAAG,MAAMP,gBAAgB,CAC1C,UAD0C,EAE1C,kBAF0C,EAG1C;AACCQ,MAAAA,IAAI,EAAE,uBAAWH,KAAX,CADP;AAECA,MAAAA,KAFD;AAGCI,MAAAA,OAAO,EAAE,uBAAWd,MAAX,CAHV;AAICW,MAAAA;AAJD,KAH0C,CAA3C;AAUAR,IAAAA,aAAa,CACZJ,SADY,EAEZ,yBAAa,oBAAb,EAAmC;AAClCc,MAAAA,IAAI,EAAED,YAAY,CAACC,IADe;AAElCE,MAAAA,KAAK,EAAEH,YAAY,CAACG;AAFc,KAAnC,CAFY,CAAb;AAOAR,IAAAA,mBAAmB,CAAE,cAAI,wBAAJ,CAAF,EAAkC;AACpDS,MAAAA,IAAI,EAAE;AAD8C,KAAlC,CAAnB;AAGA,GArBD;;AAuBA,SACC,qDACC,4BAAC,sCAAD,QACG;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WACD,4BAAC,oBAAD;AACC,MAAA,OAAO,EAAG,MAAM;AACff,QAAAA,cAAc,CAAE,IAAF,CAAd;AACAe,QAAAA,OAAO;AACP;AAJF,OAMG,cAAI,oBAAJ,CANH,CADC;AAAA,GADH,CADD,EAaGhB,WAAW,IACZ,4BAAC,gCAAD;AACC,IAAA,UAAU,EAAG,MAAM;AAClBC,MAAAA,cAAc,CAAE,KAAF,CAAd;AACA,KAHF;AAIC,IAAA,QAAQ,EAAGO;AAJZ,IAdF,CADD;AAwBA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport {\n\tBlockSettingsMenuControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { MenuItem } from '@wordpress/components';\nimport { createBlock, serialize } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport CreateTemplatePartModal from '../create-template-part-modal';\n\nexport default function ConvertToTemplatePart( { clientIds, blocks } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\n\tconst onConvert = async ( { title, area } ) => {\n\t\tconst templatePart = await saveEntityRecord(\n\t\t\t'postType',\n\t\t\t'wp_template_part',\n\t\t\t{\n\t\t\t\tslug: kebabCase( title ),\n\t\t\t\ttitle,\n\t\t\t\tcontent: serialize( blocks ),\n\t\t\t\tarea,\n\t\t\t}\n\t\t);\n\t\treplaceBlocks(\n\t\t\tclientIds,\n\t\t\tcreateBlock( 'core/template-part', {\n\t\t\t\tslug: templatePart.slug,\n\t\t\t\ttheme: templatePart.theme,\n\t\t\t} )\n\t\t);\n\t\tcreateSuccessNotice( __( 'Template part created.' ), {\n\t\t\ttype: 'snackbar',\n\t\t} );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<BlockSettingsMenuControls>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsModalOpen( true );\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{ __( 'Make template part' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) }\n\t\t\t</BlockSettingsMenuControls>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<CreateTemplatePartModal\n\t\t\t\t\tcloseModal={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonCreate={ onConvert }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/template-part-converter/convert-to-template-part.js"],"names":["ConvertToTemplatePart","clientIds","blocks","isModalOpen","setIsModalOpen","replaceBlocks","blockEditorStore","saveEntityRecord","coreStore","createSuccessNotice","noticesStore","onConvert","title","area","templatePart","slug","content","theme","type"],"mappings":";;;;;;;;;AAgBA;;AAbA;;AAKA;;AACA;;AAIA;;AACA;;AACA;;AAEA;;AACA;;AAKA;;AAvBA;AACA;AACA;;AAGA;AACA;AACA;;AAaA;AACA;AACA;AAGe,SAASA,qBAAT,OAAwD;AAAA,MAAxB;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GAAwB;AACtE,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAoB,uBAAaC,kBAAb,CAA1B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,uBAAaC,eAAb,CAA7B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,cAAb,CAAhC;;AAEA,QAAMC,SAAS,GAAG,eAA6B;AAAA,QAArB;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAqB;AAC9C,UAAMC,YAAY,GAAG,MAAMP,gBAAgB,CAC1C,UAD0C,EAE1C,kBAF0C,EAG1C;AACCQ,MAAAA,IAAI,EAAE,uBAAWH,KAAX,CADP;AAECA,MAAAA,KAFD;AAGCI,MAAAA,OAAO,EAAE,uBAAWd,MAAX,CAHV;AAICW,MAAAA;AAJD,KAH0C,CAA3C;AAUAR,IAAAA,aAAa,CACZJ,SADY,EAEZ,yBAAa,oBAAb,EAAmC;AAClCc,MAAAA,IAAI,EAAED,YAAY,CAACC,IADe;AAElCE,MAAAA,KAAK,EAAEH,YAAY,CAACG;AAFc,KAAnC,CAFY,CAAb;AAOAR,IAAAA,mBAAmB,CAAE,cAAI,wBAAJ,CAAF,EAAkC;AACpDS,MAAAA,IAAI,EAAE;AAD8C,KAAlC,CAAnB,CAlB8C,CAsB9C;AACA;AACA,GAxBD;;AA0BA,SACC,qDACC,4BAAC,sCAAD,QACG,MACD,4BAAC,oBAAD;AACC,IAAA,OAAO,EAAG,MAAM;AACfd,MAAAA,cAAc,CAAE,IAAF,CAAd;AACA;AAHF,KAKG,cAAI,oBAAJ,CALH,CAFF,CADD,EAYGD,WAAW,IACZ,4BAAC,gCAAD;AACC,IAAA,UAAU,EAAG,MAAM;AAClBC,MAAAA,cAAc,CAAE,KAAF,CAAd;AACA,KAHF;AAIC,IAAA,QAAQ,EAAGO;AAJZ,IAbF,CADD;AAuBA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport {\n\tBlockSettingsMenuControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { MenuItem } from '@wordpress/components';\nimport { createBlock, serialize } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport CreateTemplatePartModal from '../create-template-part-modal';\n\nexport default function ConvertToTemplatePart( { clientIds, blocks } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\n\tconst onConvert = async ( { title, area } ) => {\n\t\tconst templatePart = await saveEntityRecord(\n\t\t\t'postType',\n\t\t\t'wp_template_part',\n\t\t\t{\n\t\t\t\tslug: kebabCase( title ),\n\t\t\t\ttitle,\n\t\t\t\tcontent: serialize( blocks ),\n\t\t\t\tarea,\n\t\t\t}\n\t\t);\n\t\treplaceBlocks(\n\t\t\tclientIds,\n\t\t\tcreateBlock( 'core/template-part', {\n\t\t\t\tslug: templatePart.slug,\n\t\t\t\ttheme: templatePart.theme,\n\t\t\t} )\n\t\t);\n\t\tcreateSuccessNotice( __( 'Template part created.' ), {\n\t\t\ttype: 'snackbar',\n\t\t} );\n\n\t\t// The modal and this component will be unmounted because of `replaceBlocks` above,\n\t\t// so no need to call `closeModal` or `onClose`.\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<BlockSettingsMenuControls>\n\t\t\t\t{ () => (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsModalOpen( true );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Make template part' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) }\n\t\t\t</BlockSettingsMenuControls>\n\t\t\t{ isModalOpen && (\n\t\t\t\t<CreateTemplatePartModal\n\t\t\t\t\tcloseModal={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonCreate={ onConvert }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build/components/url-query-controller/index.js

@@ -9,7 +9,7 @@ var _element = require("@wordpress/element");
 
 var _data = require("@wordpress/data");
 
-var _url = require("@wordpress/url");
+var _routes = require("../routes");
 
 var _store = require("../../store");
 
@@ -26,18 +26,22 @@ function URLQueryController() {
     setTemplatePart,
     showHomepage,
     setPage
-  } = (0, _data.useDispatch)(_store.store); // Set correct entity on load.
-
-  (0, _element.useEffect)(() => {
-    const url = window.location.href;
-    const postId = (0, _url.getQueryArg)(url, 'postId');
-
-    if (!postId) {
-      showHomepage();
-      return;
+  } = (0, _data.useDispatch)(_store.store);
+  const history = (0, _routes.useHistory)();
+  const {
+    params: {
+      postId,
+      postType
     }
+  } = (0, _routes.useLocation)();
+  const {
+    getPage,
+    getEditedPostId,
+    getEditedPostType
+  } = (0, _data.useSelect)(_store.store); // Set correct entity on page navigation.
 
-    const postType = (0, _url.getQueryArg)(url, 'postType');
+  (0, _element.useEffect)(() => {
+    let isMounted = true;
 
     if ('page' === postType || 'post' === postType) {
       setPage({
@@ -51,48 +55,35 @@ function URLQueryController() {
     } else if ('wp_template_part' === postType) {
       setTemplatePart(postId);
     } else {
-      showHomepage();
-    }
-  }, []); // Update page URL when context changes.
+      showHomepage().then(() => {
+        var _page$context, _page$context2;
 
-  const pageContext = useCurrentPageContext();
-  (0, _element.useEffect)(() => {
-    const newUrl = pageContext ? (0, _url.addQueryArgs)(window.location.href, pageContext) : (0, _url.removeQueryArgs)(window.location.href, 'postType', 'postId');
-    window.history.replaceState({}, '', newUrl);
-  }, [pageContext]);
-  return null;
-}
-
-function useCurrentPageContext() {
-  return (0, _data.useSelect)(select => {
-    var _page$context, _page$context2;
-
-    const {
-      getEditedPostType,
-      getEditedPostId,
-      getPage
-    } = select(_store.store);
-    const page = getPage();
-
-    let _postId = getEditedPostId(),
-        _postType = getEditedPostType(); // This doesn't seem right to me,
-    // we shouldn't be using the "page" and the "template" in the same way.
-    // This need to be investigated.
-
-
-    if (page !== null && page !== void 0 && (_page$context = page.context) !== null && _page$context !== void 0 && _page$context.postId && page !== null && page !== void 0 && (_page$context2 = page.context) !== null && _page$context2 !== void 0 && _page$context2.postType) {
-      _postId = page.context.postId;
-      _postType = page.context.postType;
-    }
+        if (!isMounted) {
+          return;
+        }
 
-    if (_postId && _postType) {
-      return {
-        postId: _postId,
-        postType: _postType
-      };
+        const page = getPage();
+        const editedPostId = getEditedPostId();
+        const editedPostType = getEditedPostType();
+
+        if (page !== null && page !== void 0 && (_page$context = page.context) !== null && _page$context !== void 0 && _page$context.postId && page !== null && page !== void 0 && (_page$context2 = page.context) !== null && _page$context2 !== void 0 && _page$context2.postType) {
+          history.replace({
+            postId: page.context.postId,
+            postType: page.context.postType
+          });
+        } else if (editedPostId && editedPostType) {
+          history.replace({
+            postId: editedPostId,
+            postType: editedPostType
+          });
+        }
+      });
     }
 
-    return null;
-  }, []);
+    return () => {
+      isMounted = false;
+    };
+  }, [postId, postType]);
+  return null;
 }
 //# sourceMappingURL=index.js.map

package/build/components/url-query-controller/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/url-query-controller/index.js"],"names":["URLQueryController","setTemplate","setTemplatePart","showHomepage","setPage","editSiteStore","url","window","location","href","postId","postType","context","pageContext","useCurrentPageContext","newUrl","history","replaceState","select","getEditedPostType","getEditedPostId","getPage","page","_postId","_postType"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AAKA;;AAVA;AACA;AACA;;AAKA;AACA;AACA;AAGe,SAASA,kBAAT,GAA8B;AAC5C,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,eAAf;AAAgCC,IAAAA,YAAhC;AAA8CC,IAAAA;AAA9C,MAA0D,uBAC/DC,YAD+D,CAAhE,CAD4C,CAK5C;;AACA,0BAAW,MAAM;AAChB,UAAMC,GAAG,GAAGC,MAAM,CAACC,QAAP,CAAgBC,IAA5B;AACA,UAAMC,MAAM,GAAG,sBAAaJ,GAAb,EAAkB,QAAlB,CAAf;;AAEA,QAAK,CAAEI,MAAP,EAAgB;AACfP,MAAAA,YAAY;AACZ;AACA;;AAED,UAAMQ,QAAQ,GAAG,sBAAaL,GAAb,EAAkB,UAAlB,CAAjB;;AACA,QAAK,WAAWK,QAAX,IAAuB,WAAWA,QAAvC,EAAkD;AACjDP,MAAAA,OAAO,CAAE;AAAEQ,QAAAA,OAAO,EAAE;AAAED,UAAAA,QAAF;AAAYD,UAAAA;AAAZ;AAAX,OAAF,CAAP,CADiD,CACH;AAC9C,KAFD,MAEO,IAAK,kBAAkBC,QAAvB,EAAkC;AACxCV,MAAAA,WAAW,CAAES,MAAF,CAAX;AACA,KAFM,MAEA,IAAK,uBAAuBC,QAA5B,EAAuC;AAC7CT,MAAAA,eAAe,CAAEQ,MAAF,CAAf;AACA,KAFM,MAEA;AACNP,MAAAA,YAAY;AACZ;AACD,GAnBD,EAmBG,EAnBH,EAN4C,CA2B5C;;AACA,QAAMU,WAAW,GAAGC,qBAAqB,EAAzC;AACA,0BAAW,MAAM;AAChB,UAAMC,MAAM,GAAGF,WAAW,GACvB,uBAAcN,MAAM,CAACC,QAAP,CAAgBC,IAA9B,EAAoCI,WAApC,CADuB,GAEvB,0BAAiBN,MAAM,CAACC,QAAP,CAAgBC,IAAjC,EAAuC,UAAvC,EAAmD,QAAnD,CAFH;AAIAF,IAAAA,MAAM,CAACS,OAAP,CAAeC,YAAf,CAA6B,EAA7B,EAAiC,EAAjC,EAAqCF,MAArC;AACA,GAND,EAMG,CAAEF,WAAF,CANH;AAQA,SAAO,IAAP;AACA;;AAED,SAASC,qBAAT,GAAiC;AAChC,SAAO,qBAAaI,MAAF,IAAc;AAAA;;AAC/B,UAAM;AAAEC,MAAAA,iBAAF;AAAqBC,MAAAA,eAArB;AAAsCC,MAAAA;AAAtC,QAAkDH,MAAM,CAC7Db,YAD6D,CAA9D;AAIA,UAAMiB,IAAI,GAAGD,OAAO,EAApB;;AACA,QAAIE,OAAO,GAAGH,eAAe,EAA7B;AAAA,QACCI,SAAS,GAAGL,iBAAiB,EAD9B,CAN+B,CAQ/B;AACA;AACA;;;AACA,QAAKG,IAAI,SAAJ,IAAAA,IAAI,WAAJ,qBAAAA,IAAI,CAAEV,OAAN,wDAAeF,MAAf,IAAyBY,IAAzB,aAAyBA,IAAzB,iCAAyBA,IAAI,CAAEV,OAA/B,2CAAyB,eAAeD,QAA7C,EAAwD;AACvDY,MAAAA,OAAO,GAAGD,IAAI,CAACV,OAAL,CAAaF,MAAvB;AACAc,MAAAA,SAAS,GAAGF,IAAI,CAACV,OAAL,CAAaD,QAAzB;AACA;;AAED,QAAKY,OAAO,IAAIC,SAAhB,EAA4B;AAC3B,aAAO;AAAEd,QAAAA,MAAM,EAAEa,OAAV;AAAmBZ,QAAAA,QAAQ,EAAEa;AAA7B,OAAP;AACA;;AAED,WAAO,IAAP;AACA,GArBM,EAqBJ,EArBI,CAAP;AAsBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { getQueryArg, addQueryArgs, removeQueryArgs } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\n\nexport default function URLQueryController() {\n\tconst { setTemplate, setTemplatePart, showHomepage, setPage } = useDispatch(\n\t\teditSiteStore\n\t);\n\n\t// Set correct entity on load.\n\tuseEffect( () => {\n\t\tconst url = window.location.href;\n\t\tconst postId = getQueryArg( url, 'postId' );\n\n\t\tif ( ! postId ) {\n\t\t\tshowHomepage();\n\t\t\treturn;\n\t\t}\n\n\t\tconst postType = getQueryArg( url, 'postType' );\n\t\tif ( 'page' === postType || 'post' === postType ) {\n\t\t\tsetPage( { context: { postType, postId } } ); // Resolves correct template based on ID.\n\t\t} else if ( 'wp_template' === postType ) {\n\t\t\tsetTemplate( postId );\n\t\t} else if ( 'wp_template_part' === postType ) {\n\t\t\tsetTemplatePart( postId );\n\t\t} else {\n\t\t\tshowHomepage();\n\t\t}\n\t}, [] );\n\n\t// Update page URL when context changes.\n\tconst pageContext = useCurrentPageContext();\n\tuseEffect( () => {\n\t\tconst newUrl = pageContext\n\t\t\t? addQueryArgs( window.location.href, pageContext )\n\t\t\t: removeQueryArgs( window.location.href, 'postType', 'postId' );\n\n\t\twindow.history.replaceState( {}, '', newUrl );\n\t}, [ pageContext ] );\n\n\treturn null;\n}\n\nfunction useCurrentPageContext() {\n\treturn useSelect( ( select ) => {\n\t\tconst { getEditedPostType, getEditedPostId, getPage } = select(\n\t\t\teditSiteStore\n\t\t);\n\n\t\tconst page = getPage();\n\t\tlet _postId = getEditedPostId(),\n\t\t\t_postType = getEditedPostType();\n\t\t// This doesn't seem right to me,\n\t\t// we shouldn't be using the \"page\" and the \"template\" in the same way.\n\t\t// This need to be investigated.\n\t\tif ( page?.context?.postId && page?.context?.postType ) {\n\t\t\t_postId = page.context.postId;\n\t\t\t_postType = page.context.postType;\n\t\t}\n\n\t\tif ( _postId && _postType ) {\n\t\t\treturn { postId: _postId, postType: _postType };\n\t\t}\n\n\t\treturn null;\n\t}, [] );\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/url-query-controller/index.js"],"names":["URLQueryController","setTemplate","setTemplatePart","showHomepage","setPage","editSiteStore","history","params","postId","postType","getPage","getEditedPostId","getEditedPostType","isMounted","context","then","page","editedPostId","editedPostType","replace"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIe,SAASA,kBAAT,GAA8B;AAC5C,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,eAAf;AAAgCC,IAAAA,YAAhC;AAA8CC,IAAAA;AAA9C,MAA0D,uBAC/DC,YAD+D,CAAhE;AAGA,QAAMC,OAAO,GAAG,yBAAhB;AACA,QAAM;AACLC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV;AADH,MAEF,0BAFJ;AAGA,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,eAAX;AAA4BC,IAAAA;AAA5B,MAAkD,qBACvDP,YADuD,CAAxD,CAR4C,CAY5C;;AACA,0BAAW,MAAM;AAChB,QAAIQ,SAAS,GAAG,IAAhB;;AAEA,QAAK,WAAWJ,QAAX,IAAuB,WAAWA,QAAvC,EAAkD;AACjDL,MAAAA,OAAO,CAAE;AAAEU,QAAAA,OAAO,EAAE;AAAEL,UAAAA,QAAF;AAAYD,UAAAA;AAAZ;AAAX,OAAF,CAAP,CADiD,CACH;AAC9C,KAFD,MAEO,IAAK,kBAAkBC,QAAvB,EAAkC;AACxCR,MAAAA,WAAW,CAAEO,MAAF,CAAX;AACA,KAFM,MAEA,IAAK,uBAAuBC,QAA5B,EAAuC;AAC7CP,MAAAA,eAAe,CAAEM,MAAF,CAAf;AACA,KAFM,MAEA;AACNL,MAAAA,YAAY,GAAGY,IAAf,CAAqB,MAAM;AAAA;;AAC1B,YAAK,CAAEF,SAAP,EAAmB;AAClB;AACA;;AAED,cAAMG,IAAI,GAAGN,OAAO,EAApB;AACA,cAAMO,YAAY,GAAGN,eAAe,EAApC;AACA,cAAMO,cAAc,GAAGN,iBAAiB,EAAxC;;AAEA,YAAKI,IAAI,SAAJ,IAAAA,IAAI,WAAJ,qBAAAA,IAAI,CAAEF,OAAN,wDAAeN,MAAf,IAAyBQ,IAAzB,aAAyBA,IAAzB,iCAAyBA,IAAI,CAAEF,OAA/B,2CAAyB,eAAeL,QAA7C,EAAwD;AACvDH,UAAAA,OAAO,CAACa,OAAR,CAAiB;AAChBX,YAAAA,MAAM,EAAEQ,IAAI,CAACF,OAAL,CAAaN,MADL;AAEhBC,YAAAA,QAAQ,EAAEO,IAAI,CAACF,OAAL,CAAaL;AAFP,WAAjB;AAIA,SALD,MAKO,IAAKQ,YAAY,IAAIC,cAArB,EAAsC;AAC5CZ,UAAAA,OAAO,CAACa,OAAR,CAAiB;AAChBX,YAAAA,MAAM,EAAES,YADQ;AAEhBR,YAAAA,QAAQ,EAAES;AAFM,WAAjB;AAIA;AACD,OApBD;AAqBA;;AAED,WAAO,MAAM;AACZL,MAAAA,SAAS,GAAG,KAAZ;AACA,KAFD;AAGA,GApCD,EAoCG,CAAEL,MAAF,EAAUC,QAAV,CApCH;AAsCA,SAAO,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useLocation, useHistory } from '../routes';\nimport { store as editSiteStore } from '../../store';\n\nexport default function URLQueryController() {\n\tconst { setTemplate, setTemplatePart, showHomepage, setPage } = useDispatch(\n\t\teditSiteStore\n\t);\n\tconst history = useHistory();\n\tconst {\n\t\tparams: { postId, postType },\n\t} = useLocation();\n\tconst { getPage, getEditedPostId, getEditedPostType } = useSelect(\n\t\teditSiteStore\n\t);\n\n\t// Set correct entity on page navigation.\n\tuseEffect( () => {\n\t\tlet isMounted = true;\n\n\t\tif ( 'page' === postType || 'post' === postType ) {\n\t\t\tsetPage( { context: { postType, postId } } ); // Resolves correct template based on ID.\n\t\t} else if ( 'wp_template' === postType ) {\n\t\t\tsetTemplate( postId );\n\t\t} else if ( 'wp_template_part' === postType ) {\n\t\t\tsetTemplatePart( postId );\n\t\t} else {\n\t\t\tshowHomepage().then( () => {\n\t\t\t\tif ( ! isMounted ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst page = getPage();\n\t\t\t\tconst editedPostId = getEditedPostId();\n\t\t\t\tconst editedPostType = getEditedPostType();\n\n\t\t\t\tif ( page?.context?.postId && page?.context?.postType ) {\n\t\t\t\t\thistory.replace( {\n\t\t\t\t\t\tpostId: page.context.postId,\n\t\t\t\t\t\tpostType: page.context.postType,\n\t\t\t\t\t} );\n\t\t\t\t} else if ( editedPostId && editedPostType ) {\n\t\t\t\t\thistory.replace( {\n\t\t\t\t\t\tpostId: editedPostId,\n\t\t\t\t\t\tpostType: editedPostType,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tisMounted = false;\n\t\t};\n\t}, [ postId, postType ] );\n\n\treturn null;\n}\n"]}

package/build/components/welcome-guide/editor.js

@@ -30,6 +30,12 @@ function WelcomeGuideEditor() {
   const {
     toggleFeature
   } = (0, _data.useDispatch)(_store.store);
+  const isActive = (0, _data.useSelect)(select => select(_store.store).isFeatureActive('welcomeGuide'), []);
+
+  if (!isActive) {
+    return null;
+  }
+
   return (0, _element.createElement)(_components.Guide, {
     className: "edit-site-welcome-guide",
     contentLabel: (0, _i18n.__)('Welcome to the site editor'),

package/build/components/welcome-guide/editor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/welcome-guide/editor.js"],"names":["WelcomeGuideEditor","toggleFeature","editSiteStore","image","content","StylesIconImage"],"mappings":";;;;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAMA;;AACA;;AAZA;AACA;AACA;;AAMA;AACA;AACA;AAIe,SAASA,kBAAT,GAA8B;AAC5C,QAAM;AAAEC,IAAAA;AAAF,MAAoB,uBAAaC,YAAb,CAA1B;AAEA,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAC,yBADX;AAEC,IAAA,YAAY,EAAG,cAAI,4BAAJ,CAFhB;AAGC,IAAA,gBAAgB,EAAG,cAAI,aAAJ,CAHpB;AAIC,IAAA,QAAQ,EAAG,MAAMD,aAAa,CAAE,cAAF,CAJ/B;AAKC,IAAA,KAAK,EAAG,CACP;AACCE,MAAAA,KAAK,EACJ,4BAAC,cAAD;AACC,QAAA,cAAc,EAAC,0DADhB;AAEC,QAAA,WAAW,EAAC;AAFb,QAFF;AAOCC,MAAAA,OAAO,EACN,qDACC;AAAI,QAAA,SAAS,EAAC;AAAd,SACG,cAAI,gBAAJ,CADH,CADD,EAIC;AAAG,QAAA,SAAS,EAAC;AAAb,SACG,cACD,2FADC,CADH,CAJD,EASC;AAAG,QAAA,SAAS,EAAC;AAAb,SACG,uCACD,cACC,2GADD,CADC,EAID;AACCC,QAAAA,eAAe,EACd;AACC,UAAA,GAAG,EAAG,cAAI,QAAJ,CADP;AAEC,UAAA,GAAG,EAAC;AAFL;AAFF,OAJC,CADH,CATD;AARF,KADO;AALT,IADD;AA6CA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { Guide } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport WelcomeGuideImage from './image';\nimport { store as editSiteStore } from '../../store';\n\nexport default function WelcomeGuideEditor() {\n\tconst { toggleFeature } = useDispatch( editSiteStore );\n\n\treturn (\n\t\t<Guide\n\t\t\tclassName=\"edit-site-welcome-guide\"\n\t\t\tcontentLabel={ __( 'Welcome to the site editor' ) }\n\t\t\tfinishButtonText={ __( 'Get Started' ) }\n\t\t\tonFinish={ () => toggleFeature( 'welcomeGuide' ) }\n\t\t\tpages={ [\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/edit-your-site.svg?1\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/edit-your-site.gif?1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"edit-site-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ __( 'Edit your site' ) }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"edit-site-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Design everything on your site — from the header right down to the footer — using blocks.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p className=\"edit-site-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t'Click <StylesIconImage /> to start designing your blocks, and choose your typography, layout, and colors.'\n\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\tStylesIconImage: (\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\talt={ __( 'styles' ) }\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' fill='%231E1E1E'/%3E%3C/svg%3E%0A\"\n\t\t\t\t\t\t\t\t\t\t\t/>\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) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t] }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/welcome-guide/editor.js"],"names":["WelcomeGuideEditor","toggleFeature","editSiteStore","isActive","select","isFeatureActive","image","content","StylesIconImage"],"mappings":";;;;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAMA;;AACA;;AAZA;AACA;AACA;;AAMA;AACA;AACA;AAIe,SAASA,kBAAT,GAA8B;AAC5C,QAAM;AAAEC,IAAAA;AAAF,MAAoB,uBAAaC,YAAb,CAA1B;AAEA,QAAMC,QAAQ,GAAG,qBACdC,MAAF,IAAcA,MAAM,CAAEF,YAAF,CAAN,CAAwBG,eAAxB,CAAyC,cAAzC,CADE,EAEhB,EAFgB,CAAjB;;AAKA,MAAK,CAAEF,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAC,yBADX;AAEC,IAAA,YAAY,EAAG,cAAI,4BAAJ,CAFhB;AAGC,IAAA,gBAAgB,EAAG,cAAI,aAAJ,CAHpB;AAIC,IAAA,QAAQ,EAAG,MAAMF,aAAa,CAAE,cAAF,CAJ/B;AAKC,IAAA,KAAK,EAAG,CACP;AACCK,MAAAA,KAAK,EACJ,4BAAC,cAAD;AACC,QAAA,cAAc,EAAC,0DADhB;AAEC,QAAA,WAAW,EAAC;AAFb,QAFF;AAOCC,MAAAA,OAAO,EACN,qDACC;AAAI,QAAA,SAAS,EAAC;AAAd,SACG,cAAI,gBAAJ,CADH,CADD,EAIC;AAAG,QAAA,SAAS,EAAC;AAAb,SACG,cACD,2FADC,CADH,CAJD,EASC;AAAG,QAAA,SAAS,EAAC;AAAb,SACG,uCACD,cACC,2GADD,CADC,EAID;AACCC,QAAAA,eAAe,EACd;AACC,UAAA,GAAG,EAAG,cAAI,QAAJ,CADP;AAEC,UAAA,GAAG,EAAC;AAFL;AAFF,OAJC,CADH,CATD;AARF,KADO;AALT,IADD;AA6CA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { Guide } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport WelcomeGuideImage from './image';\nimport { store as editSiteStore } from '../../store';\n\nexport default function WelcomeGuideEditor() {\n\tconst { toggleFeature } = useDispatch( editSiteStore );\n\n\tconst isActive = useSelect(\n\t\t( select ) => select( editSiteStore ).isFeatureActive( 'welcomeGuide' ),\n\t\t[]\n\t);\n\n\tif ( ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Guide\n\t\t\tclassName=\"edit-site-welcome-guide\"\n\t\t\tcontentLabel={ __( 'Welcome to the site editor' ) }\n\t\t\tfinishButtonText={ __( 'Get Started' ) }\n\t\t\tonFinish={ () => toggleFeature( 'welcomeGuide' ) }\n\t\t\tpages={ [\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/edit-your-site.svg?1\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/edit-your-site.gif?1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"edit-site-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ __( 'Edit your site' ) }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"edit-site-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Design everything on your site — from the header right down to the footer — using blocks.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p className=\"edit-site-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t'Click <StylesIconImage /> to start designing your blocks, and choose your typography, layout, and colors.'\n\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\tStylesIconImage: (\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\talt={ __( 'styles' ) }\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' fill='%231E1E1E'/%3E%3C/svg%3E%0A\"\n\t\t\t\t\t\t\t\t\t\t\t/>\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) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t] }\n\t\t/>\n\t);\n}\n"]}

package/build/components/welcome-guide/index.js

@@ -9,41 +9,14 @@ exports.default = WelcomeGuide;
 
 var _element = require("@wordpress/element");
 
-var _data = require("@wordpress/data");
-
-var _interface = require("@wordpress/interface");
-
 var _editor = _interopRequireDefault(require("./editor"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
-var _store = require("../../store");
-
-/**
- * WordPress dependencies
- */
-
 /**
  * Internal dependencies
  */
 function WelcomeGuide() {
-  const {
-    isActive,
-    isStylesOpen
-  } = (0, _data.useSelect)(select => {
-    const sidebar = select(_interface.store).getActiveComplementaryArea(_store.store.name);
-    const isStylesSidebar = sidebar === 'edit-site/global-styles';
-    const feature = isStylesSidebar ? 'welcomeGuideStyles' : 'welcomeGuide';
-    return {
-      isActive: select(_store.store).isFeatureActive(feature),
-      isStylesOpen: isStylesSidebar
-    };
-  }, []);
-
-  if (!isActive) {
-    return null;
-  }
-
-  return isStylesOpen ? (0, _element.createElement)(_styles.default, null) : (0, _element.createElement)(_editor.default, null);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_editor.default, null), (0, _element.createElement)(_styles.default, null));
 }
 //# sourceMappingURL=index.js.map