@wordpress/interface 6.3.0 → 6.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/components/interface-skeleton/index.js +12 -6
  3. package/build/components/interface-skeleton/index.js.map +1 -1
  4. package/build-module/components/interface-skeleton/index.js +12 -6
  5. package/build-module/components/interface-skeleton/index.js.map +1 -1
  6. package/build-style/style-rtl.css +4 -1
  7. package/build-style/style.css +4 -1
  8. package/package.json +14 -14
  9. package/src/components/complementary-area/style.scss +1 -1
  10. package/src/components/interface-skeleton/index.js +9 -7
package/CHANGELOG.md CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 6.5.0 (2024-08-07)
6
+
7
+ ## 6.4.0 (2024-07-24)
8
+
5
9
  ## 6.3.0 (2024-07-10)
6
10
 
7
11
  ## 6.2.0 (2024-06-26)
package/build/components/interface-skeleton/index.js CHANGED
@@ -150,7 +150,7 @@ function InterfaceSkeleton({
150
150
  ariaLabel: mergedLabels.secondarySidebar,
151
151
  as: _components.__unstableMotion.div,
152
152
  initial: "closed",
153
- animate: isMobileViewport ? 'mobileOpen' : 'open',
153
+ animate: "open",
154
154
  exit: "closed",
155
155
  variants: {
156
156
  open: {
@@ -158,19 +158,25 @@ function InterfaceSkeleton({
158
158
  },
159
159
  closed: {
160
160
  width: 0
161
- },
162
- mobileOpen: {
163
- width: '100vw'
164
161
  }
165
162
  },
166
163
  transition: defaultTransition,
167
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
164
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
168
165
  style: {
169
166
  position: 'absolute',
170
167
  width: isMobileViewport ? '100vw' : 'fit-content',
171
168
  height: '100%',
172
- right: 0
169
+ left: 0
170
+ },
171
+ variants: {
172
+ open: {
173
+ x: 0
174
+ },
175
+ closed: {
176
+ x: '-100%'
177
+ }
173
178
  },
179
+ transition: defaultTransition,
174
180
  children: [secondarySidebarResizeListener, secondarySidebar]
175
181
  })
176
182
  })
package/build/components/interface-skeleton/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_components","_i18n","_compose","_navigableRegion","_jsxRuntime","ANIMATION_DURATION","commonTransition","type","duration","ease","useHTMLClass","className","useEffect","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","marginTop","visible","distractionFreeHover","transition","delay","delayChildren","distractionFreeHidden","distractionFreeDisabled","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","content","actions","labels","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","useResizeObserver","isMobileViewport","useViewportMatch","disableMotion","useReducedMotion","defaultTransition","navigateRegionsProps","useNavigateRegions","defaultLabels","_x","body","__","mergedLabels","jsxs","useMergeRefs","undefined","clsx","children","jsx","__unstableAnimatePresence","initial","default","as","motion","div","whileHover","animate","exit","variants","ariaLabel","open","width","closed","mobileOpen","style","position","height","right","_default","exports","forwardRef"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\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: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\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\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 [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\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: _x( 'Header', 'header landmark area' ),\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={ clsx(\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<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\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<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\t\tisMobileViewport ? 'mobileOpen' : 'open'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t\tmobileOpen: { width: '100vw' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\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"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_components","_i18n","_compose","_navigableRegion","_jsxRuntime","ANIMATION_DURATION","commonTransition","type","duration","ease","useHTMLClass","className","useEffect","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","marginTop","visible","distractionFreeHover","transition","delay","delayChildren","distractionFreeHidden","distractionFreeDisabled","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","content","actions","labels","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","useResizeObserver","isMobileViewport","useViewportMatch","disableMotion","useReducedMotion","defaultTransition","navigateRegionsProps","useNavigateRegions","defaultLabels","_x","body","__","mergedLabels","jsxs","useMergeRefs","undefined","clsx","children","jsx","__unstableAnimatePresence","initial","default","as","motion","div","whileHover","animate","exit","variants","ariaLabel","open","width","closed","__unstableMotion","style","position","height","left","x","_default","exports","forwardRef"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\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: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\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\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 [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\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: _x( 'Header', 'header landmark area' ),\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={ clsx(\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<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\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<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\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"],"mappings":"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","ignoreList":[]}
package/build-module/components/interface-skeleton/index.js CHANGED
@@ -143,7 +143,7 @@ function InterfaceSkeleton({
143
143
  ariaLabel: mergedLabels.secondarySidebar,
144
144
  as: motion.div,
145
145
  initial: "closed",
146
- animate: isMobileViewport ? 'mobileOpen' : 'open',
146
+ animate: "open",
147
147
  exit: "closed",
148
148
  variants: {
149
149
  open: {
@@ -151,19 +151,25 @@ function InterfaceSkeleton({
151
151
  },
152
152
  closed: {
153
153
  width: 0
154
- },
155
- mobileOpen: {
156
- width: '100vw'
157
154
  }
158
155
  },
159
156
  transition: defaultTransition,
160
- children: /*#__PURE__*/_jsxs("div", {
157
+ children: /*#__PURE__*/_jsxs(motion.div, {
161
158
  style: {
162
159
  position: 'absolute',
163
160
  width: isMobileViewport ? '100vw' : 'fit-content',
164
161
  height: '100%',
165
- right: 0
162
+ left: 0
163
+ },
164
+ variants: {
165
+ open: {
166
+ x: 0
167
+ },
168
+ closed: {
169
+ x: '-100%'
170
+ }
166
171
  },
172
+ transition: defaultTransition,
167
173
  children: [secondarySidebarResizeListener, secondarySidebar]
168
174
  })
169
175
  })
package/build-module/components/interface-skeleton/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["clsx","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__","_x","useMergeRefs","useReducedMotion","useViewportMatch","useResizeObserver","NavigableRegion","jsx","_jsx","jsxs","_jsxs","ANIMATION_DURATION","commonTransition","type","duration","ease","useHTMLClass","className","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","marginTop","visible","distractionFreeHover","transition","delay","delayChildren","distractionFreeHidden","distractionFreeDisabled","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","content","actions","labels","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","isMobileViewport","disableMotion","defaultTransition","navigateRegionsProps","defaultLabels","body","mergedLabels","undefined","children","initial","as","div","whileHover","animate","exit","variants","ariaLabel","open","width","closed","mobileOpen","style","position","height","right"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\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: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\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\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 [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\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: _x( 'Header', 'header landmark area' ),\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={ clsx(\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<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\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<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\t\tisMobileViewport ? 'mobileOpen' : 'open'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t\tmobileOpen: { width: '100vw' },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\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"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["clsx","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__","_x","useMergeRefs","useReducedMotion","useViewportMatch","useResizeObserver","NavigableRegion","jsx","_jsx","jsxs","_jsxs","ANIMATION_DURATION","commonTransition","type","duration","ease","useHTMLClass","className","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","marginTop","visible","distractionFreeHover","transition","delay","delayChildren","distractionFreeHidden","distractionFreeDisabled","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","content","actions","labels","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","isMobileViewport","disableMotion","defaultTransition","navigateRegionsProps","defaultLabels","body","mergedLabels","undefined","children","initial","as","div","whileHover","animate","exit","variants","ariaLabel","open","width","closed","style","position","height","left","x"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\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: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\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\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 [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\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: _x( 'Header', 'header landmark area' ),\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={ clsx(\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<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\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<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\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"],"mappings":"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","ignoreList":[]}
package/build-style/style-rtl.css CHANGED
@@ -33,6 +33,9 @@
33
33
  * Grid System.
34
34
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
35
35
  */
36
+ /**
37
+ * Radius scale.
38
+ */
36
39
  /**
37
40
  * Dimensions.
38
41
  */
@@ -176,7 +179,7 @@
176
179
  top: 0;
177
180
  }
178
181
  }
179
- .interface-complementary-area p:not(.components-base-control__help) {
182
+ .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
180
183
  margin-top: 0;
181
184
  }
182
185
  .interface-complementary-area h2 {
package/build-style/style.css CHANGED
@@ -33,6 +33,9 @@
33
33
  * Grid System.
34
34
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
35
35
  */
36
+ /**
37
+ * Radius scale.
38
+ */
36
39
  /**
37
40
  * Dimensions.
38
41
  */
@@ -176,7 +179,7 @@
176
179
  top: 0;
177
180
  }
178
181
  }
179
- .interface-complementary-area p:not(.components-base-control__help) {
182
+ .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
180
183
  margin-top: 0;
181
184
  }
182
185
  .interface-complementary-area h2 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/interface",
3
- "version": "6.3.0",
3
+ "version": "6.5.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",
@@ -33,18 +33,18 @@
33
33
  ],
34
34
  "dependencies": {
35
35
  "@babel/runtime": "^7.16.0",
36
- "@wordpress/a11y": "^4.3.0",
37
- "@wordpress/components": "^28.3.0",
38
- "@wordpress/compose": "^7.3.0",
39
- "@wordpress/data": "^10.3.0",
40
- "@wordpress/deprecated": "^4.3.0",
41
- "@wordpress/element": "^6.3.0",
42
- "@wordpress/i18n": "^5.3.0",
43
- "@wordpress/icons": "^10.3.0",
44
- "@wordpress/plugins": "^7.3.0",
45
- "@wordpress/preferences": "^4.3.0",
46
- "@wordpress/private-apis": "^1.3.0",
47
- "@wordpress/viewport": "^6.3.0",
36
+ "@wordpress/a11y": "^4.5.0",
37
+ "@wordpress/components": "^28.5.0",
38
+ "@wordpress/compose": "^7.5.0",
39
+ "@wordpress/data": "^10.5.0",
40
+ "@wordpress/deprecated": "^4.5.0",
41
+ "@wordpress/element": "^6.5.0",
42
+ "@wordpress/i18n": "^5.5.0",
43
+ "@wordpress/icons": "^10.5.0",
44
+ "@wordpress/plugins": "^7.5.0",
45
+ "@wordpress/preferences": "^4.5.0",
46
+ "@wordpress/private-apis": "^1.5.0",
47
+ "@wordpress/viewport": "^6.5.0",
48
48
  "clsx": "^2.1.1"
49
49
  },
50
50
  "peerDependencies": {
@@ -54,5 +54,5 @@
54
54
  "publishConfig": {
55
55
  "access": "public"
56
56
  },
57
- "gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
57
+ "gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
58
58
  }
package/src/components/complementary-area/style.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  }
34
34
  }
35
35
 
36
- p:not(.components-base-control__help) {
36
+ p:not(.components-base-control__help, .components-form-token-field__help) {
37
37
  margin-top: 0;
38
38
  }
39
39
 
package/src/components/interface-skeleton/index.js CHANGED
@@ -182,30 +182,32 @@ function InterfaceSkeleton(
182
182
  ariaLabel={ mergedLabels.secondarySidebar }
183
183
  as={ motion.div }
184
184
  initial="closed"
185
- animate={
186
- isMobileViewport ? 'mobileOpen' : 'open'
187
- }
185
+ animate="open"
188
186
  exit="closed"
189
187
  variants={ {
190
188
  open: { width: secondarySidebarSize.width },
191
189
  closed: { width: 0 },
192
- mobileOpen: { width: '100vw' },
193
190
  } }
194
191
  transition={ defaultTransition }
195
192
  >
196
- <div
193
+ <motion.div
197
194
  style={ {
198
195
  position: 'absolute',
199
196
  width: isMobileViewport
200
197
  ? '100vw'
201
198
  : 'fit-content',
202
199
  height: '100%',
203
- right: 0,
200
+ left: 0,
204
201
  } }
202
+ variants={ {
203
+ open: { x: 0 },
204
+ closed: { x: '-100%' },
205
+ } }
206
+ transition={ defaultTransition }
205
207
  >
206
208
  { secondarySidebarResizeListener }
207
209
  { secondarySidebar }
208
- </div>
210
+ </motion.div>
209
211
  </NavigableRegion>
210
212
  ) }
211
213
  </AnimatePresence>