@wordpress/edit-site 5.12.0 → 5.12.2

package/build/components/secondary-sidebar/list-view-sidebar.js

@@ -21,9 +21,13 @@ var _icons = require("@wordpress/icons");
 
 var _keycodes = require("@wordpress/keycodes");
 
+var _dom = require("@wordpress/dom");
+
+var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
+
 var _store = require("../../store");
 
-var _privateApis = require("../../private-apis");
+var _lockUnlock = require("../../lock-unlock");
 
 /**
  * WordPress dependencies
@@ -34,16 +38,15 @@ var _privateApis = require("../../private-apis");
  */
 const {
   PrivateListView
-} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 
 function ListViewSidebar() {
   const {
     setIsListViewOpened
-  } = (0, _data.useDispatch)(_store.store); // Use internal state instead of a ref to make sure that the component
-  // re-renders when the dropZoneElement updates.
+  } = (0, _data.useDispatch)(_store.store); // This hook handles focus when the sidebar first renders.
+
+  const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement'); // The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
 
-  const [dropZoneElement, setDropZoneElement] = (0, _element.useState)(null);
-  const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement');
   const headerFocusReturnRef = (0, _compose.useFocusReturn)();
   const contentFocusReturnRef = (0, _compose.useFocusReturn)();
 
@@ -51,22 +54,56 @@ function ListViewSidebar() {
     if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented) {
       setIsListViewOpened(false);
     }
-  }
+  } // Use internal state instead of a ref to make sure that the component
+  // re-renders when the dropZoneElement updates.
+
+
+  const [dropZoneElement, setDropZoneElement] = (0, _element.useState)(null); // This ref refers to the sidebar as a whole.
 
+  const sidebarRef = (0, _element.useRef)(); // This ref refers to the close button.
+
+  const sidebarCloseButtonRef = (0, _element.useRef)(); // This ref refers to the list view application area.
+
+  const listViewRef = (0, _element.useRef)();
+  /*
+   * Callback function to handle list view or close button focus.
+   *
+   * @return void
+   */
+
+  function handleSidebarFocus() {
+    // Either focus the list view or the sidebar close button. Must have a fallback because the list view does not render when there are no blocks.
+    const listViewApplicationFocus = _dom.focus.tabbable.find(listViewRef.current)[0];
+
+    const listViewFocusArea = sidebarRef.current.contains(listViewApplicationFocus) ? listViewApplicationFocus : sidebarCloseButtonRef.current;
+    listViewFocusArea.focus();
+  } // This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+
+
+  (0, _keyboardShortcuts.useShortcut)('core/edit-site/toggle-list-view', () => {
+    // If the sidebar has focus, it is safe to close.
+    if (sidebarRef.current.contains(sidebarRef.current.ownerDocument.activeElement)) {
+      setIsListViewOpened(false); // If the list view or close button does not have focus, focus should be moved to it.
+    } else {
+      handleSidebarFocus();
+    }
+  });
   return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, _element.createElement)("div", {
       className: "edit-site-editor__list-view-panel",
-      onKeyDown: closeOnEscape
+      onKeyDown: closeOnEscape,
+      ref: sidebarRef
     }, (0, _element.createElement)("div", {
       className: "edit-site-editor__list-view-panel-header",
       ref: headerFocusReturnRef
     }, (0, _element.createElement)("strong", null, (0, _i18n.__)('List View')), (0, _element.createElement)(_components.Button, {
       icon: _icons.closeSmall,
       label: (0, _i18n.__)('Close'),
-      onClick: () => setIsListViewOpened(false)
+      onClick: () => setIsListViewOpened(false),
+      ref: sidebarCloseButtonRef
     })), (0, _element.createElement)("div", {
       className: "edit-site-editor__list-view-panel-content",
-      ref: (0, _compose.useMergeRefs)([contentFocusReturnRef, focusOnMountRef, setDropZoneElement])
+      ref: (0, _compose.useMergeRefs)([contentFocusReturnRef, focusOnMountRef, setDropZoneElement, listViewRef])
     }, (0, _element.createElement)(PrivateListView, {
       dropZoneElement: dropZoneElement
     })))

package/build/components/secondary-sidebar/list-view-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["PrivateListView","blockEditorPrivateApis","ListViewSidebar","setIsListViewOpened","editSiteStore","dropZoneElement","setDropZoneElement","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","closeSmall"],"mappings":";;;;;;;AAWA;;AARA;;AACA;;AACA;;AAKA;;AAEA;;AACA;;AACA;;AAKA;;AACA;;AApBA;AACA;AACA;;AAcA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA;AAAF,IAAsB,yBAAQC,wBAAR,CAA5B;;AAEe,SAASC,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,YAAb,CAAhC,CADyC,CAGzC;AACA;;AACA,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0C,uBAAU,IAAV,CAAhD;AAEA,QAAMC,eAAe,GAAG,8BAAiB,cAAjB,CAAxB;AACA,QAAMC,oBAAoB,GAAG,8BAA7B;AACA,QAAMC,qBAAqB,GAAG,8BAA9B;;AAEA,WAASC,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBC,gBAAlB,IAA4B,CAAEF,KAAK,CAACG,gBAAzC,EAA4D;AAC3DX,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,SACC;AACA;AACC,MAAA,SAAS,EAAC,mCADX;AAEC,MAAA,SAAS,EAAGO;AAFb,OAIC;AACC,MAAA,SAAS,EAAC,0CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC,4CAAU,cAAI,WAAJ,CAAV,CAJD,EAKC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGO,iBADR;AAEC,MAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,MAAA,OAAO,EAAG,MAAMZ,mBAAmB,CAAE,KAAF;AAHpC,MALD,CAJD,EAeC;AACC,MAAA,SAAS,EAAC,2CADX;AAEC,MAAA,GAAG,EAAG,2BAAc,CACnBM,qBADmB,EAEnBF,eAFmB,EAGnBD,kBAHmB,CAAd;AAFP,OAQC,4BAAC,eAAD;AAAiB,MAAA,eAAe,EAAGD;AAAnC,MARD,CAfD;AAFD;AA6BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../private-apis';\n\nconst { PrivateListView } = unlock( blockEditorPrivateApis );\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editSiteStore );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"edit-site-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-editor__list-view-panel-header\"\n\t\t\t\tref={ headerFocusReturnRef }\n\t\t\t>\n\t\t\t\t<strong>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tcontentFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t\tsetDropZoneElement,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t<PrivateListView dropZoneElement={ dropZoneElement } />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["PrivateListView","blockEditorPrivateApis","ListViewSidebar","setIsListViewOpened","editSiteStore","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","dropZoneElement","setDropZoneElement","sidebarRef","sidebarCloseButtonRef","listViewRef","handleSidebarFocus","listViewApplicationFocus","focus","tabbable","find","current","listViewFocusArea","contains","ownerDocument","activeElement","closeSmall"],"mappings":";;;;;;;AAWA;;AARA;;AACA;;AACA;;AAKA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAtBA;AACA;AACA;;AAgBA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA;AAAF,IAAsB,wBAAQC,wBAAR,CAA5B;;AAEe,SAASC,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,YAAb,CAAhC,CADyC,CAGzC;;AACA,QAAMC,eAAe,GAAG,8BAAiB,cAAjB,CAAxB,CAJyC,CAKzC;;AACA,QAAMC,oBAAoB,GAAG,8BAA7B;AACA,QAAMC,qBAAqB,GAAG,8BAA9B;;AAEA,WAASC,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBC,gBAAlB,IAA4B,CAAEF,KAAK,CAACG,gBAAzC,EAA4D;AAC3DT,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD,GAbwC,CAezC;AACA;;;AACA,QAAM,CAAEU,eAAF,EAAmBC,kBAAnB,IAA0C,uBAAU,IAAV,CAAhD,CAjByC,CAmBzC;;AACA,QAAMC,UAAU,GAAG,sBAAnB,CApByC,CAqBzC;;AACA,QAAMC,qBAAqB,GAAG,sBAA9B,CAtByC,CAuBzC;;AACA,QAAMC,WAAW,GAAG,sBAApB;AAEA;AACD;AACA;AACA;AACA;;AACC,WAASC,kBAAT,GAA8B;AAC7B;AACA,UAAMC,wBAAwB,GAAGC,WAAMC,QAAN,CAAeC,IAAf,CAChCL,WAAW,CAACM,OADoB,EAE9B,CAF8B,CAAjC;;AAGA,UAAMC,iBAAiB,GAAGT,UAAU,CAACQ,OAAX,CAAmBE,QAAnB,CACzBN,wBADyB,IAGvBA,wBAHuB,GAIvBH,qBAAqB,CAACO,OAJzB;AAKAC,IAAAA,iBAAiB,CAACJ,KAAlB;AACA,GA1CwC,CA4CzC;;;AACA,sCAAa,iCAAb,EAAgD,MAAM;AACrD;AACA,QACCL,UAAU,CAACQ,OAAX,CAAmBE,QAAnB,CACCV,UAAU,CAACQ,OAAX,CAAmBG,aAAnB,CAAiCC,aADlC,CADD,EAIE;AACDxB,MAAAA,mBAAmB,CAAE,KAAF,CAAnB,CADC,CAED;AACA,KAPD,MAOO;AACNe,MAAAA,kBAAkB;AAClB;AACD,GAZD;AAcA,SACC;AACA;AACC,MAAA,SAAS,EAAC,mCADX;AAEC,MAAA,SAAS,EAAGV,aAFb;AAGC,MAAA,GAAG,EAAGO;AAHP,OAKC;AACC,MAAA,SAAS,EAAC,0CADX;AAEC,MAAA,GAAG,EAAGT;AAFP,OAIC,4CAAU,cAAI,WAAJ,CAAV,CAJD,EAKC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGsB,iBADR;AAEC,MAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,MAAA,OAAO,EAAG,MAAMzB,mBAAmB,CAAE,KAAF,CAHpC;AAIC,MAAA,GAAG,EAAGa;AAJP,MALD,CALD,EAiBC;AACC,MAAA,SAAS,EAAC,2CADX;AAEC,MAAA,GAAG,EAAG,2BAAc,CACnBT,qBADmB,EAEnBF,eAFmB,EAGnBS,kBAHmB,EAInBG,WAJmB,CAAd;AAFP,OASC,4BAAC,eAAD;AAAiB,MAAA,eAAe,EAAGJ;AAAnC,MATD,CAjBD;AAFD;AAgCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { useRef, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\nimport { focus } from '@wordpress/dom';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { PrivateListView } = unlock( blockEditorPrivateApis );\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editSiteStore );\n\n\t// This hook handles focus when the sidebar first renders.\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\t// The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\n\t// This ref refers to the sidebar as a whole.\n\tconst sidebarRef = useRef();\n\t// This ref refers to the close button.\n\tconst sidebarCloseButtonRef = useRef();\n\t// This ref refers to the list view application area.\n\tconst listViewRef = useRef();\n\n\t/*\n\t * Callback function to handle list view or close button focus.\n\t *\n\t * @return void\n\t */\n\tfunction handleSidebarFocus() {\n\t\t// Either focus the list view or the sidebar close button. Must have a fallback because the list view does not render when there are no blocks.\n\t\tconst listViewApplicationFocus = focus.tabbable.find(\n\t\t\tlistViewRef.current\n\t\t)[ 0 ];\n\t\tconst listViewFocusArea = sidebarRef.current.contains(\n\t\t\tlistViewApplicationFocus\n\t\t)\n\t\t\t? listViewApplicationFocus\n\t\t\t: sidebarCloseButtonRef.current;\n\t\tlistViewFocusArea.focus();\n\t}\n\n\t// This only fires when the sidebar is open because of the conditional rendering. It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.\n\tuseShortcut( 'core/edit-site/toggle-list-view', () => {\n\t\t// If the sidebar has focus, it is safe to close.\n\t\tif (\n\t\t\tsidebarRef.current.contains(\n\t\t\t\tsidebarRef.current.ownerDocument.activeElement\n\t\t\t)\n\t\t) {\n\t\t\tsetIsListViewOpened( false );\n\t\t\t// If the list view or close button does not have focus, focus should be moved to it.\n\t\t} else {\n\t\t\thandleSidebarFocus();\n\t\t}\n\t} );\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"edit-site-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t\tref={ sidebarRef }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-editor__list-view-panel-header\"\n\t\t\t\tref={ headerFocusReturnRef }\n\t\t\t>\n\t\t\t\t<strong>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t\tref={ sidebarCloseButtonRef }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-site-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tcontentFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t\tsetDropZoneElement,\n\t\t\t\t\tlistViewRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t<PrivateListView dropZoneElement={ dropZoneElement } />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build/components/sidebar/index.js

@@ -15,11 +15,13 @@ var _router = require("@wordpress/router");
 
 var _sidebarNavigationScreenMain = _interopRequireDefault(require("../sidebar-navigation-screen-main"));
 
+var _sidebarNavigationScreenLibrary = _interopRequireDefault(require("../sidebar-navigation-screen-library"));
+
 var _sidebarNavigationScreenTemplates = _interopRequireDefault(require("../sidebar-navigation-screen-templates"));
 
 var _sidebarNavigationScreenTemplate = _interopRequireDefault(require("../sidebar-navigation-screen-template"));
 
-var _sidebarNavigationScreenTemplatePart = _interopRequireDefault(require("../sidebar-navigation-screen-template-part"));
+var _sidebarNavigationScreenPattern = _interopRequireDefault(require("../sidebar-navigation-screen-pattern"));
 
 var _useSyncPathWithUrl = _interopRequireWildcard(require("../sync-state-with-url/use-sync-path-with-url"));
 
@@ -33,7 +35,7 @@ var _sidebarNavigationScreenTemplatesBrowse = _interopRequireDefault(require("..
 
 var _saveHub = _interopRequireDefault(require("../save-hub"));
 
-var _privateApis = require("../../private-apis");
+var _lockUnlock = require("../../lock-unlock");
 
 var _sidebarNavigationScreenPages = _interopRequireDefault(require("../sidebar-navigation-screen-pages"));
 
@@ -52,7 +54,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 const {
   useLocation
-} = (0, _privateApis.unlock)(_router.privateApis);
+} = (0, _lockUnlock.unlock)(_router.privateApis);
 
 function SidebarScreens() {
   (0, _useSyncPathWithUrl.default)();
@@ -69,14 +71,16 @@ function SidebarScreens() {
   }, (0, _element.createElement)(_sidebarNavigationScreenPages.default, null)), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
     path: "/page/:postId"
   }, (0, _element.createElement)(_sidebarNavigationScreenPage.default, null)), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
-    path: "/:postType(wp_template|wp_template_part)"
+    path: "/:postType(wp_template)"
   }, (0, _element.createElement)(_sidebarNavigationScreenTemplates.default, null)), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
-    path: "/:postType(wp_template|wp_template_part)/all"
+    path: "/library"
+  }, (0, _element.createElement)(_sidebarNavigationScreenLibrary.default, null)), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    path: "/:postType(wp_template_part|wp_block)/:postId"
+  }, (0, _element.createElement)(_sidebarNavigationScreenPattern.default, null)), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
+    path: "/:postType(wp_template)/all"
   }, (0, _element.createElement)(_sidebarNavigationScreenTemplatesBrowse.default, null)), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
     path: "/:postType(wp_template)/:postId"
-  }, (0, _element.createElement)(_sidebarNavigationScreenTemplate.default, null)), (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
-    path: "/:postType(wp_template_part)/:postId"
-  }, (0, _element.createElement)(_sidebarNavigationScreenTemplatePart.default, null)));
+  }, (0, _element.createElement)(_sidebarNavigationScreenTemplate.default, null)));
 }
 
 function Sidebar() {

package/build/components/sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/index.js"],"names":["useLocation","routerPrivateApis","SidebarScreens","Sidebar","params","urlParams","initialPath","current"],"mappings":";;;;;;;;;AAGA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AA3BA;AACA;AACA;;AAQA;AACA;AACA;AAiBA,MAAM;AAAEA,EAAAA;AAAF,IAAkB,yBAAQC,mBAAR,CAAxB;;AAEA,SAASC,cAAT,GAA0B;AACzB;AAEA,SACC,qDACC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,oCAAD,OADD,CADD,EAIC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,+CAAD,OADD,CAJD,EAOC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,8CAAD,OADD,CAPD,EAUC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,4CAAD,OADD,CAVD,EAaC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,qCAAD,OADD,CAbD,EAgBC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,oCAAD,OADD,CAhBD,EAmBC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,yCAAD,OADD,CAnBD,EAsBC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,+CAAD,OADD,CAtBD,EAyBC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,wCAAD,OADD,CAzBD,EA4BC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,4CAAD,OADD,CA5BD,CADD;AAkCA;;AAED,SAASC,OAAT,GAAmB;AAClB,QAAM;AAAEC,IAAAA,MAAM,EAAEC;AAAV,MAAwBL,WAAW,EAAzC;AACA,QAAMM,WAAW,GAAG,qBAAQ,wCAAgBD,SAAhB,CAAR,CAApB;AAEA,SACC,qDACC,4BAAC,2CAAD;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,WAAW,EAAGC,WAAW,CAACC;AAF3B,KAIC,4BAAC,cAAD,OAJD,CADD,EAOC,4BAAC,gBAAD,OAPD,CADD;AAWA;;eAEc,mBAAMJ,OAAN,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo, useRef } from '@wordpress/element';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n} from '@wordpress/components';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';\nimport SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';\nimport SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';\nimport SidebarNavigationScreenTemplatePart from '../sidebar-navigation-screen-template-part';\nimport useSyncPathWithURL, {\n\tgetPathFromURL,\n} from '../sync-state-with-url/use-sync-path-with-url';\nimport SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';\nimport SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';\nimport SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';\nimport SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';\nimport SaveHub from '../save-hub';\nimport { unlock } from '../../private-apis';\nimport SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';\nimport SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nfunction SidebarScreens() {\n\tuseSyncPathWithURL();\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t<SidebarNavigationScreenMain />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/navigation\">\n\t\t\t\t<SidebarNavigationScreenNavigationMenus />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/navigation/:postType/:postId\">\n\t\t\t\t<SidebarNavigationScreenNavigationMenu />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/wp_global_styles\">\n\t\t\t\t<SidebarNavigationScreenGlobalStyles />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/page\">\n\t\t\t\t<SidebarNavigationScreenPages />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/page/:postId\">\n\t\t\t\t<SidebarNavigationScreenPage />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template|wp_template_part)\">\n\t\t\t\t<SidebarNavigationScreenTemplates />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template|wp_template_part)/all\">\n\t\t\t\t<SidebarNavigationScreenTemplatesBrowse />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template)/:postId\">\n\t\t\t\t<SidebarNavigationScreenTemplate />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template_part)/:postId\">\n\t\t\t\t<SidebarNavigationScreenTemplatePart />\n\t\t\t</NavigatorScreen>\n\t\t</>\n\t);\n}\n\nfunction Sidebar() {\n\tconst { params: urlParams } = useLocation();\n\tconst initialPath = useRef( getPathFromURL( urlParams ) );\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorProvider\n\t\t\t\tclassName=\"edit-site-sidebar__content\"\n\t\t\t\tinitialPath={ initialPath.current }\n\t\t\t>\n\t\t\t\t<SidebarScreens />\n\t\t\t</NavigatorProvider>\n\t\t\t<SaveHub />\n\t\t</>\n\t);\n}\n\nexport default memo( Sidebar );\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/index.js"],"names":["useLocation","routerPrivateApis","SidebarScreens","Sidebar","params","urlParams","initialPath","current"],"mappings":";;;;;;;;;AAGA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AA5BA;AACA;AACA;;AAQA;AACA;AACA;AAkBA,MAAM;AAAEA,EAAAA;AAAF,IAAkB,wBAAQC,mBAAR,CAAxB;;AAEA,SAASC,cAAT,GAA0B;AACzB;AAEA,SACC,qDACC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,oCAAD,OADD,CADD,EAIC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,+CAAD,OADD,CAJD,EAOC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,8CAAD,OADD,CAPD,EAUC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,4CAAD,OADD,CAVD,EAaC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,qCAAD,OADD,CAbD,EAgBC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,oCAAD,OADD,CAhBD,EAmBC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,yCAAD,OADD,CAnBD,EAsBC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,uCAAD,OADD,CAtBD,EAyBC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,uCAAD,OADD,CAzBD,EA4BC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,+CAAD,OADD,CA5BD,EA+BC,4BAAC,yCAAD;AAAiB,IAAA,IAAI,EAAC;AAAtB,KACC,4BAAC,wCAAD,OADD,CA/BD,CADD;AAqCA;;AAED,SAASC,OAAT,GAAmB;AAClB,QAAM;AAAEC,IAAAA,MAAM,EAAEC;AAAV,MAAwBL,WAAW,EAAzC;AACA,QAAMM,WAAW,GAAG,qBAAQ,wCAAgBD,SAAhB,CAAR,CAApB;AAEA,SACC,qDACC,4BAAC,2CAAD;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,WAAW,EAAGC,WAAW,CAACC;AAF3B,KAIC,4BAAC,cAAD,OAJD,CADD,EAOC,4BAAC,gBAAD,OAPD,CADD;AAWA;;eAEc,mBAAMJ,OAAN,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo, useRef } from '@wordpress/element';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n} from '@wordpress/components';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';\nimport SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';\nimport SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';\nimport SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';\nimport SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';\nimport useSyncPathWithURL, {\n\tgetPathFromURL,\n} from '../sync-state-with-url/use-sync-path-with-url';\nimport SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';\nimport SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';\nimport SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';\nimport SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';\nimport SaveHub from '../save-hub';\nimport { unlock } from '../../lock-unlock';\nimport SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';\nimport SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nfunction SidebarScreens() {\n\tuseSyncPathWithURL();\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t<SidebarNavigationScreenMain />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/navigation\">\n\t\t\t\t<SidebarNavigationScreenNavigationMenus />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/navigation/:postType/:postId\">\n\t\t\t\t<SidebarNavigationScreenNavigationMenu />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/wp_global_styles\">\n\t\t\t\t<SidebarNavigationScreenGlobalStyles />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/page\">\n\t\t\t\t<SidebarNavigationScreenPages />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/page/:postId\">\n\t\t\t\t<SidebarNavigationScreenPage />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template)\">\n\t\t\t\t<SidebarNavigationScreenTemplates />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/library\">\n\t\t\t\t<SidebarNavigationScreenLibrary />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template_part|wp_block)/:postId\">\n\t\t\t\t<SidebarNavigationScreenPattern />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template)/all\">\n\t\t\t\t<SidebarNavigationScreenTemplatesBrowse />\n\t\t\t</NavigatorScreen>\n\t\t\t<NavigatorScreen path=\"/:postType(wp_template)/:postId\">\n\t\t\t\t<SidebarNavigationScreenTemplate />\n\t\t\t</NavigatorScreen>\n\t\t</>\n\t);\n}\n\nfunction Sidebar() {\n\tconst { params: urlParams } = useLocation();\n\tconst initialPath = useRef( getPathFromURL( urlParams ) );\n\n\treturn (\n\t\t<>\n\t\t\t<NavigatorProvider\n\t\t\t\tclassName=\"edit-site-sidebar__content\"\n\t\t\t\tinitialPath={ initialPath.current }\n\t\t\t>\n\t\t\t\t<SidebarScreens />\n\t\t\t</NavigatorProvider>\n\t\t\t<SaveHub />\n\t\t</>\n\t);\n}\n\nexport default memo( Sidebar );\n"]}

package/build/components/sidebar-button/index.js

@@ -9,8 +9,6 @@ exports.default = SidebarButton;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _components = require("@wordpress/components");
@@ -23,8 +21,8 @@ var _components = require("@wordpress/components");
  * WordPress dependencies
  */
 function SidebarButton(props) {
-  return (0, _element.createElement)(_components.Button, (0, _extends2.default)({}, props, {
+  return (0, _element.createElement)(_components.Button, { ...props,
     className: (0, _classnames.default)('edit-site-sidebar-button', props.className)
-  }));
+  });
 }
 //# sourceMappingURL=index.js.map

package/build/components/sidebar-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-button/index.js"],"names":["SidebarButton","props","className"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,aAAT,CAAwBC,KAAxB,EAAgC;AAC9C,SACC,4BAAC,kBAAD,6BACMA,KADN;AAEC,IAAA,SAAS,EAAG,yBACX,0BADW,EAEXA,KAAK,CAACC,SAFK;AAFb,KADD;AASA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\n\nexport default function SidebarButton( props ) {\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'edit-site-sidebar-button',\n\t\t\t\tprops.className\n\t\t\t) }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-button/index.js"],"names":["SidebarButton","props","className"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,aAAT,CAAwBC,KAAxB,EAAgC;AAC9C,SACC,4BAAC,kBAAD,OACMA,KADN;AAEC,IAAA,SAAS,EAAG,yBACX,0BADW,EAEXA,KAAK,CAACC,SAFK;AAFb,IADD;AASA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\n\nexport default function SidebarButton( props ) {\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'edit-site-sidebar-button',\n\t\t\t\tprops.className\n\t\t\t) }\n\t\t/>\n\t);\n}\n"]}

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

@@ -19,6 +19,8 @@ var _data = require("@wordpress/data");
 
 var _interface = require("@wordpress/interface");
 
+var _preferences = require("@wordpress/preferences");
+
 var _defaultSidebar = _interopRequireDefault(require("./default-sidebar"));
 
 var _globalStyles = require("../global-styles");
@@ -27,7 +29,7 @@ var _store = require("../../store");
 
 var _ui = require("../global-styles/ui");
 
-var _privateApis = require("../../private-apis");
+var _lockUnlock = require("../../lock-unlock");
 
 /**
  * WordPress dependencies
@@ -39,7 +41,8 @@ var _privateApis = require("../../private-apis");
 function GlobalStylesSidebar() {
   const {
     shouldClearCanvasContainerView,
-    isStyleBookOpened
+    isStyleBookOpened,
+    showListViewByDefault
   } = (0, _data.useSelect)(select => {
     const {
       getActiveComplementaryArea
@@ -47,25 +50,31 @@ function GlobalStylesSidebar() {
     const {
       getEditorCanvasContainerView,
       getCanvasMode
-    } = (0, _privateApis.unlock)(select(_store.store));
+    } = (0, _lockUnlock.unlock)(select(_store.store));
 
     const _isVisualEditorMode = 'visual' === select(_store.store).getEditorMode();
 
     const _isEditCanvasMode = 'edit' === getCanvasMode();
 
+    const _showListViewByDefault = select(_preferences.store).get('core/edit-site', 'showListViewByDefault');
+
     return {
       isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
-      shouldClearCanvasContainerView: 'edit-site/global-styles' !== getActiveComplementaryArea('core/edit-site') || !_isVisualEditorMode || !_isEditCanvasMode
+      shouldClearCanvasContainerView: 'edit-site/global-styles' !== getActiveComplementaryArea('core/edit-site') || !_isVisualEditorMode || !_isEditCanvasMode,
+      showListViewByDefault: _showListViewByDefault
     };
   }, []);
   const {
     setEditorCanvasContainerView
-  } = (0, _privateApis.unlock)((0, _data.useDispatch)(_store.store));
+  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
   (0, _element.useEffect)(() => {
     if (shouldClearCanvasContainerView) {
       setEditorCanvasContainerView(undefined);
     }
   }, [shouldClearCanvasContainerView]);
+  const {
+    setIsListViewOpened
+  } = (0, _data.useDispatch)(_store.store);
   return (0, _element.createElement)(_defaultSidebar.default, {
     className: "edit-site-global-styles-sidebar",
     identifier: "edit-site/global-styles",
@@ -74,7 +83,9 @@ function GlobalStylesSidebar() {
     closeLabel: (0, _i18n.__)('Close Styles'),
     panelClassName: "edit-site-global-styles-sidebar__panel",
     header: (0, _element.createElement)(_components.Flex, {
-      className: "edit-site-global-styles-sidebar__header"
+      className: "edit-site-global-styles-sidebar__header",
+      role: "menubar",
+      "aria-label": (0, _i18n.__)('Styles actions')
     }, (0, _element.createElement)(_components.FlexBlock, {
       style: {
         minWidth: 'min-content'
@@ -84,8 +95,11 @@ function GlobalStylesSidebar() {
       label: (0, _i18n.__)('Style Book'),
       isPressed: isStyleBookOpened,
       disabled: shouldClearCanvasContainerView,
-      onClick: () => setEditorCanvasContainerView(isStyleBookOpened ? undefined : 'style-book')
-    })), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_ui.GlobalStylesMenuSlot, null)))
+      onClick: () => {
+        setIsListViewOpened(isStyleBookOpened && showListViewByDefault);
+        setEditorCanvasContainerView(isStyleBookOpened ? undefined : 'style-book');
+      }
+    })), (0, _element.createElement)(_ui.GlobalStylesMenuSlot, null))
   }, (0, _element.createElement)(_globalStyles.GlobalStylesUI, null));
 }
 //# sourceMappingURL=global-styles-sidebar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js"],"names":["GlobalStylesSidebar","shouldClearCanvasContainerView","isStyleBookOpened","select","getActiveComplementaryArea","interfaceStore","getEditorCanvasContainerView","getCanvasMode","editSiteStore","_isVisualEditorMode","getEditorMode","_isEditCanvasMode","setEditorCanvasContainerView","undefined","styles","minWidth","seen"],"mappings":";;;;;;;;;AAOA;;AAJA;;AACA;;AACA;;AACA;;AAEA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAQA;AACA;AACA;AAOe,SAASA,mBAAT,GAA+B;AAC7C,QAAM;AAAEC,IAAAA,8BAAF;AAAkCC,IAAAA;AAAlC,MAAwD,qBAC3DC,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAAiCD,MAAM,CAAEE,gBAAF,CAA7C;AACA,UAAM;AAAEC,MAAAA,4BAAF;AAAgCC,MAAAA;AAAhC,QAAkD,yBACvDJ,MAAM,CAAEK,YAAF,CADiD,CAAxD;;AAGA,UAAMC,mBAAmB,GACxB,aAAaN,MAAM,CAAEK,YAAF,CAAN,CAAwBE,aAAxB,EADd;;AAEA,UAAMC,iBAAiB,GAAG,WAAWJ,aAAa,EAAlD;;AAEA,WAAO;AACNL,MAAAA,iBAAiB,EAChB,iBAAiBI,4BAA4B,EAFxC;AAGNL,MAAAA,8BAA8B,EAC7B,8BACCG,0BAA0B,CAAE,gBAAF,CAD3B,IAEA,CAAEK,mBAFF,IAGA,CAAEE;AAPG,KAAP;AASA,GAnB4D,EAoB7D,EApB6D,CAA9D;AAsBA,QAAM;AAAEC,IAAAA;AAAF,MAAmC,yBACxC,uBAAaJ,YAAb,CADwC,CAAzC;AAIA,0BAAW,MAAM;AAChB,QAAKP,8BAAL,EAAsC;AACrCW,MAAAA,4BAA4B,CAAEC,SAAF,CAA5B;AACA;AACD,GAJD,EAIG,CAAEZ,8BAAF,CAJH;AAMA,SACC,4BAAC,uBAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,UAAU,EAAC,yBAFZ;AAGC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAHT;AAIC,IAAA,IAAI,EAAGa,aAJR;AAKC,IAAA,UAAU,EAAG,cAAI,cAAJ,CALd;AAMC,IAAA,cAAc,EAAC,wCANhB;AAOC,IAAA,MAAM,EACL,4BAAC,gBAAD;AAAM,MAAA,SAAS,EAAC;AAAhB,OACC,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG;AAAEC,QAAAA,QAAQ,EAAE;AAAZ;AAAnB,OACC,4CAAU,cAAI,QAAJ,CAAV,CADD,CADD,EAIC,4BAAC,oBAAD,QACC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGC,WADR;AAEC,MAAA,KAAK,EAAG,cAAI,YAAJ,CAFT;AAGC,MAAA,SAAS,EAAGd,iBAHb;AAIC,MAAA,QAAQ,EAAGD,8BAJZ;AAKC,MAAA,OAAO,EAAG,MACTW,4BAA4B,CAC3BV,iBAAiB,GAAGW,SAAH,GAAe,YADL;AAN9B,MADD,CAJD,EAiBC,4BAAC,oBAAD,QACC,4BAAC,wBAAD,OADD,CAjBD;AARF,KA+BC,4BAAC,4BAAD,OA/BD,CADD;AAmCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport { GlobalStylesUI } from '../global-styles';\nimport { store as editSiteStore } from '../../store';\nimport { GlobalStylesMenuSlot } from '../global-styles/ui';\nimport { unlock } from '../../private-apis';\n\nexport default function GlobalStylesSidebar() {\n\tconst { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\t\t\tconst { getEditorCanvasContainerView, getCanvasMode } = unlock(\n\t\t\t\tselect( editSiteStore )\n\t\t\t);\n\t\t\tconst _isVisualEditorMode =\n\t\t\t\t'visual' === select( editSiteStore ).getEditorMode();\n\t\t\tconst _isEditCanvasMode = 'edit' === getCanvasMode();\n\n\t\t\treturn {\n\t\t\t\tisStyleBookOpened:\n\t\t\t\t\t'style-book' === getEditorCanvasContainerView(),\n\t\t\t\tshouldClearCanvasContainerView:\n\t\t\t\t\t'edit-site/global-styles' !==\n\t\t\t\t\t\tgetActiveComplementaryArea( 'core/edit-site' ) ||\n\t\t\t\t\t! _isVisualEditorMode ||\n\t\t\t\t\t! _isEditCanvasMode,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\n\tuseEffect( () => {\n\t\tif ( shouldClearCanvasContainerView ) {\n\t\t\tsetEditorCanvasContainerView( undefined );\n\t\t}\n\t}, [ shouldClearCanvasContainerView ] );\n\n\treturn (\n\t\t<DefaultSidebar\n\t\t\tclassName=\"edit-site-global-styles-sidebar\"\n\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\ticon={ styles }\n\t\t\tcloseLabel={ __( 'Close Styles' ) }\n\t\t\tpanelClassName=\"edit-site-global-styles-sidebar__panel\"\n\t\t\theader={\n\t\t\t\t<Flex className=\"edit-site-global-styles-sidebar__header\">\n\t\t\t\t\t<FlexBlock style={ { minWidth: 'min-content' } }>\n\t\t\t\t\t\t<strong>{ __( 'Styles' ) }</strong>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\tisPressed={ isStyleBookOpened }\n\t\t\t\t\t\t\tdisabled={ shouldClearCanvasContainerView }\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tsetEditorCanvasContainerView(\n\t\t\t\t\t\t\t\t\tisStyleBookOpened ? undefined : 'style-book'\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<GlobalStylesMenuSlot />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t}\n\t\t>\n\t\t\t<GlobalStylesUI />\n\t\t</DefaultSidebar>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js"],"names":["GlobalStylesSidebar","shouldClearCanvasContainerView","isStyleBookOpened","showListViewByDefault","select","getActiveComplementaryArea","interfaceStore","getEditorCanvasContainerView","getCanvasMode","editSiteStore","_isVisualEditorMode","getEditorMode","_isEditCanvasMode","_showListViewByDefault","preferencesStore","get","setEditorCanvasContainerView","undefined","setIsListViewOpened","styles","minWidth","seen"],"mappings":";;;;;;;;;AAOA;;AAJA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AASA;AACA;AACA;AAOe,SAASA,mBAAT,GAA+B;AAC7C,QAAM;AACLC,IAAAA,8BADK;AAELC,IAAAA,iBAFK;AAGLC,IAAAA;AAHK,MAIF,qBAAaC,MAAF,IAAc;AAC5B,UAAM;AAAEC,MAAAA;AAAF,QAAiCD,MAAM,CAAEE,gBAAF,CAA7C;AACA,UAAM;AAAEC,MAAAA,4BAAF;AAAgCC,MAAAA;AAAhC,QAAkD,wBACvDJ,MAAM,CAAEK,YAAF,CADiD,CAAxD;;AAGA,UAAMC,mBAAmB,GACxB,aAAaN,MAAM,CAAEK,YAAF,CAAN,CAAwBE,aAAxB,EADd;;AAEA,UAAMC,iBAAiB,GAAG,WAAWJ,aAAa,EAAlD;;AACA,UAAMK,sBAAsB,GAAGT,MAAM,CAAEU,kBAAF,CAAN,CAA2BC,GAA3B,CAC9B,gBAD8B,EAE9B,uBAF8B,CAA/B;;AAKA,WAAO;AACNb,MAAAA,iBAAiB,EAAE,iBAAiBK,4BAA4B,EAD1D;AAENN,MAAAA,8BAA8B,EAC7B,8BACCI,0BAA0B,CAAE,gBAAF,CAD3B,IAEA,CAAEK,mBAFF,IAGA,CAAEE,iBANG;AAONT,MAAAA,qBAAqB,EAAEU;AAPjB,KAAP;AASA,GAtBG,EAsBD,EAtBC,CAJJ;AA2BA,QAAM;AAAEG,IAAAA;AAAF,MAAmC,wBACxC,uBAAaP,YAAb,CADwC,CAAzC;AAIA,0BAAW,MAAM;AAChB,QAAKR,8BAAL,EAAsC;AACrCe,MAAAA,4BAA4B,CAAEC,SAAF,CAA5B;AACA;AACD,GAJD,EAIG,CAAEhB,8BAAF,CAJH;AAMA,QAAM;AAAEiB,IAAAA;AAAF,MAA0B,uBAAaT,YAAb,CAAhC;AAEA,SACC,4BAAC,uBAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,UAAU,EAAC,yBAFZ;AAGC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAHT;AAIC,IAAA,IAAI,EAAGU,aAJR;AAKC,IAAA,UAAU,EAAG,cAAI,cAAJ,CALd;AAMC,IAAA,cAAc,EAAC,wCANhB;AAOC,IAAA,MAAM,EACL,4BAAC,gBAAD;AACC,MAAA,SAAS,EAAC,yCADX;AAEC,MAAA,IAAI,EAAC,SAFN;AAGC,oBAAa,cAAI,gBAAJ;AAHd,OAKC,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG;AAAEC,QAAAA,QAAQ,EAAE;AAAZ;AAAnB,OACC,4CAAU,cAAI,QAAJ,CAAV,CADD,CALD,EAQC,4BAAC,oBAAD,QACC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGC,WADR;AAEC,MAAA,KAAK,EAAG,cAAI,YAAJ,CAFT;AAGC,MAAA,SAAS,EAAGnB,iBAHb;AAIC,MAAA,QAAQ,EAAGD,8BAJZ;AAKC,MAAA,OAAO,EAAG,MAAM;AACfiB,QAAAA,mBAAmB,CAClBhB,iBAAiB,IAAIC,qBADH,CAAnB;AAGAa,QAAAA,4BAA4B,CAC3Bd,iBAAiB,GAAGe,SAAH,GAAe,YADL,CAA5B;AAGA;AAZF,MADD,CARD,EAwBC,4BAAC,wBAAD,OAxBD;AARF,KAoCC,4BAAC,4BAAD,OApCD,CADD;AAwCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport { GlobalStylesUI } from '../global-styles';\nimport { store as editSiteStore } from '../../store';\nimport { GlobalStylesMenuSlot } from '../global-styles/ui';\nimport { unlock } from '../../lock-unlock';\n\nexport default function GlobalStylesSidebar() {\n\tconst {\n\t\tshouldClearCanvasContainerView,\n\t\tisStyleBookOpened,\n\t\tshowListViewByDefault,\n\t} = useSelect( ( select ) => {\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\t\tconst { getEditorCanvasContainerView, getCanvasMode } = unlock(\n\t\t\tselect( editSiteStore )\n\t\t);\n\t\tconst _isVisualEditorMode =\n\t\t\t'visual' === select( editSiteStore ).getEditorMode();\n\t\tconst _isEditCanvasMode = 'edit' === getCanvasMode();\n\t\tconst _showListViewByDefault = select( preferencesStore ).get(\n\t\t\t'core/edit-site',\n\t\t\t'showListViewByDefault'\n\t\t);\n\n\t\treturn {\n\t\t\tisStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),\n\t\t\tshouldClearCanvasContainerView:\n\t\t\t\t'edit-site/global-styles' !==\n\t\t\t\t\tgetActiveComplementaryArea( 'core/edit-site' ) ||\n\t\t\t\t! _isVisualEditorMode ||\n\t\t\t\t! _isEditCanvasMode,\n\t\t\tshowListViewByDefault: _showListViewByDefault,\n\t\t};\n\t}, [] );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\n\tuseEffect( () => {\n\t\tif ( shouldClearCanvasContainerView ) {\n\t\t\tsetEditorCanvasContainerView( undefined );\n\t\t}\n\t}, [ shouldClearCanvasContainerView ] );\n\n\tconst { setIsListViewOpened } = useDispatch( editSiteStore );\n\n\treturn (\n\t\t<DefaultSidebar\n\t\t\tclassName=\"edit-site-global-styles-sidebar\"\n\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\ticon={ styles }\n\t\t\tcloseLabel={ __( 'Close Styles' ) }\n\t\t\tpanelClassName=\"edit-site-global-styles-sidebar__panel\"\n\t\t\theader={\n\t\t\t\t<Flex\n\t\t\t\t\tclassName=\"edit-site-global-styles-sidebar__header\"\n\t\t\t\t\trole=\"menubar\"\n\t\t\t\t\taria-label={ __( 'Styles actions' ) }\n\t\t\t\t>\n\t\t\t\t\t<FlexBlock style={ { minWidth: 'min-content' } }>\n\t\t\t\t\t\t<strong>{ __( 'Styles' ) }</strong>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\tisPressed={ isStyleBookOpened }\n\t\t\t\t\t\t\tdisabled={ shouldClearCanvasContainerView }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsListViewOpened(\n\t\t\t\t\t\t\t\t\tisStyleBookOpened && showListViewByDefault\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tsetEditorCanvasContainerView(\n\t\t\t\t\t\t\t\t\tisStyleBookOpened ? undefined : 'style-book'\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<GlobalStylesMenuSlot />\n\t\t\t\t</Flex>\n\t\t\t}\n\t\t>\n\t\t\t<GlobalStylesUI />\n\t\t</DefaultSidebar>\n\t);\n}\n"]}

package/build/components/sidebar-edit-mode/index.js

@@ -60,7 +60,7 @@ function SidebarComplementaryAreaFills() {
     isEditorSidebarOpened,
     hasBlockSelection,
     supportsGlobalStyles,
-    hasPageContentLock
+    hasPageContentFocus
   } = (0, _data.useSelect)(select => {
     const _sidebar = select(_interface.store).getActiveComplementaryArea(_constants.STORE_NAME);
 
@@ -72,7 +72,7 @@ function SidebarComplementaryAreaFills() {
       isEditorSidebarOpened: _isEditorSidebarOpened,
       hasBlockSelection: !!select(_blockEditor.store).getBlockSelectionStart(),
       supportsGlobalStyles: !settings?.supportsTemplatePartsMode,
-      hasPageContentLock: select(_store.store).hasPageContentLock()
+      hasPageContentFocus: select(_store.store).hasPageContentFocus()
     };
   }, []);
   const {
@@ -81,16 +81,18 @@ function SidebarComplementaryAreaFills() {
   (0, _element.useEffect)(() => {
     // Don't automatically switch tab when the sidebar is closed or when we
     // are focused on page content.
-    if (!isEditorSidebarOpened || hasPageContentLock) {
+    if (!isEditorSidebarOpened) {
       return;
     }
 
     if (hasBlockSelection) {
-      enableComplementaryArea(_constants.STORE_NAME, _constants2.SIDEBAR_BLOCK);
+      if (!hasPageContentFocus) {
+        enableComplementaryArea(_constants.STORE_NAME, _constants2.SIDEBAR_BLOCK);
+      }
     } else {
       enableComplementaryArea(_constants.STORE_NAME, _constants2.SIDEBAR_TEMPLATE);
     }
-  }, [hasBlockSelection, isEditorSidebarOpened, hasPageContentLock]);
+  }, [hasBlockSelection, isEditorSidebarOpened, hasPageContentFocus]);
   let sidebarName = sidebar;
 
   if (!isEditorSidebarOpened) {
@@ -106,7 +108,7 @@ function SidebarComplementaryAreaFills() {
       sidebarName: sidebarName
     }),
     headerClassName: "edit-site-sidebar-edit-mode__panel-tabs"
-  }, sidebarName === _constants2.SIDEBAR_TEMPLATE && (0, _element.createElement)(_element.Fragment, null, hasPageContentLock ? (0, _element.createElement)(_pagePanels.default, null) : (0, _element.createElement)(_templatePanel.default, null), (0, _element.createElement)(_pluginTemplateSettingPanel.default.Slot, null)), sidebarName === _constants2.SIDEBAR_BLOCK && (0, _element.createElement)(InspectorSlot, {
+  }, sidebarName === _constants2.SIDEBAR_TEMPLATE && (0, _element.createElement)(_element.Fragment, null, hasPageContentFocus ? (0, _element.createElement)(_pagePanels.default, null) : (0, _element.createElement)(_templatePanel.default, null), (0, _element.createElement)(_pluginTemplateSettingPanel.default.Slot, null)), sidebarName === _constants2.SIDEBAR_BLOCK && (0, _element.createElement)(InspectorSlot, {
     bubblesVirtually: true
   })), supportsGlobalStyles && (0, _element.createElement)(_globalStylesSidebar.default, null));
 }

package/build/components/sidebar-edit-mode/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/index.js"],"names":["Slot","InspectorSlot","Fill","InspectorFill","SidebarInspectorFill","SidebarComplementaryAreaFills","sidebar","isEditorSidebarOpened","hasBlockSelection","supportsGlobalStyles","hasPageContentLock","select","_sidebar","interfaceStore","getActiveComplementaryArea","STORE_NAME","_isEditorSidebarOpened","SIDEBAR_BLOCK","SIDEBAR_TEMPLATE","includes","settings","editSiteStore","getSettings","blockEditorStore","getBlockSelectionStart","supportsTemplatePartsMode","enableComplementaryArea","sidebarName","drawerLeft","drawerRight"],"mappings":";;;;;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAtBA;AACA;AACA;;AASA;AACA;AACA;AAWA,MAAM;AAAEA,EAAAA,IAAI,EAAEC,aAAR;AAAuBC,EAAAA,IAAI,EAAEC;AAA7B,IAA+C,gCACpD,0BADoD,CAArD;AAGO,MAAMC,oBAAoB,GAAGD,aAA7B;;;AAEA,SAASE,6BAAT,GAAyC;AAC/C,QAAM;AACLC,IAAAA,OADK;AAELC,IAAAA,qBAFK;AAGLC,IAAAA,iBAHK;AAILC,IAAAA,oBAJK;AAKLC,IAAAA;AALK,MAMF,qBAAaC,MAAF,IAAc;AAC5B,UAAMC,QAAQ,GACbD,MAAM,CAAEE,gBAAF,CAAN,CAAyBC,0BAAzB,CAAqDC,qBAArD,CADD;;AAEA,UAAMC,sBAAsB,GAAG,CAC9BC,yBAD8B,EAE9BC,4BAF8B,EAG7BC,QAH6B,CAGnBP,QAHmB,CAA/B;;AAIA,UAAMQ,QAAQ,GAAGT,MAAM,CAAEU,YAAF,CAAN,CAAwBC,WAAxB,EAAjB;AACA,WAAO;AACNhB,MAAAA,OAAO,EAAEM,QADH;AAENL,MAAAA,qBAAqB,EAAES,sBAFjB;AAGNR,MAAAA,iBAAiB,EAChB,CAAC,CAAEG,MAAM,CAAEY,kBAAF,CAAN,CAA2BC,sBAA3B,EAJE;AAKNf,MAAAA,oBAAoB,EAAE,CAAEW,QAAQ,EAAEK,yBAL5B;AAMNf,MAAAA,kBAAkB,EAAEC,MAAM,CAAEU,YAAF,CAAN,CAAwBX,kBAAxB;AANd,KAAP;AAQA,GAhBG,EAgBD,EAhBC,CANJ;AAuBA,QAAM;AAAEgB,IAAAA;AAAF,MAA8B,uBAAab,gBAAb,CAApC;AAEA,0BAAW,MAAM;AAChB;AACA;AACA,QAAK,CAAEN,qBAAF,IAA2BG,kBAAhC,EAAqD;AACpD;AACA;;AACD,QAAKF,iBAAL,EAAyB;AACxBkB,MAAAA,uBAAuB,CAAEX,qBAAF,EAAcE,yBAAd,CAAvB;AACA,KAFD,MAEO;AACNS,MAAAA,uBAAuB,CAAEX,qBAAF,EAAcG,4BAAd,CAAvB;AACA;AACD,GAXD,EAWG,CAAEV,iBAAF,EAAqBD,qBAArB,EAA4CG,kBAA5C,CAXH;AAaA,MAAIiB,WAAW,GAAGrB,OAAlB;;AACA,MAAK,CAAEC,qBAAP,EAA+B;AAC9BoB,IAAAA,WAAW,GAAGnB,iBAAiB,GAAGS,yBAAH,GAAmBC,4BAAlD;AACA;;AAED,SACC,qDACC,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAGS,WADd;AAEC,IAAA,KAAK,EAAG,cAAI,UAAJ,CAFT;AAGC,IAAA,IAAI,EAAG,qBAAUC,iBAAV,GAAuBC,kBAH/B;AAIC,IAAA,UAAU,EAAG,cAAI,gBAAJ,CAJd;AAKC,IAAA,MAAM,EAAG,4BAAC,uBAAD;AAAgB,MAAA,WAAW,EAAGF;AAA9B,MALV;AAMC,IAAA,eAAe,EAAC;AANjB,KAQGA,WAAW,KAAKT,4BAAhB,IACD,qDACGR,kBAAkB,GACnB,4BAAC,mBAAD,OADmB,GAGnB,4BAAC,sBAAD,OAJF,EAMC,4BAAC,mCAAD,CAA4B,IAA5B,OAND,CATF,EAkBGiB,WAAW,KAAKV,yBAAhB,IACD,4BAAC,aAAD;AAAe,IAAA,gBAAgB;AAA/B,IAnBF,CADD,EAuBGR,oBAAoB,IAAI,4BAAC,4BAAD,OAvB3B,CADD;AA2BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { drawerLeft, drawerRight } from '@wordpress/icons';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport GlobalStylesSidebar from './global-styles-sidebar';\nimport { STORE_NAME } from '../../store/constants';\nimport SettingsHeader from './settings-header';\nimport PagePanels from './page-panels';\nimport TemplatePanel from './template-panel';\nimport PluginTemplateSettingPanel from '../plugin-template-setting-panel';\nimport { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';\nimport { store as editSiteStore } from '../../store';\n\nconst { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(\n\t'EditSiteSidebarInspector'\n);\nexport const SidebarInspectorFill = InspectorFill;\n\nexport function SidebarComplementaryAreaFills() {\n\tconst {\n\t\tsidebar,\n\t\tisEditorSidebarOpened,\n\t\thasBlockSelection,\n\t\tsupportsGlobalStyles,\n\t\thasPageContentLock,\n\t} = useSelect( ( select ) => {\n\t\tconst _sidebar =\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( STORE_NAME );\n\t\tconst _isEditorSidebarOpened = [\n\t\t\tSIDEBAR_BLOCK,\n\t\t\tSIDEBAR_TEMPLATE,\n\t\t].includes( _sidebar );\n\t\tconst settings = select( editSiteStore ).getSettings();\n\t\treturn {\n\t\t\tsidebar: _sidebar,\n\t\t\tisEditorSidebarOpened: _isEditorSidebarOpened,\n\t\t\thasBlockSelection:\n\t\t\t\t!! select( blockEditorStore ).getBlockSelectionStart(),\n\t\t\tsupportsGlobalStyles: ! settings?.supportsTemplatePartsMode,\n\t\t\thasPageContentLock: select( editSiteStore ).hasPageContentLock(),\n\t\t};\n\t}, [] );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Don't automatically switch tab when the sidebar is closed or when we\n\t\t// are focused on page content.\n\t\tif ( ! isEditorSidebarOpened || hasPageContentLock ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( hasBlockSelection ) {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );\n\t\t} else {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );\n\t\t}\n\t}, [ hasBlockSelection, isEditorSidebarOpened, hasPageContentLock ] );\n\n\tlet sidebarName = sidebar;\n\tif ( ! isEditorSidebarOpened ) {\n\t\tsidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DefaultSidebar\n\t\t\t\tidentifier={ sidebarName }\n\t\t\t\ttitle={ __( 'Settings' ) }\n\t\t\t\ticon={ isRTL() ? drawerLeft : drawerRight }\n\t\t\t\tcloseLabel={ __( 'Close Settings' ) }\n\t\t\t\theader={ <SettingsHeader sidebarName={ sidebarName } /> }\n\t\t\t\theaderClassName=\"edit-site-sidebar-edit-mode__panel-tabs\"\n\t\t\t>\n\t\t\t\t{ sidebarName === SIDEBAR_TEMPLATE && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ hasPageContentLock ? (\n\t\t\t\t\t\t\t<PagePanels />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<TemplatePanel />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<PluginTemplateSettingPanel.Slot />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t{ sidebarName === SIDEBAR_BLOCK && (\n\t\t\t\t\t<InspectorSlot bubblesVirtually />\n\t\t\t\t) }\n\t\t\t</DefaultSidebar>\n\t\t\t{ supportsGlobalStyles && <GlobalStylesSidebar /> }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/index.js"],"names":["Slot","InspectorSlot","Fill","InspectorFill","SidebarInspectorFill","SidebarComplementaryAreaFills","sidebar","isEditorSidebarOpened","hasBlockSelection","supportsGlobalStyles","hasPageContentFocus","select","_sidebar","interfaceStore","getActiveComplementaryArea","STORE_NAME","_isEditorSidebarOpened","SIDEBAR_BLOCK","SIDEBAR_TEMPLATE","includes","settings","editSiteStore","getSettings","blockEditorStore","getBlockSelectionStart","supportsTemplatePartsMode","enableComplementaryArea","sidebarName","drawerLeft","drawerRight"],"mappings":";;;;;;;;;;AAMA;;AAHA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAtBA;AACA;AACA;;AASA;AACA;AACA;AAWA,MAAM;AAAEA,EAAAA,IAAI,EAAEC,aAAR;AAAuBC,EAAAA,IAAI,EAAEC;AAA7B,IAA+C,gCACpD,0BADoD,CAArD;AAGO,MAAMC,oBAAoB,GAAGD,aAA7B;;;AAEA,SAASE,6BAAT,GAAyC;AAC/C,QAAM;AACLC,IAAAA,OADK;AAELC,IAAAA,qBAFK;AAGLC,IAAAA,iBAHK;AAILC,IAAAA,oBAJK;AAKLC,IAAAA;AALK,MAMF,qBAAaC,MAAF,IAAc;AAC5B,UAAMC,QAAQ,GACbD,MAAM,CAAEE,gBAAF,CAAN,CAAyBC,0BAAzB,CAAqDC,qBAArD,CADD;;AAEA,UAAMC,sBAAsB,GAAG,CAC9BC,yBAD8B,EAE9BC,4BAF8B,EAG7BC,QAH6B,CAGnBP,QAHmB,CAA/B;;AAIA,UAAMQ,QAAQ,GAAGT,MAAM,CAAEU,YAAF,CAAN,CAAwBC,WAAxB,EAAjB;AACA,WAAO;AACNhB,MAAAA,OAAO,EAAEM,QADH;AAENL,MAAAA,qBAAqB,EAAES,sBAFjB;AAGNR,MAAAA,iBAAiB,EAChB,CAAC,CAAEG,MAAM,CAAEY,kBAAF,CAAN,CAA2BC,sBAA3B,EAJE;AAKNf,MAAAA,oBAAoB,EAAE,CAAEW,QAAQ,EAAEK,yBAL5B;AAMNf,MAAAA,mBAAmB,EAAEC,MAAM,CAAEU,YAAF,CAAN,CAAwBX,mBAAxB;AANf,KAAP;AAQA,GAhBG,EAgBD,EAhBC,CANJ;AAuBA,QAAM;AAAEgB,IAAAA;AAAF,MAA8B,uBAAab,gBAAb,CAApC;AAEA,0BAAW,MAAM;AAChB;AACA;AACA,QAAK,CAAEN,qBAAP,EAA+B;AAC9B;AACA;;AACD,QAAKC,iBAAL,EAAyB;AACxB,UAAK,CAAEE,mBAAP,EAA6B;AAC5BgB,QAAAA,uBAAuB,CAAEX,qBAAF,EAAcE,yBAAd,CAAvB;AACA;AACD,KAJD,MAIO;AACNS,MAAAA,uBAAuB,CAAEX,qBAAF,EAAcG,4BAAd,CAAvB;AACA;AACD,GAbD,EAaG,CAAEV,iBAAF,EAAqBD,qBAArB,EAA4CG,mBAA5C,CAbH;AAeA,MAAIiB,WAAW,GAAGrB,OAAlB;;AACA,MAAK,CAAEC,qBAAP,EAA+B;AAC9BoB,IAAAA,WAAW,GAAGnB,iBAAiB,GAAGS,yBAAH,GAAmBC,4BAAlD;AACA;;AAED,SACC,qDACC,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAGS,WADd;AAEC,IAAA,KAAK,EAAG,cAAI,UAAJ,CAFT;AAGC,IAAA,IAAI,EAAG,qBAAUC,iBAAV,GAAuBC,kBAH/B;AAIC,IAAA,UAAU,EAAG,cAAI,gBAAJ,CAJd;AAKC,IAAA,MAAM,EAAG,4BAAC,uBAAD;AAAgB,MAAA,WAAW,EAAGF;AAA9B,MALV;AAMC,IAAA,eAAe,EAAC;AANjB,KAQGA,WAAW,KAAKT,4BAAhB,IACD,qDACGR,mBAAmB,GACpB,4BAAC,mBAAD,OADoB,GAGpB,4BAAC,sBAAD,OAJF,EAMC,4BAAC,mCAAD,CAA4B,IAA5B,OAND,CATF,EAkBGiB,WAAW,KAAKV,yBAAhB,IACD,4BAAC,aAAD;AAAe,IAAA,gBAAgB;AAA/B,IAnBF,CADD,EAuBGR,oBAAoB,IAAI,4BAAC,4BAAD,OAvB3B,CADD;AA2BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { drawerLeft, drawerRight } from '@wordpress/icons';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as interfaceStore } from '@wordpress/interface';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DefaultSidebar from './default-sidebar';\nimport GlobalStylesSidebar from './global-styles-sidebar';\nimport { STORE_NAME } from '../../store/constants';\nimport SettingsHeader from './settings-header';\nimport PagePanels from './page-panels';\nimport TemplatePanel from './template-panel';\nimport PluginTemplateSettingPanel from '../plugin-template-setting-panel';\nimport { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';\nimport { store as editSiteStore } from '../../store';\n\nconst { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(\n\t'EditSiteSidebarInspector'\n);\nexport const SidebarInspectorFill = InspectorFill;\n\nexport function SidebarComplementaryAreaFills() {\n\tconst {\n\t\tsidebar,\n\t\tisEditorSidebarOpened,\n\t\thasBlockSelection,\n\t\tsupportsGlobalStyles,\n\t\thasPageContentFocus,\n\t} = useSelect( ( select ) => {\n\t\tconst _sidebar =\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( STORE_NAME );\n\t\tconst _isEditorSidebarOpened = [\n\t\t\tSIDEBAR_BLOCK,\n\t\t\tSIDEBAR_TEMPLATE,\n\t\t].includes( _sidebar );\n\t\tconst settings = select( editSiteStore ).getSettings();\n\t\treturn {\n\t\t\tsidebar: _sidebar,\n\t\t\tisEditorSidebarOpened: _isEditorSidebarOpened,\n\t\t\thasBlockSelection:\n\t\t\t\t!! select( blockEditorStore ).getBlockSelectionStart(),\n\t\t\tsupportsGlobalStyles: ! settings?.supportsTemplatePartsMode,\n\t\t\thasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),\n\t\t};\n\t}, [] );\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Don't automatically switch tab when the sidebar is closed or when we\n\t\t// are focused on page content.\n\t\tif ( ! isEditorSidebarOpened ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( hasBlockSelection ) {\n\t\t\tif ( ! hasPageContentFocus ) {\n\t\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );\n\t\t\t}\n\t\t} else {\n\t\t\tenableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );\n\t\t}\n\t}, [ hasBlockSelection, isEditorSidebarOpened, hasPageContentFocus ] );\n\n\tlet sidebarName = sidebar;\n\tif ( ! isEditorSidebarOpened ) {\n\t\tsidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DefaultSidebar\n\t\t\t\tidentifier={ sidebarName }\n\t\t\t\ttitle={ __( 'Settings' ) }\n\t\t\t\ticon={ isRTL() ? drawerLeft : drawerRight }\n\t\t\t\tcloseLabel={ __( 'Close Settings' ) }\n\t\t\t\theader={ <SettingsHeader sidebarName={ sidebarName } /> }\n\t\t\t\theaderClassName=\"edit-site-sidebar-edit-mode__panel-tabs\"\n\t\t\t>\n\t\t\t\t{ sidebarName === SIDEBAR_TEMPLATE && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ hasPageContentFocus ? (\n\t\t\t\t\t\t\t<PagePanels />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<TemplatePanel />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<PluginTemplateSettingPanel.Slot />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t{ sidebarName === SIDEBAR_BLOCK && (\n\t\t\t\t\t<InspectorSlot bubblesVirtually />\n\t\t\t\t) }\n\t\t\t</DefaultSidebar>\n\t\t\t{ supportsGlobalStyles && <GlobalStylesSidebar /> }\n\t\t</>\n\t);\n}\n"]}

package/build/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EditTemplate;
+
+var _element = require("@wordpress/element");
+
+var _data = require("@wordpress/data");
+
+var _htmlEntities = require("@wordpress/html-entities");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _coreData = require("@wordpress/core-data");
+
+var _store = require("../../../store");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function EditTemplate() {
+  const {
+    context,
+    hasResolved,
+    title,
+    blocks
+  } = (0, _data.useSelect)(select => {
+    const {
+      getEditedPostContext,
+      getEditedPostType,
+      getEditedPostId
+    } = select(_store.store);
+    const {
+      getEditedEntityRecord,
+      hasFinishedResolution
+    } = select(_coreData.store);
+
+    const _context = getEditedPostContext();
+
+    const queryArgs = ['postType', getEditedPostType(), getEditedPostId()];
+    const template = getEditedEntityRecord(...queryArgs);
+    return {
+      context: _context,
+      hasResolved: hasFinishedResolution('getEditedEntityRecord', queryArgs),
+      title: template?.title,
+      blocks: template?.blocks
+    };
+  }, []);
+  const {
+    setHasPageContentFocus
+  } = (0, _data.useDispatch)(_store.store);
+  const blockContext = (0, _element.useMemo)(() => ({ ...context,
+    postType: null,
+    postId: null
+  }), [context]);
+
+  if (!hasResolved) {
+    return null;
+  }
+
+  return (0, _element.createElement)(_components.__experimentalVStack, null, (0, _element.createElement)("div", null, (0, _htmlEntities.decodeEntities)(title)), (0, _element.createElement)("div", {
+    className: "edit-site-page-panels__edit-template-preview"
+  }, (0, _element.createElement)(_blockEditor.BlockContextProvider, {
+    value: blockContext
+  }, (0, _element.createElement)(_blockEditor.BlockPreview, {
+    viewportWidth: 1024,
+    blocks: blocks
+  }))), (0, _element.createElement)(_components.Button, {
+    className: "edit-site-page-panels__edit-template-button",
+    variant: "secondary",
+    onClick: () => setHasPageContentFocus(false)
+  }, (0, _i18n.__)('Edit template')));
+}
+//# sourceMappingURL=edit-template.js.map

package/build/components/sidebar-edit-mode/page-panels/edit-template.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js"],"names":["EditTemplate","context","hasResolved","title","blocks","select","getEditedPostContext","getEditedPostType","getEditedPostId","editSiteStore","getEditedEntityRecord","hasFinishedResolution","coreStore","_context","queryArgs","template","setHasPageContentFocus","blockContext","postType","postId"],"mappings":";;;;;;;AAIA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AAdA;AACA;AACA;;AASA;AACA;AACA;AAGe,SAASA,YAAT,GAAwB;AACtC,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,WAAX;AAAwBC,IAAAA,KAAxB;AAA+BC,IAAAA;AAA/B,MAA0C,qBAAaC,MAAF,IAAc;AACxE,UAAM;AAAEC,MAAAA,oBAAF;AAAwBC,MAAAA,iBAAxB;AAA2CC,MAAAA;AAA3C,QACLH,MAAM,CAAEI,YAAF,CADP;AAEA,UAAM;AAAEC,MAAAA,qBAAF;AAAyBC,MAAAA;AAAzB,QACLN,MAAM,CAAEO,eAAF,CADP;;AAEA,UAAMC,QAAQ,GAAGP,oBAAoB,EAArC;;AACA,UAAMQ,SAAS,GAAG,CACjB,UADiB,EAEjBP,iBAAiB,EAFA,EAGjBC,eAAe,EAHE,CAAlB;AAKA,UAAMO,QAAQ,GAAGL,qBAAqB,CAAE,GAAGI,SAAL,CAAtC;AACA,WAAO;AACNb,MAAAA,OAAO,EAAEY,QADH;AAENX,MAAAA,WAAW,EAAES,qBAAqB,CACjC,uBADiC,EAEjCG,SAFiC,CAF5B;AAMNX,MAAAA,KAAK,EAAEY,QAAQ,EAAEZ,KANX;AAONC,MAAAA,MAAM,EAAEW,QAAQ,EAAEX;AAPZ,KAAP;AASA,GArB+C,EAqB7C,EArB6C,CAAhD;AAuBA,QAAM;AAAEY,IAAAA;AAAF,MAA6B,uBAAaP,YAAb,CAAnC;AAEA,QAAMQ,YAAY,GAAG,sBACpB,OAAQ,EAAE,GAAGhB,OAAL;AAAciB,IAAAA,QAAQ,EAAE,IAAxB;AAA8BC,IAAAA,MAAM,EAAE;AAAtC,GAAR,CADoB,EAEpB,CAAElB,OAAF,CAFoB,CAArB;;AAKA,MAAK,CAAEC,WAAP,EAAqB;AACpB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,gCAAD,QACC,yCAAO,kCAAgBC,KAAhB,CAAP,CADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,iCAAD;AAAsB,IAAA,KAAK,EAAGc;AAA9B,KACC,4BAAC,yBAAD;AAAc,IAAA,aAAa,EAAG,IAA9B;AAAqC,IAAA,MAAM,EAAGb;AAA9C,IADD,CADD,CAFD,EAOC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAC,WAFT;AAGC,IAAA,OAAO,EAAG,MAAMY,sBAAsB,CAAE,KAAF;AAHvC,KAKG,cAAI,eAAJ,CALH,CAPD,CADD;AAiBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { BlockContextProvider, BlockPreview } from '@wordpress/block-editor';\nimport { Button, __experimentalVStack as VStack } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../../store';\n\nexport default function EditTemplate() {\n\tconst { context, hasResolved, title, blocks } = useSelect( ( select ) => {\n\t\tconst { getEditedPostContext, getEditedPostType, getEditedPostId } =\n\t\t\tselect( editSiteStore );\n\t\tconst { getEditedEntityRecord, hasFinishedResolution } =\n\t\t\tselect( coreStore );\n\t\tconst _context = getEditedPostContext();\n\t\tconst queryArgs = [\n\t\t\t'postType',\n\t\t\tgetEditedPostType(),\n\t\t\tgetEditedPostId(),\n\t\t];\n\t\tconst template = getEditedEntityRecord( ...queryArgs );\n\t\treturn {\n\t\t\tcontext: _context,\n\t\t\thasResolved: hasFinishedResolution(\n\t\t\t\t'getEditedEntityRecord',\n\t\t\t\tqueryArgs\n\t\t\t),\n\t\t\ttitle: template?.title,\n\t\t\tblocks: template?.blocks,\n\t\t};\n\t}, [] );\n\n\tconst { setHasPageContentFocus } = useDispatch( editSiteStore );\n\n\tconst blockContext = useMemo(\n\t\t() => ( { ...context, postType: null, postId: null } ),\n\t\t[ context ]\n\t);\n\n\tif ( ! hasResolved ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack>\n\t\t\t<div>{ decodeEntities( title ) }</div>\n\t\t\t<div className=\"edit-site-page-panels__edit-template-preview\">\n\t\t\t\t<BlockContextProvider value={ blockContext }>\n\t\t\t\t\t<BlockPreview viewportWidth={ 1024 } blocks={ blocks } />\n\t\t\t\t</BlockContextProvider>\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tclassName=\"edit-site-page-panels__edit-template-button\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\tonClick={ () => setHasPageContentFocus( false ) }\n\t\t\t>\n\t\t\t\t{ __( 'Edit template' ) }\n\t\t\t</Button>\n\t\t</VStack>\n\t);\n}\n"]}