@wordpress/interface 5.12.1 → 5.12.2
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/build/components/interface-skeleton/index.js +20 -19
- package/build/components/interface-skeleton/index.js.map +1 -1
- package/build-module/components/interface-skeleton/index.js +20 -19
- package/build-module/components/interface-skeleton/index.js.map +1 -1
- package/package.json +6 -6
- package/src/components/interface-skeleton/index.js +9 -9
|
@@ -45,6 +45,26 @@ function useHTMLClass(className) {
|
|
|
45
45
|
}, [className]);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
const headerVariants = {
|
|
49
|
+
hidden: {
|
|
50
|
+
opacity: 0
|
|
51
|
+
},
|
|
52
|
+
hover: {
|
|
53
|
+
opacity: 1,
|
|
54
|
+
transition: {
|
|
55
|
+
type: 'tween',
|
|
56
|
+
delay: 0.2,
|
|
57
|
+
delayChildren: 0.2
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
distractionFreeInactive: {
|
|
61
|
+
opacity: 1,
|
|
62
|
+
transition: {
|
|
63
|
+
delay: 0
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
|
|
48
68
|
function InterfaceSkeleton({
|
|
49
69
|
isDistractionFree,
|
|
50
70
|
footer,
|
|
@@ -86,25 +106,6 @@ function InterfaceSkeleton({
|
|
|
86
106
|
const mergedLabels = { ...defaultLabels,
|
|
87
107
|
...labels
|
|
88
108
|
};
|
|
89
|
-
const headerVariants = {
|
|
90
|
-
hidden: {
|
|
91
|
-
opacity: 0
|
|
92
|
-
},
|
|
93
|
-
hover: {
|
|
94
|
-
opacity: 1,
|
|
95
|
-
transition: {
|
|
96
|
-
type: 'tween',
|
|
97
|
-
delay: 0.2,
|
|
98
|
-
delayChildren: 0.2
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
distractionFreeInactive: {
|
|
102
|
-
opacity: 1,
|
|
103
|
-
transition: {
|
|
104
|
-
delay: 0
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
109
|
return (0, _element.createElement)("div", { ...(enableRegionNavigation ? navigateRegionsProps : {}),
|
|
109
110
|
ref: (0, _compose.useMergeRefs)([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
|
|
110
111
|
className: (0, _classnames.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["useHTMLClass","className","element","document","querySelector","classList","toggle","
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["useHTMLClass","className","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","distractionFreeInactive","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","ref","navigateRegionsProps","defaultLabels","body","mergedLabels","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\nconst headerVariants = {\n\thidden: { opacity: 0 },\n\thover: {\n\t\topacity: 1,\n\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t},\n\tdistractionFreeInactive: { opacity: 1, transition: { delay: 0 } },\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\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 && (\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={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? { type: 'tween', delay: 0.8 }\n\t\t\t\t\t\t\t\t: undefined\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{ 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"]}
|
|
@@ -33,6 +33,26 @@ function useHTMLClass(className) {
|
|
|
33
33
|
}, [className]);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
const headerVariants = {
|
|
37
|
+
hidden: {
|
|
38
|
+
opacity: 0
|
|
39
|
+
},
|
|
40
|
+
hover: {
|
|
41
|
+
opacity: 1,
|
|
42
|
+
transition: {
|
|
43
|
+
type: 'tween',
|
|
44
|
+
delay: 0.2,
|
|
45
|
+
delayChildren: 0.2
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
distractionFreeInactive: {
|
|
49
|
+
opacity: 1,
|
|
50
|
+
transition: {
|
|
51
|
+
delay: 0
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
|
|
36
56
|
function InterfaceSkeleton({
|
|
37
57
|
isDistractionFree,
|
|
38
58
|
footer,
|
|
@@ -74,25 +94,6 @@ function InterfaceSkeleton({
|
|
|
74
94
|
const mergedLabels = { ...defaultLabels,
|
|
75
95
|
...labels
|
|
76
96
|
};
|
|
77
|
-
const headerVariants = {
|
|
78
|
-
hidden: {
|
|
79
|
-
opacity: 0
|
|
80
|
-
},
|
|
81
|
-
hover: {
|
|
82
|
-
opacity: 1,
|
|
83
|
-
transition: {
|
|
84
|
-
type: 'tween',
|
|
85
|
-
delay: 0.2,
|
|
86
|
-
delayChildren: 0.2
|
|
87
|
-
}
|
|
88
|
-
},
|
|
89
|
-
distractionFreeInactive: {
|
|
90
|
-
opacity: 1,
|
|
91
|
-
transition: {
|
|
92
|
-
delay: 0
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
97
|
return createElement("div", { ...(enableRegionNavigation ? navigateRegionsProps : {}),
|
|
97
98
|
ref: useMergeRefs([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
|
|
98
99
|
className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","distractionFreeInactive","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","ref","navigateRegionsProps","defaultLabels","body","mergedLabels","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\nconst headerVariants = {\n\thidden: { opacity: 0 },\n\thover: {\n\t\topacity: 1,\n\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t},\n\tdistractionFreeInactive: { opacity: 1, transition: { delay: 0 } },\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\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 && (\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={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? { type: 'tween', delay: 0.8 }\n\t\t\t\t\t\t\t\t: undefined\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{ 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/interface",
|
|
3
|
-
"version": "5.12.
|
|
3
|
+
"version": "5.12.2",
|
|
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",
|
|
@@ -33,15 +33,15 @@
|
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.16.0",
|
|
35
35
|
"@wordpress/a11y": "^3.35.1",
|
|
36
|
-
"@wordpress/components": "^25.1.
|
|
36
|
+
"@wordpress/components": "^25.1.2",
|
|
37
37
|
"@wordpress/compose": "^6.12.1",
|
|
38
38
|
"@wordpress/data": "^9.5.1",
|
|
39
39
|
"@wordpress/deprecated": "^3.35.1",
|
|
40
40
|
"@wordpress/element": "^5.12.1",
|
|
41
41
|
"@wordpress/i18n": "^4.35.1",
|
|
42
|
-
"@wordpress/icons": "^9.26.
|
|
43
|
-
"@wordpress/plugins": "^6.3.
|
|
44
|
-
"@wordpress/preferences": "^3.12.
|
|
42
|
+
"@wordpress/icons": "^9.26.2",
|
|
43
|
+
"@wordpress/plugins": "^6.3.2",
|
|
44
|
+
"@wordpress/preferences": "^3.12.2",
|
|
45
45
|
"@wordpress/viewport": "^5.12.1",
|
|
46
46
|
"classnames": "^2.3.1"
|
|
47
47
|
},
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"publishConfig": {
|
|
53
53
|
"access": "public"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "a00463f06c90ae6705951861eb889e67a52bf448"
|
|
56
56
|
}
|
|
@@ -33,6 +33,15 @@ function useHTMLClass( className ) {
|
|
|
33
33
|
}, [ className ] );
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
const headerVariants = {
|
|
37
|
+
hidden: { opacity: 0 },
|
|
38
|
+
hover: {
|
|
39
|
+
opacity: 1,
|
|
40
|
+
transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
|
|
41
|
+
},
|
|
42
|
+
distractionFreeInactive: { opacity: 1, transition: { delay: 0 } },
|
|
43
|
+
};
|
|
44
|
+
|
|
36
45
|
function InterfaceSkeleton(
|
|
37
46
|
{
|
|
38
47
|
isDistractionFree,
|
|
@@ -74,15 +83,6 @@ function InterfaceSkeleton(
|
|
|
74
83
|
|
|
75
84
|
const mergedLabels = { ...defaultLabels, ...labels };
|
|
76
85
|
|
|
77
|
-
const headerVariants = {
|
|
78
|
-
hidden: { opacity: 0 },
|
|
79
|
-
hover: {
|
|
80
|
-
opacity: 1,
|
|
81
|
-
transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
|
|
82
|
-
},
|
|
83
|
-
distractionFreeInactive: { opacity: 1, transition: { delay: 0 } },
|
|
84
|
-
};
|
|
85
|
-
|
|
86
86
|
return (
|
|
87
87
|
<div
|
|
88
88
|
{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }
|