@wordpress/interface 4.21.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/build/components/interface-skeleton/index.js +13 -18
  3. package/build/components/interface-skeleton/index.js.map +1 -1
  4. package/build/components/navigable-region/index.js +3 -11
  5. package/build/components/navigable-region/index.js.map +1 -1
  6. package/build-module/components/interface-skeleton/index.js +14 -19
  7. package/build-module/components/interface-skeleton/index.js.map +1 -1
  8. package/build-module/components/navigable-region/index.js +3 -10
  9. package/build-module/components/navigable-region/index.js.map +1 -1
  10. package/build-style/style-rtl.css +17 -12
  11. package/build-style/style.css +17 -12
  12. package/package.json +15 -15
  13. package/src/components/interface-skeleton/index.js +17 -20
  14. package/src/components/interface-skeleton/style.scss +0 -12
  15. package/src/components/navigable-region/README.md +5 -7
  16. package/src/components/navigable-region/index.js +4 -12
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 5.1.0 (2023-01-02)
6
+
7
+ ## 5.0.0 (2022-12-14)
8
+
9
+ ### Breaking Changes
10
+
11
+ - Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
12
+
5
13
  ## 4.21.0 (2022-11-16)
6
14
 
7
15
  ## 4.20.0 (2022-11-02)
package/build/components/interface-skeleton/index.js CHANGED
@@ -57,18 +57,17 @@ function InterfaceSkeleton(_ref, ref) {
57
57
  secondarySidebar,
58
58
  notices,
59
59
  content,
60
- drawer,
61
60
  actions,
62
61
  labels,
63
62
  className,
63
+ enableRegionNavigation = true,
64
+ // Todo: does this need to be a prop.
65
+ // Can we use a dependency to keyboard-shortcuts directly?
64
66
  shortcuts
65
67
  } = _ref;
66
68
  const navigateRegionsProps = (0, _components.__unstableUseNavigateRegions)(shortcuts);
67
69
  useHTMLClass('interface-interface-skeleton__html-container');
68
70
  const defaultLabels = {
69
- /* translators: accessibility text for the nav bar landmark region. */
70
- drawer: (0, _i18n.__)('Drawer'),
71
-
72
71
  /* translators: accessibility text for the top bar landmark region. */
73
72
  header: (0, _i18n.__)('Header'),
74
73
 
@@ -105,25 +104,21 @@ function InterfaceSkeleton(_ref, ref) {
105
104
  }
106
105
  }
107
106
  };
108
- return (0, _element.createElement)("div", (0, _extends2.default)({}, navigateRegionsProps, {
109
- ref: (0, _compose.useMergeRefs)([ref, navigateRegionsProps.ref]),
107
+ return (0, _element.createElement)("div", (0, _extends2.default)({}, enableRegionNavigation ? navigateRegionsProps : {}, {
108
+ ref: (0, _compose.useMergeRefs)([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
110
109
  className: (0, _classnames.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
111
- }), !!drawer && (0, _element.createElement)(_navigableRegion.default, {
112
- className: "interface-interface-skeleton__drawer",
113
- ariaLabel: mergedLabels.drawer
114
- }, drawer), (0, _element.createElement)("div", {
110
+ }), (0, _element.createElement)("div", {
115
111
  className: "interface-interface-skeleton__editor"
116
112
  }, !!header && isDistractionFree && (0, _element.createElement)(_navigableRegion.default, {
113
+ as: _components.__unstableMotion.div,
117
114
  className: "interface-interface-skeleton__header",
118
115
  "aria-label": mergedLabels.header,
119
- motionProps: {
120
- initial: isDistractionFree ? 'hidden' : 'hover',
121
- whileHover: 'hover',
122
- variants: headerVariants,
123
- transition: {
124
- type: 'tween',
125
- delay: 0.8
126
- }
116
+ initial: isDistractionFree ? 'hidden' : 'hover',
117
+ whileHover: "hover",
118
+ variants: headerVariants,
119
+ transition: {
120
+ type: 'tween',
121
+ delay: 0.8
127
122
  }
128
123
  }, header), !!header && !isDistractionFree && (0, _element.createElement)(_navigableRegion.default, {
129
124
  className: "interface-interface-skeleton__header",
package/build/components/interface-skeleton/index.js.map CHANGED
@@ -1 +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","initial","whileHover","variants"],"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 { __unstableUseNavigateRegions as useNavigateRegions } 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\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<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__drawer\"\n\t\t\t\t\tariaLabel={ mergedLabels.drawer }\n\t\t\t\t>\n\t\t\t\t\t{ drawer }\n\t\t\t\t</NavigableRegion>\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<NavigableRegion\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\tmotionProps={ {\n\t\t\t\t\t\t\tinitial: isDistractionFree ? 'hidden' : 'hover',\n\t\t\t\t\t\t\twhileHover: 'hover',\n\t\t\t\t\t\t\tvariants: headerVariants,\n\t\t\t\t\t\t\ttransition: { type: 'tween', delay: 0.8 },\n\t\t\t\t\t\t} }\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"]}
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","actions","labels","enableRegionNavigation","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","undefined","motion","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\tenableRegionNavigation = true,\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{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\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 CHANGED
@@ -13,30 +13,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
13
13
 
14
14
  var _classnames = _interopRequireDefault(require("classnames"));
15
15
 
16
- var _components = require("@wordpress/components");
17
-
18
16
  /**
19
17
  * External dependencies
20
18
  */
21
-
22
- /**
23
- * WordPress dependencies
24
- */
25
19
  function NavigableRegion(_ref) {
26
20
  let {
27
21
  children,
28
22
  className,
29
23
  ariaLabel,
30
- motionProps = {}
24
+ as: Tag = 'div',
25
+ ...props
31
26
  } = _ref;
32
- const Tag = Object.keys(motionProps).length ? _components.__unstableMotion.div : 'div';
33
27
  return (0, _element.createElement)(Tag, (0, _extends2.default)({
34
28
  className: (0, _classnames.default)('interface-navigable-region', className),
35
29
  "aria-label": ariaLabel,
36
30
  role: "region",
37
31
  tabIndex: "-1"
38
- }, motionProps), (0, _element.createElement)("div", {
39
- className: "interface-navigable-region__stacker"
40
- }, children));
32
+ }, props), children);
41
33
  }
42
34
  //# sourceMappingURL=index.js.map
package/build/components/navigable-region/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["NavigableRegion","children","className","ariaLabel","motionProps","Tag","Object","keys","length","motion","div"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,eAAT,OAKX;AAAA,MALqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,WAAW,GAAG;AAJ0B,GAKrC;AACH,QAAMC,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAaH,WAAb,EAA2BI,MAA3B,GAAoCC,6BAAOC,GAA3C,GAAiD,KAA7D;AAEA,SACC,4BAAC,GAAD;AACC,IAAA,SAAS,EAAG,yBAAY,4BAAZ,EAA0CR,SAA1C,CADb;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMC,WALN,GAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGH,QADH,CAPD,CADD;AAaA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tmotionProps = {},\n} ) {\n\tconst Tag = Object.keys( motionProps ).length ? motion.div : 'div';\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{ ...motionProps }\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"]}
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,GAOGL,QAPH,CADD;AAWA","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{ children }\n\t\t</Tag>\n\t);\n}\n"]}
package/build-module/components/interface-skeleton/index.js CHANGED
@@ -10,7 +10,7 @@ import classnames from 'classnames';
10
10
  */
11
11
 
12
12
  import { forwardRef, useEffect } from '@wordpress/element';
13
- import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
13
+ import { __unstableUseNavigateRegions as useNavigateRegions, __unstableMotion as motion } from '@wordpress/components';
14
14
  import { __ } from '@wordpress/i18n';
15
15
  import { useMergeRefs } from '@wordpress/compose';
16
16
  /**
@@ -44,18 +44,17 @@ function InterfaceSkeleton(_ref, ref) {
44
44
  secondarySidebar,
45
45
  notices,
46
46
  content,
47
- drawer,
48
47
  actions,
49
48
  labels,
50
49
  className,
50
+ enableRegionNavigation = true,
51
+ // Todo: does this need to be a prop.
52
+ // Can we use a dependency to keyboard-shortcuts directly?
51
53
  shortcuts
52
54
  } = _ref;
53
55
  const navigateRegionsProps = useNavigateRegions(shortcuts);
54
56
  useHTMLClass('interface-interface-skeleton__html-container');
55
57
  const defaultLabels = {
56
- /* translators: accessibility text for the nav bar landmark region. */
57
- drawer: __('Drawer'),
58
-
59
58
  /* translators: accessibility text for the top bar landmark region. */
60
59
  header: __('Header'),
61
60
 
@@ -92,25 +91,21 @@ function InterfaceSkeleton(_ref, ref) {
92
91
  }
93
92
  }
94
93
  };
95
- return createElement("div", _extends({}, navigateRegionsProps, {
96
- ref: useMergeRefs([ref, navigateRegionsProps.ref]),
94
+ return createElement("div", _extends({}, enableRegionNavigation ? navigateRegionsProps : {}, {
95
+ ref: useMergeRefs([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
97
96
  className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
98
- }), !!drawer && createElement(NavigableRegion, {
99
- className: "interface-interface-skeleton__drawer",
100
- ariaLabel: mergedLabels.drawer
101
- }, drawer), createElement("div", {
97
+ }), createElement("div", {
102
98
  className: "interface-interface-skeleton__editor"
103
99
  }, !!header && isDistractionFree && createElement(NavigableRegion, {
100
+ as: motion.div,
104
101
  className: "interface-interface-skeleton__header",
105
102
  "aria-label": mergedLabels.header,
106
- motionProps: {
107
- initial: isDistractionFree ? 'hidden' : 'hover',
108
- whileHover: 'hover',
109
- variants: headerVariants,
110
- transition: {
111
- type: 'tween',
112
- delay: 0.8
113
- }
103
+ initial: isDistractionFree ? 'hidden' : 'hover',
104
+ whileHover: "hover",
105
+ variants: headerVariants,
106
+ transition: {
107
+ type: 'tween',
108
+ delay: 0.8
114
109
  }
115
110
  }, header), !!header && !isDistractionFree && createElement(NavigableRegion, {
116
111
  className: "interface-interface-skeleton__header",
package/build-module/components/interface-skeleton/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__","useMergeRefs","NavigableRegion","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","initial","whileHover","variants"],"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 { __unstableUseNavigateRegions as useNavigateRegions } 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\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<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__drawer\"\n\t\t\t\t\tariaLabel={ mergedLabels.drawer }\n\t\t\t\t>\n\t\t\t\t\t{ drawer }\n\t\t\t\t</NavigableRegion>\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<NavigableRegion\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\tmotionProps={ {\n\t\t\t\t\t\t\tinitial: isDistractionFree ? 'hidden' : 'hover',\n\t\t\t\t\t\t\twhileHover: 'hover',\n\t\t\t\t\t\t\tvariants: headerVariants,\n\t\t\t\t\t\t\ttransition: { type: 'tween', delay: 0.8 },\n\t\t\t\t\t\t} }\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"]}
1
+ {"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","enableRegionNavigation","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","undefined","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\tenableRegionNavigation = true,\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{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\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 CHANGED
@@ -5,26 +5,19 @@ import { createElement } from "@wordpress/element";
5
5
  * External dependencies
6
6
  */
7
7
  import classnames from 'classnames';
8
- /**
9
- * WordPress dependencies
10
- */
11
-
12
- import { __unstableMotion as motion } from '@wordpress/components';
13
8
  export default function NavigableRegion(_ref) {
14
9
  let {
15
10
  children,
16
11
  className,
17
12
  ariaLabel,
18
- motionProps = {}
13
+ as: Tag = 'div',
14
+ ...props
19
15
  } = _ref;
20
- const Tag = Object.keys(motionProps).length ? motion.div : 'div';
21
16
  return createElement(Tag, _extends({
22
17
  className: classnames('interface-navigable-region', className),
23
18
  "aria-label": ariaLabel,
24
19
  role: "region",
25
20
  tabIndex: "-1"
26
- }, motionProps), createElement("div", {
27
- className: "interface-navigable-region__stacker"
28
- }, children));
21
+ }, props), children);
29
22
  }
30
23
  //# sourceMappingURL=index.js.map
package/build-module/components/navigable-region/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["classnames","__unstableMotion","motion","NavigableRegion","children","className","ariaLabel","motionProps","Tag","Object","keys","length","div"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,gBAAgB,IAAIC,MAA7B,QAA2C,uBAA3C;AAEA,eAAe,SAASC,eAAT,OAKX;AAAA,MALqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,WAAW,GAAG;AAJ0B,GAKrC;AACH,QAAMC,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAaH,WAAb,EAA2BI,MAA3B,GAAoCT,MAAM,CAACU,GAA3C,GAAiD,KAA7D;AAEA,SACC,cAAC,GAAD;AACC,IAAA,SAAS,EAAGZ,UAAU,CAAE,4BAAF,EAAgCK,SAAhC,CADvB;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMC,WALN,GAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGH,QADH,CAPD,CADD;AAaA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tmotionProps = {},\n} ) {\n\tconst Tag = Object.keys( motionProps ).length ? motion.div : 'div';\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{ ...motionProps }\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"]}
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,GAOGL,QAPH,CADD;AAWA","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{ children }\n\t\t</Tag>\n\t);\n}\n"]}
package/build-style/style-rtl.css CHANGED
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Converts a hex value into the rgb equivalent.
3
+ *
4
+ * @param {string} hex - the hexadecimal value to convert
5
+ * @return {string} comma separated rgb values
6
+ */
1
7
  /**
2
8
  * Colors
3
9
  */
@@ -11,6 +17,12 @@
11
17
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
12
18
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
13
19
  */
20
+ /**
21
+ * Converts a hex value into the rgb equivalent.
22
+ *
23
+ * @param {string} hex - the hexadecimal value to convert
24
+ * @return {string} comma separated rgb values
25
+ */
14
26
  /**
15
27
  * Colors
16
28
  */
@@ -46,15 +58,15 @@
46
58
  * @param {string} hex - the hexadecimal value to convert
47
59
  * @return {string} comma separated rgb values
48
60
  */
49
- /**
50
- * Breakpoint mixins
51
- */
52
61
  /**
53
62
  * Long content fade mixin
54
63
  *
55
64
  * Creates a fading overlay to signify that the content is longer
56
65
  * than the space allows.
57
66
  */
67
+ /**
68
+ * Breakpoint mixins
69
+ */
58
70
  /**
59
71
  * Focus styles.
60
72
  */
@@ -82,6 +94,8 @@
82
94
  --wp-admin-theme-color-darker-20: #005a87;
83
95
  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
84
96
  --wp-admin-border-width-focus: 2px;
97
+ --wp-block-synced-color: #7a00df;
98
+ --wp-block-synced-color--rgb: 122, 0, 223;
85
99
  }
86
100
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
87
101
  :root {
@@ -306,9 +320,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
306
320
  overflow: auto;
307
321
  z-index: 20;
308
322
  }
309
- .interface-interface-skeleton__content .interface-navigable-region__stacker {
310
- flex-grow: 1;
311
- }
312
323
 
313
324
  .interface-interface-skeleton__secondary-sidebar,
314
325
  .interface-interface-skeleton__sidebar {
@@ -400,12 +411,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
400
411
  bottom: 0;
401
412
  }
402
413
 
403
- @media (min-width: 782px) {
404
- .interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
405
- height: calc(100% - 25px);
406
- }
407
- }
408
-
409
414
  .interface-more-menu-dropdown {
410
415
  margin-right: -4px;
411
416
  }
package/build-style/style.css CHANGED
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Converts a hex value into the rgb equivalent.
3
+ *
4
+ * @param {string} hex - the hexadecimal value to convert
5
+ * @return {string} comma separated rgb values
6
+ */
1
7
  /**
2
8
  * Colors
3
9
  */
@@ -11,6 +17,12 @@
11
17
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
12
18
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
13
19
  */
20
+ /**
21
+ * Converts a hex value into the rgb equivalent.
22
+ *
23
+ * @param {string} hex - the hexadecimal value to convert
24
+ * @return {string} comma separated rgb values
25
+ */
14
26
  /**
15
27
  * Colors
16
28
  */
@@ -46,15 +58,15 @@
46
58
  * @param {string} hex - the hexadecimal value to convert
47
59
  * @return {string} comma separated rgb values
48
60
  */
49
- /**
50
- * Breakpoint mixins
51
- */
52
61
  /**
53
62
  * Long content fade mixin
54
63
  *
55
64
  * Creates a fading overlay to signify that the content is longer
56
65
  * than the space allows.
57
66
  */
67
+ /**
68
+ * Breakpoint mixins
69
+ */
58
70
  /**
59
71
  * Focus styles.
60
72
  */
@@ -82,6 +94,8 @@
82
94
  --wp-admin-theme-color-darker-20: #005a87;
83
95
  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
84
96
  --wp-admin-border-width-focus: 2px;
97
+ --wp-block-synced-color: #7a00df;
98
+ --wp-block-synced-color--rgb: 122, 0, 223;
85
99
  }
86
100
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
87
101
  :root {
@@ -306,9 +320,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
306
320
  overflow: auto;
307
321
  z-index: 20;
308
322
  }
309
- .interface-interface-skeleton__content .interface-navigable-region__stacker {
310
- flex-grow: 1;
311
- }
312
323
 
313
324
  .interface-interface-skeleton__secondary-sidebar,
314
325
  .interface-interface-skeleton__sidebar {
@@ -400,12 +411,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
400
411
  bottom: 0;
401
412
  }
402
413
 
403
- @media (min-width: 782px) {
404
- .interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
405
- height: calc(100% - 25px);
406
- }
407
- }
408
-
409
414
  .interface-more-menu-dropdown {
410
415
  margin-left: -4px;
411
416
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/interface",
3
- "version": "4.21.0",
3
+ "version": "5.1.0",
4
4
  "description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -32,25 +32,25 @@
32
32
  ],
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.16.0",
35
- "@wordpress/a11y": "^3.22.0",
36
- "@wordpress/components": "^22.1.0",
37
- "@wordpress/compose": "^5.20.0",
38
- "@wordpress/data": "^7.6.0",
39
- "@wordpress/deprecated": "^3.22.0",
40
- "@wordpress/element": "^4.20.0",
41
- "@wordpress/i18n": "^4.22.0",
42
- "@wordpress/icons": "^9.13.0",
43
- "@wordpress/plugins": "^4.20.0",
44
- "@wordpress/preferences": "^2.14.0",
45
- "@wordpress/viewport": "^4.20.0",
35
+ "@wordpress/a11y": "^3.24.0",
36
+ "@wordpress/components": "^23.1.0",
37
+ "@wordpress/compose": "^6.1.0",
38
+ "@wordpress/data": "^8.1.0",
39
+ "@wordpress/deprecated": "^3.24.0",
40
+ "@wordpress/element": "^5.1.0",
41
+ "@wordpress/i18n": "^4.24.0",
42
+ "@wordpress/icons": "^9.15.0",
43
+ "@wordpress/plugins": "^5.1.0",
44
+ "@wordpress/preferences": "^3.1.0",
45
+ "@wordpress/viewport": "^5.1.0",
46
46
  "classnames": "^2.3.1"
47
47
  },
48
48
  "peerDependencies": {
49
- "react": "^17.0.0",
50
- "react-dom": "^17.0.0"
49
+ "react": "^18.0.0",
50
+ "react-dom": "^18.0.0"
51
51
  },
52
52
  "publishConfig": {
53
53
  "access": "public"
54
54
  },
55
- "gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
55
+ "gitHead": "200bee7b06b15f6fa655e25b6ab69cbd6b49a357"
56
56
  }
package/src/components/interface-skeleton/index.js CHANGED
@@ -7,7 +7,10 @@ import classnames from 'classnames';
7
7
  * WordPress dependencies
8
8
  */
9
9
  import { forwardRef, useEffect } from '@wordpress/element';
10
- import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
10
+ import {
11
+ __unstableUseNavigateRegions as useNavigateRegions,
12
+ __unstableMotion as motion,
13
+ } from '@wordpress/components';
11
14
  import { __ } from '@wordpress/i18n';
12
15
  import { useMergeRefs } from '@wordpress/compose';
13
16
 
@@ -40,10 +43,12 @@ function InterfaceSkeleton(
40
43
  secondarySidebar,
41
44
  notices,
42
45
  content,
43
- drawer,
44
46
  actions,
45
47
  labels,
46
48
  className,
49
+ enableRegionNavigation = true,
50
+ // Todo: does this need to be a prop.
51
+ // Can we use a dependency to keyboard-shortcuts directly?
47
52
  shortcuts,
48
53
  },
49
54
  ref
@@ -53,8 +58,6 @@ function InterfaceSkeleton(
53
58
  useHTMLClass( 'interface-interface-skeleton__html-container' );
54
59
 
55
60
  const defaultLabels = {
56
- /* translators: accessibility text for the nav bar landmark region. */
57
- drawer: __( 'Drawer' ),
58
61
  /* translators: accessibility text for the top bar landmark region. */
59
62
  header: __( 'Header' ),
60
63
  /* translators: accessibility text for the content landmark region. */
@@ -81,8 +84,11 @@ function InterfaceSkeleton(
81
84
 
82
85
  return (
83
86
  <div
84
- { ...navigateRegionsProps }
85
- ref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }
87
+ { ...( enableRegionNavigation ? navigateRegionsProps : {} ) }
88
+ ref={ useMergeRefs( [
89
+ ref,
90
+ enableRegionNavigation ? navigateRegionsProps.ref : undefined,
91
+ ] ) }
86
92
  className={ classnames(
87
93
  className,
88
94
  'interface-interface-skeleton',
@@ -90,25 +96,16 @@ function InterfaceSkeleton(
90
96
  !! footer && 'has-footer'
91
97
  ) }
92
98
  >
93
- { !! drawer && (
94
- <NavigableRegion
95
- className="interface-interface-skeleton__drawer"
96
- ariaLabel={ mergedLabels.drawer }
97
- >
98
- { drawer }
99
- </NavigableRegion>
100
- ) }
101
99
  <div className="interface-interface-skeleton__editor">
102
100
  { !! header && isDistractionFree && (
103
101
  <NavigableRegion
102
+ as={ motion.div }
104
103
  className="interface-interface-skeleton__header"
105
104
  aria-label={ mergedLabels.header }
106
- motionProps={ {
107
- initial: isDistractionFree ? 'hidden' : 'hover',
108
- whileHover: 'hover',
109
- variants: headerVariants,
110
- transition: { type: 'tween', delay: 0.8 },
111
- } }
105
+ initial={ isDistractionFree ? 'hidden' : 'hover' }
106
+ whileHover="hover"
107
+ variants={ headerVariants }
108
+ transition={ { type: 'tween', delay: 0.8 } }
112
109
  >
113
110
  { header }
114
111
  </NavigableRegion>
package/src/components/interface-skeleton/style.scss CHANGED
@@ -72,10 +72,6 @@ html.interface-interface-skeleton__html-container {
72
72
  }
73
73
 
74
74
  .interface-interface-skeleton__content {
75
- .interface-navigable-region__stacker {
76
- flex-grow: 1;
77
- }
78
-
79
75
  flex-grow: 1;
80
76
 
81
77
  // Treat as flex container to allow children to grow to occupy full
@@ -92,7 +88,6 @@ html.interface-interface-skeleton__html-container {
92
88
  // to "bleed" through the header.
93
89
  // See https://github.com/WordPress/gutenberg/issues/32631
94
90
  z-index: z-index(".interface-interface-skeleton__content");
95
-
96
91
  }
97
92
 
98
93
  .interface-interface-skeleton__secondary-sidebar,
@@ -188,10 +183,3 @@ html.interface-interface-skeleton__html-container {
188
183
  bottom: 0;
189
184
  }
190
185
  }
191
-
192
- // Footer is visible from medium so we subtract footer's height
193
- .interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
194
- @include break-medium() {
195
- height: calc(100% - #{$button-size-small + $border-width});
196
- }
197
- }
package/src/components/navigable-region/README.md CHANGED
@@ -4,8 +4,6 @@
4
4
 
5
5
  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.
6
6
 
7
- It can use a CSS animation via the `motion` component.
8
-
9
7
  ## Props
10
8
 
11
9
  ### children
@@ -29,10 +27,10 @@ A meaningful name for the ARIA landmark region.
29
27
  - Type: `String`
30
28
  - Required: Yes
31
29
 
32
- ### motionProps
30
+ ### as
33
31
 
34
- Properties of `motionProps` object will be used by the `motion` component to set a CSS animation on the wrapper div.
32
+ The component used as the root of the region. Defaults to a `div` element.
35
33
 
36
- - Type: `Object`
37
- - Required: No
38
- - Default: `{}`
34
+ - Type: `Component`
35
+ - Required: no
36
+ - Default: `div`
package/src/components/navigable-region/index.js CHANGED
@@ -3,30 +3,22 @@
3
3
  */
4
4
  import classnames from 'classnames';
5
5
 
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { __unstableMotion as motion } from '@wordpress/components';
10
-
11
6
  export default function NavigableRegion( {
12
7
  children,
13
8
  className,
14
9
  ariaLabel,
15
- motionProps = {},
10
+ as: Tag = 'div',
11
+ ...props
16
12
  } ) {
17
- const Tag = Object.keys( motionProps ).length ? motion.div : 'div';
18
-
19
13
  return (
20
14
  <Tag
21
15
  className={ classnames( 'interface-navigable-region', className ) }
22
16
  aria-label={ ariaLabel }
23
17
  role="region"
24
18
  tabIndex="-1"
25
- { ...motionProps }
19
+ { ...props }
26
20
  >
27
- <div className="interface-navigable-region__stacker">
28
- { children }
29
- </div>
21
+ { children }
30
22
  </Tag>
31
23
  );
32
24
  }