@wordpress/edit-site 3.0.14 → 3.0.18-next.33ec3857e2.0

package/build-module/components/navigation-sidebar/navigation-toggle/index.js

@@ -78,7 +78,9 @@ function NavigationToggle(_ref) {
     whileHover: "expand"
   }, createElement(Button, {
     className: "edit-site-navigation-toggle__button has-icon",
-    label: __('Toggle navigation'),
+    label: __('Toggle navigation') // isPressed will add unwanted styles.
+    ,
+    "aria-pressed": isNavigationOpen,
     onClick: toggleNavigationPanel,
     showTooltip: true
   }, buttonIcon));

package/build-module/components/navigation-sidebar/navigation-toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js"],"names":["useSelect","useDispatch","Button","Icon","__unstableMotion","motion","__","wordpress","store","coreDataStore","useReducedMotion","editSiteStore","NavigationToggle","icon","isNavigationOpen","isRequestingSiteIcon","siteIconUrl","select","getEntityRecord","isResolving","siteData","undefined","isNavigationOpened","site_icon_url","setIsNavigationPanelOpened","disableMotion","toggleNavigationPanel","buttonIcon","effect","expand","scale","borderRadius","transition","type","duration"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\tIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { wordpress } from '@wordpress/icons';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { useReducedMotion } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\n\nfunction NavigationToggle( { icon } ) {\n\tconst { isNavigationOpen, isRequestingSiteIcon, siteIconUrl } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecord, isResolving } = select( coreDataStore );\n\t\t\tconst siteData =\n\t\t\t\tgetEntityRecord( 'root', '__unstableBase', undefined ) || {};\n\n\t\t\treturn {\n\t\t\t\tisNavigationOpen: select( editSiteStore ).isNavigationOpened(),\n\t\t\t\tisRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [\n\t\t\t\t\t'root',\n\t\t\t\t\t'__unstableBase',\n\t\t\t\t\tundefined,\n\t\t\t\t] ),\n\t\t\t\tsiteIconUrl: siteData.site_icon_url,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { setIsNavigationPanelOpened } = useDispatch( editSiteStore );\n\n\tconst disableMotion = useReducedMotion();\n\n\tconst toggleNavigationPanel = () =>\n\t\tsetIsNavigationPanelOpened( ! isNavigationOpen );\n\n\tlet buttonIcon = <Icon size=\"36px\" icon={ wordpress } />;\n\n\tconst effect = {\n\t\texpand: {\n\t\t\tscale: 1.7,\n\t\t\tborderRadius: 0,\n\t\t\ttransition: { type: 'tween', duration: '0.2' },\n\t\t},\n\t};\n\n\tif ( siteIconUrl ) {\n\t\tbuttonIcon = (\n\t\t\t<motion.img\n\t\t\t\tvariants={ ! disableMotion && effect }\n\t\t\t\talt={ __( 'Site Icon' ) }\n\t\t\t\tclassName=\"edit-site-navigation-toggle__site-icon\"\n\t\t\t\tsrc={ siteIconUrl }\n\t\t\t/>\n\t\t);\n\t} else if ( isRequestingSiteIcon ) {\n\t\tbuttonIcon = null;\n\t} else if ( icon ) {\n\t\tbuttonIcon = <Icon size=\"36px\" icon={ icon } />;\n\t}\n\n\treturn (\n\t\t<motion.div\n\t\t\tclassName={\n\t\t\t\t'edit-site-navigation-toggle' +\n\t\t\t\t( isNavigationOpen ? ' is-open' : '' )\n\t\t\t}\n\t\t\twhileHover=\"expand\"\n\t\t>\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-navigation-toggle__button has-icon\"\n\t\t\t\tlabel={ __( 'Toggle navigation' ) }\n\t\t\t\tonClick={ toggleNavigationPanel }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t{ buttonIcon }\n\t\t\t</Button>\n\t\t</motion.div>\n\t);\n}\n\nexport default NavigationToggle;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js"],"names":["useSelect","useDispatch","Button","Icon","__unstableMotion","motion","__","wordpress","store","coreDataStore","useReducedMotion","editSiteStore","NavigationToggle","icon","isNavigationOpen","isRequestingSiteIcon","siteIconUrl","select","getEntityRecord","isResolving","siteData","undefined","isNavigationOpened","site_icon_url","setIsNavigationPanelOpened","disableMotion","toggleNavigationPanel","buttonIcon","effect","expand","scale","borderRadius","transition","type","duration"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\tIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { wordpress } from '@wordpress/icons';\nimport { store as coreDataStore } from '@wordpress/core-data';\nimport { useReducedMotion } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\n\nfunction NavigationToggle( { icon } ) {\n\tconst { isNavigationOpen, isRequestingSiteIcon, siteIconUrl } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecord, isResolving } = select( coreDataStore );\n\t\t\tconst siteData =\n\t\t\t\tgetEntityRecord( 'root', '__unstableBase', undefined ) || {};\n\n\t\t\treturn {\n\t\t\t\tisNavigationOpen: select( editSiteStore ).isNavigationOpened(),\n\t\t\t\tisRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [\n\t\t\t\t\t'root',\n\t\t\t\t\t'__unstableBase',\n\t\t\t\t\tundefined,\n\t\t\t\t] ),\n\t\t\t\tsiteIconUrl: siteData.site_icon_url,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { setIsNavigationPanelOpened } = useDispatch( editSiteStore );\n\n\tconst disableMotion = useReducedMotion();\n\n\tconst toggleNavigationPanel = () =>\n\t\tsetIsNavigationPanelOpened( ! isNavigationOpen );\n\n\tlet buttonIcon = <Icon size=\"36px\" icon={ wordpress } />;\n\n\tconst effect = {\n\t\texpand: {\n\t\t\tscale: 1.7,\n\t\t\tborderRadius: 0,\n\t\t\ttransition: { type: 'tween', duration: '0.2' },\n\t\t},\n\t};\n\n\tif ( siteIconUrl ) {\n\t\tbuttonIcon = (\n\t\t\t<motion.img\n\t\t\t\tvariants={ ! disableMotion && effect }\n\t\t\t\talt={ __( 'Site Icon' ) }\n\t\t\t\tclassName=\"edit-site-navigation-toggle__site-icon\"\n\t\t\t\tsrc={ siteIconUrl }\n\t\t\t/>\n\t\t);\n\t} else if ( isRequestingSiteIcon ) {\n\t\tbuttonIcon = null;\n\t} else if ( icon ) {\n\t\tbuttonIcon = <Icon size=\"36px\" icon={ icon } />;\n\t}\n\n\treturn (\n\t\t<motion.div\n\t\t\tclassName={\n\t\t\t\t'edit-site-navigation-toggle' +\n\t\t\t\t( isNavigationOpen ? ' is-open' : '' )\n\t\t\t}\n\t\t\twhileHover=\"expand\"\n\t\t>\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-navigation-toggle__button has-icon\"\n\t\t\t\tlabel={ __( 'Toggle navigation' ) }\n\t\t\t\t// isPressed will add unwanted styles.\n\t\t\t\taria-pressed={ isNavigationOpen }\n\t\t\t\tonClick={ toggleNavigationPanel }\n\t\t\t\tshowTooltip\n\t\t\t>\n\t\t\t\t{ buttonIcon }\n\t\t\t</Button>\n\t\t</motion.div>\n\t);\n}\n\nexport default NavigationToggle;\n"]}

package/build-module/components/routes/index.js

@@ -0,0 +1,47 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { createContext, useState, useEffect, useContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import history from '../../utils/history';
+const RoutesContext = createContext();
+const HistoryContext = createContext();
+export function useLocation() {
+  return useContext(RoutesContext);
+}
+export function useHistory() {
+  return useContext(HistoryContext);
+}
+
+function getLocationWithParams(location) {
+  const searchParams = new URLSearchParams(location.search);
+  return { ...location,
+    params: Object.fromEntries(searchParams.entries())
+  };
+}
+
+export function Routes(_ref) {
+  let {
+    children
+  } = _ref;
+  const [location, setLocation] = useState(() => getLocationWithParams(history.location));
+  useEffect(() => {
+    return history.listen(_ref2 => {
+      let {
+        location: updatedLocation
+      } = _ref2;
+      setLocation(getLocationWithParams(updatedLocation));
+    });
+  }, []);
+  return createElement(HistoryContext.Provider, {
+    value: history
+  }, createElement(RoutesContext.Provider, {
+    value: location
+  }, children(location)));
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/routes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/routes/index.js"],"names":["createContext","useState","useEffect","useContext","history","RoutesContext","HistoryContext","useLocation","useHistory","getLocationWithParams","location","searchParams","URLSearchParams","search","params","Object","fromEntries","entries","Routes","children","setLocation","listen","updatedLocation"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,aADD,EAECC,QAFD,EAGCC,SAHD,EAICC,UAJD,QAKO,oBALP;AAOA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,qBAApB;AAEA,MAAMC,aAAa,GAAGL,aAAa,EAAnC;AACA,MAAMM,cAAc,GAAGN,aAAa,EAApC;AAEA,OAAO,SAASO,WAAT,GAAuB;AAC7B,SAAOJ,UAAU,CAAEE,aAAF,CAAjB;AACA;AAED,OAAO,SAASG,UAAT,GAAsB;AAC5B,SAAOL,UAAU,CAAEG,cAAF,CAAjB;AACA;;AAED,SAASG,qBAAT,CAAgCC,QAAhC,EAA2C;AAC1C,QAAMC,YAAY,GAAG,IAAIC,eAAJ,CAAqBF,QAAQ,CAACG,MAA9B,CAArB;AACA,SAAO,EACN,GAAGH,QADG;AAENI,IAAAA,MAAM,EAAEC,MAAM,CAACC,WAAP,CAAoBL,YAAY,CAACM,OAAb,EAApB;AAFF,GAAP;AAIA;;AAED,OAAO,SAASC,MAAT,OAAgC;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;AACtC,QAAM,CAAET,QAAF,EAAYU,WAAZ,IAA4BnB,QAAQ,CAAE,MAC3CQ,qBAAqB,CAAEL,OAAO,CAACM,QAAV,CADoB,CAA1C;AAIAR,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAOE,OAAO,CAACiB,MAAR,CAAgB,SAAqC;AAAA,UAAnC;AAAEX,QAAAA,QAAQ,EAAEY;AAAZ,OAAmC;AAC3DF,MAAAA,WAAW,CAAEX,qBAAqB,CAAEa,eAAF,CAAvB,CAAX;AACA,KAFM,CAAP;AAGA,GAJQ,EAIN,EAJM,CAAT;AAMA,SACC,cAAC,cAAD,CAAgB,QAAhB;AAAyB,IAAA,KAAK,EAAGlB;AAAjC,KACC,cAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAGM;AAAhC,KACGS,QAAQ,CAAET,QAAF,CADX,CADD,CADD;AAOA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseState,\n\tuseEffect,\n\tuseContext,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport history from '../../utils/history';\n\nconst RoutesContext = createContext();\nconst HistoryContext = createContext();\n\nexport function useLocation() {\n\treturn useContext( RoutesContext );\n}\n\nexport function useHistory() {\n\treturn useContext( HistoryContext );\n}\n\nfunction getLocationWithParams( location ) {\n\tconst searchParams = new URLSearchParams( location.search );\n\treturn {\n\t\t...location,\n\t\tparams: Object.fromEntries( searchParams.entries() ),\n\t};\n}\n\nexport function Routes( { children } ) {\n\tconst [ location, setLocation ] = useState( () =>\n\t\tgetLocationWithParams( history.location )\n\t);\n\n\tuseEffect( () => {\n\t\treturn history.listen( ( { location: updatedLocation } ) => {\n\t\t\tsetLocation( getLocationWithParams( updatedLocation ) );\n\t\t} );\n\t}, [] );\n\n\treturn (\n\t\t<HistoryContext.Provider value={ history }>\n\t\t\t<RoutesContext.Provider value={ location }>\n\t\t\t\t{ children( location ) }\n\t\t\t</RoutesContext.Provider>\n\t\t</HistoryContext.Provider>\n\t);\n}\n"]}

package/build-module/components/routes/link.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+/**
+ * Internal dependencies
+ */
+
+import { useHistory } from './index';
+export function useLink() {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let state = arguments.length > 1 ? arguments[1] : undefined;
+  let shouldReplace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const history = useHistory();
+
+  function onClick(event) {
+    event.preventDefault();
+
+    if (shouldReplace) {
+      history.replace(params, state);
+    } else {
+      history.push(params, state);
+    }
+  }
+
+  return {
+    href: addQueryArgs(window.location.href, params),
+    onClick
+  };
+}
+export default function Link(_ref) {
+  let {
+    params = {},
+    state,
+    replace: shouldReplace = false,
+    children,
+    ...props
+  } = _ref;
+  const {
+    href,
+    onClick
+  } = useLink(params, state, shouldReplace);
+  return createElement("a", _extends({
+    href: href,
+    onClick: onClick
+  }, props), children);
+}
+//# sourceMappingURL=link.js.map

package/build-module/components/routes/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/routes/link.js"],"names":["addQueryArgs","useHistory","useLink","params","state","shouldReplace","history","onClick","event","preventDefault","replace","push","href","window","location","Link","children","props"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,YAAT,QAA6B,gBAA7B;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,SAA3B;AAEA,OAAO,SAASC,OAAT,GAA8D;AAAA,MAA5CC,MAA4C,uEAAnC,EAAmC;AAAA,MAA/BC,KAA+B;AAAA,MAAxBC,aAAwB,uEAAR,KAAQ;AACpE,QAAMC,OAAO,GAAGL,UAAU,EAA1B;;AAEA,WAASM,OAAT,CAAkBC,KAAlB,EAA0B;AACzBA,IAAAA,KAAK,CAACC,cAAN;;AAEA,QAAKJ,aAAL,EAAqB;AACpBC,MAAAA,OAAO,CAACI,OAAR,CAAiBP,MAAjB,EAAyBC,KAAzB;AACA,KAFD,MAEO;AACNE,MAAAA,OAAO,CAACK,IAAR,CAAcR,MAAd,EAAsBC,KAAtB;AACA;AACD;;AAED,SAAO;AACNQ,IAAAA,IAAI,EAAEZ,YAAY,CAAEa,MAAM,CAACC,QAAP,CAAgBF,IAAlB,EAAwBT,MAAxB,CADZ;AAENI,IAAAA;AAFM,GAAP;AAIA;AAED,eAAe,SAASQ,IAAT,OAMX;AAAA,MAN0B;AAC7BZ,IAAAA,MAAM,GAAG,EADoB;AAE7BC,IAAAA,KAF6B;AAG7BM,IAAAA,OAAO,EAAEL,aAAa,GAAG,KAHI;AAI7BW,IAAAA,QAJ6B;AAK7B,OAAGC;AAL0B,GAM1B;AACH,QAAM;AAAEL,IAAAA,IAAF;AAAQL,IAAAA;AAAR,MAAoBL,OAAO,CAAEC,MAAF,EAAUC,KAAV,EAAiBC,aAAjB,CAAjC;AAEA,SACC;AAAG,IAAA,IAAI,EAAGO,IAAV;AAAiB,IAAA,OAAO,EAAGL;AAA3B,KAA0CU,KAA1C,GACGD,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { addQueryArgs } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport { useHistory } from './index';\n\nexport function useLink( params = {}, state, shouldReplace = false ) {\n\tconst history = useHistory();\n\n\tfunction onClick( event ) {\n\t\tevent.preventDefault();\n\n\t\tif ( shouldReplace ) {\n\t\t\thistory.replace( params, state );\n\t\t} else {\n\t\t\thistory.push( params, state );\n\t\t}\n\t}\n\n\treturn {\n\t\thref: addQueryArgs( window.location.href, params ),\n\t\tonClick,\n\t};\n}\n\nexport default function Link( {\n\tparams = {},\n\tstate,\n\treplace: shouldReplace = false,\n\tchildren,\n\t...props\n} ) {\n\tconst { href, onClick } = useLink( params, state, shouldReplace );\n\n\treturn (\n\t\t<a href={ href } onClick={ onClick } { ...props }>\n\t\t\t{ children }\n\t\t</a>\n\t);\n}\n"]}

package/build-module/components/routes/use-title.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+/**
+ * Internal dependencies
+ */
+
+import { useLocation } from './index';
+export default function useTitle(title) {
+  const location = useLocation();
+  const siteTitle = useSelect(select => {
+    var _select$getEntityReco;
+
+    return (_select$getEntityReco = select(coreStore).getEntityRecord('root', 'site')) === null || _select$getEntityReco === void 0 ? void 0 : _select$getEntityReco.title;
+  }, []);
+  const isInitialLocationRef = useRef(true);
+  useEffect(() => {
+    isInitialLocationRef.current = false;
+  }, [location]);
+  useEffect(() => {
+    // Don't update or announce the title for initial page load.
+    if (isInitialLocationRef.current) {
+      return;
+    }
+
+    if (title && siteTitle) {
+      // @see https://github.com/WordPress/wordpress-develop/blob/94849898192d271d533e09756007e176feb80697/src/wp-admin/admin-header.php#L67-L68
+      const formattedTitle = sprintf(
+      /* translators: Admin screen title. 1: Admin screen name, 2: Network or site name. */
+      __('%1$s ‹ %2$s — WordPress'), title, siteTitle);
+      document.title = formattedTitle; // Announce title on route change for screen readers.
+
+      speak(sprintf(
+      /* translators: The page title that is currently displaying. */
+      __('Now displaying: %s'), document.title), 'assertive');
+    }
+  }, [title, siteTitle, location]);
+}
+//# sourceMappingURL=use-title.js.map

package/build-module/components/routes/use-title.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/routes/use-title.js"],"names":["useEffect","useRef","useSelect","store","coreStore","__","sprintf","speak","useLocation","useTitle","title","location","siteTitle","select","getEntityRecord","isInitialLocationRef","current","formattedTitle","document"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,QAA4B,SAA5B;AAEA,eAAe,SAASC,QAAT,CAAmBC,KAAnB,EAA2B;AACzC,QAAMC,QAAQ,GAAGH,WAAW,EAA5B;AACA,QAAMI,SAAS,GAAGV,SAAS,CACxBW,MAAF;AAAA;;AAAA,oCACCA,MAAM,CAAET,SAAF,CAAN,CAAoBU,eAApB,CAAqC,MAArC,EAA6C,MAA7C,CADD,0DACC,sBAAuDJ,KADxD;AAAA,GAD0B,EAG1B,EAH0B,CAA3B;AAKA,QAAMK,oBAAoB,GAAGd,MAAM,CAAE,IAAF,CAAnC;AAEAD,EAAAA,SAAS,CAAE,MAAM;AAChBe,IAAAA,oBAAoB,CAACC,OAArB,GAA+B,KAA/B;AACA,GAFQ,EAEN,CAAEL,QAAF,CAFM,CAAT;AAIAX,EAAAA,SAAS,CAAE,MAAM;AAChB;AACA,QAAKe,oBAAoB,CAACC,OAA1B,EAAoC;AACnC;AACA;;AAED,QAAKN,KAAK,IAAIE,SAAd,EAA0B;AACzB;AACA,YAAMK,cAAc,GAAGX,OAAO;AAC7B;AACAD,MAAAA,EAAE,CAAE,yBAAF,CAF2B,EAG7BK,KAH6B,EAI7BE,SAJ6B,CAA9B;AAOAM,MAAAA,QAAQ,CAACR,KAAT,GAAiBO,cAAjB,CATyB,CAWzB;;AACAV,MAAAA,KAAK,CACJD,OAAO;AACN;AACAD,MAAAA,EAAE,CAAE,oBAAF,CAFI,EAGNa,QAAQ,CAACR,KAHH,CADH,EAMJ,WANI,CAAL;AAQA;AACD,GA3BQ,EA2BN,CAAEA,KAAF,EAASE,SAAT,EAAoBD,QAApB,CA3BM,CAAT;AA4BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useLocation } from './index';\n\nexport default function useTitle( title ) {\n\tconst location = useLocation();\n\tconst siteTitle = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecord( 'root', 'site' )?.title,\n\t\t[]\n\t);\n\tconst isInitialLocationRef = useRef( true );\n\n\tuseEffect( () => {\n\t\tisInitialLocationRef.current = false;\n\t}, [ location ] );\n\n\tuseEffect( () => {\n\t\t// Don't update or announce the title for initial page load.\n\t\tif ( isInitialLocationRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( title && siteTitle ) {\n\t\t\t// @see https://github.com/WordPress/wordpress-develop/blob/94849898192d271d533e09756007e176feb80697/src/wp-admin/admin-header.php#L67-L68\n\t\t\tconst formattedTitle = sprintf(\n\t\t\t\t/* translators: Admin screen title. 1: Admin screen name, 2: Network or site name. */\n\t\t\t\t__( '%1$s ‹ %2$s — WordPress' ),\n\t\t\t\ttitle,\n\t\t\t\tsiteTitle\n\t\t\t);\n\n\t\t\tdocument.title = formattedTitle;\n\n\t\t\t// Announce title on route change for screen readers.\n\t\t\tspeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: The page title that is currently displaying. */\n\t\t\t\t\t__( 'Now displaying: %s' ),\n\t\t\t\t\tdocument.title\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t}\n\t}, [ title, siteTitle, location ] );\n}\n"]}

package/build-module/components/sidebar/default-sidebar.js

@@ -13,7 +13,8 @@ export default function DefaultSidebar(_ref) {
     children,
     closeLabel,
     header,
-    headerClassName
+    headerClassName,
+    panelClassName
   } = _ref;
   return createElement(Fragment, null, createElement(ComplementaryArea, {
     className: className,
@@ -23,7 +24,8 @@ export default function DefaultSidebar(_ref) {
     icon: icon,
     closeLabel: closeLabel,
     header: header,
-    headerClassName: headerClassName
+    headerClassName: headerClassName,
+    panelClassName: panelClassName
   }, children), createElement(ComplementaryAreaMoreMenuItem, {
     scope: "core/edit-site",
     identifier: identifier,

package/build-module/components/sidebar/default-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/default-sidebar.js"],"names":["ComplementaryArea","ComplementaryAreaMoreMenuItem","DefaultSidebar","className","identifier","title","icon","children","closeLabel","header","headerClassName"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,iBADD,EAECC,6BAFD,QAGO,sBAHP;AAKA,eAAe,SAASC,cAAT,OASX;AAAA,MAToC;AACvCC,IAAAA,SADuC;AAEvCC,IAAAA,UAFuC;AAGvCC,IAAAA,KAHuC;AAIvCC,IAAAA,IAJuC;AAKvCC,IAAAA,QALuC;AAMvCC,IAAAA,UANuC;AAOvCC,IAAAA,MAPuC;AAQvCC,IAAAA;AARuC,GASpC;AACH,SACC,8BACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAGP,SADb;AAEC,IAAA,KAAK,EAAC,gBAFP;AAGC,IAAA,UAAU,EAAGC,UAHd;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,IAAI,EAAGC,IALR;AAMC,IAAA,UAAU,EAAGE,UANd;AAOC,IAAA,MAAM,EAAGC,MAPV;AAQC,IAAA,eAAe,EAAGC;AARnB,KAUGH,QAVH,CADD,EAaC,cAAC,6BAAD;AACC,IAAA,KAAK,EAAC,gBADP;AAEC,IAAA,UAAU,EAAGH,UAFd;AAGC,IAAA,IAAI,EAAGE;AAHR,KAKGD,KALH,CAbD,CADD;AAuBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tComplementaryArea,\n\tComplementaryAreaMoreMenuItem,\n} from '@wordpress/interface';\n\nexport default function DefaultSidebar( {\n\tclassName,\n\tidentifier,\n\ttitle,\n\ticon,\n\tchildren,\n\tcloseLabel,\n\theader,\n\theaderClassName,\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<ComplementaryArea\n\t\t\t\tclassName={ className }\n\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ttitle={ title }\n\t\t\t\ticon={ icon }\n\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\theader={ header }\n\t\t\t\theaderClassName={ headerClassName }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</ComplementaryArea>\n\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ticon={ icon }\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/default-sidebar.js"],"names":["ComplementaryArea","ComplementaryAreaMoreMenuItem","DefaultSidebar","className","identifier","title","icon","children","closeLabel","header","headerClassName","panelClassName"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,iBADD,EAECC,6BAFD,QAGO,sBAHP;AAKA,eAAe,SAASC,cAAT,OAUX;AAAA,MAVoC;AACvCC,IAAAA,SADuC;AAEvCC,IAAAA,UAFuC;AAGvCC,IAAAA,KAHuC;AAIvCC,IAAAA,IAJuC;AAKvCC,IAAAA,QALuC;AAMvCC,IAAAA,UANuC;AAOvCC,IAAAA,MAPuC;AAQvCC,IAAAA,eARuC;AASvCC,IAAAA;AATuC,GAUpC;AACH,SACC,8BACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAGR,SADb;AAEC,IAAA,KAAK,EAAC,gBAFP;AAGC,IAAA,UAAU,EAAGC,UAHd;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,IAAI,EAAGC,IALR;AAMC,IAAA,UAAU,EAAGE,UANd;AAOC,IAAA,MAAM,EAAGC,MAPV;AAQC,IAAA,eAAe,EAAGC,eARnB;AASC,IAAA,cAAc,EAAGC;AATlB,KAWGJ,QAXH,CADD,EAcC,cAAC,6BAAD;AACC,IAAA,KAAK,EAAC,gBADP;AAEC,IAAA,UAAU,EAAGH,UAFd;AAGC,IAAA,IAAI,EAAGE;AAHR,KAKGD,KALH,CAdD,CADD;AAwBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tComplementaryArea,\n\tComplementaryAreaMoreMenuItem,\n} from '@wordpress/interface';\n\nexport default function DefaultSidebar( {\n\tclassName,\n\tidentifier,\n\ttitle,\n\ticon,\n\tchildren,\n\tcloseLabel,\n\theader,\n\theaderClassName,\n\tpanelClassName,\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<ComplementaryArea\n\t\t\t\tclassName={ className }\n\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ttitle={ title }\n\t\t\t\ticon={ icon }\n\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\theader={ header }\n\t\t\t\theaderClassName={ headerClassName }\n\t\t\t\tpanelClassName={ panelClassName }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</ComplementaryArea>\n\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\tscope=\"core/edit-site\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ticon={ icon }\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t</>\n\t);\n}\n"]}

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

@@ -6,20 +6,26 @@ import { createElement } from "@wordpress/element";
 import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, moreVertical } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 
 import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
+import { store as editSiteStore } from '../../store';
 export default function GlobalStylesSidebar() {
   const [canReset, onReset] = useGlobalStylesReset();
+  const {
+    toggleFeature
+  } = useDispatch(editSiteStore);
   return createElement(DefaultSidebar, {
     className: "edit-site-global-styles-sidebar",
     identifier: "edit-site/global-styles",
     title: __('Styles'),
     icon: styles,
     closeLabel: __('Close global styles sidebar'),
+    panelClassName: "edit-site-global-styles-sidebar__panel",
     header: createElement(Flex, null, createElement(FlexBlock, null, createElement("strong", null, __('Styles')), createElement("span", {
       className: "edit-site-global-styles-sidebar__beta"
     }, __('Beta'))), createElement(FlexItem, null, createElement(DropdownMenu, {
@@ -31,6 +37,9 @@ export default function GlobalStylesSidebar() {
       controls: [{
         title: __('Reset to defaults'),
         onClick: onReset
+      }, {
+        title: __('Welcome Guide'),
+        onClick: () => toggleFeature('welcomeGuideStyles')
       }]
     })))
   }, createElement(GlobalStylesUI, null));

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/global-styles-sidebar.js"],"names":["DropdownMenu","FlexItem","FlexBlock","Flex","__","styles","moreVertical","DefaultSidebar","GlobalStylesUI","useGlobalStylesReset","GlobalStylesSidebar","canReset","onReset","disabled","title","onClick"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,EAAuBC,QAAvB,EAAiCC,SAAjC,EAA4CC,IAA5C,QAAwD,uBAAxD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,MAAT,EAAiBC,YAAjB,QAAqC,kBAArC;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,SAASC,cAAT,EAAyBC,oBAAzB,QAAqD,kBAArD;AAEA,eAAe,SAASC,mBAAT,GAA+B;AAC7C,QAAM,CAAEC,QAAF,EAAYC,OAAZ,IAAwBH,oBAAoB,EAAlD;AAEA,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,UAAU,EAAC,yBAFZ;AAGC,IAAA,KAAK,EAAGL,EAAE,CAAE,QAAF,CAHX;AAIC,IAAA,IAAI,EAAGC,MAJR;AAKC,IAAA,UAAU,EAAGD,EAAE,CAAE,6BAAF,CALhB;AAMC,IAAA,MAAM,EACL,cAAC,IAAD,QACC,cAAC,SAAD,QACC,8BAAUA,EAAE,CAAE,QAAF,CAAZ,CADD,EAEC;AAAM,MAAA,SAAS,EAAC;AAAhB,OACGA,EAAE,CAAE,MAAF,CADL,CAFD,CADD,EAOC,cAAC,QAAD,QACC,cAAC,YAAD;AACC,MAAA,IAAI,EAAGE,YADR;AAEC,MAAA,KAAK,EAAGF,EAAE,CAAE,4BAAF,CAFX;AAGC,MAAA,WAAW,EAAG;AAAES,QAAAA,QAAQ,EAAE,CAAEF;AAAd,OAHf;AAIC,MAAA,QAAQ,EAAG,CACV;AACCG,QAAAA,KAAK,EAAEV,EAAE,CAAE,mBAAF,CADV;AAECW,QAAAA,OAAO,EAAEH;AAFV,OADU;AAJZ,MADD,CAPD;AAPF,KA8BC,cAAC,cAAD,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":["DropdownMenu","FlexItem","FlexBlock","Flex","__","styles","moreVertical","useDispatch","DefaultSidebar","GlobalStylesUI","useGlobalStylesReset","store","editSiteStore","GlobalStylesSidebar","canReset","onReset","toggleFeature","disabled","title","onClick"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,EAAuBC,QAAvB,EAAiCC,SAAjC,EAA4CC,IAA5C,QAAwD,uBAAxD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,MAAT,EAAiBC,YAAjB,QAAqC,kBAArC;AACA,SAASC,WAAT,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,SAASC,cAAT,EAAyBC,oBAAzB,QAAqD,kBAArD;AACA,SAASC,KAAK,IAAIC,aAAlB,QAAuC,aAAvC;AAEA,eAAe,SAASC,mBAAT,GAA+B;AAC7C,QAAM,CAAEC,QAAF,EAAYC,OAAZ,IAAwBL,oBAAoB,EAAlD;AACA,QAAM;AAAEM,IAAAA;AAAF,MAAoBT,WAAW,CAAEK,aAAF,CAArC;AAEA,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,UAAU,EAAC,yBAFZ;AAGC,IAAA,KAAK,EAAGR,EAAE,CAAE,QAAF,CAHX;AAIC,IAAA,IAAI,EAAGC,MAJR;AAKC,IAAA,UAAU,EAAGD,EAAE,CAAE,6BAAF,CALhB;AAMC,IAAA,cAAc,EAAC,wCANhB;AAOC,IAAA,MAAM,EACL,cAAC,IAAD,QACC,cAAC,SAAD,QACC,8BAAUA,EAAE,CAAE,QAAF,CAAZ,CADD,EAEC;AAAM,MAAA,SAAS,EAAC;AAAhB,OACGA,EAAE,CAAE,MAAF,CADL,CAFD,CADD,EAOC,cAAC,QAAD,QACC,cAAC,YAAD;AACC,MAAA,IAAI,EAAGE,YADR;AAEC,MAAA,KAAK,EAAGF,EAAE,CAAE,4BAAF,CAFX;AAGC,MAAA,WAAW,EAAG;AAAEa,QAAAA,QAAQ,EAAE,CAAEH;AAAd,OAHf;AAIC,MAAA,QAAQ,EAAG,CACV;AACCI,QAAAA,KAAK,EAAEd,EAAE,CAAE,mBAAF,CADV;AAECe,QAAAA,OAAO,EAAEJ;AAFV,OADU,EAKV;AACCG,QAAAA,KAAK,EAAEd,EAAE,CAAE,eAAF,CADV;AAECe,QAAAA,OAAO,EAAE,MACRH,aAAa,CAAE,oBAAF;AAHf,OALU;AAJZ,MADD,CAPD;AARF,KAoCC,cAAC,cAAD,OApCD,CADD;AAwCA","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\tpanelClassName=\"edit-site-global-styles-sidebar__panel\"\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-module/components/sidebar/template-card/template-areas.js

@@ -5,7 +5,7 @@ import { createElement } from "@wordpress/element";
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button, __experimentalHeading as Heading } from '@wordpress/components';
-import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 /**
@@ -13,7 +13,6 @@ import { __ } from '@wordpress/i18n';
  */
 
 import { store as editSiteStore } from '../../../store';
-import { TEMPLATE_PART_AREA_TO_NAME } from '../../../store/constants';
 
 function TemplateAreaItem(_ref) {
   let {
@@ -24,6 +23,11 @@ function TemplateAreaItem(_ref) {
     selectBlock,
     toggleBlockHighlight
   } = useDispatch(blockEditorStore);
+  const templatePartArea = useSelect(select => {
+    const defaultAreas = select(editorStore).__experimentalGetDefaultTemplatePartAreas();
+
+    return defaultAreas.find(defaultArea => defaultArea.area === area);
+  }, [area]);
 
   const highlightBlock = () => toggleBlockHighlight(clientId, true);
 
@@ -31,7 +35,7 @@ function TemplateAreaItem(_ref) {
 
   return createElement(Button, {
     className: "edit-site-template-card__template-areas-item",
-    icon: getTemplatePartIcon(area),
+    icon: templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.icon,
     onMouseOver: highlightBlock,
     onMouseLeave: cancelHighlightBlock,
     onFocus: highlightBlock,
@@ -39,7 +43,7 @@ function TemplateAreaItem(_ref) {
     onClick: () => {
       selectBlock(clientId);
     }
-  }, TEMPLATE_PART_AREA_TO_NAME[area]);
+  }, templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.label);
 }
 
 export default function TemplateAreas() {

package/build-module/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":["useSelect","useDispatch","Button","__experimentalHeading","Heading","getTemplatePartIcon","store","blockEditorStore","__","editSiteStore","TEMPLATE_PART_AREA_TO_NAME","TemplateAreaItem","area","clientId","selectBlock","toggleBlockHighlight","highlightBlock","cancelHighlightBlock","TemplateAreas","templateParts","select","getCurrentTemplateTemplateParts","length","map","templatePart","block","slug"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SACCC,MADD,EAECC,qBAAqB,IAAIC,OAF1B,QAGO,uBAHP;AAIA,SAASC,mBAAT,QAAoC,mBAApC;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,yBAA1C;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASF,KAAK,IAAIG,aAAlB,QAAuC,gBAAvC;AACA,SAASC,0BAAT,QAA2C,0BAA3C;;AAEA,SAASC,gBAAT,OAAgD;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAC/C,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAwCd,WAAW,CACxDM,gBADwD,CAAzD;;AAGA,QAAMS,cAAc,GAAG,MAAMD,oBAAoB,CAAEF,QAAF,EAAY,IAAZ,CAAjD;;AACA,QAAMI,oBAAoB,GAAG,MAAMF,oBAAoB,CAAEF,QAAF,EAAY,KAAZ,CAAvD;;AAEA,SACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,8CADX;AAEC,IAAA,IAAI,EAAGR,mBAAmB,CAAEO,IAAF,CAF3B;AAGC,IAAA,WAAW,EAAGI,cAHf;AAIC,IAAA,YAAY,EAAGC,oBAJhB;AAKC,IAAA,OAAO,EAAGD,cALX;AAMC,IAAA,MAAM,EAAGC,oBANV;AAOC,IAAA,OAAO,EAAG,MAAM;AACfH,MAAAA,WAAW,CAAED,QAAF,CAAX;AACA;AATF,KAWGH,0BAA0B,CAAEE,IAAF,CAX7B,CADD;AAeA;;AAED,eAAe,SAASM,aAAT,GAAyB;AACvC,QAAMC,aAAa,GAAGnB,SAAS,CAC5BoB,MAAF,IAAcA,MAAM,CAAEX,aAAF,CAAN,CAAwBY,+BAAxB,EADgB,EAE9B,EAF8B,CAA/B;;AAKA,MAAK,CAAEF,aAAa,CAACG,MAArB,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,cAAC,OAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGd,EAAE,CAAE,OAAF,CAJL,CADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGW,aAAa,CAACI,GAAd,CAAmB;AAAA,QAAE;AAAEC,MAAAA,YAAF;AAAgBC,MAAAA;AAAhB,KAAF;AAAA,WACpB;AAAI,MAAA,GAAG,EAAGD,YAAY,CAACE;AAAvB,OACC,cAAC,gBAAD;AACC,MAAA,IAAI,EAAGF,YAAY,CAACZ,IADrB;AAEC,MAAA,QAAQ,EAAGa,KAAK,CAACZ;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":["useSelect","useDispatch","Button","__experimentalHeading","Heading","store","editorStore","blockEditorStore","__","editSiteStore","TemplateAreaItem","area","clientId","selectBlock","toggleBlockHighlight","templatePartArea","select","defaultAreas","__experimentalGetDefaultTemplatePartAreas","find","defaultArea","highlightBlock","cancelHighlightBlock","icon","label","TemplateAreas","templateParts","getCurrentTemplateTemplateParts","length","map","templatePart","block","slug"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SACCC,MADD,EAECC,qBAAqB,IAAIC,OAF1B,QAGO,uBAHP;AAIA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASD,KAAK,IAAIE,gBAAlB,QAA0C,yBAA1C;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASH,KAAK,IAAII,aAAlB,QAAuC,gBAAvC;;AAEA,SAASC,gBAAT,OAAgD;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAC/C,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAwCb,WAAW,CACxDM,gBADwD,CAAzD;AAGA,QAAMQ,gBAAgB,GAAGf,SAAS,CAC/BgB,MAAF,IAAc;AACb,UAAMC,YAAY,GAAGD,MAAM,CAC1BV,WAD0B,CAAN,CAEnBY,yCAFmB,EAArB;;AAIA,WAAOD,YAAY,CAACE,IAAb,CACJC,WAAF,IAAmBA,WAAW,CAACT,IAAZ,KAAqBA,IADlC,CAAP;AAGA,GATgC,EAUjC,CAAEA,IAAF,CAViC,CAAlC;;AAaA,QAAMU,cAAc,GAAG,MAAMP,oBAAoB,CAAEF,QAAF,EAAY,IAAZ,CAAjD;;AACA,QAAMU,oBAAoB,GAAG,MAAMR,oBAAoB,CAAEF,QAAF,EAAY,KAAZ,CAAvD;;AAEA,SACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,8CADX;AAEC,IAAA,IAAI,EAAGG,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAEQ,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;AACfT,MAAAA,WAAW,CAAED,QAAF,CAAX;AACA;AATF,KAWGG,gBAXH,aAWGA,gBAXH,uBAWGA,gBAAgB,CAAES,KAXrB,CADD;AAeA;;AAED,eAAe,SAASC,aAAT,GAAyB;AACvC,QAAMC,aAAa,GAAG1B,SAAS,CAC5BgB,MAAF,IAAcA,MAAM,CAAEP,aAAF,CAAN,CAAwBkB,+BAAxB,EADgB,EAE9B,EAF8B,CAA/B;;AAKA,MAAK,CAAED,aAAa,CAACE,MAArB,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,cAAC,OAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGpB,EAAE,CAAE,OAAF,CAJL,CADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGkB,aAAa,CAACG,GAAd,CAAmB;AAAA,QAAE;AAAEC,MAAAA,YAAF;AAAgBC,MAAAA;AAAhB,KAAF;AAAA,WACpB;AAAI,MAAA,GAAG,EAAGD,YAAY,CAACE;AAAvB,OACC,cAAC,gBAAD;AACC,MAAA,IAAI,EAAGF,YAAY,CAACnB,IADrB;AAEC,MAAA,QAAQ,EAAGoB,KAAK,CAACnB;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-module/components/template-details/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -8,7 +9,6 @@ import { sprintf, __ } from '@wordpress/i18n';
 import { Button, MenuGroup, MenuItem, __experimentalHeading as Heading, __experimentalText as Text } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
@@ -18,6 +18,7 @@ import { MENU_TEMPLATES, TEMPLATE_PARTS_SUB_MENUS } from '../navigation-sidebar/
 import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
 import EditTemplateTitle from './edit-template-title';
+import { useLink } from '../routes/link';
 export default function TemplateDetails(_ref) {
   let {
     template,
@@ -45,6 +46,11 @@ export default function TemplateDetails(_ref) {
       return area === (template === null || template === void 0 ? void 0 : template.area);
     });
   }, [template]);
+  const browseAllLinkProps = useLink({
+    // TODO: We should update this to filter by template part's areas as well.
+    postType: template.type,
+    postId: undefined
+  });
 
   if (!template) {
     return null;
@@ -77,14 +83,9 @@ export default function TemplateDetails(_ref) {
     className: "edit-site-template-details__revert-button",
     info: __('Restore template to default state'),
     onClick: revert
-  }, __('Clear customizations'))), createElement(Button, {
-    className: "edit-site-template-details__show-all-button",
-    href: addQueryArgs(window.location.href, {
-      // TODO: We should update this to filter by template part's areas as well.
-      postId: undefined,
-      postType: template.type
-    })
-  }, sprintf(
+  }, __('Clear customizations'))), createElement(Button, _extends({
+    className: "edit-site-template-details__show-all-button"
+  }, browseAllLinkProps), sprintf(
   /* translators: the template part's area name ("Headers", "Sidebars") or "templates". */
   __('Browse all %s'), templateSubMenu.title)));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/index.js"],"names":["useMemo","sprintf","__","Button","MenuGroup","MenuItem","__experimentalHeading","Heading","__experimentalText","Text","useDispatch","useSelect","store","editorStore","addQueryArgs","isTemplateRevertable","MENU_TEMPLATES","TEMPLATE_PARTS_SUB_MENUS","editSiteStore","TemplateAreas","EditTemplateTitle","TemplateDetails","template","onClose","title","description","select","__experimentalGetTemplateInfo","revertTemplate","templateSubMenu","type","menu","find","area","revert","is_custom","window","location","href","postId","undefined","postType"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AACA,SAASC,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SACCC,MADD,EAECC,SAFD,EAGCC,QAHD,EAICC,qBAAqB,IAAIC,OAJ1B,EAKCC,kBAAkB,IAAIC,IALvB,QAMO,uBANP;AAOA,SAASC,WAAT,EAAsBC,SAAtB,QAAuC,iBAAvC;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,oCAAjC;AACA,SACCC,cADD,EAECC,wBAFD,QAGO,kDAHP;AAIA,SAASL,KAAK,IAAIM,aAAlB,QAAuC,aAAvC;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AAEA,eAAe,SAASC,eAAT,OAAkD;AAAA,MAAxB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwB;AAChE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAyBd,SAAS,CACrCe,MAAF,IACCA,MAAM,CAAEb,WAAF,CAAN,CAAsBc,6BAAtB,CAAqDL,QAArD,CAFsC,EAGvC,EAHuC,CAAxC;AAKA,QAAM;AAAEM,IAAAA;AAAF,MAAqBlB,WAAW,CAAEQ,aAAF,CAAtC;AAEA,QAAMW,eAAe,GAAG7B,OAAO,CAAE,MAAM;AACtC,QAAK,CAAAsB,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEQ,IAAV,MAAmB,aAAxB,EAAwC;AACvC,aAAO;AAAEN,QAAAA,KAAK,EAAEtB,EAAE,CAAE,WAAF,CAAX;AAA4B6B,QAAAA,IAAI,EAAEf;AAAlC,OAAP;AACA;;AAED,WAAOC,wBAAwB,CAACe,IAAzB,CACN;AAAA,UAAE;AAAEC,QAAAA;AAAF,OAAF;AAAA,aAAgBA,IAAI,MAAKX,QAAL,aAAKA,QAAL,uBAAKA,QAAQ,CAAEW,IAAf,CAApB;AAAA,KADM,CAAP;AAGA,GAR8B,EAQ5B,CAAEX,QAAF,CAR4B,CAA/B;;AAUA,MAAK,CAAEA,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,QAAMY,MAAM,GAAG,MAAM;AACpBN,IAAAA,cAAc,CAAEN,QAAF,CAAd;AACAC,IAAAA,OAAO;AACP,GAHD;;AAKA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,QAAQ,CAACa,SAAT,GACD,cAAC,iBAAD;AAAmB,IAAA,QAAQ,EAAGb;AAA9B,IADC,GAGD,cAAC,OAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,MAAM,EAAG,GAFV;AAGC,IAAA,SAAS,EAAC;AAHX,KAKGE,KALH,CAJF,EAaGC,WAAW,IACZ,cAAC,IAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,IAAA,SAAS,EAAC,yCAFX;AAGC,IAAA,EAAE,EAAC;AAHJ,KAKGA,WALH,CAdF,CADD,EAyBC,cAAC,aAAD;AAAe,IAAA,4BAA4B,EAAGF;AAA9C,IAzBD,EA2BGR,oBAAoB,CAAEO,QAAF,CAApB,IACD,cAAC,SAAD;AAAW,IAAA,SAAS,EAAC;AAArB,KACC,cAAC,QAAD;AACC,IAAA,SAAS,EAAC,2CADX;AAEC,IAAA,IAAI,EAAGpB,EAAE,CAAE,mCAAF,CAFV;AAGC,IAAA,OAAO,EAAGgC;AAHX,KAKGhC,EAAE,CAAE,sBAAF,CALL,CADD,CA5BF,EAuCC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,IAAI,EAAGY,YAAY,CAAEsB,MAAM,CAACC,QAAP,CAAgBC,IAAlB,EAAwB;AAC1C;AACAC,MAAAA,MAAM,EAAEC,SAFkC;AAG1CC,MAAAA,QAAQ,EAAEnB,QAAQ,CAACQ;AAHuB,KAAxB;AAFpB,KAQG7B,OAAO;AACR;AACAC,EAAAA,EAAE,CAAE,eAAF,CAFM,EAGR2B,eAAe,CAACL,KAHR,CARV,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":["useMemo","sprintf","__","Button","MenuGroup","MenuItem","__experimentalHeading","Heading","__experimentalText","Text","useDispatch","useSelect","store","editorStore","isTemplateRevertable","MENU_TEMPLATES","TEMPLATE_PARTS_SUB_MENUS","editSiteStore","TemplateAreas","EditTemplateTitle","useLink","TemplateDetails","template","onClose","title","description","select","__experimentalGetTemplateInfo","revertTemplate","templateSubMenu","type","menu","find","area","browseAllLinkProps","postType","postId","undefined","revert","is_custom"],"mappings":"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","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-module/components/template-details/template-areas.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
 /**
@@ -6,7 +7,7 @@ import { createElement, Fragment } from "@wordpress/element";
 import { sprintf, __ } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { moreVertical } from '@wordpress/icons';
 /**
@@ -14,8 +15,9 @@ import { moreVertical } from '@wordpress/icons';
  */
 
 import { store as editSiteStore } from '../../store';
-import { TEMPLATE_PART_AREA_TO_NAME } from '../../store/constants';
 import isTemplateRevertable from '../../utils/is-template-revertable';
+import { useLocation } from '../routes';
+import { useLink } from '../routes/link';
 
 function TemplatePartItemMore(_ref) {
   var _templatePart$title;
@@ -26,12 +28,20 @@ function TemplatePartItemMore(_ref) {
     closeTemplateDetailsDropdown
   } = _ref;
   const {
-    pushTemplatePart,
     revertTemplate
   } = useDispatch(editSiteStore);
+  const {
+    params
+  } = useLocation();
+  const editLinkProps = useLink({
+    postId: templatePart.id,
+    postType: templatePart.type
+  }, {
+    fromTemplateId: params.postId
+  });
 
-  function editTemplatePart() {
-    pushTemplatePart(templatePart.id);
+  function editTemplatePart(event) {
+    editLinkProps.onClick(event);
     onClose();
     closeTemplateDetailsDropdown();
   }
@@ -42,9 +52,9 @@ function TemplatePartItemMore(_ref) {
     closeTemplateDetailsDropdown();
   }
 
-  return createElement(Fragment, null, createElement(MenuGroup, null, createElement(MenuItem, {
+  return createElement(Fragment, null, createElement(MenuGroup, null, createElement(MenuItem, _extends({}, editLinkProps, {
     onClick: editTemplatePart
-  }, sprintf(
+  }), sprintf(
   /* translators: %s: template part title */
   __('Edit %s'), (_templatePart$title = templatePart.title) === null || _templatePart$title === void 0 ? void 0 : _templatePart$title.rendered))), isTemplateRevertable(templatePart) && createElement(MenuGroup, null, createElement(MenuItem, {
     info: __('Restore template to default state'),
@@ -62,6 +72,11 @@ function TemplatePartItem(_ref2) {
     selectBlock,
     toggleBlockHighlight
   } = useDispatch(blockEditorStore);
+  const templatePartArea = useSelect(select => {
+    const defaultAreas = select(editorStore).__experimentalGetDefaultTemplatePartAreas();
+
+    return defaultAreas.find(defaultArea => defaultArea.area === templatePart.area);
+  }, [templatePart.area]);
 
   const highlightBlock = () => toggleBlockHighlight(clientId, true);
 
@@ -72,7 +87,7 @@ function TemplatePartItem(_ref2) {
     className: "edit-site-template-details__template-areas-item"
   }, createElement(MenuItem, {
     role: "button",
-    icon: getTemplatePartIcon(templatePart.area),
+    icon: templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.icon,
     iconPosition: "left",
     onClick: () => {
       selectBlock(clientId);
@@ -81,7 +96,7 @@ function TemplatePartItem(_ref2) {
     onMouseLeave: cancelHighlightBlock,
     onFocus: highlightBlock,
     onBlur: cancelHighlightBlock
-  }, TEMPLATE_PART_AREA_TO_NAME[templatePart.area]), createElement(DropdownMenu, {
+  }, templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.label), createElement(DropdownMenu, {
     icon: moreVertical,
     label: __('More options'),
     className: "edit-site-template-details__template-areas-item-more"

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/template-details/template-areas.js"],"names":["sprintf","__","DropdownMenu","MenuGroup","MenuItem","useSelect","useDispatch","getTemplatePartIcon","store","blockEditorStore","moreVertical","editSiteStore","TEMPLATE_PART_AREA_TO_NAME","isTemplateRevertable","TemplatePartItemMore","onClose","templatePart","closeTemplateDetailsDropdown","pushTemplatePart","revertTemplate","editTemplatePart","id","clearCustomizations","title","rendered","TemplatePartItem","clientId","selectBlock","toggleBlockHighlight","highlightBlock","cancelHighlightBlock","area","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":["sprintf","__","DropdownMenu","MenuGroup","MenuItem","useSelect","useDispatch","store","editorStore","blockEditorStore","moreVertical","editSiteStore","isTemplateRevertable","useLocation","useLink","TemplatePartItemMore","onClose","templatePart","closeTemplateDetailsDropdown","revertTemplate","params","editLinkProps","postId","id","postType","type","fromTemplateId","editTemplatePart","event","onClick","clearCustomizations","title","rendered","TemplatePartItem","clientId","selectBlock","toggleBlockHighlight","templatePartArea","select","defaultAreas","__experimentalGetDefaultTemplatePartAreas","find","defaultArea","area","highlightBlock","cancelHighlightBlock","icon","label","TemplateAreas","templateParts","getCurrentTemplateTemplateParts","length","map","block","slug"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,EAAlB,QAA4B,iBAA5B;AACA,SAASC,YAAT,EAAuBC,SAAvB,EAAkCC,QAAlC,QAAkD,uBAAlD;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASD,KAAK,IAAIE,gBAAlB,QAA0C,yBAA1C;AACA,SAASC,YAAT,QAA6B,kBAA7B;AAEA;AACA;AACA;;AACA,SAASH,KAAK,IAAII,aAAlB,QAAuC,aAAvC;AACA,OAAOC,oBAAP,MAAiC,oCAAjC;AACA,SAASC,WAAT,QAA4B,WAA5B;AACA,SAASC,OAAT,QAAwB,gBAAxB;;AAEA,SAASC,oBAAT,OAII;AAAA;;AAAA,MAJ2B;AAC9BC,IAAAA,OAD8B;AAE9BC,IAAAA,YAF8B;AAG9BC,IAAAA;AAH8B,GAI3B;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAqBb,WAAW,CAAEK,aAAF,CAAtC;AACA,QAAM;AAAES,IAAAA;AAAF,MAAaP,WAAW,EAA9B;AACA,QAAMQ,aAAa,GAAGP,OAAO,CAC5B;AACCQ,IAAAA,MAAM,EAAEL,YAAY,CAACM,EADtB;AAECC,IAAAA,QAAQ,EAAEP,YAAY,CAACQ;AAFxB,GAD4B,EAK5B;AACCC,IAAAA,cAAc,EAAEN,MAAM,CAACE;AADxB,GAL4B,CAA7B;;AAUA,WAASK,gBAAT,CAA2BC,KAA3B,EAAmC;AAClCP,IAAAA,aAAa,CAACQ,OAAd,CAAuBD,KAAvB;AACAZ,IAAAA,OAAO;AACPE,IAAAA,4BAA4B;AAC5B;;AAED,WAASY,mBAAT,GAA+B;AAC9BX,IAAAA,cAAc,CAAEF,YAAF,CAAd;AACAD,IAAAA,OAAO;AACPE,IAAAA,4BAA4B;AAC5B;;AAED,SACC,8BACC,cAAC,SAAD,QACC,cAAC,QAAD,eAAeG,aAAf;AAA+B,IAAA,OAAO,EAAGM;AAAzC,MACG3B,OAAO;AACR;AACAC,EAAAA,EAAE,CAAE,SAAF,CAFM,yBAGRgB,YAAY,CAACc,KAHL,wDAGR,oBAAoBC,QAHZ,CADV,CADD,CADD,EAUGpB,oBAAoB,CAAEK,YAAF,CAApB,IACD,cAAC,SAAD,QACC,cAAC,QAAD;AACC,IAAA,IAAI,EAAGhB,EAAE,CAAE,mCAAF,CADV;AAEC,IAAA,OAAO,EAAG6B;AAFX,KAIG7B,EAAE,CAAE,sBAAF,CAJL,CADD,CAXF,CADD;AAuBA;;AAED,SAASgC,gBAAT,QAII;AAAA,MAJuB;AAC1BhB,IAAAA,YAD0B;AAE1BiB,IAAAA,QAF0B;AAG1BhB,IAAAA;AAH0B,GAIvB;AACH,QAAM;AAAEiB,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAwC9B,WAAW,CACxDG,gBADwD,CAAzD;AAGA,QAAM4B,gBAAgB,GAAGhC,SAAS,CAC/BiC,MAAF,IAAc;AACb,UAAMC,YAAY,GAAGD,MAAM,CAC1B9B,WAD0B,CAAN,CAEnBgC,yCAFmB,EAArB;;AAIA,WAAOD,YAAY,CAACE,IAAb,CACJC,WAAF,IAAmBA,WAAW,CAACC,IAAZ,KAAqB1B,YAAY,CAAC0B,IAD/C,CAAP;AAGA,GATgC,EAUjC,CAAE1B,YAAY,CAAC0B,IAAf,CAViC,CAAlC;;AAYA,QAAMC,cAAc,GAAG,MAAMR,oBAAoB,CAAEF,QAAF,EAAY,IAAZ,CAAjD;;AACA,QAAMW,oBAAoB,GAAG,MAAMT,oBAAoB,CAAEF,QAAF,EAAY,KAAZ,CAAvD;;AAEA,SACC;AACC,IAAA,IAAI,EAAC,UADN;AAEC,IAAA,SAAS,EAAC;AAFX,KAIC,cAAC,QAAD;AACC,IAAA,IAAI,EAAC,QADN;AAEC,IAAA,IAAI,EAAGG,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAES,IAF1B;AAGC,IAAA,YAAY,EAAC,MAHd;AAIC,IAAA,OAAO,EAAG,MAAM;AACfX,MAAAA,WAAW,CAAED,QAAF,CAAX;AACA,KANF;AAOC,IAAA,WAAW,EAAGU,cAPf;AAQC,IAAA,YAAY,EAAGC,oBARhB;AASC,IAAA,OAAO,EAAGD,cATX;AAUC,IAAA,MAAM,EAAGC;AAVV,KAYGR,gBAZH,aAYGA,gBAZH,uBAYGA,gBAAgB,CAAEU,KAZrB,CAJD,EAmBC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGrC,YADR;AAEC,IAAA,KAAK,EAAGT,EAAE,CAAE,cAAF,CAFX;AAGC,IAAA,SAAS,EAAC;AAHX,KAKG;AAAA,QAAE;AAAEe,MAAAA;AAAF,KAAF;AAAA,WACD,cAAC,oBAAD;AACC,MAAA,OAAO,EAAGA,OADX;AAEC,MAAA,YAAY,EAAGC,YAFhB;AAGC,MAAA,4BAA4B,EAC3BC;AAJF,MADC;AAAA,GALH,CAnBD,CADD;AAqCA;;AAED,eAAe,SAAS8B,aAAT,QAA2D;AAAA,MAAnC;AAAE9B,IAAAA;AAAF,GAAmC;AACzE,QAAM+B,aAAa,GAAG5C,SAAS,CAC5BiC,MAAF,IAAcA,MAAM,CAAE3B,aAAF,CAAN,CAAwBuC,+BAAxB,EADgB,EAE9B,EAF8B,CAA/B;;AAKA,MAAK,CAAED,aAAa,CAACE,MAArB,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGlD,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGgD,aAAa,CAACG,GAAd,CAAmB;AAAA,QAAE;AAAEnC,MAAAA,YAAF;AAAgBoC,MAAAA;AAAhB,KAAF;AAAA,WACpB,cAAC,gBAAD;AACC,MAAA,GAAG,EAAGpC,YAAY,CAACqC,IADpB;AAEC,MAAA,QAAQ,EAAGD,KAAK,CAACnB,QAFlB;AAGC,MAAA,YAAY,EAAGjB,YAHhB;AAIC,MAAA,4BAA4B,EAC3BC;AALF,MADoB;AAAA,GAAnB,CAJH,CADD;AAiBA","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"]}