@wordpress/edit-site 6.32.0 → 6.32.1-next.b8c8708f3.0

package/build/components/layout/hooks.js

@@ -1,31 +1,40 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hooks_exports = {};
+__export(hooks_exports, {
+  useIsSiteEditorLoading: () => useIsSiteEditorLoading
 });
-exports.useIsSiteEditorLoading = useIsSiteEditorLoading;
-var _element = require("@wordpress/element");
-var _data = require("@wordpress/data");
-var _coreData = require("@wordpress/core-data");
-/**
- * WordPress dependencies
- */
-
-const MAX_LOADING_TIME = 10000; // 10 seconds
-
+module.exports = __toCommonJS(hooks_exports);
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_core_data = require("@wordpress/core-data");
+const MAX_LOADING_TIME = 1e4;
 function useIsSiteEditorLoading() {
-  const [loaded, setLoaded] = (0, _element.useState)(false);
-  const inLoadingPause = (0, _data.useSelect)(select => {
-    const hasResolvingSelectors = select(_coreData.store).hasResolvingSelectors();
-    return !loaded && !hasResolvingSelectors;
-  }, [loaded]);
-
-  /*
-   * If the maximum expected loading time has passed, we're marking the
-   * editor as loaded, in order to prevent any failed requests from blocking
-   * the editor canvas from appearing.
-   */
-  (0, _element.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_element.useState)(false);
+  const inLoadingPause = (0, import_data.useSelect)(
+    (select) => {
+      const hasResolvingSelectors = select(import_core_data.store).hasResolvingSelectors();
+      return !loaded && !hasResolvingSelectors;
+    },
+    [loaded]
+  );
+  (0, import_element.useEffect)(() => {
     let timeout;
     if (!loaded) {
       timeout = setTimeout(() => {
@@ -36,16 +45,8 @@ function useIsSiteEditorLoading() {
       clearTimeout(timeout);
     };
   }, [loaded]);
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     if (inLoadingPause) {
-      /*
-       * We're using an arbitrary 100ms timeout here to catch brief
-       * moments without any resolving selectors that would result in
-       * displaying brief flickers of loading state and loaded state.
-       *
-       * It's worth experimenting with different values, since this also
-       * adds 100ms of artificial delay after loading has finished.
-       */
       const ARTIFICIAL_DELAY = 100;
       const timeout = setTimeout(() => {
         setLoaded(true);
@@ -57,4 +58,8 @@ function useIsSiteEditorLoading() {
   }, [inLoadingPause]);
   return !loaded;
 }
-//# sourceMappingURL=hooks.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIsSiteEditorLoading
+});
+//# sourceMappingURL=hooks.js.map

package/build/components/layout/hooks.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","_data","_coreData","MAX_LOADING_TIME","useIsSiteEditorLoading","loaded","setLoaded","useState","inLoadingPause","useSelect","select","hasResolvingSelectors","coreStore","useEffect","timeout","setTimeout","clearTimeout","ARTIFICIAL_DELAY"],"sources":["@wordpress/edit-site/src/components/layout/hooks.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\nconst MAX_LOADING_TIME = 10000; // 10 seconds\n\nexport function useIsSiteEditorLoading() {\n\tconst [ loaded, setLoaded ] = useState( false );\n\tconst inLoadingPause = useSelect(\n\t\t( select ) => {\n\t\t\tconst hasResolvingSelectors =\n\t\t\t\tselect( coreStore ).hasResolvingSelectors();\n\t\t\treturn ! loaded && ! hasResolvingSelectors;\n\t\t},\n\t\t[ loaded ]\n\t);\n\n\t/*\n\t * If the maximum expected loading time has passed, we're marking the\n\t * editor as loaded, in order to prevent any failed requests from blocking\n\t * the editor canvas from appearing.\n\t */\n\tuseEffect( () => {\n\t\tlet timeout;\n\n\t\tif ( ! loaded ) {\n\t\t\ttimeout = setTimeout( () => {\n\t\t\t\tsetLoaded( true );\n\t\t\t}, MAX_LOADING_TIME );\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout( timeout );\n\t\t};\n\t}, [ loaded ] );\n\n\tuseEffect( () => {\n\t\tif ( inLoadingPause ) {\n\t\t\t/*\n\t\t\t * We're using an arbitrary 100ms timeout here to catch brief\n\t\t\t * moments without any resolving selectors that would result in\n\t\t\t * displaying brief flickers of loading state and loaded state.\n\t\t\t *\n\t\t\t * It's worth experimenting with different values, since this also\n\t\t\t * adds 100ms of artificial delay after loading has finished.\n\t\t\t */\n\t\t\tconst ARTIFICIAL_DELAY = 100;\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetLoaded( true );\n\t\t\t}, ARTIFICIAL_DELAY );\n\n\t\t\treturn () => {\n\t\t\t\tclearTimeout( timeout );\n\t\t\t};\n\t\t}\n\t}, [ inLoadingPause ] );\n\n\treturn ! loaded;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AALA;AACA;AACA;;AAKA,MAAMG,gBAAgB,GAAG,KAAK,CAAC,CAAC;;AAEzB,SAASC,sBAAsBA,CAAA,EAAG;EACxC,MAAM,CAAEC,MAAM,EAAEC,SAAS,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAC/C,MAAMC,cAAc,GAAG,IAAAC,eAAS,EAC7BC,MAAM,IAAM;IACb,MAAMC,qBAAqB,GAC1BD,MAAM,CAAEE,eAAU,CAAC,CAACD,qBAAqB,CAAC,CAAC;IAC5C,OAAO,CAAEN,MAAM,IAAI,CAAEM,qBAAqB;EAC3C,CAAC,EACD,CAAEN,MAAM,CACT,CAAC;;EAED;AACD;AACA;AACA;AACA;EACC,IAAAQ,kBAAS,EAAE,MAAM;IAChB,IAAIC,OAAO;IAEX,IAAK,CAAET,MAAM,EAAG;MACfS,OAAO,GAAGC,UAAU,CAAE,MAAM;QAC3BT,SAAS,CAAE,IAAK,CAAC;MAClB,CAAC,EAAEH,gBAAiB,CAAC;IACtB;IAEA,OAAO,MAAM;MACZa,YAAY,CAAEF,OAAQ,CAAC;IACxB,CAAC;EACF,CAAC,EAAE,CAAET,MAAM,CAAG,CAAC;EAEf,IAAAQ,kBAAS,EAAE,MAAM;IAChB,IAAKL,cAAc,EAAG;MACrB;AACH;AACA;AACA;AACA;AACA;AACA;AACA;MACG,MAAMS,gBAAgB,GAAG,GAAG;MAC5B,MAAMH,OAAO,GAAGC,UAAU,CAAE,MAAM;QACjCT,SAAS,CAAE,IAAK,CAAC;MAClB,CAAC,EAAEW,gBAAiB,CAAC;MAErB,OAAO,MAAM;QACZD,YAAY,CAAEF,OAAQ,CAAC;MACxB,CAAC;IACF;EACD,CAAC,EAAE,CAAEN,cAAc,CAAG,CAAC;EAEvB,OAAO,CAAEH,MAAM;AAChB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/layout/hooks.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\nconst MAX_LOADING_TIME = 10000; // 10 seconds\n\nexport function useIsSiteEditorLoading() {\n\tconst [ loaded, setLoaded ] = useState( false );\n\tconst inLoadingPause = useSelect(\n\t\t( select ) => {\n\t\t\tconst hasResolvingSelectors =\n\t\t\t\tselect( coreStore ).hasResolvingSelectors();\n\t\t\treturn ! loaded && ! hasResolvingSelectors;\n\t\t},\n\t\t[ loaded ]\n\t);\n\n\t/*\n\t * If the maximum expected loading time has passed, we're marking the\n\t * editor as loaded, in order to prevent any failed requests from blocking\n\t * the editor canvas from appearing.\n\t */\n\tuseEffect( () => {\n\t\tlet timeout;\n\n\t\tif ( ! loaded ) {\n\t\t\ttimeout = setTimeout( () => {\n\t\t\t\tsetLoaded( true );\n\t\t\t}, MAX_LOADING_TIME );\n\t\t}\n\n\t\treturn () => {\n\t\t\tclearTimeout( timeout );\n\t\t};\n\t}, [ loaded ] );\n\n\tuseEffect( () => {\n\t\tif ( inLoadingPause ) {\n\t\t\t/*\n\t\t\t * We're using an arbitrary 100ms timeout here to catch brief\n\t\t\t * moments without any resolving selectors that would result in\n\t\t\t * displaying brief flickers of loading state and loaded state.\n\t\t\t *\n\t\t\t * It's worth experimenting with different values, since this also\n\t\t\t * adds 100ms of artificial delay after loading has finished.\n\t\t\t */\n\t\t\tconst ARTIFICIAL_DELAY = 100;\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\tsetLoaded( true );\n\t\t\t}, ARTIFICIAL_DELAY );\n\n\t\t\treturn () => {\n\t\t\t\tclearTimeout( timeout );\n\t\t\t};\n\t\t}\n\t}, [ inLoadingPause ] );\n\n\treturn ! loaded;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAoC;AACpC,kBAA0B;AAC1B,uBAAmC;AAEnC,MAAM,mBAAmB;AAElB,SAAS,yBAAyB;AACxC,QAAM,CAAE,QAAQ,SAAU,QAAI,yBAAU,KAAM;AAC9C,QAAM,qBAAiB;AAAA,IACtB,CAAE,WAAY;AACb,YAAM,wBACL,OAAQ,iBAAAA,KAAU,EAAE,sBAAsB;AAC3C,aAAO,CAAE,UAAU,CAAE;AAAA,IACtB;AAAA,IACA,CAAE,MAAO;AAAA,EACV;AAOA,gCAAW,MAAM;AAChB,QAAI;AAEJ,QAAK,CAAE,QAAS;AACf,gBAAU,WAAY,MAAM;AAC3B,kBAAW,IAAK;AAAA,MACjB,GAAG,gBAAiB;AAAA,IACrB;AAEA,WAAO,MAAM;AACZ,mBAAc,OAAQ;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,MAAO,CAAE;AAEd,gCAAW,MAAM;AAChB,QAAK,gBAAiB;AASrB,YAAM,mBAAmB;AACzB,YAAM,UAAU,WAAY,MAAM;AACjC,kBAAW,IAAK;AAAA,MACjB,GAAG,gBAAiB;AAEpB,aAAO,MAAM;AACZ,qBAAc,OAAQ;AAAA,MACvB;AAAA,IACD;AAAA,EACD,GAAG,CAAE,cAAe,CAAE;AAEtB,SAAO,CAAE;AACV;",
+  "names": ["coreStore"]
+}

package/build/components/layout/index.js

@@ -1,217 +1,238 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var layout_exports = {};
+__export(layout_exports, {
+  default: () => LayoutWithGlobalStylesProvider
 });
-exports.default = LayoutWithGlobalStylesProvider;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _components = require("@wordpress/components");
-var _compose = require("@wordpress/compose");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _blockEditor = require("@wordpress/block-editor");
-var _editor = require("@wordpress/editor");
-var _router = require("@wordpress/router");
-var _plugins = require("@wordpress/plugins");
-var _notices = require("@wordpress/notices");
-var _data = require("@wordpress/data");
-var _preferences = require("@wordpress/preferences");
-var _siteHub = _interopRequireWildcard(require("../site-hub"));
-var _resizableFrame = _interopRequireDefault(require("../resizable-frame"));
-var _lockUnlock = require("../../lock-unlock");
-var _saveKeyboardShortcut = _interopRequireDefault(require("../save-keyboard-shortcut"));
-var _hooks = require("./hooks");
-var _animation = _interopRequireDefault(require("./animation"));
-var _sidebar = require("../sidebar");
-var _saveHub = _interopRequireDefault(require("../save-hub"));
-var _savePanel = _interopRequireDefault(require("../save-panel"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  useGlobalStyle
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-const {
-  NavigableRegion,
-  GlobalStylesProvider
-} = (0, _lockUnlock.unlock)(_editor.privateApis);
-const {
-  useLocation
-} = (0, _lockUnlock.unlock)(_router.privateApis);
+module.exports = __toCommonJS(layout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_admin_ui = require("@wordpress/admin-ui");
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_block_editor = require("@wordpress/block-editor");
+var import_editor = require("@wordpress/editor");
+var import_router = require("@wordpress/router");
+var import_plugins = require("@wordpress/plugins");
+var import_notices = require("@wordpress/notices");
+var import_data = require("@wordpress/data");
+var import_preferences = require("@wordpress/preferences");
+var import_site_hub = __toESM(require("../site-hub"));
+var import_resizable_frame = __toESM(require("../resizable-frame"));
+var import_lock_unlock = require("../../lock-unlock");
+var import_save_keyboard_shortcut = __toESM(require("../save-keyboard-shortcut"));
+var import_hooks = require("./hooks");
+var import_animation = __toESM(require("./animation"));
+var import_sidebar = require("../sidebar");
+var import_save_hub = __toESM(require("../save-hub"));
+var import_save_panel = __toESM(require("../save-panel"));
+const { useGlobalStyle } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+const { GlobalStylesProvider } = (0, import_lock_unlock.unlock)(import_editor.privateApis);
+const { useLocation } = (0, import_lock_unlock.unlock)(import_router.privateApis);
 const ANIMATION_DURATION = 0.3;
 function Layout() {
-  const {
-    query,
-    name: routeKey,
-    areas,
-    widths
-  } = useLocation();
-  const {
-    canvas = 'view'
-  } = query;
-  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
-  const toggleRef = (0, _element.useRef)();
-  const navigateRegionsProps = (0, _components.__unstableUseNavigateRegions)();
-  const disableMotion = (0, _compose.useReducedMotion)();
-  const [canvasResizer, canvasSize] = (0, _compose.useResizeObserver)();
-  const isEditorLoading = (0, _hooks.useIsSiteEditorLoading)();
-  const [isResizableFrameOversized, setIsResizableFrameOversized] = (0, _element.useState)(false);
-  const animationRef = (0, _animation.default)({
-    triggerAnimationOnChange: routeKey + '-' + canvas
+  const { query, name: routeKey, areas, widths } = useLocation();
+  const { canvas = "view" } = query;
+  const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
+  const toggleRef = (0, import_element.useRef)();
+  const navigateRegionsProps = (0, import_components.__unstableUseNavigateRegions)();
+  const disableMotion = (0, import_compose.useReducedMotion)();
+  const [canvasResizer, canvasSize] = (0, import_compose.useResizeObserver)();
+  const isEditorLoading = (0, import_hooks.useIsSiteEditorLoading)();
+  const [isResizableFrameOversized, setIsResizableFrameOversized] = (0, import_element.useState)(false);
+  const animationRef = (0, import_animation.default)({
+    triggerAnimationOnChange: routeKey + "-" + canvas
   });
-  const {
-    showIconLabels
-  } = (0, _data.useSelect)(select => {
+  const { showIconLabels } = (0, import_data.useSelect)((select) => {
     return {
-      showIconLabels: select(_preferences.store).get('core', 'showIconLabels')
+      showIconLabels: select(import_preferences.store).get(
+        "core",
+        "showIconLabels"
+      )
     };
   });
-  const [backgroundColor] = useGlobalStyle('color.background');
-  const [gradientValue] = useGlobalStyle('color.gradient');
-  const previousCanvaMode = (0, _compose.usePrevious)(canvas);
-  (0, _element.useEffect)(() => {
-    if (previousCanvaMode === 'edit') {
+  const [backgroundColor] = useGlobalStyle("color.background");
+  const [gradientValue] = useGlobalStyle("color.gradient");
+  const previousCanvaMode = (0, import_compose.usePrevious)(canvas);
+  (0, import_element.useEffect)(() => {
+    if (previousCanvaMode === "edit") {
       toggleRef.current?.focus();
     }
-    // Should not depend on the previous canvas mode value but the next.
   }, [canvas]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.UnsavedChangesWarning, {}), canvas === 'view' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_saveKeyboardShortcut.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ...navigateRegionsProps,
-      ref: navigateRegionsProps.ref,
-      className: (0, _clsx.default)('edit-site-layout', navigateRegionsProps.className, {
-        'is-full-canvas': canvas === 'edit',
-        'show-icon-labels': showIconLabels
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "edit-site-layout__content",
-        children: [(!isMobileViewport || !areas.mobile) && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigableRegion, {
-          ariaLabel: (0, _i18n.__)('Navigation'),
-          className: "edit-site-layout__sidebar-region",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
-            children: canvas === 'view' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
-              initial: {
-                opacity: 0
-              },
-              animate: {
-                opacity: 1
-              },
-              exit: {
-                opacity: 0
-              },
-              transition: {
-                type: 'tween',
-                duration:
-                // Disable transition in mobile to emulate a full page transition.
-                disableMotion || isMobileViewport ? 0 : ANIMATION_DURATION,
-                ease: 'easeOut'
-              },
-              className: "edit-site-layout__sidebar",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_siteHub.default, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.UnsavedChangesWarning, {}),
+    canvas === "view" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_save_keyboard_shortcut.default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...navigateRegionsProps,
+        ref: navigateRegionsProps.ref,
+        className: (0, import_clsx.default)(
+          "edit-site-layout",
+          navigateRegionsProps.className,
+          {
+            "is-full-canvas": canvas === "edit",
+            "show-icon-labels": showIconLabels
+          }
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "edit-site-layout__content", children: [
+          (!isMobileViewport || !areas.mobile) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_admin_ui.NavigableRegion,
+            {
+              ariaLabel: (0, import_i18n.__)("Navigation"),
+              className: "edit-site-layout__sidebar-region",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__unstableAnimatePresence, { children: canvas === "view" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_components.__unstableMotion.div,
+                {
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: {
+                    type: "tween",
+                    duration: (
+                      // Disable transition in mobile to emulate a full page transition.
+                      disableMotion || isMobileViewport ? 0 : ANIMATION_DURATION
+                    ),
+                    ease: "easeOut"
+                  },
+                  className: "edit-site-layout__sidebar",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_site_hub.default,
+                      {
+                        ref: toggleRef,
+                        isTransparent: isResizableFrameOversized
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarNavigationProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_sidebar.SidebarContent,
+                      {
+                        shouldAnimate: routeKey !== "styles",
+                        routeKey,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.ErrorBoundary, { children: areas.sidebar })
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_save_hub.default, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_save_panel.default, {})
+                  ]
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.EditorSnackbars, {}),
+          isMobileViewport && areas.mobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "edit-site-layout__mobile", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarNavigationProvider, { children: canvas !== "edit" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_site_hub.SiteHubMobile,
+              {
                 ref: toggleRef,
                 isTransparent: isResizableFrameOversized
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.SidebarNavigationProvider, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.SidebarContent, {
-                  shouldAnimate: routeKey !== 'styles',
-                  routeKey: routeKey,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.ErrorBoundary, {
-                    children: areas.sidebar
-                  })
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_saveHub.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_savePanel.default, {})]
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.EditorSnackbars, {}), isMobileViewport && areas.mobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "edit-site-layout__mobile",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.SidebarNavigationProvider, {
-            children: canvas !== 'edit' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_siteHub.SiteHubMobile, {
-                ref: toggleRef,
-                isTransparent: isResizableFrameOversized
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.SidebarContent, {
-                routeKey: routeKey,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.ErrorBoundary, {
-                  children: areas.mobile
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_saveHub.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_savePanel.default, {})]
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.ErrorBoundary, {
-              children: areas.mobile
-            })
-          })
-        }), !isMobileViewport && areas.content && canvas !== 'edit' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "edit-site-layout__area",
-          style: {
-            maxWidth: widths?.content
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.ErrorBoundary, {
-            children: areas.content
-          })
-        }), !isMobileViewport && areas.edit && canvas !== 'edit' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "edit-site-layout__area",
-          style: {
-            maxWidth: widths?.edit
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.ErrorBoundary, {
-            children: areas.edit
-          })
-        }), !isMobileViewport && areas.preview && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "edit-site-layout__canvas-container",
-          children: [canvasResizer, !!canvasSize.width && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _clsx.default)('edit-site-layout__canvas', {
-              'is-right-aligned': isResizableFrameOversized
-            }),
-            ref: animationRef,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.ErrorBoundary, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizableFrame.default, {
-                isReady: !isEditorLoading,
-                isFullWidth: canvas === 'edit',
-                defaultSize: {
-                  width: canvasSize.width - 24 /* $canvas-padding */,
-                  height: canvasSize.height
-                },
-                isOversized: isResizableFrameOversized,
-                setIsOversized: setIsResizableFrameOversized,
-                innerContentStyle: {
-                  background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
-                },
-                children: areas.preview
-              })
-            })
-          })]
-        })]
-      })
-    })]
-  });
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.SidebarContent, { routeKey, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.ErrorBoundary, { children: areas.mobile }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_save_hub.default, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_save_panel.default, {})
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.ErrorBoundary, { children: areas.mobile }) }) }),
+          !isMobileViewport && areas.content && canvas !== "edit" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "edit-site-layout__area",
+              style: {
+                maxWidth: widths?.content
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.ErrorBoundary, { children: areas.content })
+            }
+          ),
+          !isMobileViewport && areas.edit && canvas !== "edit" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "edit-site-layout__area",
+              style: {
+                maxWidth: widths?.edit
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.ErrorBoundary, { children: areas.edit })
+            }
+          ),
+          !isMobileViewport && areas.preview && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "edit-site-layout__canvas-container", children: [
+            canvasResizer,
+            !!canvasSize.width && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: (0, import_clsx.default)(
+                  "edit-site-layout__canvas",
+                  {
+                    "is-right-aligned": isResizableFrameOversized
+                  }
+                ),
+                ref: animationRef,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_resizable_frame.default,
+                  {
+                    isReady: !isEditorLoading,
+                    isFullWidth: canvas === "edit",
+                    defaultSize: {
+                      width: canvasSize.width - 24,
+                      height: canvasSize.height
+                    },
+                    isOversized: isResizableFrameOversized,
+                    setIsOversized: setIsResizableFrameOversized,
+                    innerContentStyle: {
+                      background: gradientValue ?? backgroundColor
+                    },
+                    children: areas.preview
+                  }
+                ) })
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
 }
 function LayoutWithGlobalStylesProvider(props) {
-  const {
-    createErrorNotice
-  } = (0, _data.useDispatch)(_notices.store);
+  const { createErrorNotice } = (0, import_data.useDispatch)(import_notices.store);
   function onPluginAreaError(name) {
-    createErrorNotice((0, _i18n.sprintf)(/* translators: %s: plugin name */
-    (0, _i18n.__)('The "%s" plugin has encountered an error and cannot be rendered.'), name));
+    createErrorNotice(
+      (0, import_i18n.sprintf)(
+        /* translators: %s: plugin name */
+        (0, import_i18n.__)(
+          'The "%s" plugin has encountered an error and cannot be rendered.'
+        ),
+        name
+      )
+    );
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SlotFillProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GlobalStylesProvider, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_plugins.PluginArea, {
-        onError: onPluginAreaError
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
-        ...props
-      })]
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.SlotFillProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GlobalStylesProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_plugins.PluginArea, { onError: onPluginAreaError }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layout, { ...props })
+  ] }) });
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map