@wordpress/edit-site 5.10.0 → 5.12.0

package/build/components/sidebar-edit-mode/{template-card → template-panel}/template-actions.js

@@ -28,10 +28,9 @@ var _isTemplateRevertable = _interopRequireDefault(require("../../../utils/is-te
 /**
  * Internal dependencies
  */
-function Actions(_ref) {
-  let {
-    template
-  } = _ref;
+function Actions({
+  template
+}) {
   const {
     revertTemplate
   } = (0, _data.useDispatch)(_store.store);
@@ -48,17 +47,14 @@ function Actions(_ref) {
     toggleProps: {
       isSmall: true
     }
-  }, _ref2 => {
-    let {
-      onClose
-    } = _ref2;
-    return (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
-      info: (0, _i18n.__)('Use the template as supplied by the theme.'),
-      onClick: () => {
-        revertTemplate(template);
-        onClose();
-      }
-    }, (0, _i18n.__)('Clear customizations')));
-  });
+  }, ({
+    onClose
+  }) => (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
+    info: (0, _i18n.__)('Use the template as supplied by the theme.'),
+    onClick: () => {
+      revertTemplate(template);
+      onClose();
+    }
+  }, (0, _i18n.__)('Clear customizations'))));
 }
 //# sourceMappingURL=template-actions.js.map

package/build/components/sidebar-edit-mode/template-panel/template-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js"],"names":["Actions","template","revertTemplate","editSiteStore","isRevertable","moreVertical","isSmall","onClose"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAZA;AACA;AACA;;AAMA;AACA;AACA;AAIe,SAASA,OAAT,CAAkB;AAAEC,EAAAA;AAAF,CAAlB,EAAiC;AAC/C,QAAM;AAAEC,IAAAA;AAAF,MAAqB,uBAAaC,YAAb,CAA3B;AACA,QAAMC,YAAY,GAAG,mCAAsBH,QAAtB,CAArB;;AACA,MAAK,CAAEG,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AACD,SACC,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAGC,mBADR;AAEC,IAAA,KAAK,EAAG,cAAI,SAAJ,CAFT;AAGC,IAAA,SAAS,EAAC,kCAHX;AAIC,IAAA,WAAW,EAAG;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAJf,KAMG,CAAE;AAAEC,IAAAA;AAAF,GAAF,KACD,4BAAC,qBAAD,QACC,4BAAC,oBAAD;AACC,IAAA,IAAI,EAAG,cACN,4CADM,CADR;AAIC,IAAA,OAAO,EAAG,MAAM;AACfL,MAAAA,cAAc,CAAED,QAAF,CAAd;AACAM,MAAAA,OAAO;AACP;AAPF,KASG,cAAI,sBAAJ,CATH,CADD,CAPF,CADD;AAwBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { moreVertical } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\nimport isTemplateRevertable from '../../../utils/is-template-revertable';\n\nexport default function Actions( { template } ) {\n\tconst { revertTemplate } = useDispatch( editSiteStore );\n\tconst isRevertable = isTemplateRevertable( template );\n\tif ( ! isRevertable ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownMenu\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\tclassName=\"edit-site-template-card__actions\"\n\t\t\ttoggleProps={ { isSmall: true } }\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tinfo={ __(\n\t\t\t\t\t\t\t'Use the template as supplied by the theme.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\trevertTemplate( template );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear customizations' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"]}

package/build/components/sidebar-edit-mode/{template-card → template-panel}/template-areas.js

@@ -26,11 +26,10 @@ var _store = require("../../../store");
 /**
  * Internal dependencies
  */
-function TemplateAreaItem(_ref) {
-  let {
-    area,
-    clientId
-  } = _ref;
+function TemplateAreaItem({
+  area,
+  clientId
+}) {
   const {
     selectBlock,
     toggleBlockHighlight
@@ -47,7 +46,7 @@ function TemplateAreaItem(_ref) {
 
   return (0, _element.createElement)(_components.Button, {
     className: "edit-site-template-card__template-areas-item",
-    icon: templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.icon,
+    icon: templatePartArea?.icon,
     onMouseOver: highlightBlock,
     onMouseLeave: cancelHighlightBlock,
     onFocus: highlightBlock,
@@ -55,7 +54,7 @@ function TemplateAreaItem(_ref) {
     onClick: () => {
       selectBlock(clientId);
     }
-  }, templatePartArea === null || templatePartArea === void 0 ? void 0 : templatePartArea.label);
+  }, templatePartArea?.label);
 }
 
 function TemplateAreas() {
@@ -72,17 +71,14 @@ function TemplateAreas() {
     className: "edit-site-template-card__template-areas-title"
   }, (0, _i18n.__)('Areas')), (0, _element.createElement)("ul", {
     className: "edit-site-template-card__template-areas-list"
-  }, templateParts.map(_ref2 => {
-    let {
-      templatePart,
-      block
-    } = _ref2;
-    return (0, _element.createElement)("li", {
-      key: templatePart.slug
-    }, (0, _element.createElement)(TemplateAreaItem, {
-      area: templatePart.area,
-      clientId: block.clientId
-    }));
-  })));
+  }, templateParts.map(({
+    templatePart,
+    block
+  }) => (0, _element.createElement)("li", {
+    key: templatePart.slug
+  }, (0, _element.createElement)(TemplateAreaItem, {
+    area: templatePart.area,
+    clientId: block.clientId
+  })))));
 }
 //# sourceMappingURL=template-areas.js.map

package/build/components/sidebar-edit-mode/template-panel/template-areas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/template-panel/template-areas.js"],"names":["TemplateAreaItem","area","clientId","selectBlock","toggleBlockHighlight","blockEditorStore","templatePartArea","select","defaultAreas","editorStore","__experimentalGetDefaultTemplatePartAreas","find","defaultArea","highlightBlock","cancelHighlightBlock","icon","label","TemplateAreas","templateParts","editSiteStore","getCurrentTemplateTemplateParts","length","map","templatePart","block","slug"],"mappings":";;;;;;;;;AAGA;;AACA;;AAIA;;AACA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAUA;AACA;AACA;AAGA,SAASA,gBAAT,CAA2B;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAA3B,EAAgD;AAC/C,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MACL,uBAAaC,kBAAb,CADD;AAEA,QAAMC,gBAAgB,GAAG,qBACtBC,MAAF,IAAc;AACb,UAAMC,YAAY,GACjBD,MAAM,CACLE,aADK,CAAN,CAEEC,yCAFF,EADD;;AAKA,WAAOF,YAAY,CAACG,IAAb,CACJC,WAAF,IAAmBA,WAAW,CAACX,IAAZ,KAAqBA,IADlC,CAAP;AAGA,GAVuB,EAWxB,CAAEA,IAAF,CAXwB,CAAzB;;AAcA,QAAMY,cAAc,GAAG,MAAMT,oBAAoB,CAAEF,QAAF,EAAY,IAAZ,CAAjD;;AACA,QAAMY,oBAAoB,GAAG,MAAMV,oBAAoB,CAAEF,QAAF,EAAY,KAAZ,CAAvD;;AAEA,SACC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,8CADX;AAEC,IAAA,IAAI,EAAGI,gBAAgB,EAAES,IAF1B;AAGC,IAAA,WAAW,EAAGF,cAHf;AAIC,IAAA,YAAY,EAAGC,oBAJhB;AAKC,IAAA,OAAO,EAAGD,cALX;AAMC,IAAA,MAAM,EAAGC,oBANV;AAOC,IAAA,OAAO,EAAG,MAAM;AACfX,MAAAA,WAAW,CAAED,QAAF,CAAX;AACA;AATF,KAWGI,gBAAgB,EAAEU,KAXrB,CADD;AAeA;;AAEc,SAASC,aAAT,GAAyB;AACvC,QAAMC,aAAa,GAAG,qBACnBX,MAAF,IAAcA,MAAM,CAAEY,YAAF,CAAN,CAAwBC,+BAAxB,EADO,EAErB,EAFqB,CAAtB;;AAKA,MAAK,CAAEF,aAAa,CAACG,MAArB,EAA8B;AAC7B,WAAO,IAAP;AACA;;AAED,SACC;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,4BAAC,iCAAD;AACC,IAAA,KAAK,EAAG,CADT;AAEC,IAAA,SAAS,EAAC;AAFX,KAIG,cAAI,OAAJ,CAJH,CADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGH,aAAa,CAACI,GAAd,CAAmB,CAAE;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAAF,KACpB;AAAI,IAAA,GAAG,EAAGD,YAAY,CAACE;AAAvB,KACC,4BAAC,gBAAD;AACC,IAAA,IAAI,EAAGF,YAAY,CAACtB,IADrB;AAEC,IAAA,QAAQ,EAAGuB,KAAK,CAACtB;AAFlB,IADD,CADC,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 } =\n\t\tuseDispatch( blockEditorStore );\n\tconst templatePartArea = useSelect(\n\t\t( select ) => {\n\t\t\tconst defaultAreas =\n\t\t\t\tselect(\n\t\t\t\t\teditorStore\n\t\t\t\t).__experimentalGetDefaultTemplatePartAreas();\n\n\t\t\treturn defaultAreas.find(\n\t\t\t\t( defaultArea ) => defaultArea.area === area\n\t\t\t);\n\t\t},\n\t\t[ area ]\n\t);\n\n\tconst highlightBlock = () => toggleBlockHighlight( clientId, true );\n\tconst cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );\n\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"edit-site-template-card__template-areas-item\"\n\t\t\ticon={ templatePartArea?.icon }\n\t\t\tonMouseOver={ highlightBlock }\n\t\t\tonMouseLeave={ cancelHighlightBlock }\n\t\t\tonFocus={ highlightBlock }\n\t\t\tonBlur={ cancelHighlightBlock }\n\t\t\tonClick={ () => {\n\t\t\t\tselectBlock( clientId );\n\t\t\t} }\n\t\t>\n\t\t\t{ templatePartArea?.label }\n\t\t</Button>\n\t);\n}\n\nexport default function TemplateAreas() {\n\tconst templateParts = useSelect(\n\t\t( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),\n\t\t[]\n\t);\n\n\tif ( ! templateParts.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<section className=\"edit-site-template-card__template-areas\">\n\t\t\t<Heading\n\t\t\t\tlevel={ 3 }\n\t\t\t\tclassName=\"edit-site-template-card__template-areas-title\"\n\t\t\t>\n\t\t\t\t{ __( 'Areas' ) }\n\t\t\t</Heading>\n\n\t\t\t<ul className=\"edit-site-template-card__template-areas-list\">\n\t\t\t\t{ templateParts.map( ( { templatePart, block } ) => (\n\t\t\t\t\t<li key={ templatePart.slug }>\n\t\t\t\t\t\t<TemplateAreaItem\n\t\t\t\t\t\t\tarea={ templatePart.area }\n\t\t\t\t\t\t\tclientId={ block.clientId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t) ) }\n\t\t\t</ul>\n\t\t</section>\n\t);\n}\n"]}

package/build/components/sidebar-navigation-item/index.js

@@ -24,14 +24,13 @@ var _icons = require("@wordpress/icons");
 /**
  * WordPress dependencies
  */
-function SidebarNavigationItem(_ref) {
-  let {
-    className,
-    icon,
-    withChevron = false,
-    children,
-    ...props
-  } = _ref;
+function SidebarNavigationItem({
+  className,
+  icon,
+  withChevron = false,
+  children,
+  ...props
+}) {
   return (0, _element.createElement)(_components.__experimentalItem, (0, _extends2.default)({
     className: (0, _classnames.default)('edit-site-sidebar-navigation-item', className)
   }, props), (0, _element.createElement)(_components.__experimentalHStack, {

package/build/components/sidebar-navigation-item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-item/index.js"],"names":["SidebarNavigationItem","className","icon","withChevron","children","props","fill","chevronRightSmall"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;AAQe,SAASA,qBAAT,OAMX;AAAA,MAN2C;AAC9CC,IAAAA,SAD8C;AAE9CC,IAAAA,IAF8C;AAG9CC,IAAAA,WAAW,GAAG,KAHgC;AAI9CC,IAAAA,QAJ8C;AAK9C,OAAGC;AAL2C,GAM3C;AACH,SACC,4BAAC,8BAAD;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXJ,SAFW;AADb,KAKMI,KALN,GAOC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACGH,IAAI,IACL,4BAAC,WAAD;AACC,IAAA,KAAK,EAAG;AAAEI,MAAAA,IAAI,EAAE;AAAR,KADT;AAEC,IAAA,IAAI,EAAGJ,IAFR;AAGC,IAAA,IAAI,EAAG;AAHR,IAFF,EAQC,4BAAC,qBAAD,QAAaE,QAAb,CARD,EASGD,WAAW,IACZ,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGI,wBADR;AAEC,IAAA,SAAS,EAAC,wDAFX;AAGC,IAAA,IAAI,EAAG;AAHR,IAVF,CAPD,CADD;AA2BA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\tFlexBlock,\n} from '@wordpress/components';\nimport { chevronRightSmall, Icon } from '@wordpress/icons';\n\nexport default function SidebarNavigationItem( {\n\tclassName,\n\ticon,\n\twithChevron = false,\n\tchildren,\n\t...props\n} ) {\n\treturn (\n\t\t<Item\n\t\t\tclassName={ classnames(\n\t\t\t\t'edit-site-sidebar-navigation-item',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t{ icon && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tstyle={ { fill: 'currentcolor' } }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t\t\t{ withChevron && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ chevronRightSmall }\n\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-item__drilldown-indicator\"\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</Item>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-item/index.js"],"names":["SidebarNavigationItem","className","icon","withChevron","children","props","fill","chevronRightSmall"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;AAQe,SAASA,qBAAT,CAAgC;AAC9CC,EAAAA,SAD8C;AAE9CC,EAAAA,IAF8C;AAG9CC,EAAAA,WAAW,GAAG,KAHgC;AAI9CC,EAAAA,QAJ8C;AAK9C,KAAGC;AAL2C,CAAhC,EAMX;AACH,SACC,4BAAC,8BAAD;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXJ,SAFW;AADb,KAKMI,KALN,GAOC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACGH,IAAI,IACL,4BAAC,WAAD;AACC,IAAA,KAAK,EAAG;AAAEI,MAAAA,IAAI,EAAE;AAAR,KADT;AAEC,IAAA,IAAI,EAAGJ,IAFR;AAGC,IAAA,IAAI,EAAG;AAHR,IAFF,EAQC,4BAAC,qBAAD,QAAaE,QAAb,CARD,EASGD,WAAW,IACZ,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGI,wBADR;AAEC,IAAA,SAAS,EAAC,wDAFX;AAGC,IAAA,IAAI,EAAG;AAHR,IAVF,CAPD,CADD;AA2BA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\tFlexBlock,\n} from '@wordpress/components';\nimport { chevronRightSmall, Icon } from '@wordpress/icons';\n\nexport default function SidebarNavigationItem( {\n\tclassName,\n\ticon,\n\twithChevron = false,\n\tchildren,\n\t...props\n} ) {\n\treturn (\n\t\t<Item\n\t\t\tclassName={ classnames(\n\t\t\t\t'edit-site-sidebar-navigation-item',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t{ icon && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tstyle={ { fill: 'currentcolor' } }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t\t\t{ withChevron && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ chevronRightSmall }\n\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-item__drilldown-indicator\"\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</Item>\n\t);\n}\n"]}

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

@@ -34,16 +34,15 @@ var _isPreviewingTheme = require("../../utils/is-previewing-theme");
 /**
  * Internal dependencies
  */
-function SidebarNavigationScreen(_ref) {
-  var _theme$name;
-
-  let {
-    isRoot,
-    title,
-    actions,
-    content,
-    description
-  } = _ref;
+function SidebarNavigationScreen({
+  isRoot,
+  title,
+  actions,
+  meta,
+  content,
+  footer,
+  description
+}) {
   const {
     dashboardLink
   } = (0, _data.useSelect)(select => {
@@ -58,8 +57,10 @@ function SidebarNavigationScreen(_ref) {
     getTheme
   } = (0, _data.useSelect)(_coreData.store);
   const theme = getTheme((0, _isPreviewingTheme.currentlyPreviewingTheme)());
-  return (0, _element.createElement)(_components.__experimentalVStack, {
-    spacing: 2
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalVStack, {
+    className: "edit-site-sidebar-navigation-screen__main",
+    spacing: 0,
+    justify: "flex-start"
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     spacing: 4,
     alignment: "flex-start",
@@ -77,10 +78,16 @@ function SidebarNavigationScreen(_ref) {
     color: 'white',
     level: 2,
     size: 20
-  }, !(0, _isPreviewingTheme.isPreviewingTheme)() ? title : (0, _i18n.sprintf)('Previewing %1$s: %2$s', theme === null || theme === void 0 ? void 0 : (_theme$name = theme.name) === null || _theme$name === void 0 ? void 0 : _theme$name.rendered, title)), actions), (0, _element.createElement)("nav", {
+  }, !(0, _isPreviewingTheme.isPreviewingTheme)() ? title : (0, _i18n.sprintf)('Previewing %1$s: %2$s', theme?.name?.rendered, title)), actions && (0, _element.createElement)("div", {
+    className: "edit-site-sidebar-navigation-screen__actions"
+  }, actions)), meta && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
+    className: "edit-site-sidebar-navigation-screen__meta"
+  }, meta)), (0, _element.createElement)("div", {
     className: "edit-site-sidebar-navigation-screen__content"
   }, description && (0, _element.createElement)("p", {
     className: "edit-site-sidebar-navigation-screen__description"
-  }, description), content));
+  }, description), content)), footer && (0, _element.createElement)("footer", {
+    className: "edit-site-sidebar-navigation-screen__footer"
+  }, footer));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen/index.js"],"names":["SidebarNavigationScreen","isRoot","title","actions","content","description","dashboardLink","select","getSettings","editSiteStore","__experimentalDashboardLink","getTheme","coreStore","theme","SidebarButton","chevronRight","chevronLeft","name","rendered"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAYA;AACA;AACA;AASe,SAASA,uBAAT,OAMX;AAAA;;AAAA,MAN6C;AAChDC,IAAAA,MADgD;AAEhDC,IAAAA,KAFgD;AAGhDC,IAAAA,OAHgD;AAIhDC,IAAAA,OAJgD;AAKhDC,IAAAA;AALgD,GAM7C;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAoB,qBAAaC,MAAF,IAAc;AAClD,UAAM;AAAEC,MAAAA;AAAF,QAAkB,yBAAQD,MAAM,CAAEE,YAAF,CAAd,CAAxB;AACA,WAAO;AACNH,MAAAA,aAAa,EAAEE,WAAW,GAAGE;AADvB,KAAP;AAGA,GALyB,EAKvB,EALuB,CAA1B;AAMA,QAAM;AAAEC,IAAAA;AAAF,MAAe,qBAAWC,eAAX,CAArB;AACA,QAAMC,KAAK,GAAGF,QAAQ,CAAE,kDAAF,CAAtB;AAEA,SACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gCAAD;AACC,IAAA,OAAO,EAAG,CADX;AAEC,IAAA,SAAS,EAAC,YAFX;AAGC,IAAA,SAAS,EAAC;AAHX,KAKG,CAAEV,MAAF,GACD,4BAAC,iDAAD;AACC,IAAA,EAAE,EAAGa,sBADN;AAEC,IAAA,IAAI,EAAG,qBAAUC,mBAAV,GAAyBC,kBAFjC;AAGC,IAAA,KAAK,EAAG,cAAI,MAAJ;AAHT,IADC,GAOD,4BAAC,sBAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,mBAAV,GAAyBC,kBADjC;AAEC,IAAA,KAAK,EACJ,CAAE,2CAAF,GACG,cAAI,0BAAJ,CADH,GAEG,cAAI,+BAAJ,CALL;AAOC,IAAA,IAAI,EACH,CAAE,2CAAF,GACGV,aAAa,IAAI,WADpB,GAEG;AAVL,IAZF,EA0BC,4BAAC,iCAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,KAAK,EAAG,OAFT;AAGC,IAAA,KAAK,EAAG,CAHT;AAIC,IAAA,IAAI,EAAG;AAJR,KAMG,CAAE,2CAAF,GACCJ,KADD,GAEC,mBACA,uBADA,EAEAW,KAFA,aAEAA,KAFA,sCAEAA,KAAK,CAAEI,IAFP,gDAEA,YAAaC,QAFb,EAGAhB,KAHA,CARJ,CA1BD,EAwCGC,OAxCH,CADD,EA4CC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGE,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CAFF,EAMGD,OANH,CA5CD,CADD;AAuDA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalHeading as Heading,\n} from '@wordpress/components';\nimport { isRTL, __, sprintf } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../private-apis';\nimport SidebarButton from '../sidebar-button';\nimport {\n\tisPreviewingTheme,\n\tcurrentlyPreviewingTheme,\n} from '../../utils/is-previewing-theme';\n\nexport default function SidebarNavigationScreen( {\n\tisRoot,\n\ttitle,\n\tactions,\n\tcontent,\n\tdescription,\n} ) {\n\tconst { dashboardLink } = useSelect( ( select ) => {\n\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tdashboardLink: getSettings().__experimentalDashboardLink,\n\t\t};\n\t}, [] );\n\tconst { getTheme } = useSelect( coreStore );\n\tconst theme = getTheme( currentlyPreviewingTheme() );\n\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<HStack\n\t\t\t\tspacing={ 4 }\n\t\t\t\talignment=\"flex-start\"\n\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__title-icon\"\n\t\t\t>\n\t\t\t\t{ ! isRoot ? (\n\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\tas={ SidebarButton }\n\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t! isPreviewingTheme()\n\t\t\t\t\t\t\t\t? __( 'Go back to the Dashboard' )\n\t\t\t\t\t\t\t\t: __( 'Go back to the theme showcase' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t! isPreviewingTheme()\n\t\t\t\t\t\t\t\t? dashboardLink || 'index.php'\n\t\t\t\t\t\t\t\t: 'themes.php'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<Heading\n\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__title\"\n\t\t\t\t\tcolor={ 'white' }\n\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\tsize={ 20 }\n\t\t\t\t>\n\t\t\t\t\t{ ! isPreviewingTheme()\n\t\t\t\t\t\t? title\n\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t'Previewing %1$s: %2$s',\n\t\t\t\t\t\t\t\ttheme?.name?.rendered,\n\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t  ) }\n\t\t\t\t</Heading>\n\t\t\t\t{ actions }\n\t\t\t</HStack>\n\n\t\t\t<nav className=\"edit-site-sidebar-navigation-screen__content\">\n\t\t\t\t{ description && (\n\t\t\t\t\t<p className=\"edit-site-sidebar-navigation-screen__description\">\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</p>\n\t\t\t\t) }\n\t\t\t\t{ content }\n\t\t\t</nav>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen/index.js"],"names":["SidebarNavigationScreen","isRoot","title","actions","meta","content","footer","description","dashboardLink","select","getSettings","editSiteStore","__experimentalDashboardLink","getTheme","coreStore","theme","SidebarButton","chevronRight","chevronLeft","name","rendered"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAYA;AACA;AACA;AASe,SAASA,uBAAT,CAAkC;AAChDC,EAAAA,MADgD;AAEhDC,EAAAA,KAFgD;AAGhDC,EAAAA,OAHgD;AAIhDC,EAAAA,IAJgD;AAKhDC,EAAAA,OALgD;AAMhDC,EAAAA,MANgD;AAOhDC,EAAAA;AAPgD,CAAlC,EAQX;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAoB,qBAAaC,MAAF,IAAc;AAClD,UAAM;AAAEC,MAAAA;AAAF,QAAkB,yBAAQD,MAAM,CAAEE,YAAF,CAAd,CAAxB;AACA,WAAO;AACNH,MAAAA,aAAa,EAAEE,WAAW,GAAGE;AADvB,KAAP;AAGA,GALyB,EAKvB,EALuB,CAA1B;AAMA,QAAM;AAAEC,IAAAA;AAAF,MAAe,qBAAWC,eAAX,CAArB;AACA,QAAMC,KAAK,GAAGF,QAAQ,CAAE,kDAAF,CAAtB;AAEA,SACC,qDACC,4BAAC,gCAAD;AACC,IAAA,SAAS,EAAC,2CADX;AAEC,IAAA,OAAO,EAAG,CAFX;AAGC,IAAA,OAAO,EAAC;AAHT,KAKC,4BAAC,gCAAD;AACC,IAAA,OAAO,EAAG,CADX;AAEC,IAAA,SAAS,EAAC,YAFX;AAGC,IAAA,SAAS,EAAC;AAHX,KAKG,CAAEZ,MAAF,GACD,4BAAC,iDAAD;AACC,IAAA,EAAE,EAAGe,sBADN;AAEC,IAAA,IAAI,EAAG,qBAAUC,mBAAV,GAAyBC,kBAFjC;AAGC,IAAA,KAAK,EAAG,cAAI,MAAJ;AAHT,IADC,GAOD,4BAAC,sBAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,mBAAV,GAAyBC,kBADjC;AAEC,IAAA,KAAK,EACJ,CAAE,2CAAF,GACG,cAAI,0BAAJ,CADH,GAEG,cAAI,+BAAJ,CALL;AAOC,IAAA,IAAI,EACH,CAAE,2CAAF,GACGV,aAAa,IAAI,WADpB,GAEG;AAVL,IAZF,EA0BC,4BAAC,iCAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,KAAK,EAAG,OAFT;AAGC,IAAA,KAAK,EAAG,CAHT;AAIC,IAAA,IAAI,EAAG;AAJR,KAMG,CAAE,2CAAF,GACCN,KADD,GAEC,mBACA,uBADA,EAEAa,KAAK,EAAEI,IAAP,EAAaC,QAFb,EAGAlB,KAHA,CARJ,CA1BD,EAwCGC,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAzCF,CALD,EAmDGC,IAAI,IACL,qDACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,IADH,CADD,CApDF,EA2DC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGG,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CAFF,EAMGF,OANH,CA3DD,CADD,EAqEGC,MAAM,IACP;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACGA,MADH,CAtEF,CADD;AA6EA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalHeading as Heading,\n} from '@wordpress/components';\nimport { isRTL, __, sprintf } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../private-apis';\nimport SidebarButton from '../sidebar-button';\nimport {\n\tisPreviewingTheme,\n\tcurrentlyPreviewingTheme,\n} from '../../utils/is-previewing-theme';\n\nexport default function SidebarNavigationScreen( {\n\tisRoot,\n\ttitle,\n\tactions,\n\tmeta,\n\tcontent,\n\tfooter,\n\tdescription,\n} ) {\n\tconst { dashboardLink } = useSelect( ( select ) => {\n\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tdashboardLink: getSettings().__experimentalDashboardLink,\n\t\t};\n\t}, [] );\n\tconst { getTheme } = useSelect( coreStore );\n\tconst theme = getTheme( currentlyPreviewingTheme() );\n\n\treturn (\n\t\t<>\n\t\t\t<VStack\n\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__main\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__title-icon\"\n\t\t\t\t>\n\t\t\t\t\t{ ! isRoot ? (\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\tas={ SidebarButton }\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t! isPreviewingTheme()\n\t\t\t\t\t\t\t\t\t? __( 'Go back to the Dashboard' )\n\t\t\t\t\t\t\t\t\t: __( 'Go back to the theme showcase' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t! isPreviewingTheme()\n\t\t\t\t\t\t\t\t\t? dashboardLink || 'index.php'\n\t\t\t\t\t\t\t\t\t: 'themes.php'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<Heading\n\t\t\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen__title\"\n\t\t\t\t\t\tcolor={ 'white' }\n\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isPreviewingTheme()\n\t\t\t\t\t\t\t? title\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t'Previewing %1$s: %2$s',\n\t\t\t\t\t\t\t\t\ttheme?.name?.rendered,\n\t\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t{ actions && (\n\t\t\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__actions\">\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t\t{ meta && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__meta\">\n\t\t\t\t\t\t\t{ meta }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t<div className=\"edit-site-sidebar-navigation-screen__content\">\n\t\t\t\t\t{ description && (\n\t\t\t\t\t\t<p className=\"edit-site-sidebar-navigation-screen__description\">\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) }\n\t\t\t\t\t{ content }\n\t\t\t\t</div>\n\t\t\t</VStack>\n\t\t\t{ footer && (\n\t\t\t\t<footer className=\"edit-site-sidebar-navigation-screen__footer\">\n\t\t\t\t\t{ footer }\n\t\t\t\t</footer>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build/components/sidebar-navigation-screen-global-styles/index.js

@@ -5,16 +5,29 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.SidebarNavigationItemGlobalStyles = SidebarNavigationItemGlobalStyles;
 exports.default = SidebarNavigationScreenGlobalStyles;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
 var _data = require("@wordpress/data");
 
+var _coreData = require("@wordpress/core-data");
+
+var _components = require("@wordpress/components");
+
+var _compose = require("@wordpress/compose");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _date = require("@wordpress/date");
+
 var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-navigation-screen"));
 
 var _styleVariationsContainer = _interopRequireDefault(require("../global-styles/style-variations-container"));
@@ -25,6 +38,12 @@ var _store = require("../../store");
 
 var _sidebarButton = _interopRequireDefault(require("../sidebar-button"));
 
+var _sidebarNavigationItem = _interopRequireDefault(require("../sidebar-navigation-item"));
+
+var _styleBook = _interopRequireDefault(require("../style-book"));
+
+var _useGlobalStylesRevisions = _interopRequireDefault(require("../global-styles/screen-revisions/use-global-styles-revisions"));
+
 /**
  * WordPress dependencies
  */
@@ -32,27 +51,162 @@ var _sidebarButton = _interopRequireDefault(require("../sidebar-button"));
 /**
  * Internal dependencies
  */
-function SidebarNavigationScreenGlobalStyles() {
+const noop = () => {};
+
+function SidebarNavigationItemGlobalStyles(props) {
   const {
     openGeneralSidebar
   } = (0, _data.useDispatch)(_store.store);
   const {
     setCanvasMode
   } = (0, _privateApis.unlock)((0, _data.useDispatch)(_store.store));
-  return (0, _element.createElement)(_sidebarNavigationScreen.default, {
+  const hasGlobalStyleVariations = (0, _data.useSelect)(select => !!select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations()?.length, []);
+
+  if (hasGlobalStyleVariations) {
+    return (0, _element.createElement)(_components.__experimentalNavigatorButton, (0, _extends2.default)({}, props, {
+      as: _sidebarNavigationItem.default,
+      path: "/wp_global_styles"
+    }));
+  }
+
+  return (0, _element.createElement)(_sidebarNavigationItem.default, (0, _extends2.default)({}, props, {
+    onClick: () => {
+      // switch to edit mode.
+      setCanvasMode('edit'); // open global styles sidebar.
+
+      openGeneralSidebar('edit-site/global-styles');
+    }
+  }));
+}
+
+function SidebarNavigationScreenGlobalStylesContent() {
+  const {
+    storedSettings
+  } = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = (0, _privateApis.unlock)(select(_store.store));
+    return {
+      storedSettings: getSettings(false)
+    };
+  }, []); // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+  // loaded. This is necessary because the Iframe component waits until
+  // the block editor store's `__internalIsInitialized` is true before
+  // rendering the iframe. Without this, the iframe previews will not render
+  // in mobile viewport sizes, where the editor canvas is hidden.
+
+  return (0, _element.createElement)(_blockEditor.BlockEditorProvider, {
+    settings: storedSettings,
+    onChange: noop,
+    onInput: noop
+  }, (0, _element.createElement)(_styleVariationsContainer.default, null));
+}
+
+function SidebarNavigationScreenGlobalStylesFooter({
+  onClickRevisions
+}) {
+  const {
+    revisions,
+    isLoading
+  } = (0, _useGlobalStylesRevisions.default)();
+  const {
+    revisionsCount
+  } = (0, _data.useSelect)(select => {
+    var _globalStyles$_links$;
+
+    const {
+      getEntityRecord,
+      __experimentalGetCurrentGlobalStylesId
+    } = select(_coreData.store);
+
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+
+    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
+    return {
+      revisionsCount: (_globalStyles$_links$ = globalStyles?._links?.['version-history']?.[0]?.count) !== null && _globalStyles$_links$ !== void 0 ? _globalStyles$_links$ : 0
+    };
+  }, []);
+  const hasRevisions = revisionsCount >= 2;
+  const modified = revisions?.[0]?.modified;
+
+  if (!hasRevisions || isLoading || !modified) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_components.__experimentalVStack, {
+    className: "edit-site-sidebar-navigation-screen-global-styles__footer"
+  }, (0, _element.createElement)(_sidebarNavigationItem.default, {
+    className: "edit-site-sidebar-navigation-screen-global-styles__revisions",
+    label: (0, _i18n.__)('Revisions'),
+    onClick: onClickRevisions
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    as: "span",
+    alignment: "center",
+    spacing: 5,
+    direction: "row",
+    justify: "space-between"
+  }, (0, _element.createElement)("span", {
+    className: "edit-site-sidebar-navigation-screen-global-styles__revisions__label"
+  }, (0, _i18n.__)('Last modified')), (0, _element.createElement)("span", null, (0, _element.createElement)("time", {
+    dateTime: modified
+  }, (0, _date.humanTimeDiff)(modified))), (0, _element.createElement)(_components.Icon, {
+    icon: _icons.backup,
+    style: {
+      fill: 'currentcolor'
+    }
+  }))));
+}
+
+function SidebarNavigationScreenGlobalStyles() {
+  const {
+    openGeneralSidebar
+  } = (0, _data.useDispatch)(_store.store);
+  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
+  const {
+    setCanvasMode,
+    setEditorCanvasContainerView
+  } = (0, _privateApis.unlock)((0, _data.useDispatch)(_store.store));
+  const isStyleBookOpened = (0, _data.useSelect)(select => 'style-book' === (0, _privateApis.unlock)(select(_store.store)).getEditorCanvasContainerView(), []);
+  const openGlobalStyles = (0, _element.useCallback)(async () => Promise.all([setCanvasMode('edit'), openGeneralSidebar('edit-site/global-styles')]), [setCanvasMode, openGeneralSidebar]);
+  const openStyleBook = (0, _element.useCallback)(async () => {
+    await openGlobalStyles(); // Open the Style Book once the canvas mode is set to edit,
+    // and the global styles sidebar is open. This ensures that
+    // the Style Book is not prematurely closed.
+
+    setEditorCanvasContainerView('style-book');
+  }, [openGlobalStyles, setEditorCanvasContainerView]);
+  const openRevisions = (0, _element.useCallback)(async () => {
+    await openGlobalStyles(); // Open the global styles revisions once the canvas mode is set to edit,
+    // and the global styles sidebar is open. The global styles UI is responsible
+    // for redirecting to the revisions screen once the editor canvas container
+    // has been set to 'global-styles-revisions'.
+
+    setEditorCanvasContainerView('global-styles-revisions');
+  }, [openGlobalStyles, setEditorCanvasContainerView]);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_sidebarNavigationScreen.default, {
     title: (0, _i18n.__)('Styles'),
     description: (0, _i18n.__)('Choose a different style combination for the theme styles.'),
-    content: (0, _element.createElement)(_styleVariationsContainer.default, null),
-    actions: (0, _element.createElement)(_sidebarButton.default, {
+    content: (0, _element.createElement)(SidebarNavigationScreenGlobalStylesContent, null),
+    footer: (0, _element.createElement)(SidebarNavigationScreenGlobalStylesFooter, {
+      onClickRevisions: openRevisions
+    }),
+    actions: (0, _element.createElement)(_element.Fragment, null, !isMobileViewport && (0, _element.createElement)(_sidebarButton.default, {
+      icon: _icons.seen,
+      label: (0, _i18n.__)('Style Book'),
+      onClick: () => setEditorCanvasContainerView(!isStyleBookOpened ? 'style-book' : undefined),
+      isPressed: isStyleBookOpened
+    }), (0, _element.createElement)(_sidebarButton.default, {
       icon: _icons.edit,
       label: (0, _i18n.__)('Edit styles'),
-      onClick: () => {
-        // switch to edit mode.
-        setCanvasMode('edit'); // open global styles sidebar.
-
-        openGeneralSidebar('edit-site/global-styles');
-      }
-    })
-  });
+      onClick: async () => await openGlobalStyles()
+    }))
+  }), isStyleBookOpened && !isMobileViewport && (0, _element.createElement)(_styleBook.default, {
+    enableResizing: false,
+    isSelected: () => false,
+    onClick: openStyleBook,
+    onSelect: openStyleBook,
+    showCloseButton: false,
+    showTabs: false
+  }));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js"],"names":["SidebarNavigationScreenGlobalStyles","openGeneralSidebar","editSiteStore","setCanvasMode","edit"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAKA;AACA;AACA;AAOe,SAASA,mCAAT,GAA+C;AAC7D,QAAM;AAAEC,IAAAA;AAAF,MAAyB,uBAAaC,YAAb,CAA/B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAoB,yBAAQ,uBAAaD,YAAb,CAAR,CAA1B;AACA,SACC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAG,cAAI,QAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,4DADa,CAFf;AAKC,IAAA,OAAO,EAAG,4BAAC,iCAAD,OALX;AAMC,IAAA,OAAO,EACN,4BAAC,sBAAD;AACC,MAAA,IAAI,EAAGE,WADR;AAEC,MAAA,KAAK,EAAG,cAAI,aAAJ,CAFT;AAGC,MAAA,OAAO,EAAG,MAAM;AACf;AACAD,QAAAA,aAAa,CAAE,MAAF,CAAb,CAFe,CAGf;;AACAF,QAAAA,kBAAkB,CAAE,yBAAF,CAAlB;AACA;AARF;AAPF,IADD;AAqBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { edit } from '@wordpress/icons';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport StyleVariationsContainer from '../global-styles/style-variations-container';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\n\nexport default function SidebarNavigationScreenGlobalStyles() {\n\tconst { openGeneralSidebar } = useDispatch( editSiteStore );\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\tdescription={ __(\n\t\t\t\t'Choose a different style combination for the theme styles.'\n\t\t\t) }\n\t\t\tcontent={ <StyleVariationsContainer /> }\n\t\t\tactions={\n\t\t\t\t<SidebarButton\n\t\t\t\t\ticon={ edit }\n\t\t\t\t\tlabel={ __( 'Edit styles' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t// switch to edit mode.\n\t\t\t\t\t\tsetCanvasMode( 'edit' );\n\t\t\t\t\t\t// open global styles sidebar.\n\t\t\t\t\t\topenGeneralSidebar( 'edit-site/global-styles' );\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-global-styles/index.js"],"names":["noop","SidebarNavigationItemGlobalStyles","props","openGeneralSidebar","editSiteStore","setCanvasMode","hasGlobalStyleVariations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","length","SidebarNavigationItem","SidebarNavigationScreenGlobalStylesContent","storedSettings","getSettings","SidebarNavigationScreenGlobalStylesFooter","onClickRevisions","revisions","isLoading","revisionsCount","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","undefined","_links","count","hasRevisions","modified","backup","fill","SidebarNavigationScreenGlobalStyles","isMobileViewport","setEditorCanvasContainerView","isStyleBookOpened","getEditorCanvasContainerView","openGlobalStyles","Promise","all","openStyleBook","openRevisions","seen","edit"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { backup, edit, seen } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tIcon,\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalVStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { BlockEditorProvider } from '@wordpress/block-editor';\nimport { humanTimeDiff } from '@wordpress/date';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport StyleVariationsContainer from '../global-styles/style-variations-container';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport SidebarButton from '../sidebar-button';\nimport SidebarNavigationItem from '../sidebar-navigation-item';\nimport StyleBook from '../style-book';\nimport useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';\n\nconst noop = () => {};\n\nexport function SidebarNavigationItemGlobalStyles( props ) {\n\tconst { openGeneralSidebar } = useDispatch( editSiteStore );\n\tconst { setCanvasMode } = unlock( useDispatch( editSiteStore ) );\n\tconst hasGlobalStyleVariations = useSelect(\n\t\t( select ) =>\n\t\t\t!! select(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,\n\t\t[]\n\t);\n\tif ( hasGlobalStyleVariations ) {\n\t\treturn (\n\t\t\t<NavigatorButton\n\t\t\t\t{ ...props }\n\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\tpath=\"/wp_global_styles\"\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<SidebarNavigationItem\n\t\t\t{ ...props }\n\t\t\tonClick={ () => {\n\t\t\t\t// switch to edit mode.\n\t\t\t\tsetCanvasMode( 'edit' );\n\t\t\t\t// open global styles sidebar.\n\t\t\t\topenGeneralSidebar( 'edit-site/global-styles' );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction SidebarNavigationScreenGlobalStylesContent() {\n\tconst { storedSettings } = useSelect( ( select ) => {\n\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\n\t\treturn {\n\t\t\tstoredSettings: getSettings( false ),\n\t\t};\n\t}, [] );\n\n\t// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are\n\t// loaded. This is necessary because the Iframe component waits until\n\t// the block editor store's `__internalIsInitialized` is true before\n\t// rendering the iframe. Without this, the iframe previews will not render\n\t// in mobile viewport sizes, where the editor canvas is hidden.\n\treturn (\n\t\t<BlockEditorProvider\n\t\t\tsettings={ storedSettings }\n\t\t\tonChange={ noop }\n\t\t\tonInput={ noop }\n\t\t>\n\t\t\t<StyleVariationsContainer />\n\t\t</BlockEditorProvider>\n\t);\n}\n\nfunction SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {\n\tconst { revisions, isLoading } = useGlobalStylesRevisions();\n\tconst { revisionsCount } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\trevisionsCount:\n\t\t\t\tglobalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,\n\t\t};\n\t}, [] );\n\n\tconst hasRevisions = revisionsCount >= 2;\n\tconst modified = revisions?.[ 0 ]?.modified;\n\n\tif ( ! hasRevisions || isLoading || ! modified ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack className=\"edit-site-sidebar-navigation-screen-global-styles__footer\">\n\t\t\t<SidebarNavigationItem\n\t\t\t\tclassName=\"edit-site-sidebar-navigation-screen-global-styles__revisions\"\n\t\t\t\tlabel={ __( 'Revisions' ) }\n\t\t\t\tonClick={ onClickRevisions }\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tas=\"span\"\n\t\t\t\t\talignment=\"center\"\n\t\t\t\t\tspacing={ 5 }\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"edit-site-sidebar-navigation-screen-global-styles__revisions__label\">\n\t\t\t\t\t\t{ __( 'Last modified' ) }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<time dateTime={ modified }>\n\t\t\t\t\t\t\t{ humanTimeDiff( modified ) }\n\t\t\t\t\t\t</time>\n\t\t\t\t\t</span>\n\t\t\t\t\t<Icon icon={ backup } style={ { fill: 'currentcolor' } } />\n\t\t\t\t</HStack>\n\t\t\t</SidebarNavigationItem>\n\t\t</VStack>\n\t);\n}\n\nexport default function SidebarNavigationScreenGlobalStyles() {\n\tconst { openGeneralSidebar } = useDispatch( editSiteStore );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst { setCanvasMode, setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\n\tconst isStyleBookOpened = useSelect(\n\t\t( select ) =>\n\t\t\t'style-book' ===\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\n\tconst openGlobalStyles = useCallback(\n\t\tasync () =>\n\t\t\tPromise.all( [\n\t\t\t\tsetCanvasMode( 'edit' ),\n\t\t\t\topenGeneralSidebar( 'edit-site/global-styles' ),\n\t\t\t] ),\n\t\t[ setCanvasMode, openGeneralSidebar ]\n\t);\n\n\tconst openStyleBook = useCallback( async () => {\n\t\tawait openGlobalStyles();\n\t\t// Open the Style Book once the canvas mode is set to edit,\n\t\t// and the global styles sidebar is open. This ensures that\n\t\t// the Style Book is not prematurely closed.\n\t\tsetEditorCanvasContainerView( 'style-book' );\n\t}, [ openGlobalStyles, setEditorCanvasContainerView ] );\n\n\tconst openRevisions = useCallback( async () => {\n\t\tawait openGlobalStyles();\n\t\t// Open the global styles revisions once the canvas mode is set to edit,\n\t\t// and the global styles sidebar is open. The global styles UI is responsible\n\t\t// for redirecting to the revisions screen once the editor canvas container\n\t\t// has been set to 'global-styles-revisions'.\n\t\tsetEditorCanvasContainerView( 'global-styles-revisions' );\n\t}, [ openGlobalStyles, setEditorCanvasContainerView ] );\n\n\treturn (\n\t\t<>\n\t\t\t<SidebarNavigationScreen\n\t\t\t\ttitle={ __( 'Styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles.'\n\t\t\t\t) }\n\t\t\t\tcontent={ <SidebarNavigationScreenGlobalStylesContent /> }\n\t\t\t\tfooter={\n\t\t\t\t\t<SidebarNavigationScreenGlobalStylesFooter\n\t\t\t\t\t\tonClickRevisions={ openRevisions }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\tactions={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\tsetEditorCanvasContainerView(\n\t\t\t\t\t\t\t\t\t\t! isStyleBookOpened\n\t\t\t\t\t\t\t\t\t\t\t? 'style-book'\n\t\t\t\t\t\t\t\t\t\t\t: undefined\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\tisPressed={ isStyleBookOpened }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<SidebarButton\n\t\t\t\t\t\t\ticon={ edit }\n\t\t\t\t\t\t\tlabel={ __( 'Edit styles' ) }\n\t\t\t\t\t\t\tonClick={ async () => await openGlobalStyles() }\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\t{ isStyleBookOpened && ! isMobileViewport && (\n\t\t\t\t<StyleBook\n\t\t\t\t\tenableResizing={ false }\n\t\t\t\t\tisSelected={ () => false }\n\t\t\t\t\tonClick={ openStyleBook }\n\t\t\t\t\tonSelect={ openStyleBook }\n\t\t\t\t\tshowCloseButton={ false }\n\t\t\t\t\tshowTabs={ false }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

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

@@ -17,12 +17,18 @@ var _icons = require("@wordpress/icons");
 
 var _data = require("@wordpress/data");
 
-var _coreData = require("@wordpress/core-data");
-
 var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-navigation-screen"));
 
 var _sidebarNavigationItem = _interopRequireDefault(require("../sidebar-navigation-item"));
 
+var _sidebarNavigationScreenGlobalStyles = require("../sidebar-navigation-screen-global-styles");
+
+var _privateApis = require("../../private-apis");
+
+var _store = require("../../store");
+
+var _navigatorButton = _interopRequireDefault(require("../sidebar-navigation-screen-navigation-menus/navigator-button"));
+
 /**
  * WordPress dependencies
  */
@@ -31,42 +37,27 @@ var _sidebarNavigationItem = _interopRequireDefault(require("../sidebar-navigati
  * Internal dependencies
  */
 function SidebarNavigationScreenMain() {
-  const {
-    hasNavigationMenus,
-    hasGlobalStyleVariations
-  } = (0, _data.useSelect)(select => {
-    var _experimentalGetCurr;
-
-    const {
-      getEntityRecords,
-      __experimentalGetCurrentThemeGlobalStylesVariations
-    } = select(_coreData.store); // The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
-    // to avoid double network calls.
-
-    const navigationMenus = getEntityRecords('postType', 'wp_navigation', {
-      per_page: 1,
-      status: 'publish',
-      order: 'desc',
-      orderby: 'date'
-    });
-    return {
-      hasNavigationMenus: !!(navigationMenus !== null && navigationMenus !== void 0 && navigationMenus.length),
-      hasGlobalStyleVariations: !!((_experimentalGetCurr = __experimentalGetCurrentThemeGlobalStylesVariations()) !== null && _experimentalGetCurr !== void 0 && _experimentalGetCurr.length)
-    };
+  const editorCanvasContainerView = (0, _data.useSelect)(select => {
+    return (0, _privateApis.unlock)(select(_store.store)).getEditorCanvasContainerView();
   }, []);
-  const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN ? hasNavigationMenus : false;
+  const {
+    setEditorCanvasContainerView
+  } = (0, _privateApis.unlock)((0, _data.useDispatch)(_store.store)); // Clear the editor canvas container view when accessing the main navigation screen.
+
+  (0, _element.useEffect)(() => {
+    if (editorCanvasContainerView) {
+      setEditorCanvasContainerView(undefined);
+    }
+  }, [editorCanvasContainerView, setEditorCanvasContainerView]);
   return (0, _element.createElement)(_sidebarNavigationScreen.default, {
     isRoot: true,
     title: (0, _i18n.__)('Design'),
     description: (0, _i18n.__)('Customize the appearance of your website using the block editor.'),
-    content: (0, _element.createElement)(_components.__experimentalItemGroup, null, showNavigationScreen && (0, _element.createElement)(_components.__experimentalNavigatorButton, {
-      as: _sidebarNavigationItem.default,
-      path: "/navigation",
+    content: (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_navigatorButton.default, {
       withChevron: true,
-      icon: _icons.navigation
-    }, (0, _i18n.__)('Navigation')), hasGlobalStyleVariations && (0, _element.createElement)(_components.__experimentalNavigatorButton, {
-      as: _sidebarNavigationItem.default,
-      path: "/wp_global_styles",
+      icon: _icons.navigation,
+      as: _sidebarNavigationItem.default
+    }, (0, _i18n.__)('Navigation')), (0, _element.createElement)(_sidebarNavigationScreenGlobalStyles.SidebarNavigationItemGlobalStyles, {
       withChevron: true,
       icon: _icons.styles
     }, (0, _i18n.__)('Styles')), (0, _element.createElement)(_components.__experimentalNavigatorButton, {
@@ -84,7 +75,7 @@ function SidebarNavigationScreenMain() {
       path: "/wp_template_part",
       withChevron: true,
       icon: _icons.symbol
-    }, (0, _i18n.__)('Template Parts')))
+    }, (0, _i18n.__)('Library')))
   });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-main/index.js"],"names":["SidebarNavigationScreenMain","hasNavigationMenus","hasGlobalStyleVariations","select","getEntityRecords","__experimentalGetCurrentThemeGlobalStylesVariations","coreStore","navigationMenus","per_page","status","order","orderby","length","showNavigationScreen","process","env","IS_GUTENBERG_PLUGIN","SidebarNavigationItem","navigation","styles","page","layout","symbol"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAUA;AACA;AACA;AAIe,SAASA,2BAAT,GAAuC;AACrD,QAAM;AAAEC,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MAAmD,qBACtDC,MAAF,IAAc;AAAA;;AACb,UAAM;AACLC,MAAAA,gBADK;AAELC,MAAAA;AAFK,QAGFF,MAAM,CAAEG,eAAF,CAHV,CADa,CAKb;AACA;;AACA,UAAMC,eAAe,GAAGH,gBAAgB,CACvC,UADuC,EAEvC,eAFuC,EAGvC;AACCI,MAAAA,QAAQ,EAAE,CADX;AAECC,MAAAA,MAAM,EAAE,SAFT;AAGCC,MAAAA,KAAK,EAAE,MAHR;AAICC,MAAAA,OAAO,EAAE;AAJV,KAHuC,CAAxC;AAUA,WAAO;AACNV,MAAAA,kBAAkB,EAAE,CAAC,EAAEM,eAAF,aAAEA,eAAF,eAAEA,eAAe,CAAEK,MAAnB,CADf;AAENV,MAAAA,wBAAwB,EACvB,CAAC,0BAAEG,mDAAmD,EAArD,iDAAE,qBACAO,MADF;AAHI,KAAP;AAMA,GAxBuD,EAyBxD,EAzBwD,CAAzD;AA2BA,QAAMC,oBAAoB,GAAGC,OAAO,CAACC,GAAR,CAAYC,mBAAZ,GAC1Bf,kBAD0B,GAE1B,KAFH;AAGA,SACC,4BAAC,gCAAD;AACC,IAAA,MAAM,MADP;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,kEADa,CAHf;AAMC,IAAA,OAAO,EACN,4BAAC,mCAAD,QACGY,oBAAoB,IACrB,4BAAC,yCAAD;AACC,MAAA,EAAE,EAAGI,8BADN;AAEC,MAAA,IAAI,EAAC,aAFN;AAGC,MAAA,WAAW,MAHZ;AAIC,MAAA,IAAI,EAAGC;AAJR,OAMG,cAAI,YAAJ,CANH,CAFF,EAWGhB,wBAAwB,IACzB,4BAAC,yCAAD;AACC,MAAA,EAAE,EAAGe,8BADN;AAEC,MAAA,IAAI,EAAC,mBAFN;AAGC,MAAA,WAAW,MAHZ;AAIC,MAAA,IAAI,EAAGE;AAJR,OAMG,cAAI,QAAJ,CANH,CAZF,EAsBC,4BAAC,yCAAD;AACC,MAAA,EAAE,EAAGF,8BADN;AAEC,MAAA,IAAI,EAAC,OAFN;AAGC,MAAA,WAAW,MAHZ;AAIC,MAAA,IAAI,EAAGG;AAJR,OAMG,cAAI,OAAJ,CANH,CAtBD,EA8BC,4BAAC,yCAAD;AACC,MAAA,EAAE,EAAGH,8BADN;AAEC,MAAA,IAAI,EAAC,cAFN;AAGC,MAAA,WAAW,MAHZ;AAIC,MAAA,IAAI,EAAGI;AAJR,OAMG,cAAI,WAAJ,CANH,CA9BD,EAsCC,4BAAC,yCAAD;AACC,MAAA,EAAE,EAAGJ,8BADN;AAEC,MAAA,IAAI,EAAC,mBAFN;AAGC,MAAA,WAAW,MAHZ;AAIC,MAAA,IAAI,EAAGK;AAJR,OAMG,cAAI,gBAAJ,CANH,CAtCD;AAPF,IADD;AA0DA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalNavigatorButton as NavigatorButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { layout, symbol, navigation, styles, page } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport SidebarNavigationItem from '../sidebar-navigation-item';\n\nexport default function SidebarNavigationScreenMain() {\n\tconst { hasNavigationMenus, hasGlobalStyleVariations } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecords,\n\t\t\t\t__experimentalGetCurrentThemeGlobalStylesVariations,\n\t\t\t} = select( coreStore );\n\t\t\t// The query needs to be the same as in the \"SidebarNavigationScreenNavigationMenus\" component,\n\t\t\t// to avoid double network calls.\n\t\t\tconst navigationMenus = getEntityRecords(\n\t\t\t\t'postType',\n\t\t\t\t'wp_navigation',\n\t\t\t\t{\n\t\t\t\t\tper_page: 1,\n\t\t\t\t\tstatus: 'publish',\n\t\t\t\t\torder: 'desc',\n\t\t\t\t\torderby: 'date',\n\t\t\t\t}\n\t\t\t);\n\t\t\treturn {\n\t\t\t\thasNavigationMenus: !! navigationMenus?.length,\n\t\t\t\thasGlobalStyleVariations:\n\t\t\t\t\t!! __experimentalGetCurrentThemeGlobalStylesVariations()\n\t\t\t\t\t\t?.length,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN\n\t\t? hasNavigationMenus\n\t\t: false;\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\tisRoot\n\t\t\ttitle={ __( 'Design' ) }\n\t\t\tdescription={ __(\n\t\t\t\t'Customize the appearance of your website using the block editor.'\n\t\t\t) }\n\t\t\tcontent={\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t{ showNavigationScreen && (\n\t\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t\t\tpath=\"/navigation\"\n\t\t\t\t\t\t\twithChevron\n\t\t\t\t\t\t\ticon={ navigation }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Navigation' ) }\n\t\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ hasGlobalStyleVariations && (\n\t\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t\t\tpath=\"/wp_global_styles\"\n\t\t\t\t\t\t\twithChevron\n\t\t\t\t\t\t\ticon={ styles }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Styles' ) }\n\t\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t\tpath=\"/page\"\n\t\t\t\t\t\twithChevron\n\t\t\t\t\t\ticon={ page }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Pages' ) }\n\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t\tpath=\"/wp_template\"\n\t\t\t\t\t\twithChevron\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Templates' ) }\n\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t\tpath=\"/wp_template_part\"\n\t\t\t\t\t\twithChevron\n\t\t\t\t\t\ticon={ symbol }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Template Parts' ) }\n\t\t\t\t\t</NavigatorButton>\n\t\t\t\t</ItemGroup>\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-main/index.js"],"names":["SidebarNavigationScreenMain","editorCanvasContainerView","select","editSiteStore","getEditorCanvasContainerView","setEditorCanvasContainerView","undefined","navigation","SidebarNavigationItem","styles","page","layout","symbol"],"mappings":";;;;;;;;;AAWA;;AARA;;AAIA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AACA;;AACA;;AArBA;AACA;AACA;;AAWA;AACA;AACA;AAQe,SAASA,2BAAT,GAAuC;AACrD,QAAMC,yBAAyB,GAAG,qBAAaC,MAAF,IAAc;AAC1D,WAAO,yBAAQA,MAAM,CAAEC,YAAF,CAAd,EAAkCC,4BAAlC,EAAP;AACA,GAFiC,EAE/B,EAF+B,CAAlC;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAmC,yBACxC,uBAAaF,YAAb,CADwC,CAAzC,CALqD,CASrD;;AACA,0BAAW,MAAM;AAChB,QAAKF,yBAAL,EAAiC;AAChCI,MAAAA,4BAA4B,CAAEC,SAAF,CAA5B;AACA;AACD,GAJD,EAIG,CAAEL,yBAAF,EAA6BI,4BAA7B,CAJH;AAMA,SACC,4BAAC,gCAAD;AACC,IAAA,MAAM,MADP;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,kEADa,CAHf;AAMC,IAAA,OAAO,EACN,4BAAC,mCAAD,QACC,4BAAC,wBAAD;AACC,MAAA,WAAW,MADZ;AAEC,MAAA,IAAI,EAAGE,iBAFR;AAGC,MAAA,EAAE,EAAGC;AAHN,OAKG,cAAI,YAAJ,CALH,CADD,EASC,4BAAC,sEAAD;AACC,MAAA,WAAW,MADZ;AAEC,MAAA,IAAI,EAAGC;AAFR,OAIG,cAAI,QAAJ,CAJH,CATD,EAeC,4BAAC,yCAAD;AACC,MAAA,EAAE,EAAGD,8BADN;AAEC,MAAA,IAAI,EAAC,OAFN;AAGC,MAAA,WAAW,MAHZ;AAIC,MAAA,IAAI,EAAGE;AAJR,OAMG,cAAI,OAAJ,CANH,CAfD,EAuBC,4BAAC,yCAAD;AACC,MAAA,EAAE,EAAGF,8BADN;AAEC,MAAA,IAAI,EAAC,cAFN;AAGC,MAAA,WAAW,MAHZ;AAIC,MAAA,IAAI,EAAGG;AAJR,OAMG,cAAI,WAAJ,CANH,CAvBD,EA+BC,4BAAC,yCAAD;AACC,MAAA,EAAE,EAAGH,8BADN;AAEC,MAAA,IAAI,EAAC,mBAFN;AAGC,MAAA,WAAW,MAHZ;AAIC,MAAA,IAAI,EAAGI;AAJR,OAMG,cAAI,SAAJ,CANH,CA/BD;AAPF,IADD;AAmDA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalNavigatorButton as NavigatorButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { layout, symbol, navigation, styles, page } from '@wordpress/icons';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport SidebarNavigationItem from '../sidebar-navigation-item';\nimport { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';\nimport { unlock } from '../../private-apis';\nimport { store as editSiteStore } from '../../store';\nimport SidebarNavigationScreenNavigationMenuButton from '../sidebar-navigation-screen-navigation-menus/navigator-button';\n\nexport default function SidebarNavigationScreenMain() {\n\tconst editorCanvasContainerView = useSelect( ( select ) => {\n\t\treturn unlock( select( editSiteStore ) ).getEditorCanvasContainerView();\n\t}, [] );\n\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\n\t// Clear the editor canvas container view when accessing the main navigation screen.\n\tuseEffect( () => {\n\t\tif ( editorCanvasContainerView ) {\n\t\t\tsetEditorCanvasContainerView( undefined );\n\t\t}\n\t}, [ editorCanvasContainerView, setEditorCanvasContainerView ] );\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\tisRoot\n\t\t\ttitle={ __( 'Design' ) }\n\t\t\tdescription={ __(\n\t\t\t\t'Customize the appearance of your website using the block editor.'\n\t\t\t) }\n\t\t\tcontent={\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<SidebarNavigationScreenNavigationMenuButton\n\t\t\t\t\t\twithChevron\n\t\t\t\t\t\ticon={ navigation }\n\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Navigation' ) }\n\t\t\t\t\t</SidebarNavigationScreenNavigationMenuButton>\n\n\t\t\t\t\t<SidebarNavigationItemGlobalStyles\n\t\t\t\t\t\twithChevron\n\t\t\t\t\t\ticon={ styles }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Styles' ) }\n\t\t\t\t\t</SidebarNavigationItemGlobalStyles>\n\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t\tpath=\"/page\"\n\t\t\t\t\t\twithChevron\n\t\t\t\t\t\ticon={ page }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Pages' ) }\n\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t\tpath=\"/wp_template\"\n\t\t\t\t\t\twithChevron\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Templates' ) }\n\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\tas={ SidebarNavigationItem }\n\t\t\t\t\t\tpath=\"/wp_template_part\"\n\t\t\t\t\t\twithChevron\n\t\t\t\t\t\ticon={ symbol }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Library' ) }\n\t\t\t\t\t</NavigatorButton>\n\t\t\t\t</ItemGroup>\n\t\t\t}\n\t\t/>\n\t);\n}\n"]}