@wordpress/interface 5.0.0 → 5.2.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/LICENSE.md +1 -1
- package/build/components/interface-skeleton/index.js +3 -2
- package/build/components/interface-skeleton/index.js.map +1 -1
- package/build/components/navigable-region/index.js +1 -3
- package/build/components/navigable-region/index.js.map +1 -1
- package/build-module/components/interface-skeleton/index.js +3 -2
- package/build-module/components/interface-skeleton/index.js.map +1 -1
- package/build-module/components/navigable-region/index.js +1 -3
- package/build-module/components/navigable-region/index.js.map +1 -1
- package/build-style/style-rtl.css +6 -11
- package/build-style/style.css +6 -11
- package/package.json +13 -13
- package/src/components/interface-skeleton/index.js +6 -2
- package/src/components/interface-skeleton/style.scss +0 -14
- package/src/components/navigable-region/index.js +1 -3
- package/src/components/preferences-modal-tabs/style.scss +8 -0
package/CHANGELOG.md
CHANGED
package/LICENSE.md
CHANGED
|
@@ -60,6 +60,7 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
60
60
|
actions,
|
|
61
61
|
labels,
|
|
62
62
|
className,
|
|
63
|
+
enableRegionNavigation = true,
|
|
63
64
|
// Todo: does this need to be a prop.
|
|
64
65
|
// Can we use a dependency to keyboard-shortcuts directly?
|
|
65
66
|
shortcuts
|
|
@@ -103,8 +104,8 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
103
104
|
}
|
|
104
105
|
}
|
|
105
106
|
};
|
|
106
|
-
return (0, _element.createElement)("div", (0, _extends2.default)({}, navigateRegionsProps, {
|
|
107
|
-
ref: (0, _compose.useMergeRefs)([ref, navigateRegionsProps.ref]),
|
|
107
|
+
return (0, _element.createElement)("div", (0, _extends2.default)({}, enableRegionNavigation ? navigateRegionsProps : {}, {
|
|
108
|
+
ref: (0, _compose.useMergeRefs)([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
|
|
108
109
|
className: (0, _classnames.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
109
110
|
}), (0, _element.createElement)("div", {
|
|
110
111
|
className: "interface-interface-skeleton__editor"
|
|
@@ -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","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","motion","div"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AAIA;;AACA;;AAKA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AAGA,SAASA,YAAT,CAAuBC,SAAvB,EAAmC;AAClC,0BAAW,MAAM;AAChB,UAAMC,OAAO,GACZC,QAAQ,IAAIA,QAAQ,CAACC,aAAT,CAAyB,aAAaH,SAAW,GAAjD,CADb;;AAEA,QAAK,CAAEC,OAAP,EAAiB;AAChB;AACA;;AACDA,IAAAA,OAAO,CAACG,SAAR,CAAkBC,MAAlB,CAA0BL,SAA1B;AACA,WAAO,MAAM;AACZC,MAAAA,OAAO,CAACG,SAAR,CAAkBC,MAAlB,CAA0BL,SAA1B;AACA,KAFD;AAGA,GAVD,EAUG,CAAEA,SAAF,CAVH;AAWA;;AAED,SAASM,iBAAT,
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","undefined","motion","div"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}
|
|
@@ -29,8 +29,6 @@ function NavigableRegion(_ref) {
|
|
|
29
29
|
"aria-label": ariaLabel,
|
|
30
30
|
role: "region",
|
|
31
31
|
tabIndex: "-1"
|
|
32
|
-
}, props),
|
|
33
|
-
className: "interface-navigable-region__stacker"
|
|
34
|
-
}, children));
|
|
32
|
+
}, props), children);
|
|
35
33
|
}
|
|
36
34
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,4BAAC,GAAD;AACC,IAAA,SAAS,EAAG,yBAAY,4BAAZ,EAA0CJ,SAA1C,CADb;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,4BAAC,GAAD;AACC,IAAA,SAAS,EAAG,yBAAY,4BAAZ,EAA0CJ,SAA1C,CADb;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,GAOGL,QAPH,CADD;AAWA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ classnames( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n}\n"]}
|
|
@@ -47,6 +47,7 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
47
47
|
actions,
|
|
48
48
|
labels,
|
|
49
49
|
className,
|
|
50
|
+
enableRegionNavigation = true,
|
|
50
51
|
// Todo: does this need to be a prop.
|
|
51
52
|
// Can we use a dependency to keyboard-shortcuts directly?
|
|
52
53
|
shortcuts
|
|
@@ -90,8 +91,8 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
90
91
|
}
|
|
91
92
|
}
|
|
92
93
|
};
|
|
93
|
-
return createElement("div", _extends({}, navigateRegionsProps, {
|
|
94
|
-
ref: useMergeRefs([ref, navigateRegionsProps.ref]),
|
|
94
|
+
return createElement("div", _extends({}, enableRegionNavigation ? navigateRegionsProps : {}, {
|
|
95
|
+
ref: useMergeRefs([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
|
|
95
96
|
className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
96
97
|
}), createElement("div", {
|
|
97
98
|
className: "interface-interface-skeleton__editor"
|
|
@@ -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","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","div"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,EAAqBC,SAArB,QAAsC,oBAAtC;AACA,SACCC,4BAA4B,IAAIC,kBADjC,EAECC,gBAAgB,IAAIC,MAFrB,QAGO,uBAHP;AAIA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,oBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,qBAA5B;;AAEA,SAASC,YAAT,CAAuBC,SAAvB,EAAmC;AAClCT,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMU,OAAO,GACZC,QAAQ,IAAIA,QAAQ,CAACC,aAAT,CAAyB,aAAaH,SAAW,GAAjD,CADb;;AAEA,QAAK,CAAEC,OAAP,EAAiB;AAChB;AACA;;AACDA,IAAAA,OAAO,CAACG,SAAR,CAAkBC,MAAlB,CAA0BL,SAA1B;AACA,WAAO,MAAM;AACZC,MAAAA,OAAO,CAACG,SAAR,CAAkBC,MAAlB,CAA0BL,SAA1B;AACA,KAFD;AAGA,GAVQ,EAUN,CAAEA,SAAF,CAVM,CAAT;AAWA;;AAED,SAASM,iBAAT,
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__","useMergeRefs","NavigableRegion","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","undefined","div"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}
|
|
@@ -18,8 +18,6 @@ export default function NavigableRegion(_ref) {
|
|
|
18
18
|
"aria-label": ariaLabel,
|
|
19
19
|
role: "region",
|
|
20
20
|
tabIndex: "-1"
|
|
21
|
-
}, props),
|
|
22
|
-
className: "interface-navigable-region__stacker"
|
|
23
|
-
}, children));
|
|
21
|
+
}, props), children);
|
|
24
22
|
}
|
|
25
23
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["classnames","NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,cAAC,GAAD;AACC,IAAA,SAAS,EAAGP,UAAU,CAAE,4BAAF,EAAgCG,SAAhC,CADvB;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["classnames","NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,cAAC,GAAD;AACC,IAAA,SAAS,EAAGP,UAAU,CAAE,4BAAF,EAAgCG,SAAhC,CADvB;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,GAOGL,QAPH,CADD;AAWA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ classnames( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n}\n"]}
|
|
@@ -58,15 +58,15 @@
|
|
|
58
58
|
* @param {string} hex - the hexadecimal value to convert
|
|
59
59
|
* @return {string} comma separated rgb values
|
|
60
60
|
*/
|
|
61
|
-
/**
|
|
62
|
-
* Breakpoint mixins
|
|
63
|
-
*/
|
|
64
61
|
/**
|
|
65
62
|
* Long content fade mixin
|
|
66
63
|
*
|
|
67
64
|
* Creates a fading overlay to signify that the content is longer
|
|
68
65
|
* than the space allows.
|
|
69
66
|
*/
|
|
67
|
+
/**
|
|
68
|
+
* Breakpoint mixins
|
|
69
|
+
*/
|
|
70
70
|
/**
|
|
71
71
|
* Focus styles.
|
|
72
72
|
*/
|
|
@@ -320,11 +320,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
320
320
|
overflow: auto;
|
|
321
321
|
z-index: 20;
|
|
322
322
|
}
|
|
323
|
-
.interface-interface-skeleton__content .interface-navigable-region__stacker {
|
|
324
|
-
flex-grow: 1;
|
|
325
|
-
display: flex;
|
|
326
|
-
flex-direction: column;
|
|
327
|
-
}
|
|
328
323
|
|
|
329
324
|
.interface-interface-skeleton__secondary-sidebar,
|
|
330
325
|
.interface-interface-skeleton__sidebar {
|
|
@@ -359,9 +354,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
359
354
|
}
|
|
360
355
|
}
|
|
361
356
|
|
|
362
|
-
.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
|
|
363
|
-
height: 100%;
|
|
364
|
-
}
|
|
365
357
|
@media (min-width: 782px) {
|
|
366
358
|
.interface-interface-skeleton__secondary-sidebar {
|
|
367
359
|
border-left: 1px solid #e0e0e0;
|
|
@@ -509,6 +501,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
509
501
|
box-shadow: none;
|
|
510
502
|
font-weight: 500;
|
|
511
503
|
}
|
|
504
|
+
.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active::after {
|
|
505
|
+
content: none;
|
|
506
|
+
}
|
|
512
507
|
.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
|
|
513
508
|
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
|
|
514
509
|
}
|
package/build-style/style.css
CHANGED
|
@@ -58,15 +58,15 @@
|
|
|
58
58
|
* @param {string} hex - the hexadecimal value to convert
|
|
59
59
|
* @return {string} comma separated rgb values
|
|
60
60
|
*/
|
|
61
|
-
/**
|
|
62
|
-
* Breakpoint mixins
|
|
63
|
-
*/
|
|
64
61
|
/**
|
|
65
62
|
* Long content fade mixin
|
|
66
63
|
*
|
|
67
64
|
* Creates a fading overlay to signify that the content is longer
|
|
68
65
|
* than the space allows.
|
|
69
66
|
*/
|
|
67
|
+
/**
|
|
68
|
+
* Breakpoint mixins
|
|
69
|
+
*/
|
|
70
70
|
/**
|
|
71
71
|
* Focus styles.
|
|
72
72
|
*/
|
|
@@ -320,11 +320,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
320
320
|
overflow: auto;
|
|
321
321
|
z-index: 20;
|
|
322
322
|
}
|
|
323
|
-
.interface-interface-skeleton__content .interface-navigable-region__stacker {
|
|
324
|
-
flex-grow: 1;
|
|
325
|
-
display: flex;
|
|
326
|
-
flex-direction: column;
|
|
327
|
-
}
|
|
328
323
|
|
|
329
324
|
.interface-interface-skeleton__secondary-sidebar,
|
|
330
325
|
.interface-interface-skeleton__sidebar {
|
|
@@ -359,9 +354,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
359
354
|
}
|
|
360
355
|
}
|
|
361
356
|
|
|
362
|
-
.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
|
|
363
|
-
height: 100%;
|
|
364
|
-
}
|
|
365
357
|
@media (min-width: 782px) {
|
|
366
358
|
.interface-interface-skeleton__secondary-sidebar {
|
|
367
359
|
border-right: 1px solid #e0e0e0;
|
|
@@ -509,6 +501,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
509
501
|
box-shadow: none;
|
|
510
502
|
font-weight: 500;
|
|
511
503
|
}
|
|
504
|
+
.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active::after {
|
|
505
|
+
content: none;
|
|
506
|
+
}
|
|
512
507
|
.interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
|
|
513
508
|
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
|
|
514
509
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/interface",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.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": "^23.
|
|
37
|
-
"@wordpress/compose": "^6.
|
|
38
|
-
"@wordpress/data": "^8.
|
|
39
|
-
"@wordpress/deprecated": "^3.
|
|
40
|
-
"@wordpress/element": "^5.
|
|
41
|
-
"@wordpress/i18n": "^4.
|
|
42
|
-
"@wordpress/icons": "^9.
|
|
43
|
-
"@wordpress/plugins": "^5.
|
|
44
|
-
"@wordpress/preferences": "^3.
|
|
45
|
-
"@wordpress/viewport": "^5.
|
|
35
|
+
"@wordpress/a11y": "^3.25.0",
|
|
36
|
+
"@wordpress/components": "^23.2.0",
|
|
37
|
+
"@wordpress/compose": "^6.2.0",
|
|
38
|
+
"@wordpress/data": "^8.2.0",
|
|
39
|
+
"@wordpress/deprecated": "^3.25.0",
|
|
40
|
+
"@wordpress/element": "^5.2.0",
|
|
41
|
+
"@wordpress/i18n": "^4.25.0",
|
|
42
|
+
"@wordpress/icons": "^9.16.0",
|
|
43
|
+
"@wordpress/plugins": "^5.2.0",
|
|
44
|
+
"@wordpress/preferences": "^3.2.0",
|
|
45
|
+
"@wordpress/viewport": "^5.2.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": "204c880ff65295768e9695dfee6c7a9fee1fdd05"
|
|
56
56
|
}
|
|
@@ -46,6 +46,7 @@ function InterfaceSkeleton(
|
|
|
46
46
|
actions,
|
|
47
47
|
labels,
|
|
48
48
|
className,
|
|
49
|
+
enableRegionNavigation = true,
|
|
49
50
|
// Todo: does this need to be a prop.
|
|
50
51
|
// Can we use a dependency to keyboard-shortcuts directly?
|
|
51
52
|
shortcuts,
|
|
@@ -83,8 +84,11 @@ function InterfaceSkeleton(
|
|
|
83
84
|
|
|
84
85
|
return (
|
|
85
86
|
<div
|
|
86
|
-
{ ...navigateRegionsProps }
|
|
87
|
-
ref={ useMergeRefs( [
|
|
87
|
+
{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }
|
|
88
|
+
ref={ useMergeRefs( [
|
|
89
|
+
ref,
|
|
90
|
+
enableRegionNavigation ? navigateRegionsProps.ref : undefined,
|
|
91
|
+
] ) }
|
|
88
92
|
className={ classnames(
|
|
89
93
|
className,
|
|
90
94
|
'interface-interface-skeleton',
|
|
@@ -72,16 +72,6 @@ html.interface-interface-skeleton__html-container {
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
.interface-interface-skeleton__content {
|
|
75
|
-
.interface-navigable-region__stacker {
|
|
76
|
-
// It's a flex item within a flex container with flex-direction column.
|
|
77
|
-
// Make sure it takes all the available height.
|
|
78
|
-
flex-grow: 1;
|
|
79
|
-
// Allow its flex items (the visual editor area) to take all the available
|
|
80
|
-
// height by making it also a flex container.
|
|
81
|
-
display: flex;
|
|
82
|
-
flex-direction: column;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
75
|
flex-grow: 1;
|
|
86
76
|
|
|
87
77
|
// Treat as flex container to allow children to grow to occupy full
|
|
@@ -135,10 +125,6 @@ html.interface-interface-skeleton__html-container {
|
|
|
135
125
|
}
|
|
136
126
|
|
|
137
127
|
.interface-interface-skeleton__secondary-sidebar {
|
|
138
|
-
.interface-navigable-region__stacker {
|
|
139
|
-
height: 100%;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
128
|
@include break-medium() {
|
|
143
129
|
border-right: $border-width solid $gray-200;
|
|
144
130
|
}
|
|
@@ -7,19 +7,27 @@ $vertical-tabs-width: 160px;
|
|
|
7
7
|
// Aligns button text instead of button box.
|
|
8
8
|
left: $grid-unit-20;
|
|
9
9
|
width: $vertical-tabs-width;
|
|
10
|
+
|
|
10
11
|
.components-tab-panel__tabs-item {
|
|
11
12
|
border-radius: $radius-block-ui;
|
|
12
13
|
font-weight: 400;
|
|
14
|
+
|
|
13
15
|
&.is-active {
|
|
14
16
|
background: $gray-100;
|
|
15
17
|
box-shadow: none;
|
|
16
18
|
font-weight: 500;
|
|
17
19
|
}
|
|
20
|
+
|
|
21
|
+
&.is-active::after {
|
|
22
|
+
content: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
18
25
|
&:focus:not(:disabled) {
|
|
19
26
|
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
|
|
20
27
|
}
|
|
21
28
|
}
|
|
22
29
|
}
|
|
30
|
+
|
|
23
31
|
.components-tab-panel__tab-content {
|
|
24
32
|
padding-left: $grid-unit-30;
|
|
25
33
|
margin-left: $vertical-tabs-width;
|