@wordpress/interface 4.19.0 → 4.21.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.
- package/CHANGELOG.md +4 -0
- package/build/components/index.js +8 -0
- package/build/components/index.js.map +1 -1
- package/build/components/interface-skeleton/index.js +30 -38
- package/build/components/interface-skeleton/index.js.map +1 -1
- package/build/components/navigable-region/index.js +42 -0
- package/build/components/navigable-region/index.js.map +1 -0
- package/build-module/components/index.js +1 -0
- package/build-module/components/index.js.map +1 -1
- package/build-module/components/interface-skeleton/index.js +30 -39
- package/build-module/components/interface-skeleton/index.js.map +1 -1
- package/build-module/components/navigable-region/index.js +30 -0
- package/build-module/components/navigable-region/index.js.map +1 -0
- package/build-style/style-rtl.css +14 -3
- package/build-style/style.css +14 -3
- package/complementary-area-context/index.js +12 -0
- package/package.json +13 -13
- package/src/components/index.js +1 -0
- package/src/components/interface-skeleton/index.js +35 -47
- package/src/components/interface-skeleton/style.scss +20 -3
- package/src/components/navigable-region/README.md +38 -0
- package/src/components/navigable-region/index.js +32 -0
package/CHANGELOG.md
CHANGED
|
@@ -47,6 +47,12 @@ Object.defineProperty(exports, "MoreMenuFeatureToggle", {
|
|
|
47
47
|
return _moreMenuFeatureToggle.default;
|
|
48
48
|
}
|
|
49
49
|
});
|
|
50
|
+
Object.defineProperty(exports, "NavigableRegion", {
|
|
51
|
+
enumerable: true,
|
|
52
|
+
get: function () {
|
|
53
|
+
return _navigableRegion.default;
|
|
54
|
+
}
|
|
55
|
+
});
|
|
50
56
|
Object.defineProperty(exports, "PinnedItems", {
|
|
51
57
|
enumerable: true,
|
|
52
58
|
get: function () {
|
|
@@ -101,4 +107,6 @@ var _preferencesModalTabs = _interopRequireDefault(require("./preferences-modal-
|
|
|
101
107
|
var _preferencesModalSection = _interopRequireDefault(require("./preferences-modal-section"));
|
|
102
108
|
|
|
103
109
|
var _preferencesModalBaseOption = _interopRequireDefault(require("./preferences-modal-base-option"));
|
|
110
|
+
|
|
111
|
+
var _navigableRegion = _interopRequireDefault(require("./navigable-region"));
|
|
104
112
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"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"]}
|
|
@@ -19,6 +19,8 @@ var _i18n = require("@wordpress/i18n");
|
|
|
19
19
|
|
|
20
20
|
var _compose = require("@wordpress/compose");
|
|
21
21
|
|
|
22
|
+
var _navigableRegion = _interopRequireDefault(require("../navigable-region"));
|
|
23
|
+
|
|
22
24
|
/**
|
|
23
25
|
* External dependencies
|
|
24
26
|
*/
|
|
@@ -26,6 +28,10 @@ var _compose = require("@wordpress/compose");
|
|
|
26
28
|
/**
|
|
27
29
|
* WordPress dependencies
|
|
28
30
|
*/
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Internal dependencies
|
|
34
|
+
*/
|
|
29
35
|
function useHTMLClass(className) {
|
|
30
36
|
(0, _element.useEffect)(() => {
|
|
31
37
|
const element = document && document.querySelector(`html:not(.${className})`);
|
|
@@ -102,61 +108,47 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
102
108
|
return (0, _element.createElement)("div", (0, _extends2.default)({}, navigateRegionsProps, {
|
|
103
109
|
ref: (0, _compose.useMergeRefs)([ref, navigateRegionsProps.ref]),
|
|
104
110
|
className: (0, _classnames.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
105
|
-
}), !!drawer && (0, _element.createElement)(
|
|
111
|
+
}), !!drawer && (0, _element.createElement)(_navigableRegion.default, {
|
|
106
112
|
className: "interface-interface-skeleton__drawer",
|
|
107
|
-
|
|
108
|
-
"aria-label": mergedLabels.drawer,
|
|
109
|
-
tabIndex: "-1"
|
|
113
|
+
ariaLabel: mergedLabels.drawer
|
|
110
114
|
}, drawer), (0, _element.createElement)("div", {
|
|
111
115
|
className: "interface-interface-skeleton__editor"
|
|
112
|
-
}, !!header && isDistractionFree && (0, _element.createElement)(
|
|
113
|
-
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
114
|
-
whileHover: "hover",
|
|
115
|
-
variants: headerVariants,
|
|
116
|
-
transition: {
|
|
117
|
-
type: 'tween',
|
|
118
|
-
delay: 0.8
|
|
119
|
-
},
|
|
116
|
+
}, !!header && isDistractionFree && (0, _element.createElement)(_navigableRegion.default, {
|
|
120
117
|
className: "interface-interface-skeleton__header",
|
|
121
|
-
role: "region",
|
|
122
118
|
"aria-label": mergedLabels.header,
|
|
123
|
-
|
|
124
|
-
|
|
119
|
+
motionProps: {
|
|
120
|
+
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
121
|
+
whileHover: 'hover',
|
|
122
|
+
variants: headerVariants,
|
|
123
|
+
transition: {
|
|
124
|
+
type: 'tween',
|
|
125
|
+
delay: 0.8
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}, header), !!header && !isDistractionFree && (0, _element.createElement)(_navigableRegion.default, {
|
|
125
129
|
className: "interface-interface-skeleton__header",
|
|
126
|
-
|
|
127
|
-
"aria-label": mergedLabels.header,
|
|
128
|
-
tabIndex: "-1"
|
|
130
|
+
ariaLabel: mergedLabels.header
|
|
129
131
|
}, header), isDistractionFree && (0, _element.createElement)("div", {
|
|
130
132
|
className: "interface-interface-skeleton__header"
|
|
131
133
|
}, editorNotices), (0, _element.createElement)("div", {
|
|
132
134
|
className: "interface-interface-skeleton__body"
|
|
133
|
-
}, !!secondarySidebar && (0, _element.createElement)(
|
|
135
|
+
}, !!secondarySidebar && (0, _element.createElement)(_navigableRegion.default, {
|
|
134
136
|
className: "interface-interface-skeleton__secondary-sidebar",
|
|
135
|
-
|
|
136
|
-
"aria-label": mergedLabels.secondarySidebar,
|
|
137
|
-
tabIndex: "-1"
|
|
137
|
+
ariaLabel: mergedLabels.secondarySidebar
|
|
138
138
|
}, secondarySidebar), !!notices && (0, _element.createElement)("div", {
|
|
139
139
|
className: "interface-interface-skeleton__notices"
|
|
140
|
-
}, notices), (0, _element.createElement)(
|
|
140
|
+
}, notices), (0, _element.createElement)(_navigableRegion.default, {
|
|
141
141
|
className: "interface-interface-skeleton__content",
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
tabIndex: "-1"
|
|
145
|
-
}, content), !!sidebar && (0, _element.createElement)("div", {
|
|
142
|
+
ariaLabel: mergedLabels.body
|
|
143
|
+
}, content), !!sidebar && (0, _element.createElement)(_navigableRegion.default, {
|
|
146
144
|
className: "interface-interface-skeleton__sidebar",
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
tabIndex: "-1"
|
|
150
|
-
}, sidebar), !!actions && (0, _element.createElement)("div", {
|
|
145
|
+
ariaLabel: mergedLabels.sidebar
|
|
146
|
+
}, sidebar), !!actions && (0, _element.createElement)(_navigableRegion.default, {
|
|
151
147
|
className: "interface-interface-skeleton__actions",
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
tabIndex: "-1"
|
|
155
|
-
}, actions))), !!footer && (0, _element.createElement)("div", {
|
|
148
|
+
ariaLabel: mergedLabels.actions
|
|
149
|
+
}, actions))), !!footer && (0, _element.createElement)(_navigableRegion.default, {
|
|
156
150
|
className: "interface-interface-skeleton__footer",
|
|
157
|
-
|
|
158
|
-
"aria-label": mergedLabels.footer,
|
|
159
|
-
tabIndex: "-1"
|
|
151
|
+
ariaLabel: mergedLabels.footer
|
|
160
152
|
}, footer));
|
|
161
153
|
}
|
|
162
154
|
|
|
@@ -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"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;
|
|
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"]}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = NavigableRegion;
|
|
9
|
+
|
|
10
|
+
var _element = require("@wordpress/element");
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
|
|
16
|
+
var _components = require("@wordpress/components");
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* External dependencies
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* WordPress dependencies
|
|
24
|
+
*/
|
|
25
|
+
function NavigableRegion(_ref) {
|
|
26
|
+
let {
|
|
27
|
+
children,
|
|
28
|
+
className,
|
|
29
|
+
ariaLabel,
|
|
30
|
+
motionProps = {}
|
|
31
|
+
} = _ref;
|
|
32
|
+
const Tag = Object.keys(motionProps).length ? _components.__unstableMotion.div : 'div';
|
|
33
|
+
return (0, _element.createElement)(Tag, (0, _extends2.default)({
|
|
34
|
+
className: (0, _classnames.default)('interface-navigable-region', className),
|
|
35
|
+
"aria-label": ariaLabel,
|
|
36
|
+
role: "region",
|
|
37
|
+
tabIndex: "-1"
|
|
38
|
+
}, motionProps), (0, _element.createElement)("div", {
|
|
39
|
+
className: "interface-navigable-region__stacker"
|
|
40
|
+
}, children));
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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"]}
|
|
@@ -10,4 +10,5 @@ export { default as PreferencesModal } from './preferences-modal';
|
|
|
10
10
|
export { default as PreferencesModalTabs } from './preferences-modal-tabs';
|
|
11
11
|
export { default as PreferencesModalSection } from './preferences-modal-section';
|
|
12
12
|
export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';
|
|
13
|
+
export { default as NavigableRegion } from './navigable-region';
|
|
13
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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"]}
|
|
1
|
+
{"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"]}
|
|
@@ -10,9 +10,14 @@ import classnames from 'classnames';
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
import { forwardRef, useEffect } from '@wordpress/element';
|
|
13
|
-
import { __unstableUseNavigateRegions as useNavigateRegions
|
|
13
|
+
import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
|
|
14
14
|
import { __ } from '@wordpress/i18n';
|
|
15
15
|
import { useMergeRefs } from '@wordpress/compose';
|
|
16
|
+
/**
|
|
17
|
+
* Internal dependencies
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
import NavigableRegion from '../navigable-region';
|
|
16
21
|
|
|
17
22
|
function useHTMLClass(className) {
|
|
18
23
|
useEffect(() => {
|
|
@@ -90,61 +95,47 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
90
95
|
return createElement("div", _extends({}, navigateRegionsProps, {
|
|
91
96
|
ref: useMergeRefs([ref, navigateRegionsProps.ref]),
|
|
92
97
|
className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
93
|
-
}), !!drawer && createElement(
|
|
98
|
+
}), !!drawer && createElement(NavigableRegion, {
|
|
94
99
|
className: "interface-interface-skeleton__drawer",
|
|
95
|
-
|
|
96
|
-
"aria-label": mergedLabels.drawer,
|
|
97
|
-
tabIndex: "-1"
|
|
100
|
+
ariaLabel: mergedLabels.drawer
|
|
98
101
|
}, drawer), createElement("div", {
|
|
99
102
|
className: "interface-interface-skeleton__editor"
|
|
100
|
-
}, !!header && isDistractionFree && createElement(
|
|
101
|
-
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
102
|
-
whileHover: "hover",
|
|
103
|
-
variants: headerVariants,
|
|
104
|
-
transition: {
|
|
105
|
-
type: 'tween',
|
|
106
|
-
delay: 0.8
|
|
107
|
-
},
|
|
103
|
+
}, !!header && isDistractionFree && createElement(NavigableRegion, {
|
|
108
104
|
className: "interface-interface-skeleton__header",
|
|
109
|
-
role: "region",
|
|
110
105
|
"aria-label": mergedLabels.header,
|
|
111
|
-
|
|
112
|
-
|
|
106
|
+
motionProps: {
|
|
107
|
+
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
108
|
+
whileHover: 'hover',
|
|
109
|
+
variants: headerVariants,
|
|
110
|
+
transition: {
|
|
111
|
+
type: 'tween',
|
|
112
|
+
delay: 0.8
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}, header), !!header && !isDistractionFree && createElement(NavigableRegion, {
|
|
113
116
|
className: "interface-interface-skeleton__header",
|
|
114
|
-
|
|
115
|
-
"aria-label": mergedLabels.header,
|
|
116
|
-
tabIndex: "-1"
|
|
117
|
+
ariaLabel: mergedLabels.header
|
|
117
118
|
}, header), isDistractionFree && createElement("div", {
|
|
118
119
|
className: "interface-interface-skeleton__header"
|
|
119
120
|
}, editorNotices), createElement("div", {
|
|
120
121
|
className: "interface-interface-skeleton__body"
|
|
121
|
-
}, !!secondarySidebar && createElement(
|
|
122
|
+
}, !!secondarySidebar && createElement(NavigableRegion, {
|
|
122
123
|
className: "interface-interface-skeleton__secondary-sidebar",
|
|
123
|
-
|
|
124
|
-
"aria-label": mergedLabels.secondarySidebar,
|
|
125
|
-
tabIndex: "-1"
|
|
124
|
+
ariaLabel: mergedLabels.secondarySidebar
|
|
126
125
|
}, secondarySidebar), !!notices && createElement("div", {
|
|
127
126
|
className: "interface-interface-skeleton__notices"
|
|
128
|
-
}, notices), createElement(
|
|
127
|
+
}, notices), createElement(NavigableRegion, {
|
|
129
128
|
className: "interface-interface-skeleton__content",
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
tabIndex: "-1"
|
|
133
|
-
}, content), !!sidebar && createElement("div", {
|
|
129
|
+
ariaLabel: mergedLabels.body
|
|
130
|
+
}, content), !!sidebar && createElement(NavigableRegion, {
|
|
134
131
|
className: "interface-interface-skeleton__sidebar",
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
tabIndex: "-1"
|
|
138
|
-
}, sidebar), !!actions && createElement("div", {
|
|
132
|
+
ariaLabel: mergedLabels.sidebar
|
|
133
|
+
}, sidebar), !!actions && createElement(NavigableRegion, {
|
|
139
134
|
className: "interface-interface-skeleton__actions",
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
tabIndex: "-1"
|
|
143
|
-
}, actions))), !!footer && createElement("div", {
|
|
135
|
+
ariaLabel: mergedLabels.actions
|
|
136
|
+
}, actions))), !!footer && createElement(NavigableRegion, {
|
|
144
137
|
className: "interface-interface-skeleton__footer",
|
|
145
|
-
|
|
146
|
-
"aria-label": mergedLabels.footer,
|
|
147
|
-
tabIndex: "-1"
|
|
138
|
+
ariaLabel: mergedLabels.footer
|
|
148
139
|
}, footer));
|
|
149
140
|
}
|
|
150
141
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","
|
|
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"]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import { createElement } from "@wordpress/element";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* External dependencies
|
|
6
|
+
*/
|
|
7
|
+
import classnames from 'classnames';
|
|
8
|
+
/**
|
|
9
|
+
* WordPress dependencies
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
import { __unstableMotion as motion } from '@wordpress/components';
|
|
13
|
+
export default function NavigableRegion(_ref) {
|
|
14
|
+
let {
|
|
15
|
+
children,
|
|
16
|
+
className,
|
|
17
|
+
ariaLabel,
|
|
18
|
+
motionProps = {}
|
|
19
|
+
} = _ref;
|
|
20
|
+
const Tag = Object.keys(motionProps).length ? motion.div : 'div';
|
|
21
|
+
return createElement(Tag, _extends({
|
|
22
|
+
className: classnames('interface-navigable-region', className),
|
|
23
|
+
"aria-label": ariaLabel,
|
|
24
|
+
role: "region",
|
|
25
|
+
tabIndex: "-1"
|
|
26
|
+
}, motionProps), createElement("div", {
|
|
27
|
+
className: "interface-navigable-region__stacker"
|
|
28
|
+
}, children));
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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"]}
|
|
@@ -306,10 +306,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
306
306
|
overflow: auto;
|
|
307
307
|
z-index: 20;
|
|
308
308
|
}
|
|
309
|
+
.interface-interface-skeleton__content .interface-navigable-region__stacker {
|
|
310
|
+
flex-grow: 1;
|
|
311
|
+
}
|
|
309
312
|
|
|
310
313
|
.interface-interface-skeleton__secondary-sidebar,
|
|
311
314
|
.interface-interface-skeleton__sidebar {
|
|
312
|
-
display: block;
|
|
313
315
|
flex-shrink: 0;
|
|
314
316
|
position: absolute;
|
|
315
317
|
z-index: 100000;
|
|
@@ -324,9 +326,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
324
326
|
.interface-interface-skeleton__secondary-sidebar,
|
|
325
327
|
.interface-interface-skeleton__sidebar {
|
|
326
328
|
position: relative !important;
|
|
327
|
-
z-index: 90;
|
|
328
329
|
width: auto;
|
|
329
330
|
}
|
|
331
|
+
.is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,
|
|
332
|
+
.is-sidebar-opened .interface-interface-skeleton__sidebar {
|
|
333
|
+
z-index: 90;
|
|
334
|
+
}
|
|
330
335
|
}
|
|
331
336
|
|
|
332
337
|
.interface-interface-skeleton__sidebar {
|
|
@@ -390,11 +395,17 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
390
395
|
width: 280px;
|
|
391
396
|
color: #1e1e1e;
|
|
392
397
|
}
|
|
393
|
-
.interface-interface-skeleton__actions:focus {
|
|
398
|
+
.interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
|
|
394
399
|
top: auto;
|
|
395
400
|
bottom: 0;
|
|
396
401
|
}
|
|
397
402
|
|
|
403
|
+
@media (min-width: 782px) {
|
|
404
|
+
.interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
|
|
405
|
+
height: calc(100% - 25px);
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
|
|
398
409
|
.interface-more-menu-dropdown {
|
|
399
410
|
margin-right: -4px;
|
|
400
411
|
}
|
package/build-style/style.css
CHANGED
|
@@ -306,10 +306,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
306
306
|
overflow: auto;
|
|
307
307
|
z-index: 20;
|
|
308
308
|
}
|
|
309
|
+
.interface-interface-skeleton__content .interface-navigable-region__stacker {
|
|
310
|
+
flex-grow: 1;
|
|
311
|
+
}
|
|
309
312
|
|
|
310
313
|
.interface-interface-skeleton__secondary-sidebar,
|
|
311
314
|
.interface-interface-skeleton__sidebar {
|
|
312
|
-
display: block;
|
|
313
315
|
flex-shrink: 0;
|
|
314
316
|
position: absolute;
|
|
315
317
|
z-index: 100000;
|
|
@@ -324,9 +326,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
324
326
|
.interface-interface-skeleton__secondary-sidebar,
|
|
325
327
|
.interface-interface-skeleton__sidebar {
|
|
326
328
|
position: relative !important;
|
|
327
|
-
z-index: 90;
|
|
328
329
|
width: auto;
|
|
329
330
|
}
|
|
331
|
+
.is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,
|
|
332
|
+
.is-sidebar-opened .interface-interface-skeleton__sidebar {
|
|
333
|
+
z-index: 90;
|
|
334
|
+
}
|
|
330
335
|
}
|
|
331
336
|
|
|
332
337
|
.interface-interface-skeleton__sidebar {
|
|
@@ -390,11 +395,17 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
390
395
|
width: 280px;
|
|
391
396
|
color: #1e1e1e;
|
|
392
397
|
}
|
|
393
|
-
.interface-interface-skeleton__actions:focus {
|
|
398
|
+
.interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
|
|
394
399
|
top: auto;
|
|
395
400
|
bottom: 0;
|
|
396
401
|
}
|
|
397
402
|
|
|
403
|
+
@media (min-width: 782px) {
|
|
404
|
+
.interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
|
|
405
|
+
height: calc(100% - 25px);
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
|
|
398
409
|
.interface-more-menu-dropdown {
|
|
399
410
|
margin-left: -4px;
|
|
400
411
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WordPress dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { withPluginContext } from '@wordpress/plugins';
|
|
5
|
+
|
|
6
|
+
export default withPluginContext( ( context, ownProps ) => {
|
|
7
|
+
return {
|
|
8
|
+
icon: ownProps.icon || context.icon,
|
|
9
|
+
identifier:
|
|
10
|
+
ownProps.identifier || `${ context.name }/${ ownProps.name }`,
|
|
11
|
+
};
|
|
12
|
+
} );
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/interface",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.21.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,17 +32,17 @@
|
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.16.0",
|
|
35
|
-
"@wordpress/a11y": "^3.
|
|
36
|
-
"@wordpress/components": "^
|
|
37
|
-
"@wordpress/compose": "^5.
|
|
38
|
-
"@wordpress/data": "^7.
|
|
39
|
-
"@wordpress/deprecated": "^3.
|
|
40
|
-
"@wordpress/element": "^4.
|
|
41
|
-
"@wordpress/i18n": "^4.
|
|
42
|
-
"@wordpress/icons": "^9.
|
|
43
|
-
"@wordpress/plugins": "^4.
|
|
44
|
-
"@wordpress/preferences": "^2.
|
|
45
|
-
"@wordpress/viewport": "^4.
|
|
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",
|
|
46
46
|
"classnames": "^2.3.1"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"publishConfig": {
|
|
53
53
|
"access": "public"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
|
|
56
56
|
}
|
package/src/components/index.js
CHANGED
|
@@ -10,3 +10,4 @@ export { default as PreferencesModal } from './preferences-modal';
|
|
|
10
10
|
export { default as PreferencesModalTabs } from './preferences-modal-tabs';
|
|
11
11
|
export { default as PreferencesModalSection } from './preferences-modal-section';
|
|
12
12
|
export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';
|
|
13
|
+
export { default as NavigableRegion } from './navigable-region';
|
|
@@ -7,13 +7,15 @@ import classnames from 'classnames';
|
|
|
7
7
|
* WordPress dependencies
|
|
8
8
|
*/
|
|
9
9
|
import { forwardRef, useEffect } from '@wordpress/element';
|
|
10
|
-
import {
|
|
11
|
-
__unstableUseNavigateRegions as useNavigateRegions,
|
|
12
|
-
__unstableMotion as motion,
|
|
13
|
-
} from '@wordpress/components';
|
|
10
|
+
import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
|
|
14
11
|
import { __ } from '@wordpress/i18n';
|
|
15
12
|
import { useMergeRefs } from '@wordpress/compose';
|
|
16
13
|
|
|
14
|
+
/**
|
|
15
|
+
* Internal dependencies
|
|
16
|
+
*/
|
|
17
|
+
import NavigableRegion from '../navigable-region';
|
|
18
|
+
|
|
17
19
|
function useHTMLClass( className ) {
|
|
18
20
|
useEffect( () => {
|
|
19
21
|
const element =
|
|
@@ -89,39 +91,35 @@ function InterfaceSkeleton(
|
|
|
89
91
|
) }
|
|
90
92
|
>
|
|
91
93
|
{ !! drawer && (
|
|
92
|
-
<
|
|
94
|
+
<NavigableRegion
|
|
93
95
|
className="interface-interface-skeleton__drawer"
|
|
94
|
-
|
|
95
|
-
aria-label={ mergedLabels.drawer }
|
|
96
|
-
tabIndex="-1"
|
|
96
|
+
ariaLabel={ mergedLabels.drawer }
|
|
97
97
|
>
|
|
98
98
|
{ drawer }
|
|
99
|
-
</
|
|
99
|
+
</NavigableRegion>
|
|
100
100
|
) }
|
|
101
101
|
<div className="interface-interface-skeleton__editor">
|
|
102
102
|
{ !! header && isDistractionFree && (
|
|
103
|
-
<
|
|
104
|
-
initial={ isDistractionFree ? 'hidden' : 'hover' }
|
|
105
|
-
whileHover="hover"
|
|
106
|
-
variants={ headerVariants }
|
|
107
|
-
transition={ { type: 'tween', delay: 0.8 } }
|
|
103
|
+
<NavigableRegion
|
|
108
104
|
className="interface-interface-skeleton__header"
|
|
109
|
-
role="region"
|
|
110
105
|
aria-label={ mergedLabels.header }
|
|
111
|
-
|
|
106
|
+
motionProps={ {
|
|
107
|
+
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
108
|
+
whileHover: 'hover',
|
|
109
|
+
variants: headerVariants,
|
|
110
|
+
transition: { type: 'tween', delay: 0.8 },
|
|
111
|
+
} }
|
|
112
112
|
>
|
|
113
113
|
{ header }
|
|
114
|
-
</
|
|
114
|
+
</NavigableRegion>
|
|
115
115
|
) }
|
|
116
116
|
{ !! header && ! isDistractionFree && (
|
|
117
|
-
<
|
|
117
|
+
<NavigableRegion
|
|
118
118
|
className="interface-interface-skeleton__header"
|
|
119
|
-
|
|
120
|
-
aria-label={ mergedLabels.header }
|
|
121
|
-
tabIndex="-1"
|
|
119
|
+
ariaLabel={ mergedLabels.header }
|
|
122
120
|
>
|
|
123
121
|
{ header }
|
|
124
|
-
</
|
|
122
|
+
</NavigableRegion>
|
|
125
123
|
) }
|
|
126
124
|
{ isDistractionFree && (
|
|
127
125
|
<div className="interface-interface-skeleton__header">
|
|
@@ -130,59 +128,49 @@ function InterfaceSkeleton(
|
|
|
130
128
|
) }
|
|
131
129
|
<div className="interface-interface-skeleton__body">
|
|
132
130
|
{ !! secondarySidebar && (
|
|
133
|
-
<
|
|
131
|
+
<NavigableRegion
|
|
134
132
|
className="interface-interface-skeleton__secondary-sidebar"
|
|
135
|
-
|
|
136
|
-
aria-label={ mergedLabels.secondarySidebar }
|
|
137
|
-
tabIndex="-1"
|
|
133
|
+
ariaLabel={ mergedLabels.secondarySidebar }
|
|
138
134
|
>
|
|
139
135
|
{ secondarySidebar }
|
|
140
|
-
</
|
|
136
|
+
</NavigableRegion>
|
|
141
137
|
) }
|
|
142
138
|
{ !! notices && (
|
|
143
139
|
<div className="interface-interface-skeleton__notices">
|
|
144
140
|
{ notices }
|
|
145
141
|
</div>
|
|
146
142
|
) }
|
|
147
|
-
<
|
|
143
|
+
<NavigableRegion
|
|
148
144
|
className="interface-interface-skeleton__content"
|
|
149
|
-
|
|
150
|
-
aria-label={ mergedLabels.body }
|
|
151
|
-
tabIndex="-1"
|
|
145
|
+
ariaLabel={ mergedLabels.body }
|
|
152
146
|
>
|
|
153
147
|
{ content }
|
|
154
|
-
</
|
|
148
|
+
</NavigableRegion>
|
|
155
149
|
{ !! sidebar && (
|
|
156
|
-
<
|
|
150
|
+
<NavigableRegion
|
|
157
151
|
className="interface-interface-skeleton__sidebar"
|
|
158
|
-
|
|
159
|
-
aria-label={ mergedLabels.sidebar }
|
|
160
|
-
tabIndex="-1"
|
|
152
|
+
ariaLabel={ mergedLabels.sidebar }
|
|
161
153
|
>
|
|
162
154
|
{ sidebar }
|
|
163
|
-
</
|
|
155
|
+
</NavigableRegion>
|
|
164
156
|
) }
|
|
165
157
|
{ !! actions && (
|
|
166
|
-
<
|
|
158
|
+
<NavigableRegion
|
|
167
159
|
className="interface-interface-skeleton__actions"
|
|
168
|
-
|
|
169
|
-
aria-label={ mergedLabels.actions }
|
|
170
|
-
tabIndex="-1"
|
|
160
|
+
ariaLabel={ mergedLabels.actions }
|
|
171
161
|
>
|
|
172
162
|
{ actions }
|
|
173
|
-
</
|
|
163
|
+
</NavigableRegion>
|
|
174
164
|
) }
|
|
175
165
|
</div>
|
|
176
166
|
</div>
|
|
177
167
|
{ !! footer && (
|
|
178
|
-
<
|
|
168
|
+
<NavigableRegion
|
|
179
169
|
className="interface-interface-skeleton__footer"
|
|
180
|
-
|
|
181
|
-
aria-label={ mergedLabels.footer }
|
|
182
|
-
tabIndex="-1"
|
|
170
|
+
ariaLabel={ mergedLabels.footer }
|
|
183
171
|
>
|
|
184
172
|
{ footer }
|
|
185
|
-
</
|
|
173
|
+
</NavigableRegion>
|
|
186
174
|
) }
|
|
187
175
|
</div>
|
|
188
176
|
);
|
|
@@ -72,6 +72,10 @@ 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
|
+
|
|
75
79
|
flex-grow: 1;
|
|
76
80
|
|
|
77
81
|
// Treat as flex container to allow children to grow to occupy full
|
|
@@ -93,7 +97,6 @@ html.interface-interface-skeleton__html-container {
|
|
|
93
97
|
|
|
94
98
|
.interface-interface-skeleton__secondary-sidebar,
|
|
95
99
|
.interface-interface-skeleton__sidebar {
|
|
96
|
-
display: block;
|
|
97
100
|
flex-shrink: 0;
|
|
98
101
|
position: absolute;
|
|
99
102
|
z-index: z-index(".interface-interface-skeleton__sidebar");
|
|
@@ -107,8 +110,14 @@ html.interface-interface-skeleton__html-container {
|
|
|
107
110
|
// On Mobile the header is fixed to keep HTML as scrollable.
|
|
108
111
|
@include break-medium() {
|
|
109
112
|
position: relative !important;
|
|
110
|
-
z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
|
|
111
113
|
width: auto; // Keep the sidebar width flexible.
|
|
114
|
+
|
|
115
|
+
// Set this z-index only when the sidebar is opened. When it's closed, the
|
|
116
|
+
// button to open the sidebar that is shown when navigating regions needs to
|
|
117
|
+
// be above the footer. See `edit-post-layout__toggle-sidebar-panel`.
|
|
118
|
+
.is-sidebar-opened & {
|
|
119
|
+
z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
|
|
120
|
+
}
|
|
112
121
|
}
|
|
113
122
|
}
|
|
114
123
|
|
|
@@ -173,8 +182,16 @@ html.interface-interface-skeleton__html-container {
|
|
|
173
182
|
width: $sidebar-width;
|
|
174
183
|
color: $gray-900;
|
|
175
184
|
|
|
176
|
-
&:focus
|
|
185
|
+
&:focus,
|
|
186
|
+
&:focus-within {
|
|
177
187
|
top: auto;
|
|
178
188
|
bottom: 0;
|
|
179
189
|
}
|
|
180
190
|
}
|
|
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
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# NavigableRegion
|
|
2
|
+
|
|
3
|
+
`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.
|
|
4
|
+
|
|
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
|
+
|
|
7
|
+
It can use a CSS animation via the `motion` component.
|
|
8
|
+
|
|
9
|
+
## Props
|
|
10
|
+
|
|
11
|
+
### children
|
|
12
|
+
|
|
13
|
+
The component that should be rendered as content.
|
|
14
|
+
|
|
15
|
+
- Type: React Element
|
|
16
|
+
- Required: Yes
|
|
17
|
+
|
|
18
|
+
### className
|
|
19
|
+
|
|
20
|
+
The CSS class that will be added to the classes of the wrapper div.
|
|
21
|
+
|
|
22
|
+
- Type: `String`
|
|
23
|
+
- Required: No
|
|
24
|
+
|
|
25
|
+
### ariaLabel
|
|
26
|
+
|
|
27
|
+
A meaningful name for the ARIA landmark region.
|
|
28
|
+
|
|
29
|
+
- Type: `String`
|
|
30
|
+
- Required: Yes
|
|
31
|
+
|
|
32
|
+
### motionProps
|
|
33
|
+
|
|
34
|
+
Properties of `motionProps` object will be used by the `motion` component to set a CSS animation on the wrapper div.
|
|
35
|
+
|
|
36
|
+
- Type: `Object`
|
|
37
|
+
- Required: No
|
|
38
|
+
- Default: `{}`
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import classnames from 'classnames';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* WordPress dependencies
|
|
8
|
+
*/
|
|
9
|
+
import { __unstableMotion as motion } from '@wordpress/components';
|
|
10
|
+
|
|
11
|
+
export default function NavigableRegion( {
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
ariaLabel,
|
|
15
|
+
motionProps = {},
|
|
16
|
+
} ) {
|
|
17
|
+
const Tag = Object.keys( motionProps ).length ? motion.div : 'div';
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Tag
|
|
21
|
+
className={ classnames( 'interface-navigable-region', className ) }
|
|
22
|
+
aria-label={ ariaLabel }
|
|
23
|
+
role="region"
|
|
24
|
+
tabIndex="-1"
|
|
25
|
+
{ ...motionProps }
|
|
26
|
+
>
|
|
27
|
+
<div className="interface-navigable-region__stacker">
|
|
28
|
+
{ children }
|
|
29
|
+
</div>
|
|
30
|
+
</Tag>
|
|
31
|
+
);
|
|
32
|
+
}
|