@wordpress/interface 4.17.1-next.4d3b314fd5.0 → 4.19.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/interface-skeleton/index.js +33 -2
- package/build/components/interface-skeleton/index.js.map +1 -1
- package/build-module/components/interface-skeleton/index.js +34 -3
- package/build-module/components/interface-skeleton/index.js.map +1 -1
- package/package.json +13 -13
- package/src/components/fullscreen-mode/test/index.js +22 -45
- package/src/components/interface-skeleton/index.js +34 -2
package/CHANGELOG.md
CHANGED
|
@@ -43,8 +43,10 @@ function useHTMLClass(className) {
|
|
|
43
43
|
|
|
44
44
|
function InterfaceSkeleton(_ref, ref) {
|
|
45
45
|
let {
|
|
46
|
+
isDistractionFree,
|
|
46
47
|
footer,
|
|
47
48
|
header,
|
|
49
|
+
editorNotices,
|
|
48
50
|
sidebar,
|
|
49
51
|
secondarySidebar,
|
|
50
52
|
notices,
|
|
@@ -82,6 +84,21 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
82
84
|
const mergedLabels = { ...defaultLabels,
|
|
83
85
|
...labels
|
|
84
86
|
};
|
|
87
|
+
const headerVariants = {
|
|
88
|
+
hidden: isDistractionFree ? {
|
|
89
|
+
opacity: 0
|
|
90
|
+
} : {
|
|
91
|
+
opacity: 1
|
|
92
|
+
},
|
|
93
|
+
hover: {
|
|
94
|
+
opacity: 1,
|
|
95
|
+
transition: {
|
|
96
|
+
type: 'tween',
|
|
97
|
+
delay: 0.2,
|
|
98
|
+
delayChildren: 0.2
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
};
|
|
85
102
|
return (0, _element.createElement)("div", (0, _extends2.default)({}, navigateRegionsProps, {
|
|
86
103
|
ref: (0, _compose.useMergeRefs)([ref, navigateRegionsProps.ref]),
|
|
87
104
|
className: (0, _classnames.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
@@ -92,12 +109,26 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
92
109
|
tabIndex: "-1"
|
|
93
110
|
}, drawer), (0, _element.createElement)("div", {
|
|
94
111
|
className: "interface-interface-skeleton__editor"
|
|
95
|
-
}, !!header && (0, _element.createElement)(
|
|
112
|
+
}, !!header && isDistractionFree && (0, _element.createElement)(_components.__unstableMotion.div, {
|
|
113
|
+
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
114
|
+
whileHover: "hover",
|
|
115
|
+
variants: headerVariants,
|
|
116
|
+
transition: {
|
|
117
|
+
type: 'tween',
|
|
118
|
+
delay: 0.8
|
|
119
|
+
},
|
|
120
|
+
className: "interface-interface-skeleton__header",
|
|
121
|
+
role: "region",
|
|
122
|
+
"aria-label": mergedLabels.header,
|
|
123
|
+
tabIndex: "-1"
|
|
124
|
+
}, header), !!header && !isDistractionFree && (0, _element.createElement)("div", {
|
|
96
125
|
className: "interface-interface-skeleton__header",
|
|
97
126
|
role: "region",
|
|
98
127
|
"aria-label": mergedLabels.header,
|
|
99
128
|
tabIndex: "-1"
|
|
100
|
-
}, header), (0, _element.createElement)("div", {
|
|
129
|
+
}, header), isDistractionFree && (0, _element.createElement)("div", {
|
|
130
|
+
className: "interface-interface-skeleton__header"
|
|
131
|
+
}, editorNotices), (0, _element.createElement)("div", {
|
|
101
132
|
className: "interface-interface-skeleton__body"
|
|
102
133
|
}, !!secondarySidebar && (0, _element.createElement)("div", {
|
|
103
134
|
className: "interface-interface-skeleton__secondary-sidebar",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","footer","header","sidebar","secondarySidebar","notices","content","drawer","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels"],"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"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tdrawer,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the nav bar landmark region. */\n\t\tdrawer: __( 'Drawer' ),\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...navigateRegionsProps }\n\t\t\tref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t{ !! drawer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"interface-interface-skeleton__drawer\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={ mergedLabels.drawer }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t{ drawer }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.body }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.sidebar }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.actions }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={ mergedLabels.footer }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}
|
|
@@ -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
|
|
|
@@ -31,8 +31,10 @@ function useHTMLClass(className) {
|
|
|
31
31
|
|
|
32
32
|
function InterfaceSkeleton(_ref, ref) {
|
|
33
33
|
let {
|
|
34
|
+
isDistractionFree,
|
|
34
35
|
footer,
|
|
35
36
|
header,
|
|
37
|
+
editorNotices,
|
|
36
38
|
sidebar,
|
|
37
39
|
secondarySidebar,
|
|
38
40
|
notices,
|
|
@@ -70,6 +72,21 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
70
72
|
const mergedLabels = { ...defaultLabels,
|
|
71
73
|
...labels
|
|
72
74
|
};
|
|
75
|
+
const headerVariants = {
|
|
76
|
+
hidden: isDistractionFree ? {
|
|
77
|
+
opacity: 0
|
|
78
|
+
} : {
|
|
79
|
+
opacity: 1
|
|
80
|
+
},
|
|
81
|
+
hover: {
|
|
82
|
+
opacity: 1,
|
|
83
|
+
transition: {
|
|
84
|
+
type: 'tween',
|
|
85
|
+
delay: 0.2,
|
|
86
|
+
delayChildren: 0.2
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
};
|
|
73
90
|
return createElement("div", _extends({}, navigateRegionsProps, {
|
|
74
91
|
ref: useMergeRefs([ref, navigateRegionsProps.ref]),
|
|
75
92
|
className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
@@ -80,12 +97,26 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
80
97
|
tabIndex: "-1"
|
|
81
98
|
}, drawer), createElement("div", {
|
|
82
99
|
className: "interface-interface-skeleton__editor"
|
|
83
|
-
}, !!header && createElement(
|
|
100
|
+
}, !!header && isDistractionFree && createElement(motion.div, {
|
|
101
|
+
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
102
|
+
whileHover: "hover",
|
|
103
|
+
variants: headerVariants,
|
|
104
|
+
transition: {
|
|
105
|
+
type: 'tween',
|
|
106
|
+
delay: 0.8
|
|
107
|
+
},
|
|
108
|
+
className: "interface-interface-skeleton__header",
|
|
109
|
+
role: "region",
|
|
110
|
+
"aria-label": mergedLabels.header,
|
|
111
|
+
tabIndex: "-1"
|
|
112
|
+
}, header), !!header && !isDistractionFree && createElement("div", {
|
|
84
113
|
className: "interface-interface-skeleton__header",
|
|
85
114
|
role: "region",
|
|
86
115
|
"aria-label": mergedLabels.header,
|
|
87
116
|
tabIndex: "-1"
|
|
88
|
-
}, header), createElement("div", {
|
|
117
|
+
}, header), isDistractionFree && createElement("div", {
|
|
118
|
+
className: "interface-interface-skeleton__header"
|
|
119
|
+
}, editorNotices), createElement("div", {
|
|
89
120
|
className: "interface-interface-skeleton__body"
|
|
90
121
|
}, !!secondarySidebar && createElement("div", {
|
|
91
122
|
className: "interface-interface-skeleton__secondary-sidebar",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__","useMergeRefs","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","footer","header","sidebar","secondarySidebar","notices","content","drawer","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,EAAqBC,SAArB,QAAsC,oBAAtC;AACA,
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__","useMergeRefs","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","drawer","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tdrawer,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the nav bar landmark region. */\n\t\tdrawer: __( 'Drawer' ),\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...navigateRegionsProps }\n\t\t\tref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t{ !! drawer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"interface-interface-skeleton__drawer\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={ mergedLabels.drawer }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t{ drawer }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\taria-label={ mergedLabels.body }\n\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</div>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.sidebar }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.actions }\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={ mergedLabels.footer }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/interface",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.19.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": "^21.
|
|
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.20.0",
|
|
36
|
+
"@wordpress/components": "^21.3.0",
|
|
37
|
+
"@wordpress/compose": "^5.18.0",
|
|
38
|
+
"@wordpress/data": "^7.4.0",
|
|
39
|
+
"@wordpress/deprecated": "^3.20.0",
|
|
40
|
+
"@wordpress/element": "^4.18.0",
|
|
41
|
+
"@wordpress/i18n": "^4.20.0",
|
|
42
|
+
"@wordpress/icons": "^9.11.0",
|
|
43
|
+
"@wordpress/plugins": "^4.18.0",
|
|
44
|
+
"@wordpress/preferences": "^2.12.0",
|
|
45
|
+
"@wordpress/viewport": "^4.18.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": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
|
|
56
56
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* External dependencies
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import { render } from '@testing-library/react';
|
|
5
5
|
/**
|
|
6
6
|
* Internal dependencies
|
|
7
7
|
*/
|
|
@@ -9,68 +9,45 @@ import FullscreenMode from '..';
|
|
|
9
9
|
|
|
10
10
|
describe( 'FullscreenMode', () => {
|
|
11
11
|
it( 'fullscreen mode to be added to document body when active', () => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
|
|
16
|
-
true
|
|
17
|
-
);
|
|
12
|
+
const { baseElement } = render( <FullscreenMode isActive /> );
|
|
13
|
+
|
|
14
|
+
expect( baseElement ).toHaveClass( 'is-fullscreen-mode' );
|
|
18
15
|
} );
|
|
19
16
|
|
|
20
17
|
it( 'fullscreen mode not to be added to document body when active', () => {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
|
|
25
|
-
false
|
|
26
|
-
);
|
|
18
|
+
const { baseElement } = render( <FullscreenMode isActive={ false } /> );
|
|
19
|
+
|
|
20
|
+
expect( baseElement ).not.toHaveClass( 'is-fullscreen-mode' );
|
|
27
21
|
} );
|
|
28
22
|
|
|
29
23
|
it( 'sticky-menu to be removed from the body class if present', () => {
|
|
30
24
|
document.body.classList.add( 'sticky-menu' );
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
expect(
|
|
35
|
-
false
|
|
36
|
-
);
|
|
25
|
+
|
|
26
|
+
const { baseElement } = render( <FullscreenMode isActive={ false } /> );
|
|
27
|
+
|
|
28
|
+
expect( baseElement ).not.toHaveClass( 'sticky-menu' );
|
|
37
29
|
} );
|
|
38
30
|
|
|
39
31
|
it( 'sticky-menu to be restored when component unmounted and originally present', () => {
|
|
40
32
|
document.body.classList.add( 'sticky-menu' );
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
mode = create( <FullscreenMode isActive={ false } /> );
|
|
44
|
-
} );
|
|
45
|
-
act( () => {
|
|
46
|
-
mode.unmount();
|
|
47
|
-
} );
|
|
48
|
-
expect( document.body.classList.contains( 'sticky-menu' ) ).toBe(
|
|
49
|
-
true
|
|
33
|
+
const { baseElement, unmount } = render(
|
|
34
|
+
<FullscreenMode isActive={ false } />
|
|
50
35
|
);
|
|
36
|
+
|
|
37
|
+
unmount();
|
|
38
|
+
|
|
39
|
+
expect( baseElement ).toHaveClass( 'sticky-menu' );
|
|
51
40
|
} );
|
|
52
41
|
|
|
53
42
|
it( 'fullscreen mode to be removed from document body when component unmounted', () => {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
false
|
|
57
|
-
);
|
|
58
|
-
let mode;
|
|
59
|
-
act( () => {
|
|
60
|
-
mode = create( <FullscreenMode isActive /> );
|
|
61
|
-
} );
|
|
43
|
+
const { baseElement, unmount } = render( <FullscreenMode isActive /> );
|
|
44
|
+
|
|
62
45
|
// Present after mounting with `isActive`
|
|
63
|
-
expect(
|
|
64
|
-
true
|
|
65
|
-
);
|
|
46
|
+
expect( baseElement ).toHaveClass( 'is-fullscreen-mode' );
|
|
66
47
|
|
|
67
|
-
|
|
68
|
-
mode.unmount();
|
|
69
|
-
} );
|
|
48
|
+
unmount();
|
|
70
49
|
|
|
71
50
|
// Removed after unmounting.
|
|
72
|
-
expect(
|
|
73
|
-
false
|
|
74
|
-
);
|
|
51
|
+
expect( baseElement ).not.toHaveClass( 'is-fullscreen-mode' );
|
|
75
52
|
} );
|
|
76
53
|
} );
|
|
@@ -7,7 +7,10 @@ import classnames from 'classnames';
|
|
|
7
7
|
* WordPress dependencies
|
|
8
8
|
*/
|
|
9
9
|
import { forwardRef, useEffect } from '@wordpress/element';
|
|
10
|
-
import {
|
|
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
|
|
|
@@ -27,8 +30,10 @@ function useHTMLClass( className ) {
|
|
|
27
30
|
|
|
28
31
|
function InterfaceSkeleton(
|
|
29
32
|
{
|
|
33
|
+
isDistractionFree,
|
|
30
34
|
footer,
|
|
31
35
|
header,
|
|
36
|
+
editorNotices,
|
|
32
37
|
sidebar,
|
|
33
38
|
secondarySidebar,
|
|
34
39
|
notices,
|
|
@@ -64,6 +69,14 @@ function InterfaceSkeleton(
|
|
|
64
69
|
|
|
65
70
|
const mergedLabels = { ...defaultLabels, ...labels };
|
|
66
71
|
|
|
72
|
+
const headerVariants = {
|
|
73
|
+
hidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },
|
|
74
|
+
hover: {
|
|
75
|
+
opacity: 1,
|
|
76
|
+
transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
|
|
67
80
|
return (
|
|
68
81
|
<div
|
|
69
82
|
{ ...navigateRegionsProps }
|
|
@@ -86,7 +99,21 @@ function InterfaceSkeleton(
|
|
|
86
99
|
</div>
|
|
87
100
|
) }
|
|
88
101
|
<div className="interface-interface-skeleton__editor">
|
|
89
|
-
{ !! header && (
|
|
102
|
+
{ !! header && isDistractionFree && (
|
|
103
|
+
<motion.div
|
|
104
|
+
initial={ isDistractionFree ? 'hidden' : 'hover' }
|
|
105
|
+
whileHover="hover"
|
|
106
|
+
variants={ headerVariants }
|
|
107
|
+
transition={ { type: 'tween', delay: 0.8 } }
|
|
108
|
+
className="interface-interface-skeleton__header"
|
|
109
|
+
role="region"
|
|
110
|
+
aria-label={ mergedLabels.header }
|
|
111
|
+
tabIndex="-1"
|
|
112
|
+
>
|
|
113
|
+
{ header }
|
|
114
|
+
</motion.div>
|
|
115
|
+
) }
|
|
116
|
+
{ !! header && ! isDistractionFree && (
|
|
90
117
|
<div
|
|
91
118
|
className="interface-interface-skeleton__header"
|
|
92
119
|
role="region"
|
|
@@ -96,6 +123,11 @@ function InterfaceSkeleton(
|
|
|
96
123
|
{ header }
|
|
97
124
|
</div>
|
|
98
125
|
) }
|
|
126
|
+
{ isDistractionFree && (
|
|
127
|
+
<div className="interface-interface-skeleton__header">
|
|
128
|
+
{ editorNotices }
|
|
129
|
+
</div>
|
|
130
|
+
) }
|
|
99
131
|
<div className="interface-interface-skeleton__body">
|
|
100
132
|
{ !! secondarySidebar && (
|
|
101
133
|
<div
|