@wordpress/interface 4.20.0 → 5.0.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+## 4.21.0 (2022-11-16)
+
 ## 4.20.0 (2022-11-02)
 
 ## 4.19.0 (2022-10-19)

package/build/components/index.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "MoreMenuFeatureToggle", {
     return _moreMenuFeatureToggle.default;
   }
 });
+Object.defineProperty(exports, "NavigableRegion", {
+  enumerable: true,
+  get: function () {
+    return _navigableRegion.default;
+  }
+});
 Object.defineProperty(exports, "PinnedItems", {
   enumerable: true,
   get: function () {
@@ -101,4 +107,6 @@ var _preferencesModalTabs = _interopRequireDefault(require("./preferences-modal-
 var _preferencesModalSection = _interopRequireDefault(require("./preferences-modal-section"));
 
 var _preferencesModalBaseOption = _interopRequireDefault(require("./preferences-modal-base-option"));
+
+var _navigableRegion = _interopRequireDefault(require("./navigable-region"));
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\nexport { default as ActionItem } from './action-item';\nexport { default as PreferencesModal } from './preferences-modal';\nexport { default as PreferencesModalTabs } from './preferences-modal-tabs';\nexport { default as PreferencesModalSection } from './preferences-modal-section';\nexport { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\nexport { default as ActionItem } from './action-item';\nexport { default as PreferencesModal } from './preferences-modal';\nexport { default as PreferencesModalTabs } from './preferences-modal-tabs';\nexport { default as PreferencesModalSection } from './preferences-modal-section';\nexport { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';\nexport { default as NavigableRegion } from './navigable-region';\n"]}

package/build/components/interface-skeleton/index.js

@@ -19,6 +19,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _compose = require("@wordpress/compose");
 
+var _navigableRegion = _interopRequireDefault(require("../navigable-region"));
+
 /**
  * External dependencies
  */
@@ -26,6 +28,10 @@ var _compose = require("@wordpress/compose");
 /**
  * WordPress dependencies
  */
+
+/**
+ * Internal dependencies
+ */
 function useHTMLClass(className) {
   (0, _element.useEffect)(() => {
     const element = document && document.querySelector(`html:not(.${className})`);
@@ -51,18 +57,16 @@ function InterfaceSkeleton(_ref, ref) {
     secondarySidebar,
     notices,
     content,
-    drawer,
     actions,
     labels,
     className,
+    // Todo: does this need to be a prop.
+    // Can we use a dependency to keyboard-shortcuts directly?
     shortcuts
   } = _ref;
   const navigateRegionsProps = (0, _components.__unstableUseNavigateRegions)(shortcuts);
   useHTMLClass('interface-interface-skeleton__html-container');
   const defaultLabels = {
-    /* translators: accessibility text for the nav bar landmark region. */
-    drawer: (0, _i18n.__)('Drawer'),
-
     /* translators: accessibility text for the top bar landmark region. */
     header: (0, _i18n.__)('Header'),
 
@@ -102,61 +106,43 @@ function InterfaceSkeleton(_ref, ref) {
   return (0, _element.createElement)("div", (0, _extends2.default)({}, navigateRegionsProps, {
     ref: (0, _compose.useMergeRefs)([ref, navigateRegionsProps.ref]),
     className: (0, _classnames.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
-  }), !!drawer && (0, _element.createElement)("div", {
-    className: "interface-interface-skeleton__drawer",
-    role: "region",
-    "aria-label": mergedLabels.drawer,
-    tabIndex: "-1"
-  }, drawer), (0, _element.createElement)("div", {
+  }), (0, _element.createElement)("div", {
     className: "interface-interface-skeleton__editor"
-  }, !!header && isDistractionFree && (0, _element.createElement)(_components.__unstableMotion.div, {
+  }, !!header && isDistractionFree && (0, _element.createElement)(_navigableRegion.default, {
+    as: _components.__unstableMotion.div,
+    className: "interface-interface-skeleton__header",
+    "aria-label": mergedLabels.header,
     initial: isDistractionFree ? 'hidden' : 'hover',
     whileHover: "hover",
     variants: headerVariants,
     transition: {
       type: 'tween',
       delay: 0.8
-    },
-    className: "interface-interface-skeleton__header",
-    role: "region",
-    "aria-label": mergedLabels.header,
-    tabIndex: "-1"
-  }, header), !!header && !isDistractionFree && (0, _element.createElement)("div", {
+    }
+  }, header), !!header && !isDistractionFree && (0, _element.createElement)(_navigableRegion.default, {
     className: "interface-interface-skeleton__header",
-    role: "region",
-    "aria-label": mergedLabels.header,
-    tabIndex: "-1"
+    ariaLabel: mergedLabels.header
   }, header), isDistractionFree && (0, _element.createElement)("div", {
     className: "interface-interface-skeleton__header"
   }, editorNotices), (0, _element.createElement)("div", {
     className: "interface-interface-skeleton__body"
-  }, !!secondarySidebar && (0, _element.createElement)("div", {
+  }, !!secondarySidebar && (0, _element.createElement)(_navigableRegion.default, {
     className: "interface-interface-skeleton__secondary-sidebar",
-    role: "region",
-    "aria-label": mergedLabels.secondarySidebar,
-    tabIndex: "-1"
+    ariaLabel: mergedLabels.secondarySidebar
   }, secondarySidebar), !!notices && (0, _element.createElement)("div", {
     className: "interface-interface-skeleton__notices"
-  }, notices), (0, _element.createElement)("div", {
+  }, notices), (0, _element.createElement)(_navigableRegion.default, {
     className: "interface-interface-skeleton__content",
-    role: "region",
-    "aria-label": mergedLabels.body,
-    tabIndex: "-1"
-  }, content), !!sidebar && (0, _element.createElement)("div", {
+    ariaLabel: mergedLabels.body
+  }, content), !!sidebar && (0, _element.createElement)(_navigableRegion.default, {
     className: "interface-interface-skeleton__sidebar",
-    role: "region",
-    "aria-label": mergedLabels.sidebar,
-    tabIndex: "-1"
-  }, sidebar), !!actions && (0, _element.createElement)("div", {
+    ariaLabel: mergedLabels.sidebar
+  }, sidebar), !!actions && (0, _element.createElement)(_navigableRegion.default, {
     className: "interface-interface-skeleton__actions",
-    role: "region",
-    "aria-label": mergedLabels.actions,
-    tabIndex: "-1"
-  }, actions))), !!footer && (0, _element.createElement)("div", {
+    ariaLabel: mergedLabels.actions
+  }, actions))), !!footer && (0, _element.createElement)(_navigableRegion.default, {
     className: "interface-interface-skeleton__footer",
-    role: "region",
-    "aria-label": mergedLabels.footer,
-    tabIndex: "-1"
+    ariaLabel: mergedLabels.footer
   }, footer));
 }
 

package/build/components/interface-skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","drawer","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tdrawer,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the nav bar landmark region. */\n\t\tdrawer: __( 'Drawer' ),\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...navigateRegionsProps }\n\t\t\tref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t{ !! drawer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"interface-interface-skeleton__drawer\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={ mergedLabels.drawer }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t{ drawer }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.body }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.sidebar }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.actions }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={ mergedLabels.footer }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","motion","div"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AAIA;;AACA;;AAKA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AAGA,SAASA,YAAT,CAAuBC,SAAvB,EAAmC;AAClC,0BAAW,MAAM;AAChB,UAAMC,OAAO,GACZC,QAAQ,IAAIA,QAAQ,CAACC,aAAT,CAAyB,aAAaH,SAAW,GAAjD,CADb;;AAEA,QAAK,CAAEC,OAAP,EAAiB;AAChB;AACA;;AACDA,IAAAA,OAAO,CAACG,SAAR,CAAkBC,MAAlB,CAA0BL,SAA1B;AACA,WAAO,MAAM;AACZC,MAAAA,OAAO,CAACG,SAAR,CAAkBC,MAAlB,CAA0BL,SAA1B;AACA,KAFD;AAGA,GAVD,EAUG,CAAEA,SAAF,CAVH;AAWA;;AAED,SAASM,iBAAT,OAiBCC,GAjBD,EAkBE;AAAA,MAjBD;AACCC,IAAAA,iBADD;AAECC,IAAAA,MAFD;AAGCC,IAAAA,MAHD;AAICC,IAAAA,aAJD;AAKCC,IAAAA,OALD;AAMCC,IAAAA,gBAND;AAOCC,IAAAA,OAPD;AAQCC,IAAAA,OARD;AASCC,IAAAA,OATD;AAUCC,IAAAA,MAVD;AAWCjB,IAAAA,SAXD;AAYC;AACA;AACAkB,IAAAA;AAdD,GAiBC;AACD,QAAMC,oBAAoB,GAAG,8CAAoBD,SAApB,CAA7B;AAEAnB,EAAAA,YAAY,CAAE,8CAAF,CAAZ;AAEA,QAAMqB,aAAa,GAAG;AACrB;AACAV,IAAAA,MAAM,EAAE,cAAI,QAAJ,CAFa;;AAGrB;AACAW,IAAAA,IAAI,EAAE,cAAI,SAAJ,CAJe;;AAKrB;AACAR,IAAAA,gBAAgB,EAAE,cAAI,eAAJ,CANG;;AAOrB;AACAD,IAAAA,OAAO,EAAE,cAAI,UAAJ,CARY;;AASrB;AACAI,IAAAA,OAAO,EAAE,cAAI,SAAJ,CAVY;;AAWrB;AACAP,IAAAA,MAAM,EAAE,cAAI,QAAJ;AAZa,GAAtB;AAeA,QAAMa,YAAY,GAAG,EAAE,GAAGF,aAAL;AAAoB,OAAGH;AAAvB,GAArB;AAEA,QAAMM,cAAc,GAAG;AACtBC,IAAAA,MAAM,EAAEhB,iBAAiB,GAAG;AAAEiB,MAAAA,OAAO,EAAE;AAAX,KAAH,GAAoB;AAAEA,MAAAA,OAAO,EAAE;AAAX,KADvB;AAEtBC,IAAAA,KAAK,EAAE;AACND,MAAAA,OAAO,EAAE,CADH;AAENE,MAAAA,UAAU,EAAE;AAAEC,QAAAA,IAAI,EAAE,OAAR;AAAiBC,QAAAA,KAAK,EAAE,GAAxB;AAA6BC,QAAAA,aAAa,EAAE;AAA5C;AAFN;AAFe,GAAvB;AAQA,SACC,8DACMX,oBADN;AAEC,IAAA,GAAG,EAAG,2BAAc,CAAEZ,GAAF,EAAOY,oBAAoB,CAACZ,GAA5B,CAAd,CAFP;AAGC,IAAA,SAAS,EAAG,yBACXP,SADW,EAEX,8BAFW,EAGXmB,oBAAoB,CAACnB,SAHV,EAIX,CAAC,CAAES,MAAH,IAAa,YAJF;AAHb,MAUC;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,CAAC,CAAEC,MAAH,IAAaF,iBAAb,IACD,4BAAC,wBAAD;AACC,IAAA,EAAE,EAAGuB,6BAAOC,GADb;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,kBAAaV,YAAY,CAACZ,MAH3B;AAIC,IAAA,OAAO,EAAGF,iBAAiB,GAAG,QAAH,GAAc,OAJ1C;AAKC,IAAA,UAAU,EAAC,OALZ;AAMC,IAAA,QAAQ,EAAGe,cANZ;AAOC,IAAA,UAAU,EAAG;AAAEK,MAAAA,IAAI,EAAE,OAAR;AAAiBC,MAAAA,KAAK,EAAE;AAAxB;AAPd,KASGnB,MATH,CAFF,EAcG,CAAC,CAAEA,MAAH,IAAa,CAAEF,iBAAf,IACD,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,SAAS,EAAGc,YAAY,CAACZ;AAF1B,KAIGA,MAJH,CAfF,EAsBGF,iBAAiB,IAClB;AAAK,IAAA,SAAS,EAAC;AAAf,KACGG,aADH,CAvBF,EA2BC;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,CAAC,CAAEE,gBAAH,IACD,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,iDADX;AAEC,IAAA,SAAS,EAAGS,YAAY,CAACT;AAF1B,KAIGA,gBAJH,CAFF,EASG,CAAC,CAAEC,OAAH,IACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAVF,EAcC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,SAAS,EAAGQ,YAAY,CAACD;AAF1B,KAIGN,OAJH,CAdD,EAoBG,CAAC,CAAEH,OAAH,IACD,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,SAAS,EAAGU,YAAY,CAACV;AAF1B,KAIGA,OAJH,CArBF,EA4BG,CAAC,CAAEI,OAAH,IACD,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,SAAS,EAAGM,YAAY,CAACN;AAF1B,KAIGA,OAJH,CA7BF,CA3BD,CAVD,EA2EG,CAAC,CAAEP,MAAH,IACD,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,SAAS,EAAGa,YAAY,CAACb;AAF1B,KAIGA,MAJH,CA5EF,CADD;AAsFA;;eAEc,yBAAYH,iBAAZ,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...navigateRegionsProps }\n\t\t\tref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}

package/build/components/navigable-region/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavigableRegion;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+/**
+ * External dependencies
+ */
+function NavigableRegion(_ref) {
+  let {
+    children,
+    className,
+    ariaLabel,
+    as: Tag = 'div',
+    ...props
+  } = _ref;
+  return (0, _element.createElement)(Tag, (0, _extends2.default)({
+    className: (0, _classnames.default)('interface-navigable-region', className),
+    "aria-label": ariaLabel,
+    role: "region",
+    tabIndex: "-1"
+  }, props), (0, _element.createElement)("div", {
+    className: "interface-navigable-region__stacker"
+  }, children));
+}
+//# sourceMappingURL=index.js.map

package/build/components/navigable-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,4BAAC,GAAD;AACC,IAAA,SAAS,EAAG,yBAAY,4BAAZ,EAA0CJ,SAA1C,CADb;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,GAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGL,QADH,CAPD,CADD;AAaA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ classnames( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<div className=\"interface-navigable-region__stacker\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Tag>\n\t);\n}\n"]}

package/build-module/components/index.js

@@ -10,4 +10,5 @@ export { default as PreferencesModal } from './preferences-modal';
 export { default as PreferencesModalTabs } from './preferences-modal-tabs';
 export { default as PreferencesModalSection } from './preferences-modal-section';
 export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';
+export { default as NavigableRegion } from './navigable-region';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":["default","ComplementaryArea","ComplementaryAreaMoreMenuItem","FullscreenMode","InterfaceSkeleton","PinnedItems","MoreMenuDropdown","MoreMenuFeatureToggle","ActionItem","PreferencesModal","PreferencesModalTabs","PreferencesModalSection","___unstablePreferencesModalBaseOption"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,sBAA7C;AACA,SAASD,OAAO,IAAIE,6BAApB,QAAyD,qCAAzD;AACA,SAASF,OAAO,IAAIG,cAApB,QAA0C,mBAA1C;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,sBAA7C;AACA,SAASJ,OAAO,IAAIK,WAApB,QAAuC,gBAAvC;AACA,SAASL,OAAO,IAAIM,gBAApB,QAA4C,sBAA5C;AACA,SAASN,OAAO,IAAIO,qBAApB,QAAiD,4BAAjD;AACA,SAASP,OAAO,IAAIQ,UAApB,QAAsC,eAAtC;AACA,SAASR,OAAO,IAAIS,gBAApB,QAA4C,qBAA5C;AACA,SAAST,OAAO,IAAIU,oBAApB,QAAgD,0BAAhD;AACA,SAASV,OAAO,IAAIW,uBAApB,QAAmD,6BAAnD;AACA,SAASX,OAAO,IAAIY,qCAApB,QAAiE,iCAAjE","sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\nexport { default as ActionItem } from './action-item';\nexport { default as PreferencesModal } from './preferences-modal';\nexport { default as PreferencesModalTabs } from './preferences-modal-tabs';\nexport { default as PreferencesModalSection } from './preferences-modal-section';\nexport { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":["default","ComplementaryArea","ComplementaryAreaMoreMenuItem","FullscreenMode","InterfaceSkeleton","PinnedItems","MoreMenuDropdown","MoreMenuFeatureToggle","ActionItem","PreferencesModal","PreferencesModalTabs","PreferencesModalSection","___unstablePreferencesModalBaseOption","NavigableRegion"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,sBAA7C;AACA,SAASD,OAAO,IAAIE,6BAApB,QAAyD,qCAAzD;AACA,SAASF,OAAO,IAAIG,cAApB,QAA0C,mBAA1C;AACA,SAASH,OAAO,IAAII,iBAApB,QAA6C,sBAA7C;AACA,SAASJ,OAAO,IAAIK,WAApB,QAAuC,gBAAvC;AACA,SAASL,OAAO,IAAIM,gBAApB,QAA4C,sBAA5C;AACA,SAASN,OAAO,IAAIO,qBAApB,QAAiD,4BAAjD;AACA,SAASP,OAAO,IAAIQ,UAApB,QAAsC,eAAtC;AACA,SAASR,OAAO,IAAIS,gBAApB,QAA4C,qBAA5C;AACA,SAAST,OAAO,IAAIU,oBAApB,QAAgD,0BAAhD;AACA,SAASV,OAAO,IAAIW,uBAApB,QAAmD,6BAAnD;AACA,SAASX,OAAO,IAAIY,qCAApB,QAAiE,iCAAjE;AACA,SAASZ,OAAO,IAAIa,eAApB,QAA2C,oBAA3C","sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as MoreMenuDropdown } from './more-menu-dropdown';\nexport { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';\nexport { default as ActionItem } from './action-item';\nexport { default as PreferencesModal } from './preferences-modal';\nexport { default as PreferencesModalTabs } from './preferences-modal-tabs';\nexport { default as PreferencesModalSection } from './preferences-modal-section';\nexport { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';\nexport { default as NavigableRegion } from './navigable-region';\n"]}

package/build-module/components/interface-skeleton/index.js

@@ -13,6 +13,11 @@ import { forwardRef, useEffect } from '@wordpress/element';
 import { __unstableUseNavigateRegions as useNavigateRegions, __unstableMotion as motion } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+
+import NavigableRegion from '../navigable-region';
 
 function useHTMLClass(className) {
   useEffect(() => {
@@ -39,18 +44,16 @@ function InterfaceSkeleton(_ref, ref) {
     secondarySidebar,
     notices,
     content,
-    drawer,
     actions,
     labels,
     className,
+    // Todo: does this need to be a prop.
+    // Can we use a dependency to keyboard-shortcuts directly?
     shortcuts
   } = _ref;
   const navigateRegionsProps = useNavigateRegions(shortcuts);
   useHTMLClass('interface-interface-skeleton__html-container');
   const defaultLabels = {
-    /* translators: accessibility text for the nav bar landmark region. */
-    drawer: __('Drawer'),
-
     /* translators: accessibility text for the top bar landmark region. */
     header: __('Header'),
 
@@ -90,61 +93,43 @@ function InterfaceSkeleton(_ref, ref) {
   return createElement("div", _extends({}, navigateRegionsProps, {
     ref: useMergeRefs([ref, navigateRegionsProps.ref]),
     className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
-  }), !!drawer && createElement("div", {
-    className: "interface-interface-skeleton__drawer",
-    role: "region",
-    "aria-label": mergedLabels.drawer,
-    tabIndex: "-1"
-  }, drawer), createElement("div", {
+  }), createElement("div", {
     className: "interface-interface-skeleton__editor"
-  }, !!header && isDistractionFree && createElement(motion.div, {
+  }, !!header && isDistractionFree && createElement(NavigableRegion, {
+    as: motion.div,
+    className: "interface-interface-skeleton__header",
+    "aria-label": mergedLabels.header,
     initial: isDistractionFree ? 'hidden' : 'hover',
     whileHover: "hover",
     variants: headerVariants,
     transition: {
       type: 'tween',
       delay: 0.8
-    },
-    className: "interface-interface-skeleton__header",
-    role: "region",
-    "aria-label": mergedLabels.header,
-    tabIndex: "-1"
-  }, header), !!header && !isDistractionFree && createElement("div", {
+    }
+  }, header), !!header && !isDistractionFree && createElement(NavigableRegion, {
     className: "interface-interface-skeleton__header",
-    role: "region",
-    "aria-label": mergedLabels.header,
-    tabIndex: "-1"
+    ariaLabel: mergedLabels.header
   }, header), isDistractionFree && createElement("div", {
     className: "interface-interface-skeleton__header"
   }, editorNotices), createElement("div", {
     className: "interface-interface-skeleton__body"
-  }, !!secondarySidebar && createElement("div", {
+  }, !!secondarySidebar && createElement(NavigableRegion, {
     className: "interface-interface-skeleton__secondary-sidebar",
-    role: "region",
-    "aria-label": mergedLabels.secondarySidebar,
-    tabIndex: "-1"
+    ariaLabel: mergedLabels.secondarySidebar
   }, secondarySidebar), !!notices && createElement("div", {
     className: "interface-interface-skeleton__notices"
-  }, notices), createElement("div", {
+  }, notices), createElement(NavigableRegion, {
     className: "interface-interface-skeleton__content",
-    role: "region",
-    "aria-label": mergedLabels.body,
-    tabIndex: "-1"
-  }, content), !!sidebar && createElement("div", {
+    ariaLabel: mergedLabels.body
+  }, content), !!sidebar && createElement(NavigableRegion, {
     className: "interface-interface-skeleton__sidebar",
-    role: "region",
-    "aria-label": mergedLabels.sidebar,
-    tabIndex: "-1"
-  }, sidebar), !!actions && createElement("div", {
+    ariaLabel: mergedLabels.sidebar
+  }, sidebar), !!actions && createElement(NavigableRegion, {
     className: "interface-interface-skeleton__actions",
-    role: "region",
-    "aria-label": mergedLabels.actions,
-    tabIndex: "-1"
-  }, actions))), !!footer && createElement("div", {
+    ariaLabel: mergedLabels.actions
+  }, actions))), !!footer && createElement(NavigableRegion, {
     className: "interface-interface-skeleton__footer",
-    role: "region",
-    "aria-label": mergedLabels.footer,
-    tabIndex: "-1"
+    ariaLabel: mergedLabels.footer
   }, footer));
 }
 

package/build-module/components/interface-skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__","useMergeRefs","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","drawer","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tdrawer,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the nav bar landmark region. */\n\t\tdrawer: __( 'Drawer' ),\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...navigateRegionsProps }\n\t\t\tref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t{ !! drawer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"interface-interface-skeleton__drawer\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={ mergedLabels.drawer }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t{ drawer }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.body }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.sidebar }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.actions }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={ mergedLabels.footer }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__","useMergeRefs","NavigableRegion","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","div"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...navigateRegionsProps }\n\t\t\tref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}

package/build-module/components/navigable-region/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+export default function NavigableRegion(_ref) {
+  let {
+    children,
+    className,
+    ariaLabel,
+    as: Tag = 'div',
+    ...props
+  } = _ref;
+  return createElement(Tag, _extends({
+    className: classnames('interface-navigable-region', className),
+    "aria-label": ariaLabel,
+    role: "region",
+    tabIndex: "-1"
+  }, props), createElement("div", {
+    className: "interface-navigable-region__stacker"
+  }, children));
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/navigable-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["classnames","NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,cAAC,GAAD;AACC,IAAA,SAAS,EAAGP,UAAU,CAAE,4BAAF,EAAgCG,SAAhC,CADvB;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,GAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGL,QADH,CAPD,CADD;AAaA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ classnames( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<div className=\"interface-navigable-region__stacker\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Tag>\n\t);\n}\n"]}

package/build-style/style-rtl.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -306,10 +320,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+.interface-interface-skeleton__content .interface-navigable-region__stacker {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
-  display: block;
   flex-shrink: 0;
   position: absolute;
   z-index: 100000;
@@ -324,9 +342,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
     position: relative !important;
-    z-index: 90;
     width: auto;
   }
+  .is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,
+.is-sidebar-opened .interface-interface-skeleton__sidebar {
+    z-index: 90;
+  }
 }
 
 .interface-interface-skeleton__sidebar {
@@ -338,6 +359,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
+.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
+  height: 100%;
+}
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
     border-left: 1px solid #e0e0e0;
@@ -390,7 +414,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 280px;
   color: #1e1e1e;
 }
-.interface-interface-skeleton__actions:focus {
+.interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
   top: auto;
   bottom: 0;
 }

package/build-style/style.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -306,10 +320,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+.interface-interface-skeleton__content .interface-navigable-region__stacker {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
-  display: block;
   flex-shrink: 0;
   position: absolute;
   z-index: 100000;
@@ -324,9 +342,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
     position: relative !important;
-    z-index: 90;
     width: auto;
   }
+  .is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,
+.is-sidebar-opened .interface-interface-skeleton__sidebar {
+    z-index: 90;
+  }
 }
 
 .interface-interface-skeleton__sidebar {
@@ -338,6 +359,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
+.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
+  height: 100%;
+}
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
     border-right: 1px solid #e0e0e0;
@@ -390,7 +414,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 280px;
   color: #1e1e1e;
 }
-.interface-interface-skeleton__actions:focus {
+.interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
   top: auto;
   bottom: 0;
 }

package/complementary-area-context/index.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { withPluginContext } from '@wordpress/plugins';
+
+export default withPluginContext( ( context, ownProps ) => {
+	return {
+		icon: ownProps.icon || context.icon,
+		identifier:
+			ownProps.identifier || `${ context.name }/${ ownProps.name }`,
+	};
+} );

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "4.20.0",
+	"version": "5.0.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,25 +32,25 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.21.0",
-		"@wordpress/components": "^22.0.0",
-		"@wordpress/compose": "^5.19.0",
-		"@wordpress/data": "^7.5.0",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/i18n": "^4.21.0",
-		"@wordpress/icons": "^9.12.0",
-		"@wordpress/plugins": "^4.19.0",
-		"@wordpress/preferences": "^2.13.0",
-		"@wordpress/viewport": "^4.19.0",
+		"@wordpress/a11y": "^3.23.0",
+		"@wordpress/components": "^23.0.0",
+		"@wordpress/compose": "^6.0.0",
+		"@wordpress/data": "^8.0.0",
+		"@wordpress/deprecated": "^3.23.0",
+		"@wordpress/element": "^5.0.0",
+		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/icons": "^9.14.0",
+		"@wordpress/plugins": "^5.0.0",
+		"@wordpress/preferences": "^3.0.0",
+		"@wordpress/viewport": "^5.0.0",
 		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

package/src/components/index.js

@@ -10,3 +10,4 @@ export { default as PreferencesModal } from './preferences-modal';
 export { default as PreferencesModalTabs } from './preferences-modal-tabs';
 export { default as PreferencesModalSection } from './preferences-modal-section';
 export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';
+export { default as NavigableRegion } from './navigable-region';

package/src/components/interface-skeleton/index.js

@@ -14,6 +14,11 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import NavigableRegion from '../navigable-region';
+
 function useHTMLClass( className ) {
 	useEffect( () => {
 		const element =
@@ -38,10 +43,11 @@ function InterfaceSkeleton(
 		secondarySidebar,
 		notices,
 		content,
-		drawer,
 		actions,
 		labels,
 		className,
+		// Todo: does this need to be a prop.
+		// Can we use a dependency to keyboard-shortcuts directly?
 		shortcuts,
 	},
 	ref
@@ -51,8 +57,6 @@ function InterfaceSkeleton(
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
-		/* translators: accessibility text for the nav bar landmark region. */
-		drawer: __( 'Drawer' ),
 		/* translators: accessibility text for the top bar landmark region. */
 		header: __( 'Header' ),
 		/* translators: accessibility text for the content landmark region. */
@@ -88,40 +92,27 @@ function InterfaceSkeleton(
 				!! footer && 'has-footer'
 			) }
 		>
-			{ !! drawer && (
-				<div
-					className="interface-interface-skeleton__drawer"
-					role="region"
-					aria-label={ mergedLabels.drawer }
-					tabIndex="-1"
-				>
-					{ drawer }
-				</div>
-			) }
 			<div className="interface-interface-skeleton__editor">
 				{ !! header && isDistractionFree && (
-					<motion.div
+					<NavigableRegion
+						as={ motion.div }
+						className="interface-interface-skeleton__header"
+						aria-label={ mergedLabels.header }
 						initial={ isDistractionFree ? 'hidden' : 'hover' }
 						whileHover="hover"
 						variants={ headerVariants }
 						transition={ { type: 'tween', delay: 0.8 } }
-						className="interface-interface-skeleton__header"
-						role="region"
-						aria-label={ mergedLabels.header }
-						tabIndex="-1"
 					>
 						{ header }
-					</motion.div>
+					</NavigableRegion>
 				) }
 				{ !! header && ! isDistractionFree && (
-					<div
+					<NavigableRegion
 						className="interface-interface-skeleton__header"
-						role="region"
-						aria-label={ mergedLabels.header }
-						tabIndex="-1"
+						ariaLabel={ mergedLabels.header }
 					>
 						{ header }
-					</div>
+					</NavigableRegion>
 				) }
 				{ isDistractionFree && (
 					<div className="interface-interface-skeleton__header">
@@ -130,59 +121,49 @@ function InterfaceSkeleton(
 				) }
 				<div className="interface-interface-skeleton__body">
 					{ !! secondarySidebar && (
-						<div
+						<NavigableRegion
 							className="interface-interface-skeleton__secondary-sidebar"
-							role="region"
-							aria-label={ mergedLabels.secondarySidebar }
-							tabIndex="-1"
+							ariaLabel={ mergedLabels.secondarySidebar }
 						>
 							{ secondarySidebar }
-						</div>
+						</NavigableRegion>
 					) }
 					{ !! notices && (
 						<div className="interface-interface-skeleton__notices">
 							{ notices }
 						</div>
 					) }
-					<div
+					<NavigableRegion
 						className="interface-interface-skeleton__content"
-						role="region"
-						aria-label={ mergedLabels.body }
-						tabIndex="-1"
+						ariaLabel={ mergedLabels.body }
 					>
 						{ content }
-					</div>
+					</NavigableRegion>
 					{ !! sidebar && (
-						<div
+						<NavigableRegion
 							className="interface-interface-skeleton__sidebar"
-							role="region"
-							aria-label={ mergedLabels.sidebar }
-							tabIndex="-1"
+							ariaLabel={ mergedLabels.sidebar }
 						>
 							{ sidebar }
-						</div>
+						</NavigableRegion>
 					) }
 					{ !! actions && (
-						<div
+						<NavigableRegion
 							className="interface-interface-skeleton__actions"
-							role="region"
-							aria-label={ mergedLabels.actions }
-							tabIndex="-1"
+							ariaLabel={ mergedLabels.actions }
 						>
 							{ actions }
-						</div>
+						</NavigableRegion>
 					) }
 				</div>
 			</div>
 			{ !! footer && (
-				<div
+				<NavigableRegion
 					className="interface-interface-skeleton__footer"
-					role="region"
-					aria-label={ mergedLabels.footer }
-					tabIndex="-1"
+					ariaLabel={ mergedLabels.footer }
 				>
 					{ footer }
-				</div>
+				</NavigableRegion>
 			) }
 		</div>
 	);

package/src/components/interface-skeleton/style.scss

@@ -72,6 +72,16 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__content {
+	.interface-navigable-region__stacker {
+		// It's a flex item within a flex container with flex-direction column.
+		// Make sure it takes all the available height.
+		flex-grow: 1;
+		// Allow its flex items (the visual editor area) to take all the available
+		// height by making it also a flex container.
+		display: flex;
+		flex-direction: column;
+	}
+
 	flex-grow: 1;
 
 	// Treat as flex container to allow children to grow to occupy full
@@ -88,12 +98,10 @@ html.interface-interface-skeleton__html-container {
 	// to "bleed" through the header.
 	// See https://github.com/WordPress/gutenberg/issues/32631
 	z-index: z-index(".interface-interface-skeleton__content");
-
 }
 
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
-	display: block;
 	flex-shrink: 0;
 	position: absolute;
 	z-index: z-index(".interface-interface-skeleton__sidebar");
@@ -107,8 +115,14 @@ html.interface-interface-skeleton__html-container {
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		position: relative !important;
-		z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 		width: auto; // Keep the sidebar width flexible.
+
+		// Set this z-index only when the sidebar is opened. When it's closed, the
+		// button to open the sidebar that is shown when navigating regions needs to
+		// be above the footer. See `edit-post-layout__toggle-sidebar-panel`.
+		.is-sidebar-opened & {
+			z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
+		}
 	}
 }
 
@@ -121,6 +135,10 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+	.interface-navigable-region__stacker {
+		height: 100%;
+	}
+
 	@include break-medium() {
 		border-right: $border-width solid $gray-200;
 	}
@@ -173,7 +191,8 @@ html.interface-interface-skeleton__html-container {
 	width: $sidebar-width;
 	color: $gray-900;
 
-	&:focus {
+	&:focus,
+	&:focus-within {
 		top: auto;
 		bottom: 0;
 	}

package/src/components/navigable-region/README.md

@@ -0,0 +1,36 @@
+# NavigableRegion
+
+`NavigableRegion` renders an ARIA landmark region that's meant to be used together with the `useNavigateRegions` component from the `@wordpress/components` package. The ARIA landmark is a `div` element with a `role="region"` attribute and an `aria-label` attribute. It's made focusable by the means of a `tabindex="-1"` attribute so that `useNavigateRegions` can set focus on it and allow keyboard navigation through the regions in the editor.
+
+It also renders a child `div` element that is responsible to set a negative `z-index` stack level, to make sure the focus style is always visible, regardless of other elements that may cut-off the focus style outline otherwise.
+
+## Props
+
+### children
+
+The component that should be rendered as content.
+
+-   Type: React Element
+-   Required: Yes
+
+### className
+
+The CSS class that will be added to the classes of the wrapper div.
+
+-   Type: `String`
+-   Required: No
+
+### ariaLabel
+
+A meaningful name for the ARIA landmark region.
+
+-   Type: `String`
+-   Required: Yes
+
+### as
+
+The component used as the root of the region. Defaults to a `div` element.
+
+-   Type: `Component`
+-   Required: no
+-   Default: `div`

package/src/components/navigable-region/index.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+export default function NavigableRegion( {
+	children,
+	className,
+	ariaLabel,
+	as: Tag = 'div',
+	...props
+} ) {
+	return (
+		<Tag
+			className={ classnames( 'interface-navigable-region', className ) }
+			aria-label={ ariaLabel }
+			role="region"
+			tabIndex="-1"
+			{ ...props }
+		>
+			<div className="interface-navigable-region__stacker">
+				{ children }
+			</div>
+		</Tag>
+	);
+}