@wordpress/edit-site 5.4.0 → 5.5.0

package/build/components/sidebar-navigation-screen-template/index.js

@@ -13,7 +13,7 @@ var _i18n = require("@wordpress/i18n");
 
 var _data = require("@wordpress/data");
 
-var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
 
 var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-navigation-screen"));
 
@@ -23,6 +23,8 @@ var _privateApis = require("../../private-apis");
 
 var _store = require("../../store");
 
+var _sidebarButton = _interopRequireDefault(require("../sidebar-button"));
+
 /**
  * WordPress dependencies
  */
@@ -30,19 +32,7 @@ var _store = require("../../store");
 /**
  * Internal dependencies
  */
-const config = {
-  wp_template: {
-    path: '/templates/single'
-  },
-  wp_template_part: {
-    path: '/template-parts/single'
-  }
-};
-
-function SidebarNavigationScreenTemplate(_ref) {
-  let {
-    postType = 'wp_template'
-  } = _ref;
+function SidebarNavigationScreenTemplate() {
   const {
     setCanvasMode
   } = (0, _privateApis.unlock)((0, _data.useDispatch)(_store.store));
@@ -58,12 +48,12 @@ function SidebarNavigationScreenTemplate(_ref) {
   }
 
   return (0, _element.createElement)(_sidebarNavigationScreen.default, {
-    path: config[postType].path,
     title: getTitle(),
-    actions: (0, _element.createElement)(_components.Button, {
-      variant: "primary",
-      onClick: () => setCanvasMode('edit')
-    }, (0, _i18n.__)('Edit')),
+    actions: (0, _element.createElement)(_sidebarButton.default, {
+      onClick: () => setCanvasMode('edit'),
+      label: (0, _i18n.__)('Edit'),
+      icon: _icons.pencil
+    }),
     content: description ? (0, _element.createElement)("p", null, description) : undefined
   });
 }

package/build/components/sidebar-navigation-screen-template/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-template/index.js"],"names":["config","wp_template","path","wp_template_part","SidebarNavigationScreenTemplate","postType","setCanvasMode","editSiteStore","getDescription","getTitle","record","description","is_custom","undefined"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAKA;AACA;AACA;AAMA,MAAMA,MAAM,GAAG;AACdC,EAAAA,WAAW,EAAE;AACZC,IAAAA,IAAI,EAAE;AADM,GADC;AAIdC,EAAAA,gBAAgB,EAAE;AACjBD,IAAAA,IAAI,EAAE;AADW;AAJJ,CAAf;;AASe,SAASE,+BAAT,OAEX;AAAA,MAFqD;AACxDC,IAAAA,QAAQ,GAAG;AAD6C,GAErD;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAoB,yBAAQ,uBAAaC,YAAb,CAAR,CAA1B;AACA,QAAM;AAAEC,IAAAA,cAAF;AAAkBC,IAAAA,QAAlB;AAA4BC,IAAAA;AAA5B,MAAuC,qCAA7C;AACA,MAAIC,WAAW,GAAGH,cAAc,EAAhC;;AACA,MAAK,CAAEG,WAAF,IAAiBD,MAAM,CAACE,SAA7B,EAAyC;AACxCD,IAAAA,WAAW,GAAG,cACb,6EADa,CAAd;AAGA;;AAED,SACC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAGX,MAAM,CAAEK,QAAF,CAAN,CAAmBH,IAD3B;AAEC,IAAA,KAAK,EAAGO,QAAQ,EAFjB;AAGC,IAAA,OAAO,EACN,4BAAC,kBAAD;AACC,MAAA,OAAO,EAAC,SADT;AAEC,MAAA,OAAO,EAAG,MAAMH,aAAa,CAAE,MAAF;AAF9B,OAIG,cAAI,MAAJ,CAJH,CAJF;AAWC,IAAA,OAAO,EAAGK,WAAW,GAAG,uCAAKA,WAAL,CAAH,GAA4BE;AAXlD,IADD;AAeA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch } from '@wordpress/data';\nimport { Button } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport useEditedEntityRecord from '../use-edited-entity-record';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\n\nconst config = {\n\twp_template: {\n\t\tpath: '/templates/single',\n\t},\n\twp_template_part: {\n\t\tpath: '/template-parts/single',\n\t},\n};\n\nexport default function SidebarNavigationScreenTemplate( {\n\tpostType = 'wp_template',\n} ) {\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst { getDescription, getTitle, record } = useEditedEntityRecord();\n\tlet description = getDescription();\n\tif ( ! description && record.is_custom ) {\n\t\tdescription = __(\n\t\t\t'This is a custom template that can be applied manually to any Post or Page.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\tpath={ config[ postType ].path }\n\t\t\ttitle={ getTitle() }\n\t\t\tactions={\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ () => setCanvasMode( 'edit' ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t</Button>\n\t\t\t}\n\t\t\tcontent={ description ? <p>{ description }</p> : undefined }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-template/index.js"],"names":["SidebarNavigationScreenTemplate","setCanvasMode","editSiteStore","getDescription","getTitle","record","description","is_custom","pencil","undefined"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAKA;AACA;AACA;AAOe,SAASA,+BAAT,GAA2C;AACzD,QAAM;AAAEC,IAAAA;AAAF,MAAoB,yBAAQ,uBAAaC,YAAb,CAAR,CAA1B;AACA,QAAM;AAAEC,IAAAA,cAAF;AAAkBC,IAAAA,QAAlB;AAA4BC,IAAAA;AAA5B,MAAuC,qCAA7C;AACA,MAAIC,WAAW,GAAGH,cAAc,EAAhC;;AACA,MAAK,CAAEG,WAAF,IAAiBD,MAAM,CAACE,SAA7B,EAAyC;AACxCD,IAAAA,WAAW,GAAG,cACb,6EADa,CAAd;AAGA;;AAED,SACC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGF,QAAQ,EADjB;AAEC,IAAA,OAAO,EACN,4BAAC,sBAAD;AACC,MAAA,OAAO,EAAG,MAAMH,aAAa,CAAE,MAAF,CAD9B;AAEC,MAAA,KAAK,EAAG,cAAI,MAAJ,CAFT;AAGC,MAAA,IAAI,EAAGO;AAHR,MAHF;AASC,IAAA,OAAO,EAAGF,WAAW,GAAG,uCAAKA,WAAL,CAAH,GAA4BG;AATlD,IADD;AAaA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch } from '@wordpress/data';\nimport { pencil } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport useEditedEntityRecord from '../use-edited-entity-record';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\n\nexport default function SidebarNavigationScreenTemplate() {\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst { getDescription, getTitle, record } = useEditedEntityRecord();\n\tlet description = getDescription();\n\tif ( ! description && record.is_custom ) {\n\t\tdescription = __(\n\t\t\t'This is a custom template that can be applied manually to any Post or Page.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\ttitle={ getTitle() }\n\t\t\tactions={\n\t\t\t\t<SidebarButton\n\t\t\t\t\tonClick={ () => setCanvasMode( 'edit' ) }\n\t\t\t\t\tlabel={ __( 'Edit' ) }\n\t\t\t\t\ticon={ pencil }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tcontent={ description ? <p>{ description }</p> : undefined }\n\t\t/>\n\t);\n}\n"]}

package/build/components/sidebar-navigation-screen-templates/index.js

@@ -17,6 +17,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _coreData = require("@wordpress/core-data");
 
+var _data = require("@wordpress/data");
+
 var _htmlEntities = require("@wordpress/html-entities");
 
 var _compose = require("@wordpress/compose");
@@ -29,6 +31,10 @@ var _sidebarNavigationItem = _interopRequireDefault(require("../sidebar-navigati
 
 var _addNewTemplate = _interopRequireDefault(require("../add-new-template"));
 
+var _store = require("../../store");
+
+var _sidebarButton = _interopRequireDefault(require("../sidebar-button"));
+
 /**
  * WordPress dependencies
  */
@@ -38,7 +44,6 @@ var _addNewTemplate = _interopRequireDefault(require("../add-new-template"));
  */
 const config = {
   wp_template: {
-    path: '/templates',
     labels: {
       title: (0, _i18n.__)('Templates'),
       loading: (0, _i18n.__)('Loading templates'),
@@ -47,7 +52,6 @@ const config = {
     }
   },
   wp_template_part: {
-    path: '/template-parts',
     labels: {
       title: (0, _i18n.__)('Template parts'),
       loading: (0, _i18n.__)('Loading template parts'),
@@ -65,38 +69,44 @@ const TemplateItem = _ref => {
   } = _ref;
   const linkInfo = (0, _link.useLink)({
     postType,
-    postId,
-    path: config[postType].path + '/single'
+    postId
   });
   return (0, _element.createElement)(_sidebarNavigationItem.default, (0, _extends2.default)({}, linkInfo, props));
 };
 
-function SidebarNavigationScreenTemplates(_ref2) {
-  let {
-    postType = 'wp_template'
-  } = _ref2;
+function SidebarNavigationScreenTemplates() {
+  const {
+    params: {
+      postType
+    }
+  } = (0, _components.__experimentalUseNavigator)();
   const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
+  const isTemplatePartsMode = (0, _data.useSelect)(select => {
+    const settings = select(_store.store).getSettings();
+    return !!settings.supportsTemplatePartsMode;
+  }, []);
   const {
     records: templates,
     isResolving: isLoading
   } = (0, _coreData.useEntityRecords)('postType', postType, {
     per_page: -1
   });
+  const sortedTemplates = templates ? [...templates] : [];
+  sortedTemplates.sort((a, b) => a.slug.localeCompare(b.slug));
   const browseAllLink = (0, _link.useLink)({
-    postType,
-    postId: undefined,
-    path: config[postType].path + '/all'
+    path: '/' + postType + '/all'
   });
+  const canCreate = !isMobileViewport && !isTemplatePartsMode;
   return (0, _element.createElement)(_sidebarNavigationScreen.default, {
-    path: config[postType].path,
+    isRoot: isTemplatePartsMode,
     title: config[postType].labels.title,
-    actions: !isMobileViewport && (0, _element.createElement)(_addNewTemplate.default, {
+    actions: canCreate && (0, _element.createElement)(_addNewTemplate.default, {
       templateType: postType,
       toggleProps: {
-        className: 'edit-site-sidebar-navigation-screen-templates__add-button'
+        as: _sidebarButton.default
       }
     }),
-    content: (0, _element.createElement)(_element.Fragment, null, isLoading && config[postType].labels.loading, !isLoading && (0, _element.createElement)(_components.__experimentalItemGroup, null, !(templates !== null && templates !== void 0 && templates.length) && (0, _element.createElement)(_components.__experimentalItem, null, config[postType].labels.notFound), (templates !== null && templates !== void 0 ? templates : []).map(template => {
+    content: (0, _element.createElement)(_element.Fragment, null, isLoading && config[postType].labels.loading, !isLoading && (0, _element.createElement)(_components.__experimentalItemGroup, null, !(templates !== null && templates !== void 0 && templates.length) && (0, _element.createElement)(_components.__experimentalItem, null, config[postType].labels.notFound), sortedTemplates.map(template => {
       var _template$title;
 
       return (0, _element.createElement)(TemplateItem, {

package/build/components/sidebar-navigation-screen-templates/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-templates/index.js"],"names":["config","wp_template","path","labels","title","loading","notFound","manage","wp_template_part","TemplateItem","postType","postId","props","linkInfo","SidebarNavigationScreenTemplates","isMobileViewport","records","templates","isResolving","isLoading","per_page","browseAllLink","undefined","className","length","map","template","id","rendered","slug"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEntityRecords } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport { useLink } from '../routes/link';\nimport SidebarNavigationItem from '../sidebar-navigation-item';\nimport AddNewTemplate from '../add-new-template';\n\nconst config = {\n\twp_template: {\n\t\tpath: '/templates',\n\t\tlabels: {\n\t\t\ttitle: __( 'Templates' ),\n\t\t\tloading: __( 'Loading templates' ),\n\t\t\tnotFound: __( 'No templates found' ),\n\t\t\tmanage: __( 'Manage all templates' ),\n\t\t},\n\t},\n\twp_template_part: {\n\t\tpath: '/template-parts',\n\t\tlabels: {\n\t\t\ttitle: __( 'Template parts' ),\n\t\t\tloading: __( 'Loading template parts' ),\n\t\t\tnotFound: __( 'No template parts found' ),\n\t\t\tmanage: __( 'Manage all template parts' ),\n\t\t},\n\t},\n};\n\nconst TemplateItem = ( { postType, postId, ...props } ) => {\n\tconst linkInfo = useLink( {\n\t\tpostType,\n\t\tpostId,\n\t\tpath: config[ postType ].path + '/single',\n\t} );\n\treturn <SidebarNavigationItem { ...linkInfo } { ...props } />;\n};\n\nexport default function SidebarNavigationScreenTemplates( {\n\tpostType = 'wp_template',\n} ) {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tconst { records: templates, isResolving: isLoading } = useEntityRecords(\n\t\t'postType',\n\t\tpostType,\n\t\t{\n\t\t\tper_page: -1,\n\t\t}\n\t);\n\n\tconst browseAllLink = useLink( {\n\t\tpostType,\n\t\tpostId: undefined,\n\t\tpath: config[ postType ].path + '/all',\n\t} );\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\tpath={ config[ postType ].path }\n\t\t\ttitle={ config[ postType ].labels.title }\n\t\t\tactions={\n\t\t\t\t! isMobileViewport && (\n\t\t\t\t\t<AddNewTemplate\n\t\t\t\t\t\ttemplateType={ postType }\n\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t'edit-site-sidebar-navigation-screen-templates__add-button',\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\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ isLoading && config[ postType ].labels.loading }\n\t\t\t\t\t{ ! isLoading && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t{ ! templates?.length && (\n\t\t\t\t\t\t\t\t<Item>\n\t\t\t\t\t\t\t\t\t{ config[ postType ].labels.notFound }\n\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ( templates ?? [] ).map( ( template ) => (\n\t\t\t\t\t\t\t\t<TemplateItem\n\t\t\t\t\t\t\t\t\tpostType={ postType }\n\t\t\t\t\t\t\t\t\tpostId={ template.id }\n\t\t\t\t\t\t\t\t\tkey={ template.id }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\t\t\ttemplate.title?.rendered ||\n\t\t\t\t\t\t\t\t\t\t\ttemplate.slug\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</TemplateItem>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<SidebarNavigationItem\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-templates__see-all\"\n\t\t\t\t\t\t\t\t\t{ ...browseAllLink }\n\t\t\t\t\t\t\t\t\tchildren={\n\t\t\t\t\t\t\t\t\t\tconfig[ postType ].labels.manage\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) }\n\t\t\t\t\t\t</ItemGroup>\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/sidebar-navigation-screen-templates/index.js"],"names":["config","wp_template","labels","title","loading","notFound","manage","wp_template_part","TemplateItem","postType","postId","props","linkInfo","SidebarNavigationScreenTemplates","params","isMobileViewport","isTemplatePartsMode","select","settings","editSiteStore","getSettings","supportsTemplatePartsMode","records","templates","isResolving","isLoading","per_page","sortedTemplates","sort","a","b","slug","localeCompare","browseAllLink","path","canCreate","as","SidebarButton","length","map","template","id","rendered"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalUseNavigator as useNavigator,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEntityRecords } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport { useLink } from '../routes/link';\nimport SidebarNavigationItem from '../sidebar-navigation-item';\nimport AddNewTemplate from '../add-new-template';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\n\nconst config = {\n\twp_template: {\n\t\tlabels: {\n\t\t\ttitle: __( 'Templates' ),\n\t\t\tloading: __( 'Loading templates' ),\n\t\t\tnotFound: __( 'No templates found' ),\n\t\t\tmanage: __( 'Manage all templates' ),\n\t\t},\n\t},\n\twp_template_part: {\n\t\tlabels: {\n\t\t\ttitle: __( 'Template parts' ),\n\t\t\tloading: __( 'Loading template parts' ),\n\t\t\tnotFound: __( 'No template parts found' ),\n\t\t\tmanage: __( 'Manage all template parts' ),\n\t\t},\n\t},\n};\n\nconst TemplateItem = ( { postType, postId, ...props } ) => {\n\tconst linkInfo = useLink( {\n\t\tpostType,\n\t\tpostId,\n\t} );\n\treturn <SidebarNavigationItem { ...linkInfo } { ...props } />;\n};\n\nexport default function SidebarNavigationScreenTemplates() {\n\tconst {\n\t\tparams: { postType },\n\t} = useNavigator();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst isTemplatePartsMode = useSelect( ( select ) => {\n\t\tconst settings = select( editSiteStore ).getSettings();\n\n\t\treturn !! settings.supportsTemplatePartsMode;\n\t}, [] );\n\n\tconst { records: templates, isResolving: isLoading } = useEntityRecords(\n\t\t'postType',\n\t\tpostType,\n\t\t{\n\t\t\tper_page: -1,\n\t\t}\n\t);\n\tconst sortedTemplates = templates ? [ ...templates ] : [];\n\tsortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );\n\n\tconst browseAllLink = useLink( {\n\t\tpath: '/' + postType + '/all',\n\t} );\n\n\tconst canCreate = ! isMobileViewport && ! isTemplatePartsMode;\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\tisRoot={ isTemplatePartsMode }\n\t\t\ttitle={ config[ postType ].labels.title }\n\t\t\tactions={\n\t\t\t\tcanCreate && (\n\t\t\t\t\t<AddNewTemplate\n\t\t\t\t\t\ttemplateType={ postType }\n\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\tas: SidebarButton,\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\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ isLoading && config[ postType ].labels.loading }\n\t\t\t\t\t{ ! isLoading && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t{ ! templates?.length && (\n\t\t\t\t\t\t\t\t<Item>\n\t\t\t\t\t\t\t\t\t{ config[ postType ].labels.notFound }\n\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ sortedTemplates.map( ( template ) => (\n\t\t\t\t\t\t\t\t<TemplateItem\n\t\t\t\t\t\t\t\t\tpostType={ postType }\n\t\t\t\t\t\t\t\t\tpostId={ template.id }\n\t\t\t\t\t\t\t\t\tkey={ template.id }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ decodeEntities(\n\t\t\t\t\t\t\t\t\t\ttemplate.title?.rendered ||\n\t\t\t\t\t\t\t\t\t\t\ttemplate.slug\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</TemplateItem>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<SidebarNavigationItem\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-templates__see-all\"\n\t\t\t\t\t\t\t\t\t{ ...browseAllLink }\n\t\t\t\t\t\t\t\t\tchildren={\n\t\t\t\t\t\t\t\t\t\tconfig[ postType ].labels.manage\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) }\n\t\t\t\t\t\t</ItemGroup>\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/sidebar-navigation-screen-templates-browse/index.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _i18n = require("@wordpress/i18n");
 
+var _components = require("@wordpress/components");
+
 var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-navigation-screen"));
 
 /**
@@ -22,21 +24,20 @@ var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-naviga
  */
 const config = {
   wp_template: {
-    path: '/templates/all',
     title: (0, _i18n.__)('All templates')
   },
   wp_template_part: {
-    path: '/template-parts/all',
     title: (0, _i18n.__)('All template parts')
   }
 };
 
-function SidebarNavigationScreenTemplatesBrowse(_ref) {
-  let {
-    postType = 'wp_template'
-  } = _ref;
+function SidebarNavigationScreenTemplatesBrowse() {
+  const {
+    params: {
+      postType
+    }
+  } = (0, _components.__experimentalUseNavigator)();
   return (0, _element.createElement)(_sidebarNavigationScreen.default, {
-    path: config[postType].path,
     title: config[postType].title
   });
 }

package/build/components/sidebar-navigation-screen-templates-browse/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js"],"names":["config","wp_template","path","title","wp_template_part","SidebarNavigationScreenTemplatesBrowse","postType"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,MAAM,GAAG;AACdC,EAAAA,WAAW,EAAE;AACZC,IAAAA,IAAI,EAAE,gBADM;AAEZC,IAAAA,KAAK,EAAE,cAAI,eAAJ;AAFK,GADC;AAKdC,EAAAA,gBAAgB,EAAE;AACjBF,IAAAA,IAAI,EAAE,qBADW;AAEjBC,IAAAA,KAAK,EAAE,cAAI,oBAAJ;AAFU;AALJ,CAAf;;AAWe,SAASE,sCAAT,OAEX;AAAA,MAF4D;AAC/DC,IAAAA,QAAQ,GAAG;AADoD,GAE5D;AACH,SACC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAGN,MAAM,CAAEM,QAAF,CAAN,CAAmBJ,IAD3B;AAEC,IAAA,KAAK,EAAGF,MAAM,CAAEM,QAAF,CAAN,CAAmBH;AAF5B,IADD;AAMA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\n\nconst config = {\n\twp_template: {\n\t\tpath: '/templates/all',\n\t\ttitle: __( 'All templates' ),\n\t},\n\twp_template_part: {\n\t\tpath: '/template-parts/all',\n\t\ttitle: __( 'All template parts' ),\n\t},\n};\n\nexport default function SidebarNavigationScreenTemplatesBrowse( {\n\tpostType = 'wp_template',\n} ) {\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\tpath={ config[ postType ].path }\n\t\t\ttitle={ config[ postType ].title }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js"],"names":["config","wp_template","title","wp_template_part","SidebarNavigationScreenTemplatesBrowse","params","postType"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,MAAM,GAAG;AACdC,EAAAA,WAAW,EAAE;AACZC,IAAAA,KAAK,EAAE,cAAI,eAAJ;AADK,GADC;AAIdC,EAAAA,gBAAgB,EAAE;AACjBD,IAAAA,KAAK,EAAE,cAAI,oBAAJ;AADU;AAJJ,CAAf;;AASe,SAASE,sCAAT,GAAkD;AAChE,QAAM;AACLC,IAAAA,MAAM,EAAE;AAAEC,MAAAA;AAAF;AADH,MAEF,6CAFJ;AAGA,SAAO,4BAAC,gCAAD;AAAyB,IAAA,KAAK,EAAGN,MAAM,CAAEM,QAAF,CAAN,CAAmBJ;AAApD,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalUseNavigator as useNavigator } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\n\nconst config = {\n\twp_template: {\n\t\ttitle: __( 'All templates' ),\n\t},\n\twp_template_part: {\n\t\ttitle: __( 'All template parts' ),\n\t},\n};\n\nexport default function SidebarNavigationScreenTemplatesBrowse() {\n\tconst {\n\t\tparams: { postType },\n\t} = useNavigator();\n\treturn <SidebarNavigationScreen title={ config[ postType ].title } />;\n}\n"]}

package/build/components/style-book/index.js

@@ -24,6 +24,8 @@ var _icons = require("@wordpress/icons");
 
 var _compose = require("@wordpress/compose");
 
+var _keycodes = require("@wordpress/keycodes");
+
 var _privateApis = require("../../private-apis");
 
 /**
@@ -93,6 +95,8 @@ function StyleBook(_ref) {
     onClose
   } = _ref;
   const [resizeObserver, sizes] = (0, _compose.useResizeObserver)();
+  const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement');
+  const sectionFocusReturnRef = (0, _compose.useFocusReturn)();
   const [textColor] = useGlobalStyle('color.text');
   const [backgroundColor] = useGlobalStyle('color.background');
   const examples = (0, _element.useMemo)(getExamples, []);
@@ -101,6 +105,14 @@ function StyleBook(_ref) {
     title: category.title,
     icon: category.icon
   })), [examples]);
+
+  function closeOnEscape(event) {
+    if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented) {
+      event.preventDefault();
+      onClose();
+    }
+  }
+
   return (0, _element.createElement)(StyleBookFill, null, (0, _element.createElement)("section", {
     className: (0, _classnames.default)('edit-site-style-book', {
       'is-wide': sizes.width > 600
@@ -109,12 +121,15 @@ function StyleBook(_ref) {
       color: textColor,
       background: backgroundColor
     },
-    "aria-label": (0, _i18n.__)('Style Book')
+    "aria-label": (0, _i18n.__)('Style Book'),
+    onKeyDown: closeOnEscape,
+    ref: (0, _compose.useMergeRefs)([sectionFocusReturnRef, focusOnMountRef])
   }, resizeObserver, (0, _element.createElement)(_components.Button, {
     className: "edit-site-style-book__close-button",
     icon: _icons.closeSmall,
     label: (0, _i18n.__)('Close Style Book'),
-    onClick: onClose
+    onClick: onClose,
+    showTooltip: false
   }), (0, _element.createElement)(_components.TabPanel, {
     className: "edit-site-style-book__tab-panel",
     tabs: tabs

package/build/components/style-book/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"names":["useGlobalStyle","blockEditorPrivateApis","SLOT_FILL_NAME","Slot","StyleBookSlot","Fill","StyleBookFill","getExamples","headingsExample","name","title","category","blocks","content","level","otherExamples","filter","blockType","example","supports","inserter","map","StyleBook","isSelected","onSelect","onClose","resizeObserver","sizes","textColor","backgroundColor","examples","tabs","some","slug","icon","width","color","background","closeSmall","tab","Examples","Example","onClick","css","useHasStyleBook","fills","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tTabPanel,\n\tcreateSlotFill,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\nimport {\n\tBlockPreview,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { closeSmall } from '@wordpress/icons';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { useMemo, memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst SLOT_FILL_NAME = 'EditSiteStyleBook';\nconst { Slot: StyleBookSlot, Fill: StyleBookFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\n\nfunction getExamples() {\n\t// Use our own example for the Heading block so that we can show multiple\n\t// heading levels.\n\tconst headingsExample = {\n\t\tname: 'core/heading',\n\t\ttitle: __( 'Headings' ),\n\t\tcategory: 'text',\n\t\tblocks: [\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 1,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 2,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 3,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 4,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 5,\n\t\t\t} ),\n\t\t],\n\t};\n\n\tconst otherExamples = getBlockTypes()\n\t\t.filter( ( blockType ) => {\n\t\t\tconst { name, example, supports } = blockType;\n\t\t\treturn (\n\t\t\t\tname !== 'core/heading' &&\n\t\t\t\t!! example &&\n\t\t\t\tsupports.inserter !== false\n\t\t\t);\n\t\t} )\n\t\t.map( ( blockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\tblocks: getBlockFromExample( blockType.name, blockType.example ),\n\t\t} ) );\n\n\treturn [ headingsExample, ...otherExamples ];\n}\n\nfunction StyleBook( { isSelected, onSelect, onClose } ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst examples = useMemo( getExamples, [] );\n\tconst tabs = useMemo(\n\t\t() =>\n\t\t\tgetCategories()\n\t\t\t\t.filter( ( category ) =>\n\t\t\t\t\texamples.some(\n\t\t\t\t\t\t( example ) => example.category === category.slug\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.map( ( category ) => ( {\n\t\t\t\t\tname: category.slug,\n\t\t\t\t\ttitle: category.title,\n\t\t\t\t\ticon: category.icon,\n\t\t\t\t} ) ),\n\t\t[ examples ]\n\t);\n\treturn (\n\t\t<StyleBookFill>\n\t\t\t<section\n\t\t\t\tclassName={ classnames( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: textColor,\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t} }\n\t\t\t\taria-label={ __( 'Style Book' ) }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"edit-site-style-book__close-button\"\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close Style Book' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t/>\n\t\t\t\t<TabPanel\n\t\t\t\t\tclassName=\"edit-site-style-book__tab-panel\"\n\t\t\t\t\ttabs={ tabs }\n\t\t\t\t>\n\t\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t\t<Examples\n\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</TabPanel>\n\t\t\t</section>\n\t\t</StyleBookFill>\n\t);\n}\n\nconst Examples = memo( ( { examples, category, isSelected, onSelect } ) => (\n\t<div className=\"edit-site-style-book__examples\">\n\t\t{ examples\n\t\t\t.filter( ( example ) => example.category === category )\n\t\t\t.map( ( example ) => (\n\t\t\t\t<Example\n\t\t\t\t\tkey={ example.name }\n\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonSelect( example.name );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t</div>\n) );\n\nconst Example = memo( ( { title, blocks, isSelected, onClick } ) => (\n\t<button\n\t\tclassName={ classnames( 'edit-site-style-book__example', {\n\t\t\t'is-selected': isSelected,\n\t\t} ) }\n\t\taria-label={ sprintf(\n\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\ttitle\n\t\t) }\n\t\tonClick={ onClick }\n\t>\n\t\t<span className=\"edit-site-style-book__example-title\">{ title }</span>\n\t\t<div className=\"edit-site-style-book__example-preview\">\n\t\t\t<BlockPreview\n\t\t\t\tblocks={ blocks }\n\t\t\t\tviewportWidth={ 0 }\n\t\t\t\tadditionalStyles={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tcss:\n\t\t\t\t\t\t\t'.wp-block:first-child { margin-top: 0; }' +\n\t\t\t\t\t\t\t'.wp-block:last-child { margin-bottom: 0; }',\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t</div>\n\t</button>\n) );\n\nfunction useHasStyleBook() {\n\tconst fills = useSlotFills( SLOT_FILL_NAME );\n\treturn !! fills?.length;\n}\n\nStyleBook.Slot = StyleBookSlot;\nexport default StyleBook;\nexport { useHasStyleBook };\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"names":["useGlobalStyle","blockEditorPrivateApis","SLOT_FILL_NAME","Slot","StyleBookSlot","Fill","StyleBookFill","getExamples","headingsExample","name","title","category","blocks","content","level","otherExamples","filter","blockType","example","supports","inserter","map","StyleBook","isSelected","onSelect","onClose","resizeObserver","sizes","focusOnMountRef","sectionFocusReturnRef","textColor","backgroundColor","examples","tabs","some","slug","icon","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","width","color","background","closeSmall","tab","Examples","Example","onClick","css","useHasStyleBook","fills","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tTabPanel,\n\tcreateSlotFill,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\nimport {\n\tBlockPreview,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { closeSmall } from '@wordpress/icons';\nimport {\n\tuseResizeObserver,\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useMemo, memo } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst SLOT_FILL_NAME = 'EditSiteStyleBook';\nconst { Slot: StyleBookSlot, Fill: StyleBookFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\n\nfunction getExamples() {\n\t// Use our own example for the Heading block so that we can show multiple\n\t// heading levels.\n\tconst headingsExample = {\n\t\tname: 'core/heading',\n\t\ttitle: __( 'Headings' ),\n\t\tcategory: 'text',\n\t\tblocks: [\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 1,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 2,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 3,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 4,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 5,\n\t\t\t} ),\n\t\t],\n\t};\n\n\tconst otherExamples = getBlockTypes()\n\t\t.filter( ( blockType ) => {\n\t\t\tconst { name, example, supports } = blockType;\n\t\t\treturn (\n\t\t\t\tname !== 'core/heading' &&\n\t\t\t\t!! example &&\n\t\t\t\tsupports.inserter !== false\n\t\t\t);\n\t\t} )\n\t\t.map( ( blockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\tblocks: getBlockFromExample( blockType.name, blockType.example ),\n\t\t} ) );\n\n\treturn [ headingsExample, ...otherExamples ];\n}\n\nfunction StyleBook( { isSelected, onSelect, onClose } ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst sectionFocusReturnRef = useFocusReturn();\n\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst examples = useMemo( getExamples, [] );\n\tconst tabs = useMemo(\n\t\t() =>\n\t\t\tgetCategories()\n\t\t\t\t.filter( ( category ) =>\n\t\t\t\t\texamples.some(\n\t\t\t\t\t\t( example ) => example.category === category.slug\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.map( ( category ) => ( {\n\t\t\t\t\tname: category.slug,\n\t\t\t\t\ttitle: category.title,\n\t\t\t\t\ticon: category.icon,\n\t\t\t\t} ) ),\n\t\t[ examples ]\n\t);\n\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t}\n\t}\n\n\treturn (\n\t\t<StyleBookFill>\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<section\n\t\t\t\tclassName={ classnames( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: textColor,\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t} }\n\t\t\t\taria-label={ __( 'Style Book' ) }\n\t\t\t\tonKeyDown={ closeOnEscape }\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tsectionFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"edit-site-style-book__close-button\"\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close Style Book' ) }\n\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t/>\n\t\t\t\t<TabPanel\n\t\t\t\t\tclassName=\"edit-site-style-book__tab-panel\"\n\t\t\t\t\ttabs={ tabs }\n\t\t\t\t>\n\t\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t\t<Examples\n\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</TabPanel>\n\t\t\t</section>\n\t\t</StyleBookFill>\n\t);\n}\n\nconst Examples = memo( ( { examples, category, isSelected, onSelect } ) => (\n\t<div className=\"edit-site-style-book__examples\">\n\t\t{ examples\n\t\t\t.filter( ( example ) => example.category === category )\n\t\t\t.map( ( example ) => (\n\t\t\t\t<Example\n\t\t\t\t\tkey={ example.name }\n\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonSelect( example.name );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t</div>\n) );\n\nconst Example = memo( ( { title, blocks, isSelected, onClick } ) => (\n\t<button\n\t\tclassName={ classnames( 'edit-site-style-book__example', {\n\t\t\t'is-selected': isSelected,\n\t\t} ) }\n\t\taria-label={ sprintf(\n\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\ttitle\n\t\t) }\n\t\tonClick={ onClick }\n\t>\n\t\t<span className=\"edit-site-style-book__example-title\">{ title }</span>\n\t\t<div className=\"edit-site-style-book__example-preview\">\n\t\t\t<BlockPreview\n\t\t\t\tblocks={ blocks }\n\t\t\t\tviewportWidth={ 0 }\n\t\t\t\tadditionalStyles={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tcss:\n\t\t\t\t\t\t\t'.wp-block:first-child { margin-top: 0; }' +\n\t\t\t\t\t\t\t'.wp-block:last-child { margin-bottom: 0; }',\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t</div>\n\t</button>\n) );\n\nfunction useHasStyleBook() {\n\tconst fills = useSlotFills( SLOT_FILL_NAME );\n\treturn !! fills?.length;\n}\n\nStyleBook.Slot = StyleBookSlot;\nexport default StyleBook;\nexport { useHasStyleBook };\n"]}

package/build/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -26,13 +26,13 @@ function useInitEditedEntityFromURL() {
   const {
     params: {
       postId,
-      postType,
-      path = '/'
+      postType
     } = {}
   } = (0, _routes.useLocation)();
   const {
     isRequestingSite,
-    homepageId
+    homepageId,
+    url
   } = (0, _data.useSelect)(select => {
     const {
       getSite
@@ -40,7 +40,8 @@ function useInitEditedEntityFromURL() {
     const siteData = getSite();
     return {
       isRequestingSite: !siteData,
-      homepageId: (siteData === null || siteData === void 0 ? void 0 : siteData.show_on_front) === 'page' ? siteData.page_on_front : null
+      homepageId: (siteData === null || siteData === void 0 ? void 0 : siteData.show_on_front) === 'page' ? siteData.page_on_front : null,
+      url: siteData === null || siteData === void 0 ? void 0 : siteData.url
     };
   }, []);
   const {
@@ -49,40 +50,41 @@ function useInitEditedEntityFromURL() {
     setPage
   } = (0, _data.useDispatch)(_store.store);
   (0, _element.useEffect)(() => {
-    switch (path) {
-      case '/templates/single':
-        setTemplate(postId);
-        break;
+    if (postType && postId) {
+      switch (postType) {
+        case 'wp_template':
+          setTemplate(postId);
+          break;
 
-      case '/template-parts/single':
-        setTemplatePart(postId);
-        break;
+        case 'wp_template_part':
+          setTemplatePart(postId);
+          break;
 
-      case '/navigation/single':
-        setPage({
-          context: {
-            postType,
-            postId
-          }
-        });
-        break;
+        default:
+          setPage({
+            context: {
+              postType,
+              postId
+            }
+          });
+      }
 
-      default:
-        {
-          if (homepageId) {
-            setPage({
-              context: {
-                postType: 'page',
-                postId: homepageId
-              }
-            });
-          } else if (!isRequestingSite) {
-            setPage({
-              path: '/'
-            });
-          }
+      return;
+    } // In all other cases, we need to set the home page in the site editor view.
+
+
+    if (homepageId) {
+      setPage({
+        context: {
+          postType: 'page',
+          postId: homepageId
         }
+      });
+    } else if (!isRequestingSite) {
+      setPage({
+        path: url
+      });
     }
-  }, [path, postId, homepageId, isRequestingSite, setPage, setTemplate, setTemplatePart]);
+  }, [url, postId, postType, homepageId, isRequestingSite, setPage, setTemplate, setTemplatePart]);
 }
 //# sourceMappingURL=use-init-edited-entity-from-url.js.map

package/build/components/sync-state-with-url/use-init-edited-entity-from-url.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js"],"names":["useInitEditedEntityFromURL","params","postId","postType","path","isRequestingSite","homepageId","select","getSite","coreDataStore","siteData","show_on_front","page_on_front","setTemplate","setTemplatePart","setPage","editSiteStore","context"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAIe,SAASA,0BAAT,GAAsC;AACpD,QAAM;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA,QAAV;AAAoBC,MAAAA,IAAI,GAAG;AAA3B,QAAmC;AAA7C,MAAoD,0BAA1D;AACA,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAmC,qBAAaC,MAAF,IAAc;AACjE,UAAM;AAAEC,MAAAA;AAAF,QAAcD,MAAM,CAAEE,eAAF,CAA1B;AACA,UAAMC,QAAQ,GAAGF,OAAO,EAAxB;AAEA,WAAO;AACNH,MAAAA,gBAAgB,EAAE,CAAEK,QADd;AAENJ,MAAAA,UAAU,EACT,CAAAI,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEC,aAAV,MAA4B,MAA5B,GACGD,QAAQ,CAACE,aADZ,GAEG;AALE,KAAP;AAOA,GAXwC,EAWtC,EAXsC,CAAzC;AAaA,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,eAAf;AAAgCC,IAAAA;AAAhC,MACL,uBAAaC,YAAb,CADD;AAGA,0BAAW,MAAM;AAChB,YAASZ,IAAT;AACC,WAAK,mBAAL;AACCS,QAAAA,WAAW,CAAEX,MAAF,CAAX;AACA;;AACD,WAAK,wBAAL;AACCY,QAAAA,eAAe,CAAEZ,MAAF,CAAf;AACA;;AACD,WAAK,oBAAL;AACCa,QAAAA,OAAO,CAAE;AACRE,UAAAA,OAAO,EAAE;AAAEd,YAAAA,QAAF;AAAYD,YAAAA;AAAZ;AADD,SAAF,CAAP;AAGA;;AACD;AAAS;AACR,cAAKI,UAAL,EAAkB;AACjBS,YAAAA,OAAO,CAAE;AACRE,cAAAA,OAAO,EAAE;AAAEd,gBAAAA,QAAQ,EAAE,MAAZ;AAAoBD,gBAAAA,MAAM,EAAEI;AAA5B;AADD,aAAF,CAAP;AAGA,WAJD,MAIO,IAAK,CAAED,gBAAP,EAA0B;AAChCU,YAAAA,OAAO,CAAE;AACRX,cAAAA,IAAI,EAAE;AADE,aAAF,CAAP;AAGA;AACD;AAtBF;AAwBA,GAzBD,EAyBG,CACFA,IADE,EAEFF,MAFE,EAGFI,UAHE,EAIFD,gBAJE,EAKFU,OALE,EAMFF,WANE,EAOFC,eAPE,CAzBH;AAkCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { useLocation } from '../routes';\nimport { store as editSiteStore } from '../../store';\n\nexport default function useInitEditedEntityFromURL() {\n\tconst { params: { postId, postType, path = '/' } = {} } = useLocation();\n\tconst { isRequestingSite, homepageId } = useSelect( ( select ) => {\n\t\tconst { getSite } = select( coreDataStore );\n\t\tconst siteData = getSite();\n\n\t\treturn {\n\t\t\tisRequestingSite: ! siteData,\n\t\t\thomepageId:\n\t\t\t\tsiteData?.show_on_front === 'page'\n\t\t\t\t\t? siteData.page_on_front\n\t\t\t\t\t: null,\n\t\t};\n\t}, [] );\n\n\tconst { setTemplate, setTemplatePart, setPage } =\n\t\tuseDispatch( editSiteStore );\n\n\tuseEffect( () => {\n\t\tswitch ( path ) {\n\t\t\tcase '/templates/single':\n\t\t\t\tsetTemplate( postId );\n\t\t\t\tbreak;\n\t\t\tcase '/template-parts/single':\n\t\t\t\tsetTemplatePart( postId );\n\t\t\t\tbreak;\n\t\t\tcase '/navigation/single':\n\t\t\t\tsetPage( {\n\t\t\t\t\tcontext: { postType, postId },\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\tdefault: {\n\t\t\t\tif ( homepageId ) {\n\t\t\t\t\tsetPage( {\n\t\t\t\t\t\tcontext: { postType: 'page', postId: homepageId },\n\t\t\t\t\t} );\n\t\t\t\t} else if ( ! isRequestingSite ) {\n\t\t\t\t\tsetPage( {\n\t\t\t\t\t\tpath: '/',\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}, [\n\t\tpath,\n\t\tpostId,\n\t\thomepageId,\n\t\tisRequestingSite,\n\t\tsetPage,\n\t\tsetTemplate,\n\t\tsetTemplatePart,\n\t] );\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js"],"names":["useInitEditedEntityFromURL","params","postId","postType","isRequestingSite","homepageId","url","select","getSite","coreDataStore","siteData","show_on_front","page_on_front","setTemplate","setTemplatePart","setPage","editSiteStore","context","path"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAIe,SAASA,0BAAT,GAAsC;AACpD,QAAM;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,QAAuB;AAAjC,MAAwC,0BAA9C;AACA,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA,UAApB;AAAgCC,IAAAA;AAAhC,MAAwC,qBAAaC,MAAF,IAAc;AACtE,UAAM;AAAEC,MAAAA;AAAF,QAAcD,MAAM,CAAEE,eAAF,CAA1B;AACA,UAAMC,QAAQ,GAAGF,OAAO,EAAxB;AAEA,WAAO;AACNJ,MAAAA,gBAAgB,EAAE,CAAEM,QADd;AAENL,MAAAA,UAAU,EACT,CAAAK,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEC,aAAV,MAA4B,MAA5B,GACGD,QAAQ,CAACE,aADZ,GAEG,IALE;AAMNN,MAAAA,GAAG,EAAEI,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAEJ;AANT,KAAP;AAQA,GAZ6C,EAY3C,EAZ2C,CAA9C;AAcA,QAAM;AAAEO,IAAAA,WAAF;AAAeC,IAAAA,eAAf;AAAgCC,IAAAA;AAAhC,MACL,uBAAaC,YAAb,CADD;AAGA,0BAAW,MAAM;AAChB,QAAKb,QAAQ,IAAID,MAAjB,EAA0B;AACzB,cAASC,QAAT;AACC,aAAK,aAAL;AACCU,UAAAA,WAAW,CAAEX,MAAF,CAAX;AACA;;AACD,aAAK,kBAAL;AACCY,UAAAA,eAAe,CAAEZ,MAAF,CAAf;AACA;;AACD;AACCa,UAAAA,OAAO,CAAE;AACRE,YAAAA,OAAO,EAAE;AAAEd,cAAAA,QAAF;AAAYD,cAAAA;AAAZ;AADD,WAAF,CAAP;AARF;;AAaA;AACA,KAhBe,CAkBhB;;;AACA,QAAKG,UAAL,EAAkB;AACjBU,MAAAA,OAAO,CAAE;AACRE,QAAAA,OAAO,EAAE;AAAEd,UAAAA,QAAQ,EAAE,MAAZ;AAAoBD,UAAAA,MAAM,EAAEG;AAA5B;AADD,OAAF,CAAP;AAGA,KAJD,MAIO,IAAK,CAAED,gBAAP,EAA0B;AAChCW,MAAAA,OAAO,CAAE;AACRG,QAAAA,IAAI,EAAEZ;AADE,OAAF,CAAP;AAGA;AACD,GA5BD,EA4BG,CACFA,GADE,EAEFJ,MAFE,EAGFC,QAHE,EAIFE,UAJE,EAKFD,gBALE,EAMFW,OANE,EAOFF,WAPE,EAQFC,eARE,CA5BH;AAsCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { useLocation } from '../routes';\nimport { store as editSiteStore } from '../../store';\n\nexport default function useInitEditedEntityFromURL() {\n\tconst { params: { postId, postType } = {} } = useLocation();\n\tconst { isRequestingSite, homepageId, url } = useSelect( ( select ) => {\n\t\tconst { getSite } = select( coreDataStore );\n\t\tconst siteData = getSite();\n\n\t\treturn {\n\t\t\tisRequestingSite: ! siteData,\n\t\t\thomepageId:\n\t\t\t\tsiteData?.show_on_front === 'page'\n\t\t\t\t\t? siteData.page_on_front\n\t\t\t\t\t: null,\n\t\t\turl: siteData?.url,\n\t\t};\n\t}, [] );\n\n\tconst { setTemplate, setTemplatePart, setPage } =\n\t\tuseDispatch( editSiteStore );\n\n\tuseEffect( () => {\n\t\tif ( postType && postId ) {\n\t\t\tswitch ( postType ) {\n\t\t\t\tcase 'wp_template':\n\t\t\t\t\tsetTemplate( postId );\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'wp_template_part':\n\t\t\t\t\tsetTemplatePart( postId );\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsetPage( {\n\t\t\t\t\t\tcontext: { postType, postId },\n\t\t\t\t\t} );\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\t// In all other cases, we need to set the home page in the site editor view.\n\t\tif ( homepageId ) {\n\t\t\tsetPage( {\n\t\t\t\tcontext: { postType: 'page', postId: homepageId },\n\t\t\t} );\n\t\t} else if ( ! isRequestingSite ) {\n\t\t\tsetPage( {\n\t\t\t\tpath: url,\n\t\t\t} );\n\t\t}\n\t}, [\n\t\turl,\n\t\tpostId,\n\t\tpostType,\n\t\thomepageId,\n\t\tisRequestingSite,\n\t\tsetPage,\n\t\tsetTemplate,\n\t\tsetTemplatePart,\n\t] );\n}\n"]}

package/build/components/sync-state-with-url/use-sync-path-with-url.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useSyncPathWithURL;
+exports.getPathFromURL = getPathFromURL;
 
 var _components = require("@wordpress/components");
 
@@ -18,36 +19,82 @@ var _routes = require("../routes");
 /**
  * Internal dependencies
  */
+function getPathFromURL(urlParams) {
+  var _urlParams$path;
+
+  let path = (_urlParams$path = urlParams === null || urlParams === void 0 ? void 0 : urlParams.path) !== null && _urlParams$path !== void 0 ? _urlParams$path : '/'; // Compute the navigator path based on the URL params.
+
+  if (urlParams !== null && urlParams !== void 0 && urlParams.postType && urlParams !== null && urlParams !== void 0 && urlParams.postId) {
+    switch (urlParams.postType) {
+      case 'wp_template':
+      case 'wp_template_part':
+        path = `/${encodeURIComponent(urlParams.postType)}/${encodeURIComponent(urlParams.postId)}`;
+        break;
+
+      default:
+        path = `/navigation/${encodeURIComponent(urlParams.postType)}/${encodeURIComponent(urlParams.postId)}`;
+    }
+  }
+
+  return path;
+}
+
 function useSyncPathWithURL() {
   const history = (0, _routes.useHistory)();
   const {
-    params
+    params: urlParams
   } = (0, _routes.useLocation)();
   const {
-    path = '/'
-  } = params;
-  const {
-    location,
+    location: navigatorLocation,
+    params: navigatorParams,
     goTo
   } = (0, _components.__experimentalUseNavigator)();
-  const currentPath = (0, _element.useRef)(path);
-  const currentNavigatorLocation = (0, _element.useRef)(location.path);
+  const currentUrlParams = (0, _element.useRef)(urlParams);
+  const currentPath = (0, _element.useRef)(navigatorLocation.path);
   (0, _element.useEffect)(() => {
-    currentPath.current = path;
+    function updateUrlParams(newUrlParams) {
+      if (Object.entries(newUrlParams).every(_ref => {
+        let [key, value] = _ref;
+        return currentUrlParams.current[key] === value;
+      })) {
+        return;
+      }
 
-    if (path !== currentNavigatorLocation.current) {
-      goTo(path);
+      const updatedParams = { ...currentUrlParams.current,
+        ...newUrlParams
+      };
+      currentUrlParams.current = updatedParams;
+      history.push(updatedParams);
     }
-  }, [path]);
-  (0, _element.useEffect)(() => {
-    currentNavigatorLocation.current = location.path;
 
-    if (location.path !== currentPath.current) {
-      history.push({ ...params,
-        path: location.path
+    if (navigatorParams !== null && navigatorParams !== void 0 && navigatorParams.postType && navigatorParams !== null && navigatorParams !== void 0 && navigatorParams.postId) {
+      updateUrlParams({
+        postType: navigatorParams === null || navigatorParams === void 0 ? void 0 : navigatorParams.postType,
+        postId: navigatorParams === null || navigatorParams === void 0 ? void 0 : navigatorParams.postId,
+        path: undefined
+      });
+    } else if (navigatorParams !== null && navigatorParams !== void 0 && navigatorParams.postType && !(navigatorParams !== null && navigatorParams !== void 0 && navigatorParams.postId)) {
+      updateUrlParams({
+        postType: navigatorParams === null || navigatorParams === void 0 ? void 0 : navigatorParams.postType,
+        path: navigatorLocation.path,
+        postId: undefined
+      });
+    } else {
+      updateUrlParams({
+        postType: undefined,
+        postId: undefined,
+        path: navigatorLocation.path
       });
     }
-  }, [location.path, history]);
-  return path;
+  }, [navigatorLocation === null || navigatorLocation === void 0 ? void 0 : navigatorLocation.path, navigatorParams, history]);
+  (0, _element.useEffect)(() => {
+    currentUrlParams.current = urlParams;
+    const path = getPathFromURL(urlParams);
+
+    if (currentPath.current !== path) {
+      currentPath.current = path;
+      goTo(path);
+    }
+  }, [urlParams, goTo]);
 }
 //# sourceMappingURL=use-sync-path-with-url.js.map

package/build/components/sync-state-with-url/use-sync-path-with-url.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js"],"names":["useSyncPathWithURL","history","params","path","location","goTo","currentPath","currentNavigatorLocation","current","push"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,kBAAT,GAA8B;AAC5C,QAAMC,OAAO,GAAG,yBAAhB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAa,0BAAnB;AACA,QAAM;AAAEC,IAAAA,IAAI,GAAG;AAAT,MAAiBD,MAAvB;AACA,QAAM;AAAEE,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAqB,6CAA3B;AACA,QAAMC,WAAW,GAAG,qBAAQH,IAAR,CAApB;AACA,QAAMI,wBAAwB,GAAG,qBAAQH,QAAQ,CAACD,IAAjB,CAAjC;AACA,0BAAW,MAAM;AAChBG,IAAAA,WAAW,CAACE,OAAZ,GAAsBL,IAAtB;;AACA,QAAKA,IAAI,KAAKI,wBAAwB,CAACC,OAAvC,EAAiD;AAChDH,MAAAA,IAAI,CAAEF,IAAF,CAAJ;AACA;AACD,GALD,EAKG,CAAEA,IAAF,CALH;AAMA,0BAAW,MAAM;AAChBI,IAAAA,wBAAwB,CAACC,OAAzB,GAAmCJ,QAAQ,CAACD,IAA5C;;AACA,QAAKC,QAAQ,CAACD,IAAT,KAAkBG,WAAW,CAACE,OAAnC,EAA6C;AAC5CP,MAAAA,OAAO,CAACQ,IAAR,CAAc,EACb,GAAGP,MADU;AAEbC,QAAAA,IAAI,EAAEC,QAAQ,CAACD;AAFF,OAAd;AAIA;AACD,GARD,EAQG,CAAEC,QAAQ,CAACD,IAAX,EAAiBF,OAAjB,CARH;AAUA,SAAOE,IAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUseNavigator as useNavigator } from '@wordpress/components';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLocation, useHistory } from '../routes';\n\nexport default function useSyncPathWithURL() {\n\tconst history = useHistory();\n\tconst { params } = useLocation();\n\tconst { path = '/' } = params;\n\tconst { location, goTo } = useNavigator();\n\tconst currentPath = useRef( path );\n\tconst currentNavigatorLocation = useRef( location.path );\n\tuseEffect( () => {\n\t\tcurrentPath.current = path;\n\t\tif ( path !== currentNavigatorLocation.current ) {\n\t\t\tgoTo( path );\n\t\t}\n\t}, [ path ] );\n\tuseEffect( () => {\n\t\tcurrentNavigatorLocation.current = location.path;\n\t\tif ( location.path !== currentPath.current ) {\n\t\t\thistory.push( {\n\t\t\t\t...params,\n\t\t\t\tpath: location.path,\n\t\t\t} );\n\t\t}\n\t}, [ location.path, history ] );\n\n\treturn path;\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js"],"names":["getPathFromURL","urlParams","path","postType","postId","encodeURIComponent","useSyncPathWithURL","history","params","location","navigatorLocation","navigatorParams","goTo","currentUrlParams","currentPath","updateUrlParams","newUrlParams","Object","entries","every","key","value","current","updatedParams","push","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUseNavigator as useNavigator } from '@wordpress/components';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useLocation, useHistory } from '../routes';\n\nexport function getPathFromURL( urlParams ) {\n\tlet path = urlParams?.path ?? '/';\n\n\t// Compute the navigator path based on the URL params.\n\tif ( urlParams?.postType && urlParams?.postId ) {\n\t\tswitch ( urlParams.postType ) {\n\t\t\tcase 'wp_template':\n\t\t\tcase 'wp_template_part':\n\t\t\t\tpath = `/${ encodeURIComponent(\n\t\t\t\t\turlParams.postType\n\t\t\t\t) }/${ encodeURIComponent( urlParams.postId ) }`;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tpath = `/navigation/${ encodeURIComponent(\n\t\t\t\t\turlParams.postType\n\t\t\t\t) }/${ encodeURIComponent( urlParams.postId ) }`;\n\t\t}\n\t}\n\n\treturn path;\n}\n\nexport default function useSyncPathWithURL() {\n\tconst history = useHistory();\n\tconst { params: urlParams } = useLocation();\n\tconst {\n\t\tlocation: navigatorLocation,\n\t\tparams: navigatorParams,\n\t\tgoTo,\n\t} = useNavigator();\n\tconst currentUrlParams = useRef( urlParams );\n\tconst currentPath = useRef( navigatorLocation.path );\n\n\tuseEffect( () => {\n\t\tfunction updateUrlParams( newUrlParams ) {\n\t\t\tif (\n\t\t\t\tObject.entries( newUrlParams ).every( ( [ key, value ] ) => {\n\t\t\t\t\treturn currentUrlParams.current[ key ] === value;\n\t\t\t\t} )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst updatedParams = {\n\t\t\t\t...currentUrlParams.current,\n\t\t\t\t...newUrlParams,\n\t\t\t};\n\t\t\tcurrentUrlParams.current = updatedParams;\n\t\t\thistory.push( updatedParams );\n\t\t}\n\n\t\tif ( navigatorParams?.postType && navigatorParams?.postId ) {\n\t\t\tupdateUrlParams( {\n\t\t\t\tpostType: navigatorParams?.postType,\n\t\t\t\tpostId: navigatorParams?.postId,\n\t\t\t\tpath: undefined,\n\t\t\t} );\n\t\t} else if ( navigatorParams?.postType && ! navigatorParams?.postId ) {\n\t\t\tupdateUrlParams( {\n\t\t\t\tpostType: navigatorParams?.postType,\n\t\t\t\tpath: navigatorLocation.path,\n\t\t\t\tpostId: undefined,\n\t\t\t} );\n\t\t} else {\n\t\t\tupdateUrlParams( {\n\t\t\t\tpostType: undefined,\n\t\t\t\tpostId: undefined,\n\t\t\t\tpath: navigatorLocation.path,\n\t\t\t} );\n\t\t}\n\t}, [ navigatorLocation?.path, navigatorParams, history ] );\n\n\tuseEffect( () => {\n\t\tcurrentUrlParams.current = urlParams;\n\t\tconst path = getPathFromURL( urlParams );\n\t\tif ( currentPath.current !== path ) {\n\t\t\tcurrentPath.current = path;\n\t\t\tgoTo( path );\n\t\t}\n\t}, [ urlParams, goTo ] );\n}\n"]}