@wordpress/edit-widgets 3.1.17 → 3.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 CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 3.2.0 (2022-01-27)
6
+
5
7
  ## 3.1.0 (2021-11-07)
6
8
 
7
9
  ### Enhancement
package/LICENSE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ## Gutenberg
2
2
 
3
- Copyright 2016-2021 by the contributors
3
+ Copyright 2016-2022 by the contributors
4
4
 
5
5
  **License for Contributions (on and after April 15, 2021)**
6
6
 
@@ -96,9 +96,11 @@ function Interface(_ref) {
96
96
  sidebar: hasSidebarEnabled && (0, _element.createElement)(_interface.ComplementaryArea.Slot, {
97
97
  scope: "core/edit-widgets"
98
98
  }),
99
- content: (0, _element.createElement)(_widgetAreasBlockEditorContent.default, {
99
+ content: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_widgetAreasBlockEditorContent.default, {
100
100
  blockEditorSettings: blockEditorSettings
101
- }),
101
+ }), (0, _element.createElement)(_blockEditor.BlockStyles.Slot, {
102
+ scope: "core/block-inspector"
103
+ })),
102
104
  footer: hasBlockBreadCrumbsEnabled && !isMobileViewport && (0, _element.createElement)("div", {
103
105
  className: "edit-widgets-layout__footer"
104
106
  }, (0, _element.createElement)(_blockEditor.BlockBreadcrumb, {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/edit-widgets/src/components/layout/interface.js"],"names":["interfaceLabels","header","body","sidebar","footer","Interface","blockEditorSettings","isMobileViewport","isHugeViewport","setIsInserterOpened","setIsListViewOpened","closeGeneralSidebar","editWidgetsStore","hasBlockBreadCrumbsEnabled","hasSidebarEnabled","isInserterOpened","isListViewOpened","previousShortcut","nextShortcut","select","interfaceStore","getActiveComplementaryArea","name","isFeatureActive","keyboardShortcutsStore","getAllShortcutKeyCombinations","hasSecondarySidebar","previous","next"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { BlockBreadcrumb } from '@wordpress/block-editor';\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tInterfaceSkeleton,\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport { __ } from '@wordpress/i18n';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport Header from '../header';\nimport WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';\nimport { store as editWidgetsStore } from '../../store';\nimport SecondarySidebar from '../secondary-sidebar';\n\nconst interfaceLabels = {\n\t/* translators: accessibility text for the widgets screen top bar landmark region. */\n\theader: __( 'Widgets top bar' ),\n\t/* translators: accessibility text for the widgets screen content landmark region. */\n\tbody: __( 'Widgets and blocks' ),\n\t/* translators: accessibility text for the widgets screen settings landmark region. */\n\tsidebar: __( 'Widgets settings' ),\n\t/* translators: accessibility text for the widgets screen footer landmark region. */\n\tfooter: __( 'Widgets footer' ),\n};\n\nfunction Interface( { blockEditorSettings } ) {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst isHugeViewport = useViewportMatch( 'huge', '>=' );\n\tconst {\n\t\tsetIsInserterOpened,\n\t\tsetIsListViewOpened,\n\t\tcloseGeneralSidebar,\n\t} = useDispatch( editWidgetsStore );\n\tconst {\n\t\thasBlockBreadCrumbsEnabled,\n\t\thasSidebarEnabled,\n\t\tisInserterOpened,\n\t\tisListViewOpened,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t} = useSelect(\n\t\t( select ) => ( {\n\t\t\thasSidebarEnabled: !! select(\n\t\t\t\tinterfaceStore\n\t\t\t).getActiveComplementaryArea( editWidgetsStore.name ),\n\t\t\tisInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),\n\t\t\tisListViewOpened: !! select( editWidgetsStore ).isListViewOpened(),\n\t\t\thasBlockBreadCrumbsEnabled: select(\n\t\t\t\tinterfaceStore\n\t\t\t).isFeatureActive( 'core/edit-widgets', 'showBlockBreadcrumbs' ),\n\t\t\tpreviousShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-widgets/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations( 'core/edit-widgets/next-region' ),\n\t\t} ),\n\t\t[]\n\t);\n\n\t// Inserter and Sidebars are mutually exclusive\n\tuseEffect( () => {\n\t\tif ( hasSidebarEnabled && ! isHugeViewport ) {\n\t\t\tsetIsInserterOpened( false );\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}, [ hasSidebarEnabled, isHugeViewport ] );\n\n\tuseEffect( () => {\n\t\tif ( ( isInserterOpened || isListViewOpened ) && ! isHugeViewport ) {\n\t\t\tcloseGeneralSidebar();\n\t\t}\n\t}, [ isInserterOpened, isListViewOpened, isHugeViewport ] );\n\n\tconst hasSecondarySidebar = isListViewOpened || isInserterOpened;\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tlabels={ interfaceLabels }\n\t\t\theader={ <Header /> }\n\t\t\tsecondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }\n\t\t\tsidebar={\n\t\t\t\thasSidebarEnabled && (\n\t\t\t\t\t<ComplementaryArea.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<WidgetAreasBlockEditorContent\n\t\t\t\t\tblockEditorSettings={ blockEditorSettings }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tfooter={\n\t\t\t\thasBlockBreadCrumbsEnabled &&\n\t\t\t\t! isMobileViewport && (\n\t\t\t\t\t<div className=\"edit-widgets-layout__footer\">\n\t\t\t\t\t\t<BlockBreadcrumb rootLabelText={ __( 'Widgets' ) } />\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t\tshortcuts={ {\n\t\t\t\tprevious: previousShortcut,\n\t\t\t\tnext: nextShortcut,\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default Interface;\n"]}
1
+ {"version":3,"sources":["@wordpress/edit-widgets/src/components/layout/interface.js"],"names":["interfaceLabels","header","body","sidebar","footer","Interface","blockEditorSettings","isMobileViewport","isHugeViewport","setIsInserterOpened","setIsListViewOpened","closeGeneralSidebar","editWidgetsStore","hasBlockBreadCrumbsEnabled","hasSidebarEnabled","isInserterOpened","isListViewOpened","previousShortcut","nextShortcut","select","interfaceStore","getActiveComplementaryArea","name","isFeatureActive","keyboardShortcutsStore","getAllShortcutKeyCombinations","hasSecondarySidebar","previous","next"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tInterfaceSkeleton,\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport { __ } from '@wordpress/i18n';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport Header from '../header';\nimport WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';\nimport { store as editWidgetsStore } from '../../store';\nimport SecondarySidebar from '../secondary-sidebar';\n\nconst interfaceLabels = {\n\t/* translators: accessibility text for the widgets screen top bar landmark region. */\n\theader: __( 'Widgets top bar' ),\n\t/* translators: accessibility text for the widgets screen content landmark region. */\n\tbody: __( 'Widgets and blocks' ),\n\t/* translators: accessibility text for the widgets screen settings landmark region. */\n\tsidebar: __( 'Widgets settings' ),\n\t/* translators: accessibility text for the widgets screen footer landmark region. */\n\tfooter: __( 'Widgets footer' ),\n};\n\nfunction Interface( { blockEditorSettings } ) {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst isHugeViewport = useViewportMatch( 'huge', '>=' );\n\tconst {\n\t\tsetIsInserterOpened,\n\t\tsetIsListViewOpened,\n\t\tcloseGeneralSidebar,\n\t} = useDispatch( editWidgetsStore );\n\tconst {\n\t\thasBlockBreadCrumbsEnabled,\n\t\thasSidebarEnabled,\n\t\tisInserterOpened,\n\t\tisListViewOpened,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t} = useSelect(\n\t\t( select ) => ( {\n\t\t\thasSidebarEnabled: !! select(\n\t\t\t\tinterfaceStore\n\t\t\t).getActiveComplementaryArea( editWidgetsStore.name ),\n\t\t\tisInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),\n\t\t\tisListViewOpened: !! select( editWidgetsStore ).isListViewOpened(),\n\t\t\thasBlockBreadCrumbsEnabled: select(\n\t\t\t\tinterfaceStore\n\t\t\t).isFeatureActive( 'core/edit-widgets', 'showBlockBreadcrumbs' ),\n\t\t\tpreviousShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-widgets/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations( 'core/edit-widgets/next-region' ),\n\t\t} ),\n\t\t[]\n\t);\n\n\t// Inserter and Sidebars are mutually exclusive\n\tuseEffect( () => {\n\t\tif ( hasSidebarEnabled && ! isHugeViewport ) {\n\t\t\tsetIsInserterOpened( false );\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}, [ hasSidebarEnabled, isHugeViewport ] );\n\n\tuseEffect( () => {\n\t\tif ( ( isInserterOpened || isListViewOpened ) && ! isHugeViewport ) {\n\t\t\tcloseGeneralSidebar();\n\t\t}\n\t}, [ isInserterOpened, isListViewOpened, isHugeViewport ] );\n\n\tconst hasSecondarySidebar = isListViewOpened || isInserterOpened;\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tlabels={ interfaceLabels }\n\t\t\theader={ <Header /> }\n\t\t\tsecondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }\n\t\t\tsidebar={\n\t\t\t\thasSidebarEnabled && (\n\t\t\t\t\t<ComplementaryArea.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t<WidgetAreasBlockEditorContent\n\t\t\t\t\t\tblockEditorSettings={ blockEditorSettings }\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockStyles.Slot scope=\"core/block-inspector\" />\n\t\t\t\t</>\n\t\t\t}\n\t\t\tfooter={\n\t\t\t\thasBlockBreadCrumbsEnabled &&\n\t\t\t\t! isMobileViewport && (\n\t\t\t\t\t<div className=\"edit-widgets-layout__footer\">\n\t\t\t\t\t\t<BlockBreadcrumb rootLabelText={ __( 'Widgets' ) } />\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t\tshortcuts={ {\n\t\t\t\tprevious: previousShortcut,\n\t\t\t\tnext: nextShortcut,\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default Interface;\n"]}
@@ -21,6 +21,8 @@ var _compose = require("@wordpress/compose");
21
21
 
22
22
  var _data = require("@wordpress/data");
23
23
 
24
+ var _i18n = require("@wordpress/i18n");
25
+
24
26
  var _useWidgetLibraryInsertionPoint = _interopRequireDefault(require("../../hooks/use-widget-library-insertion-point"));
25
27
 
26
28
  var _store = require("../../store");
@@ -42,27 +44,35 @@ function InserterSidebar() {
42
44
  setIsInserterOpened
43
45
  } = (0, _data.useDispatch)(_store.store);
44
46
  const closeInserter = (0, _element.useCallback)(() => {
45
- return () => setIsInserterOpened(false);
47
+ return setIsInserterOpened(false);
46
48
  }, [setIsInserterOpened]);
49
+ const TagName = !isMobileViewport ? _components.VisuallyHidden : 'div';
47
50
  const [inserterDialogRef, inserterDialogProps] = (0, _compose.__experimentalUseDialog)({
48
- onClose: closeInserter
51
+ onClose: closeInserter,
52
+ focusOnMount: null
49
53
  });
54
+ const libraryRef = (0, _element.useRef)();
55
+ (0, _element.useEffect)(() => {
56
+ libraryRef.current.focusSearch();
57
+ }, []);
50
58
  return (0, _element.createElement)("div", (0, _extends2.default)({
51
59
  ref: inserterDialogRef
52
60
  }, inserterDialogProps, {
53
61
  className: "edit-widgets-layout__inserter-panel"
54
- }), (0, _element.createElement)("div", {
62
+ }), (0, _element.createElement)(TagName, {
55
63
  className: "edit-widgets-layout__inserter-panel-header"
56
64
  }, (0, _element.createElement)(_components.Button, {
57
65
  icon: _icons.close,
58
- onClick: closeInserter
66
+ onClick: closeInserter,
67
+ label: (0, _i18n.__)('Close block inserter')
59
68
  })), (0, _element.createElement)("div", {
60
69
  className: "edit-widgets-layout__inserter-panel-content"
61
70
  }, (0, _element.createElement)(_blockEditor.__experimentalLibrary, {
62
71
  showInserterHelpPanel: true,
63
72
  shouldFocusBlock: isMobileViewport,
64
73
  rootClientId: rootClientId,
65
- __experimentalInsertionIndex: insertionIndex
74
+ __experimentalInsertionIndex: insertionIndex,
75
+ ref: libraryRef
66
76
  })));
67
77
  }
68
78
  //# sourceMappingURL=inserter-sidebar.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js"],"names":["InserterSidebar","isMobileViewport","rootClientId","insertionIndex","setIsInserterOpened","editWidgetsStore","closeInserter","inserterDialogRef","inserterDialogProps","onClose","close"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AACA;;AACA;;AACA;;AAKA;;AAKA;;AACA;;AAjBA;AACA;AACA;;AAWA;AACA;AACA;AAIe,SAASA,eAAT,GAA2B;AACzC,QAAMC,gBAAgB,GAAG,+BAAkB,QAAlB,EAA4B,GAA5B,CAAzB;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAmC,8CAAzC;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,YAAb,CAAhC;AAEA,QAAMC,aAAa,GAAG,0BAAa,MAAM;AACxC,WAAO,MAAMF,mBAAmB,CAAE,KAAF,CAAhC;AACA,GAFqB,EAEnB,CAAEA,mBAAF,CAFmB,CAAtB;AAIA,QAAM,CAAEG,iBAAF,EAAqBC,mBAArB,IAA6C,sCAAW;AAC7DC,IAAAA,OAAO,EAAEH;AADoD,GAAX,CAAnD;AAIA,SACC;AACC,IAAA,GAAG,EAAGC;AADP,KAEMC,mBAFN;AAGC,IAAA,SAAS,EAAC;AAHX,MAKC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kBAAD;AAAQ,IAAA,IAAI,EAAGE,YAAf;AAAuB,IAAA,OAAO,EAAGJ;AAAjC,IADD,CALD,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kCAAD;AACC,IAAA,qBAAqB,MADtB;AAEC,IAAA,gBAAgB,EAAGL,gBAFpB;AAGC,IAAA,YAAY,EAAGC,YAHhB;AAIC,IAAA,4BAA4B,EAAGC;AAJhC,IADD,CARD,CADD;AAmBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { close } from '@wordpress/icons';\nimport { __experimentalLibrary as Library } from '@wordpress/block-editor';\nimport {\n\tuseViewportMatch,\n\t__experimentalUseDialog as useDialog,\n} from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport useWidgetLibraryInsertionPoint from '../../hooks/use-widget-library-insertion-point';\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function InserterSidebar() {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();\n\n\tconst { setIsInserterOpened } = useDispatch( editWidgetsStore );\n\n\tconst closeInserter = useCallback( () => {\n\t\treturn () => setIsInserterOpened( false );\n\t}, [ setIsInserterOpened ] );\n\n\tconst [ inserterDialogRef, inserterDialogProps ] = useDialog( {\n\t\tonClose: closeInserter,\n\t} );\n\n\treturn (\n\t\t<div\n\t\t\tref={ inserterDialogRef }\n\t\t\t{ ...inserterDialogProps }\n\t\t\tclassName=\"edit-widgets-layout__inserter-panel\"\n\t\t>\n\t\t\t<div className=\"edit-widgets-layout__inserter-panel-header\">\n\t\t\t\t<Button icon={ close } onClick={ closeInserter } />\n\t\t\t</div>\n\t\t\t<div className=\"edit-widgets-layout__inserter-panel-content\">\n\t\t\t\t<Library\n\t\t\t\t\tshowInserterHelpPanel\n\t\t\t\t\tshouldFocusBlock={ isMobileViewport }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t__experimentalInsertionIndex={ insertionIndex }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js"],"names":["InserterSidebar","isMobileViewport","rootClientId","insertionIndex","setIsInserterOpened","editWidgetsStore","closeInserter","TagName","VisuallyHidden","inserterDialogRef","inserterDialogProps","onClose","focusOnMount","libraryRef","current","focusSearch","close"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAKA;;AACA;;AAlBA;AACA;AACA;;AAYA;AACA;AACA;AAIe,SAASA,eAAT,GAA2B;AACzC,QAAMC,gBAAgB,GAAG,+BAAkB,QAAlB,EAA4B,GAA5B,CAAzB;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAmC,8CAAzC;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,YAAb,CAAhC;AAEA,QAAMC,aAAa,GAAG,0BAAa,MAAM;AACxC,WAAOF,mBAAmB,CAAE,KAAF,CAA1B;AACA,GAFqB,EAEnB,CAAEA,mBAAF,CAFmB,CAAtB;AAIA,QAAMG,OAAO,GAAG,CAAEN,gBAAF,GAAqBO,0BAArB,GAAsC,KAAtD;AACA,QAAM,CAAEC,iBAAF,EAAqBC,mBAArB,IAA6C,sCAAW;AAC7DC,IAAAA,OAAO,EAAEL,aADoD;AAE7DM,IAAAA,YAAY,EAAE;AAF+C,GAAX,CAAnD;AAKA,QAAMC,UAAU,GAAG,sBAAnB;AACA,0BAAW,MAAM;AAChBA,IAAAA,UAAU,CAACC,OAAX,CAAmBC,WAAnB;AACA,GAFD,EAEG,EAFH;AAIA,SACC;AACC,IAAA,GAAG,EAAGN;AADP,KAEMC,mBAFN;AAGC,IAAA,SAAS,EAAC;AAHX,MAKC,4BAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,4BAAC,kBAAD;AACC,IAAA,IAAI,EAAGM,YADR;AAEC,IAAA,OAAO,EAAGV,aAFX;AAGC,IAAA,KAAK,EAAG,cAAI,sBAAJ;AAHT,IADD,CALD,EAYC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kCAAD;AACC,IAAA,qBAAqB,MADtB;AAEC,IAAA,gBAAgB,EAAGL,gBAFpB;AAGC,IAAA,YAAY,EAAGC,YAHhB;AAIC,IAAA,4BAA4B,EAAGC,cAJhC;AAKC,IAAA,GAAG,EAAGU;AALP,IADD,CAZD,CADD;AAwBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button, VisuallyHidden } from '@wordpress/components';\nimport { close } from '@wordpress/icons';\nimport { __experimentalLibrary as Library } from '@wordpress/block-editor';\nimport {\n\tuseViewportMatch,\n\t__experimentalUseDialog as useDialog,\n} from '@wordpress/compose';\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useWidgetLibraryInsertionPoint from '../../hooks/use-widget-library-insertion-point';\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function InserterSidebar() {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();\n\n\tconst { setIsInserterOpened } = useDispatch( editWidgetsStore );\n\n\tconst closeInserter = useCallback( () => {\n\t\treturn setIsInserterOpened( false );\n\t}, [ setIsInserterOpened ] );\n\n\tconst TagName = ! isMobileViewport ? VisuallyHidden : 'div';\n\tconst [ inserterDialogRef, inserterDialogProps ] = useDialog( {\n\t\tonClose: closeInserter,\n\t\tfocusOnMount: null,\n\t} );\n\n\tconst libraryRef = useRef();\n\tuseEffect( () => {\n\t\tlibraryRef.current.focusSearch();\n\t}, [] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ inserterDialogRef }\n\t\t\t{ ...inserterDialogProps }\n\t\t\tclassName=\"edit-widgets-layout__inserter-panel\"\n\t\t>\n\t\t\t<TagName className=\"edit-widgets-layout__inserter-panel-header\">\n\t\t\t\t<Button\n\t\t\t\t\ticon={ close }\n\t\t\t\t\tonClick={ closeInserter }\n\t\t\t\t\tlabel={ __( 'Close block inserter' ) }\n\t\t\t\t/>\n\t\t\t</TagName>\n\t\t\t<div className=\"edit-widgets-layout__inserter-panel-content\">\n\t\t\t\t<Library\n\t\t\t\t\tshowInserterHelpPanel\n\t\t\t\t\tshouldFocusBlock={ isMobileViewport }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t__experimentalInsertionIndex={ insertionIndex }\n\t\t\t\t\tref={ libraryRef }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -45,7 +45,8 @@ function ListViewSidebar() {
45
45
  }
46
46
 
47
47
  const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement');
48
- const focusReturnRef = (0, _compose.useFocusReturn)();
48
+ const headerFocusReturnRef = (0, _compose.useFocusReturn)();
49
+ const contentFocusReturnRef = (0, _compose.useFocusReturn)();
49
50
 
50
51
  function closeOnEscape(event) {
51
52
  if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented) {
@@ -62,16 +63,17 @@ function ListViewSidebar() {
62
63
  className: "edit-widgets-editor__list-view-panel",
63
64
  onKeyDown: closeOnEscape
64
65
  }, (0, _element.createElement)("div", {
65
- className: "edit-widgets-editor__list-view-panel-header"
66
+ className: "edit-widgets-editor__list-view-panel-header",
67
+ ref: headerFocusReturnRef
66
68
  }, (0, _element.createElement)("strong", {
67
69
  id: labelId
68
- }, (0, _i18n.__)('List view')), (0, _element.createElement)(_components.Button, {
70
+ }, (0, _i18n.__)('List View')), (0, _element.createElement)(_components.Button, {
69
71
  icon: _icons.closeSmall,
70
- label: (0, _i18n.__)('Close list view sidebar'),
72
+ label: (0, _i18n.__)('Close List View Sidebar'),
71
73
  onClick: () => setIsListViewOpened(false)
72
74
  })), (0, _element.createElement)("div", {
73
75
  className: "edit-widgets-editor__list-view-panel-content",
74
- ref: (0, _compose.useMergeRefs)([focusReturnRef, focusOnMountRef])
76
+ ref: (0, _compose.useMergeRefs)([contentFocusReturnRef, focusOnMountRef])
75
77
  }, (0, _element.createElement)(_blockEditor.__experimentalListView, {
76
78
  onSelect: selectEditorBlock,
77
79
  showNestedBlocks: true,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["ListViewSidebar","setIsListViewOpened","editWidgetsStore","clearSelectedBlock","selectBlock","blockEditorStore","selectEditorBlock","clientId","focusOnMountRef","focusReturnRef","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","instanceId","labelId","closeSmall"],"mappings":";;;;;;;;;AAGA;;AAIA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AAKA;;AAtBA;AACA;AACA;;AAiBA;AACA;AACA;AAGe,SAASA,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,YAAb,CAAhC;AAEA,QAAM;AAAEC,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MAAsC,uBAAaC,kBAAb,CAA5C;;AACA,iBAAeC,iBAAf,CAAkCC,QAAlC,EAA6C;AAC5C,UAAMJ,kBAAkB,EAAxB;AACAC,IAAAA,WAAW,CAAEG,QAAF,EAAY,CAAC,CAAb,CAAX;AACA;;AAED,QAAMC,eAAe,GAAG,8BAAiB,cAAjB,CAAxB;AACA,QAAMC,cAAc,GAAG,8BAAvB;;AACA,WAASC,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBC,gBAAlB,IAA4B,CAAEF,KAAK,CAACG,gBAAzC,EAA4D;AAC3DH,MAAAA,KAAK,CAACI,cAAN;AACAd,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,QAAMe,UAAU,GAAG,4BAAehB,eAAf,CAAnB;AACA,QAAMiB,OAAO,GAAI,8CAA8CD,UAAY,EAA3E;AAEA,SACC;AACA;AACC,yBAAkBC,OADnB;AAEC,MAAA,SAAS,EAAC,sCAFX;AAGC,MAAA,SAAS,EAAGP;AAHb,OAKC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC;AAAQ,MAAA,EAAE,EAAGO;AAAb,OAAyB,cAAI,WAAJ,CAAzB,CADD,EAEC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGC,iBADR;AAEC,MAAA,KAAK,EAAG,cAAI,yBAAJ,CAFT;AAGC,MAAA,OAAO,EAAG,MAAMjB,mBAAmB,CAAE,KAAF;AAHpC,MAFD,CALD,EAaC;AACC,MAAA,SAAS,EAAC,8CADX;AAEC,MAAA,GAAG,EAAG,2BAAc,CAAEQ,cAAF,EAAkBD,eAAlB,CAAd;AAFP,OAIC,4BAAC,mCAAD;AACC,MAAA,QAAQ,EAAGF,iBADZ;AAEC,MAAA,gBAAgB,MAFjB;AAGC,MAAA,uCAAuC,MAHxC;AAIC,MAAA,sBAAsB,MAJvB;AAKC,MAAA,wCAAwC;AALzC,MAJD,CAbD;AAFD;AA6BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalListView as ListView,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseInstanceId,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\tconst { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );\n\tasync function selectEditorBlock( clientId ) {\n\t\tawait clearSelectedBlock();\n\t\tselectBlock( clientId, -1 );\n\t}\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst focusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\tconst instanceId = useInstanceId( ListViewSidebar );\n\tconst labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\taria-labelledby={ labelId }\n\t\t\tclassName=\"edit-widgets-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div className=\"edit-widgets-editor__list-view-panel-header\">\n\t\t\t\t<strong id={ labelId }>{ __( 'List view' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close list view sidebar' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }\n\t\t\t>\n\t\t\t\t<ListView\n\t\t\t\t\tonSelect={ selectEditorBlock }\n\t\t\t\t\tshowNestedBlocks\n\t\t\t\t\t__experimentalHideContainerBlockActions\n\t\t\t\t\t__experimentalFeatures\n\t\t\t\t\t__experimentalPersistentListViewFeatures\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["ListViewSidebar","setIsListViewOpened","editWidgetsStore","clearSelectedBlock","selectBlock","blockEditorStore","selectEditorBlock","clientId","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","instanceId","labelId","closeSmall"],"mappings":";;;;;;;;;AAGA;;AAIA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AAKA;;AAtBA;AACA;AACA;;AAiBA;AACA;AACA;AAGe,SAASA,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,YAAb,CAAhC;AAEA,QAAM;AAAEC,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MAAsC,uBAAaC,kBAAb,CAA5C;;AACA,iBAAeC,iBAAf,CAAkCC,QAAlC,EAA6C;AAC5C,UAAMJ,kBAAkB,EAAxB;AACAC,IAAAA,WAAW,CAAEG,QAAF,EAAY,CAAC,CAAb,CAAX;AACA;;AAED,QAAMC,eAAe,GAAG,8BAAiB,cAAjB,CAAxB;AACA,QAAMC,oBAAoB,GAAG,8BAA7B;AACA,QAAMC,qBAAqB,GAAG,8BAA9B;;AACA,WAASC,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBC,gBAAlB,IAA4B,CAAEF,KAAK,CAACG,gBAAzC,EAA4D;AAC3DH,MAAAA,KAAK,CAACI,cAAN;AACAf,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,QAAMgB,UAAU,GAAG,4BAAejB,eAAf,CAAnB;AACA,QAAMkB,OAAO,GAAI,8CAA8CD,UAAY,EAA3E;AAEA,SACC;AACA;AACC,yBAAkBC,OADnB;AAEC,MAAA,SAAS,EAAC,sCAFX;AAGC,MAAA,SAAS,EAAGP;AAHb,OAKC;AACC,MAAA,SAAS,EAAC,6CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC;AAAQ,MAAA,EAAE,EAAGS;AAAb,OAAyB,cAAI,WAAJ,CAAzB,CAJD,EAKC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGC,iBADR;AAEC,MAAA,KAAK,EAAG,cAAI,yBAAJ,CAFT;AAGC,MAAA,OAAO,EAAG,MAAMlB,mBAAmB,CAAE,KAAF;AAHpC,MALD,CALD,EAgBC;AACC,MAAA,SAAS,EAAC,8CADX;AAEC,MAAA,GAAG,EAAG,2BAAc,CACnBS,qBADmB,EAEnBF,eAFmB,CAAd;AAFP,OAOC,4BAAC,mCAAD;AACC,MAAA,QAAQ,EAAGF,iBADZ;AAEC,MAAA,gBAAgB,MAFjB;AAGC,MAAA,uCAAuC,MAHxC;AAIC,MAAA,sBAAsB,MAJvB;AAKC,MAAA,wCAAwC;AALzC,MAPD,CAhBD;AAFD;AAmCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalListView as ListView,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseInstanceId,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\tconst { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );\n\tasync function selectEditorBlock( clientId ) {\n\t\tawait clearSelectedBlock();\n\t\tselectBlock( clientId, -1 );\n\t}\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\tconst instanceId = useInstanceId( ListViewSidebar );\n\tconst labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\taria-labelledby={ labelId }\n\t\t\tclassName=\"edit-widgets-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-header\"\n\t\t\t\tref={ headerFocusReturnRef }\n\t\t\t>\n\t\t\t\t<strong id={ labelId }>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close List View Sidebar' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tcontentFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t<ListView\n\t\t\t\t\tonSelect={ selectEditorBlock }\n\t\t\t\t\tshowNestedBlocks\n\t\t\t\t\t__experimentalHideContainerBlockActions\n\t\t\t\t\t__experimentalFeatures\n\t\t\t\t\t__experimentalPersistentListViewFeatures\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -1,10 +1,10 @@
1
- import { createElement } from "@wordpress/element";
1
+ import { createElement, Fragment } from "@wordpress/element";
2
2
 
3
3
  /**
4
4
  * WordPress dependencies
5
5
  */
6
6
  import { useViewportMatch } from '@wordpress/compose';
7
- import { BlockBreadcrumb } from '@wordpress/block-editor';
7
+ import { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';
8
8
  import { useEffect } from '@wordpress/element';
9
9
  import { useDispatch, useSelect } from '@wordpress/data';
10
10
  import { InterfaceSkeleton, ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
@@ -78,9 +78,11 @@ function Interface(_ref) {
78
78
  sidebar: hasSidebarEnabled && createElement(ComplementaryArea.Slot, {
79
79
  scope: "core/edit-widgets"
80
80
  }),
81
- content: createElement(WidgetAreasBlockEditorContent, {
81
+ content: createElement(Fragment, null, createElement(WidgetAreasBlockEditorContent, {
82
82
  blockEditorSettings: blockEditorSettings
83
- }),
83
+ }), createElement(BlockStyles.Slot, {
84
+ scope: "core/block-inspector"
85
+ })),
84
86
  footer: hasBlockBreadCrumbsEnabled && !isMobileViewport && createElement("div", {
85
87
  className: "edit-widgets-layout__footer"
86
88
  }, createElement(BlockBreadcrumb, {
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/edit-widgets/src/components/layout/interface.js"],"names":["useViewportMatch","BlockBreadcrumb","useEffect","useDispatch","useSelect","InterfaceSkeleton","ComplementaryArea","store","interfaceStore","__","keyboardShortcutsStore","Header","WidgetAreasBlockEditorContent","editWidgetsStore","SecondarySidebar","interfaceLabels","header","body","sidebar","footer","Interface","blockEditorSettings","isMobileViewport","isHugeViewport","setIsInserterOpened","setIsListViewOpened","closeGeneralSidebar","hasBlockBreadCrumbsEnabled","hasSidebarEnabled","isInserterOpened","isListViewOpened","previousShortcut","nextShortcut","select","getActiveComplementaryArea","name","isFeatureActive","getAllShortcutKeyCombinations","hasSecondarySidebar","previous","next"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { BlockBreadcrumb } from '@wordpress/block-editor';\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tInterfaceSkeleton,\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport { __ } from '@wordpress/i18n';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport Header from '../header';\nimport WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';\nimport { store as editWidgetsStore } from '../../store';\nimport SecondarySidebar from '../secondary-sidebar';\n\nconst interfaceLabels = {\n\t/* translators: accessibility text for the widgets screen top bar landmark region. */\n\theader: __( 'Widgets top bar' ),\n\t/* translators: accessibility text for the widgets screen content landmark region. */\n\tbody: __( 'Widgets and blocks' ),\n\t/* translators: accessibility text for the widgets screen settings landmark region. */\n\tsidebar: __( 'Widgets settings' ),\n\t/* translators: accessibility text for the widgets screen footer landmark region. */\n\tfooter: __( 'Widgets footer' ),\n};\n\nfunction Interface( { blockEditorSettings } ) {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst isHugeViewport = useViewportMatch( 'huge', '>=' );\n\tconst {\n\t\tsetIsInserterOpened,\n\t\tsetIsListViewOpened,\n\t\tcloseGeneralSidebar,\n\t} = useDispatch( editWidgetsStore );\n\tconst {\n\t\thasBlockBreadCrumbsEnabled,\n\t\thasSidebarEnabled,\n\t\tisInserterOpened,\n\t\tisListViewOpened,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t} = useSelect(\n\t\t( select ) => ( {\n\t\t\thasSidebarEnabled: !! select(\n\t\t\t\tinterfaceStore\n\t\t\t).getActiveComplementaryArea( editWidgetsStore.name ),\n\t\t\tisInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),\n\t\t\tisListViewOpened: !! select( editWidgetsStore ).isListViewOpened(),\n\t\t\thasBlockBreadCrumbsEnabled: select(\n\t\t\t\tinterfaceStore\n\t\t\t).isFeatureActive( 'core/edit-widgets', 'showBlockBreadcrumbs' ),\n\t\t\tpreviousShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-widgets/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations( 'core/edit-widgets/next-region' ),\n\t\t} ),\n\t\t[]\n\t);\n\n\t// Inserter and Sidebars are mutually exclusive\n\tuseEffect( () => {\n\t\tif ( hasSidebarEnabled && ! isHugeViewport ) {\n\t\t\tsetIsInserterOpened( false );\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}, [ hasSidebarEnabled, isHugeViewport ] );\n\n\tuseEffect( () => {\n\t\tif ( ( isInserterOpened || isListViewOpened ) && ! isHugeViewport ) {\n\t\t\tcloseGeneralSidebar();\n\t\t}\n\t}, [ isInserterOpened, isListViewOpened, isHugeViewport ] );\n\n\tconst hasSecondarySidebar = isListViewOpened || isInserterOpened;\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tlabels={ interfaceLabels }\n\t\t\theader={ <Header /> }\n\t\t\tsecondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }\n\t\t\tsidebar={\n\t\t\t\thasSidebarEnabled && (\n\t\t\t\t\t<ComplementaryArea.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<WidgetAreasBlockEditorContent\n\t\t\t\t\tblockEditorSettings={ blockEditorSettings }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tfooter={\n\t\t\t\thasBlockBreadCrumbsEnabled &&\n\t\t\t\t! isMobileViewport && (\n\t\t\t\t\t<div className=\"edit-widgets-layout__footer\">\n\t\t\t\t\t\t<BlockBreadcrumb rootLabelText={ __( 'Widgets' ) } />\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t\tshortcuts={ {\n\t\t\t\tprevious: previousShortcut,\n\t\t\t\tnext: nextShortcut,\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default Interface;\n"]}
1
+ {"version":3,"sources":["@wordpress/edit-widgets/src/components/layout/interface.js"],"names":["useViewportMatch","BlockBreadcrumb","BlockStyles","useEffect","useDispatch","useSelect","InterfaceSkeleton","ComplementaryArea","store","interfaceStore","__","keyboardShortcutsStore","Header","WidgetAreasBlockEditorContent","editWidgetsStore","SecondarySidebar","interfaceLabels","header","body","sidebar","footer","Interface","blockEditorSettings","isMobileViewport","isHugeViewport","setIsInserterOpened","setIsListViewOpened","closeGeneralSidebar","hasBlockBreadCrumbsEnabled","hasSidebarEnabled","isInserterOpened","isListViewOpened","previousShortcut","nextShortcut","select","getActiveComplementaryArea","name","isFeatureActive","getAllShortcutKeyCombinations","hasSecondarySidebar","previous","next"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tInterfaceSkeleton,\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport { __ } from '@wordpress/i18n';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport Header from '../header';\nimport WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';\nimport { store as editWidgetsStore } from '../../store';\nimport SecondarySidebar from '../secondary-sidebar';\n\nconst interfaceLabels = {\n\t/* translators: accessibility text for the widgets screen top bar landmark region. */\n\theader: __( 'Widgets top bar' ),\n\t/* translators: accessibility text for the widgets screen content landmark region. */\n\tbody: __( 'Widgets and blocks' ),\n\t/* translators: accessibility text for the widgets screen settings landmark region. */\n\tsidebar: __( 'Widgets settings' ),\n\t/* translators: accessibility text for the widgets screen footer landmark region. */\n\tfooter: __( 'Widgets footer' ),\n};\n\nfunction Interface( { blockEditorSettings } ) {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst isHugeViewport = useViewportMatch( 'huge', '>=' );\n\tconst {\n\t\tsetIsInserterOpened,\n\t\tsetIsListViewOpened,\n\t\tcloseGeneralSidebar,\n\t} = useDispatch( editWidgetsStore );\n\tconst {\n\t\thasBlockBreadCrumbsEnabled,\n\t\thasSidebarEnabled,\n\t\tisInserterOpened,\n\t\tisListViewOpened,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t} = useSelect(\n\t\t( select ) => ( {\n\t\t\thasSidebarEnabled: !! select(\n\t\t\t\tinterfaceStore\n\t\t\t).getActiveComplementaryArea( editWidgetsStore.name ),\n\t\t\tisInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),\n\t\t\tisListViewOpened: !! select( editWidgetsStore ).isListViewOpened(),\n\t\t\thasBlockBreadCrumbsEnabled: select(\n\t\t\t\tinterfaceStore\n\t\t\t).isFeatureActive( 'core/edit-widgets', 'showBlockBreadcrumbs' ),\n\t\t\tpreviousShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-widgets/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getAllShortcutKeyCombinations( 'core/edit-widgets/next-region' ),\n\t\t} ),\n\t\t[]\n\t);\n\n\t// Inserter and Sidebars are mutually exclusive\n\tuseEffect( () => {\n\t\tif ( hasSidebarEnabled && ! isHugeViewport ) {\n\t\t\tsetIsInserterOpened( false );\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}, [ hasSidebarEnabled, isHugeViewport ] );\n\n\tuseEffect( () => {\n\t\tif ( ( isInserterOpened || isListViewOpened ) && ! isHugeViewport ) {\n\t\t\tcloseGeneralSidebar();\n\t\t}\n\t}, [ isInserterOpened, isListViewOpened, isHugeViewport ] );\n\n\tconst hasSecondarySidebar = isListViewOpened || isInserterOpened;\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tlabels={ interfaceLabels }\n\t\t\theader={ <Header /> }\n\t\t\tsecondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }\n\t\t\tsidebar={\n\t\t\t\thasSidebarEnabled && (\n\t\t\t\t\t<ComplementaryArea.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t)\n\t\t\t}\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t<WidgetAreasBlockEditorContent\n\t\t\t\t\t\tblockEditorSettings={ blockEditorSettings }\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockStyles.Slot scope=\"core/block-inspector\" />\n\t\t\t\t</>\n\t\t\t}\n\t\t\tfooter={\n\t\t\t\thasBlockBreadCrumbsEnabled &&\n\t\t\t\t! isMobileViewport && (\n\t\t\t\t\t<div className=\"edit-widgets-layout__footer\">\n\t\t\t\t\t\t<BlockBreadcrumb rootLabelText={ __( 'Widgets' ) } />\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t\tshortcuts={ {\n\t\t\t\tprevious: previousShortcut,\n\t\t\t\tnext: nextShortcut,\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default Interface;\n"]}
@@ -4,12 +4,13 @@ import { createElement } from "@wordpress/element";
4
4
  /**
5
5
  * WordPress dependencies
6
6
  */
7
- import { Button } from '@wordpress/components';
7
+ import { Button, VisuallyHidden } from '@wordpress/components';
8
8
  import { close } from '@wordpress/icons';
9
9
  import { __experimentalLibrary as Library } from '@wordpress/block-editor';
10
10
  import { useViewportMatch, __experimentalUseDialog as useDialog } from '@wordpress/compose';
11
- import { useCallback } from '@wordpress/element';
11
+ import { useCallback, useEffect, useRef } from '@wordpress/element';
12
12
  import { useDispatch } from '@wordpress/data';
13
+ import { __ } from '@wordpress/i18n';
13
14
  /**
14
15
  * Internal dependencies
15
16
  */
@@ -26,27 +27,35 @@ export default function InserterSidebar() {
26
27
  setIsInserterOpened
27
28
  } = useDispatch(editWidgetsStore);
28
29
  const closeInserter = useCallback(() => {
29
- return () => setIsInserterOpened(false);
30
+ return setIsInserterOpened(false);
30
31
  }, [setIsInserterOpened]);
32
+ const TagName = !isMobileViewport ? VisuallyHidden : 'div';
31
33
  const [inserterDialogRef, inserterDialogProps] = useDialog({
32
- onClose: closeInserter
34
+ onClose: closeInserter,
35
+ focusOnMount: null
33
36
  });
37
+ const libraryRef = useRef();
38
+ useEffect(() => {
39
+ libraryRef.current.focusSearch();
40
+ }, []);
34
41
  return createElement("div", _extends({
35
42
  ref: inserterDialogRef
36
43
  }, inserterDialogProps, {
37
44
  className: "edit-widgets-layout__inserter-panel"
38
- }), createElement("div", {
45
+ }), createElement(TagName, {
39
46
  className: "edit-widgets-layout__inserter-panel-header"
40
47
  }, createElement(Button, {
41
48
  icon: close,
42
- onClick: closeInserter
49
+ onClick: closeInserter,
50
+ label: __('Close block inserter')
43
51
  })), createElement("div", {
44
52
  className: "edit-widgets-layout__inserter-panel-content"
45
53
  }, createElement(Library, {
46
54
  showInserterHelpPanel: true,
47
55
  shouldFocusBlock: isMobileViewport,
48
56
  rootClientId: rootClientId,
49
- __experimentalInsertionIndex: insertionIndex
57
+ __experimentalInsertionIndex: insertionIndex,
58
+ ref: libraryRef
50
59
  })));
51
60
  }
52
61
  //# sourceMappingURL=inserter-sidebar.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js"],"names":["Button","close","__experimentalLibrary","Library","useViewportMatch","__experimentalUseDialog","useDialog","useCallback","useDispatch","useWidgetLibraryInsertionPoint","store","editWidgetsStore","InserterSidebar","isMobileViewport","rootClientId","insertionIndex","setIsInserterOpened","closeInserter","inserterDialogRef","inserterDialogProps","onClose"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,uBAAvB;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,qBAAqB,IAAIC,OAAlC,QAAiD,yBAAjD;AACA,SACCC,gBADD,EAECC,uBAAuB,IAAIC,SAF5B,QAGO,oBAHP;AAIA,SAASC,WAAT,QAA4B,oBAA5B;AACA,SAASC,WAAT,QAA4B,iBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,8BAAP,MAA2C,gDAA3C;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,eAAT,GAA2B;AACzC,QAAMC,gBAAgB,GAAGT,gBAAgB,CAAE,QAAF,EAAY,GAAZ,CAAzC;AACA,QAAM;AAAEU,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAmCN,8BAA8B,EAAvE;AAEA,QAAM;AAAEO,IAAAA;AAAF,MAA0BR,WAAW,CAAEG,gBAAF,CAA3C;AAEA,QAAMM,aAAa,GAAGV,WAAW,CAAE,MAAM;AACxC,WAAO,MAAMS,mBAAmB,CAAE,KAAF,CAAhC;AACA,GAFgC,EAE9B,CAAEA,mBAAF,CAF8B,CAAjC;AAIA,QAAM,CAAEE,iBAAF,EAAqBC,mBAArB,IAA6Cb,SAAS,CAAE;AAC7Dc,IAAAA,OAAO,EAAEH;AADoD,GAAF,CAA5D;AAIA,SACC;AACC,IAAA,GAAG,EAAGC;AADP,KAEMC,mBAFN;AAGC,IAAA,SAAS,EAAC;AAHX,MAKC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,MAAD;AAAQ,IAAA,IAAI,EAAGlB,KAAf;AAAuB,IAAA,OAAO,EAAGgB;AAAjC,IADD,CALD,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,OAAD;AACC,IAAA,qBAAqB,MADtB;AAEC,IAAA,gBAAgB,EAAGJ,gBAFpB;AAGC,IAAA,YAAY,EAAGC,YAHhB;AAIC,IAAA,4BAA4B,EAAGC;AAJhC,IADD,CARD,CADD;AAmBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { close } from '@wordpress/icons';\nimport { __experimentalLibrary as Library } from '@wordpress/block-editor';\nimport {\n\tuseViewportMatch,\n\t__experimentalUseDialog as useDialog,\n} from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport useWidgetLibraryInsertionPoint from '../../hooks/use-widget-library-insertion-point';\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function InserterSidebar() {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();\n\n\tconst { setIsInserterOpened } = useDispatch( editWidgetsStore );\n\n\tconst closeInserter = useCallback( () => {\n\t\treturn () => setIsInserterOpened( false );\n\t}, [ setIsInserterOpened ] );\n\n\tconst [ inserterDialogRef, inserterDialogProps ] = useDialog( {\n\t\tonClose: closeInserter,\n\t} );\n\n\treturn (\n\t\t<div\n\t\t\tref={ inserterDialogRef }\n\t\t\t{ ...inserterDialogProps }\n\t\t\tclassName=\"edit-widgets-layout__inserter-panel\"\n\t\t>\n\t\t\t<div className=\"edit-widgets-layout__inserter-panel-header\">\n\t\t\t\t<Button icon={ close } onClick={ closeInserter } />\n\t\t\t</div>\n\t\t\t<div className=\"edit-widgets-layout__inserter-panel-content\">\n\t\t\t\t<Library\n\t\t\t\t\tshowInserterHelpPanel\n\t\t\t\t\tshouldFocusBlock={ isMobileViewport }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t__experimentalInsertionIndex={ insertionIndex }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js"],"names":["Button","VisuallyHidden","close","__experimentalLibrary","Library","useViewportMatch","__experimentalUseDialog","useDialog","useCallback","useEffect","useRef","useDispatch","__","useWidgetLibraryInsertionPoint","store","editWidgetsStore","InserterSidebar","isMobileViewport","rootClientId","insertionIndex","setIsInserterOpened","closeInserter","TagName","inserterDialogRef","inserterDialogProps","onClose","focusOnMount","libraryRef","current","focusSearch"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,cAAjB,QAAuC,uBAAvC;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,qBAAqB,IAAIC,OAAlC,QAAiD,yBAAjD;AACA,SACCC,gBADD,EAECC,uBAAuB,IAAIC,SAF5B,QAGO,oBAHP;AAIA,SAASC,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,QAA+C,oBAA/C;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,8BAAP,MAA2C,gDAA3C;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,eAAT,GAA2B;AACzC,QAAMC,gBAAgB,GAAGZ,gBAAgB,CAAE,QAAF,EAAY,GAAZ,CAAzC;AACA,QAAM;AAAEa,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAmCN,8BAA8B,EAAvE;AAEA,QAAM;AAAEO,IAAAA;AAAF,MAA0BT,WAAW,CAAEI,gBAAF,CAA3C;AAEA,QAAMM,aAAa,GAAGb,WAAW,CAAE,MAAM;AACxC,WAAOY,mBAAmB,CAAE,KAAF,CAA1B;AACA,GAFgC,EAE9B,CAAEA,mBAAF,CAF8B,CAAjC;AAIA,QAAME,OAAO,GAAG,CAAEL,gBAAF,GAAqBhB,cAArB,GAAsC,KAAtD;AACA,QAAM,CAAEsB,iBAAF,EAAqBC,mBAArB,IAA6CjB,SAAS,CAAE;AAC7DkB,IAAAA,OAAO,EAAEJ,aADoD;AAE7DK,IAAAA,YAAY,EAAE;AAF+C,GAAF,CAA5D;AAKA,QAAMC,UAAU,GAAGjB,MAAM,EAAzB;AACAD,EAAAA,SAAS,CAAE,MAAM;AAChBkB,IAAAA,UAAU,CAACC,OAAX,CAAmBC,WAAnB;AACA,GAFQ,EAEN,EAFM,CAAT;AAIA,SACC;AACC,IAAA,GAAG,EAAGN;AADP,KAEMC,mBAFN;AAGC,IAAA,SAAS,EAAC;AAHX,MAKC,cAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACC,cAAC,MAAD;AACC,IAAA,IAAI,EAAGtB,KADR;AAEC,IAAA,OAAO,EAAGmB,aAFX;AAGC,IAAA,KAAK,EAAGT,EAAE,CAAE,sBAAF;AAHX,IADD,CALD,EAYC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,OAAD;AACC,IAAA,qBAAqB,MADtB;AAEC,IAAA,gBAAgB,EAAGK,gBAFpB;AAGC,IAAA,YAAY,EAAGC,YAHhB;AAIC,IAAA,4BAA4B,EAAGC,cAJhC;AAKC,IAAA,GAAG,EAAGQ;AALP,IADD,CAZD,CADD;AAwBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button, VisuallyHidden } from '@wordpress/components';\nimport { close } from '@wordpress/icons';\nimport { __experimentalLibrary as Library } from '@wordpress/block-editor';\nimport {\n\tuseViewportMatch,\n\t__experimentalUseDialog as useDialog,\n} from '@wordpress/compose';\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useWidgetLibraryInsertionPoint from '../../hooks/use-widget-library-insertion-point';\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function InserterSidebar() {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();\n\n\tconst { setIsInserterOpened } = useDispatch( editWidgetsStore );\n\n\tconst closeInserter = useCallback( () => {\n\t\treturn setIsInserterOpened( false );\n\t}, [ setIsInserterOpened ] );\n\n\tconst TagName = ! isMobileViewport ? VisuallyHidden : 'div';\n\tconst [ inserterDialogRef, inserterDialogProps ] = useDialog( {\n\t\tonClose: closeInserter,\n\t\tfocusOnMount: null,\n\t} );\n\n\tconst libraryRef = useRef();\n\tuseEffect( () => {\n\t\tlibraryRef.current.focusSearch();\n\t}, [] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ inserterDialogRef }\n\t\t\t{ ...inserterDialogProps }\n\t\t\tclassName=\"edit-widgets-layout__inserter-panel\"\n\t\t>\n\t\t\t<TagName className=\"edit-widgets-layout__inserter-panel-header\">\n\t\t\t\t<Button\n\t\t\t\t\ticon={ close }\n\t\t\t\t\tonClick={ closeInserter }\n\t\t\t\t\tlabel={ __( 'Close block inserter' ) }\n\t\t\t\t/>\n\t\t\t</TagName>\n\t\t\t<div className=\"edit-widgets-layout__inserter-panel-content\">\n\t\t\t\t<Library\n\t\t\t\t\tshowInserterHelpPanel\n\t\t\t\t\tshouldFocusBlock={ isMobileViewport }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t__experimentalInsertionIndex={ insertionIndex }\n\t\t\t\t\tref={ libraryRef }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -30,7 +30,8 @@ export default function ListViewSidebar() {
30
30
  }
31
31
 
32
32
  const focusOnMountRef = useFocusOnMount('firstElement');
33
- const focusReturnRef = useFocusReturn();
33
+ const headerFocusReturnRef = useFocusReturn();
34
+ const contentFocusReturnRef = useFocusReturn();
34
35
 
35
36
  function closeOnEscape(event) {
36
37
  if (event.keyCode === ESCAPE && !event.defaultPrevented) {
@@ -47,16 +48,17 @@ export default function ListViewSidebar() {
47
48
  className: "edit-widgets-editor__list-view-panel",
48
49
  onKeyDown: closeOnEscape
49
50
  }, createElement("div", {
50
- className: "edit-widgets-editor__list-view-panel-header"
51
+ className: "edit-widgets-editor__list-view-panel-header",
52
+ ref: headerFocusReturnRef
51
53
  }, createElement("strong", {
52
54
  id: labelId
53
- }, __('List view')), createElement(Button, {
55
+ }, __('List View')), createElement(Button, {
54
56
  icon: closeSmall,
55
- label: __('Close list view sidebar'),
57
+ label: __('Close List View Sidebar'),
56
58
  onClick: () => setIsListViewOpened(false)
57
59
  })), createElement("div", {
58
60
  className: "edit-widgets-editor__list-view-panel-content",
59
- ref: useMergeRefs([focusReturnRef, focusOnMountRef])
61
+ ref: useMergeRefs([contentFocusReturnRef, focusOnMountRef])
60
62
  }, createElement(ListView, {
61
63
  onSelect: selectEditorBlock,
62
64
  showNestedBlocks: true,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["__experimentalListView","ListView","store","blockEditorStore","Button","useFocusOnMount","useFocusReturn","useInstanceId","useMergeRefs","useDispatch","__","closeSmall","ESCAPE","editWidgetsStore","ListViewSidebar","setIsListViewOpened","clearSelectedBlock","selectBlock","selectEditorBlock","clientId","focusOnMountRef","focusReturnRef","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","instanceId","labelId"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,sBAAsB,IAAIC,QAD3B,EAECC,KAAK,IAAIC,gBAFV,QAGO,yBAHP;AAIA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SACCC,eADD,EAECC,cAFD,EAGCC,aAHD,EAICC,YAJD,QAKO,oBALP;AAMA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,kBAA3B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASV,KAAK,IAAIW,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0BN,WAAW,CAAEI,gBAAF,CAA3C;AAEA,QAAM;AAAEG,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MAAsCR,WAAW,CAAEN,gBAAF,CAAvD;;AACA,iBAAee,iBAAf,CAAkCC,QAAlC,EAA6C;AAC5C,UAAMH,kBAAkB,EAAxB;AACAC,IAAAA,WAAW,CAAEE,QAAF,EAAY,CAAC,CAAb,CAAX;AACA;;AAED,QAAMC,eAAe,GAAGf,eAAe,CAAE,cAAF,CAAvC;AACA,QAAMgB,cAAc,GAAGf,cAAc,EAArC;;AACA,WAASgB,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBZ,MAAlB,IAA4B,CAAEW,KAAK,CAACE,gBAAzC,EAA4D;AAC3DF,MAAAA,KAAK,CAACG,cAAN;AACAX,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,QAAMY,UAAU,GAAGpB,aAAa,CAAEO,eAAF,CAAhC;AACA,QAAMc,OAAO,GAAI,8CAA8CD,UAAY,EAA3E;AAEA,SACC;AACA;AACC,yBAAkBC,OADnB;AAEC,MAAA,SAAS,EAAC,sCAFX;AAGC,MAAA,SAAS,EAAGN;AAHb,OAKC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC;AAAQ,MAAA,EAAE,EAAGM;AAAb,OAAyBlB,EAAE,CAAE,WAAF,CAA3B,CADD,EAEC,cAAC,MAAD;AACC,MAAA,IAAI,EAAGC,UADR;AAEC,MAAA,KAAK,EAAGD,EAAE,CAAE,yBAAF,CAFX;AAGC,MAAA,OAAO,EAAG,MAAMK,mBAAmB,CAAE,KAAF;AAHpC,MAFD,CALD,EAaC;AACC,MAAA,SAAS,EAAC,8CADX;AAEC,MAAA,GAAG,EAAGP,YAAY,CAAE,CAAEa,cAAF,EAAkBD,eAAlB,CAAF;AAFnB,OAIC,cAAC,QAAD;AACC,MAAA,QAAQ,EAAGF,iBADZ;AAEC,MAAA,gBAAgB,MAFjB;AAGC,MAAA,uCAAuC,MAHxC;AAIC,MAAA,sBAAsB,MAJvB;AAKC,MAAA,wCAAwC;AALzC,MAJD,CAbD;AAFD;AA6BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalListView as ListView,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseInstanceId,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\tconst { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );\n\tasync function selectEditorBlock( clientId ) {\n\t\tawait clearSelectedBlock();\n\t\tselectBlock( clientId, -1 );\n\t}\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst focusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\tconst instanceId = useInstanceId( ListViewSidebar );\n\tconst labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\taria-labelledby={ labelId }\n\t\t\tclassName=\"edit-widgets-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div className=\"edit-widgets-editor__list-view-panel-header\">\n\t\t\t\t<strong id={ labelId }>{ __( 'List view' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close list view sidebar' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }\n\t\t\t>\n\t\t\t\t<ListView\n\t\t\t\t\tonSelect={ selectEditorBlock }\n\t\t\t\t\tshowNestedBlocks\n\t\t\t\t\t__experimentalHideContainerBlockActions\n\t\t\t\t\t__experimentalFeatures\n\t\t\t\t\t__experimentalPersistentListViewFeatures\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["__experimentalListView","ListView","store","blockEditorStore","Button","useFocusOnMount","useFocusReturn","useInstanceId","useMergeRefs","useDispatch","__","closeSmall","ESCAPE","editWidgetsStore","ListViewSidebar","setIsListViewOpened","clearSelectedBlock","selectBlock","selectEditorBlock","clientId","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","instanceId","labelId"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,sBAAsB,IAAIC,QAD3B,EAECC,KAAK,IAAIC,gBAFV,QAGO,yBAHP;AAIA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SACCC,eADD,EAECC,cAFD,EAGCC,aAHD,EAICC,YAJD,QAKO,oBALP;AAMA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,kBAA3B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASV,KAAK,IAAIW,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0BN,WAAW,CAAEI,gBAAF,CAA3C;AAEA,QAAM;AAAEG,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MAAsCR,WAAW,CAAEN,gBAAF,CAAvD;;AACA,iBAAee,iBAAf,CAAkCC,QAAlC,EAA6C;AAC5C,UAAMH,kBAAkB,EAAxB;AACAC,IAAAA,WAAW,CAAEE,QAAF,EAAY,CAAC,CAAb,CAAX;AACA;;AAED,QAAMC,eAAe,GAAGf,eAAe,CAAE,cAAF,CAAvC;AACA,QAAMgB,oBAAoB,GAAGf,cAAc,EAA3C;AACA,QAAMgB,qBAAqB,GAAGhB,cAAc,EAA5C;;AACA,WAASiB,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBb,MAAlB,IAA4B,CAAEY,KAAK,CAACE,gBAAzC,EAA4D;AAC3DF,MAAAA,KAAK,CAACG,cAAN;AACAZ,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,QAAMa,UAAU,GAAGrB,aAAa,CAAEO,eAAF,CAAhC;AACA,QAAMe,OAAO,GAAI,8CAA8CD,UAAY,EAA3E;AAEA,SACC;AACA;AACC,yBAAkBC,OADnB;AAEC,MAAA,SAAS,EAAC,sCAFX;AAGC,MAAA,SAAS,EAAGN;AAHb,OAKC;AACC,MAAA,SAAS,EAAC,6CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC;AAAQ,MAAA,EAAE,EAAGQ;AAAb,OAAyBnB,EAAE,CAAE,WAAF,CAA3B,CAJD,EAKC,cAAC,MAAD;AACC,MAAA,IAAI,EAAGC,UADR;AAEC,MAAA,KAAK,EAAGD,EAAE,CAAE,yBAAF,CAFX;AAGC,MAAA,OAAO,EAAG,MAAMK,mBAAmB,CAAE,KAAF;AAHpC,MALD,CALD,EAgBC;AACC,MAAA,SAAS,EAAC,8CADX;AAEC,MAAA,GAAG,EAAGP,YAAY,CAAE,CACnBc,qBADmB,EAEnBF,eAFmB,CAAF;AAFnB,OAOC,cAAC,QAAD;AACC,MAAA,QAAQ,EAAGF,iBADZ;AAEC,MAAA,gBAAgB,MAFjB;AAGC,MAAA,uCAAuC,MAHxC;AAIC,MAAA,sBAAsB,MAJvB;AAKC,MAAA,wCAAwC;AALzC,MAPD,CAhBD;AAFD;AAmCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalListView as ListView,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseInstanceId,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\tconst { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );\n\tasync function selectEditorBlock( clientId ) {\n\t\tawait clearSelectedBlock();\n\t\tselectBlock( clientId, -1 );\n\t}\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\tconst instanceId = useInstanceId( ListViewSidebar );\n\tconst labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\taria-labelledby={ labelId }\n\t\t\tclassName=\"edit-widgets-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-header\"\n\t\t\t\tref={ headerFocusReturnRef }\n\t\t\t>\n\t\t\t\t<strong id={ labelId }>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close List View Sidebar' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tcontentFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t<ListView\n\t\t\t\t\tonSelect={ selectEditorBlock }\n\t\t\t\t\tshowNestedBlocks\n\t\t\t\t\t__experimentalHideContainerBlockActions\n\t\t\t\t\t__experimentalFeatures\n\t\t\t\t\t__experimentalPersistentListViewFeatures\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -824,11 +824,6 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
824
824
  display: flex;
825
825
  justify-content: flex-end;
826
826
  }
827
- @media (min-width: 782px) {
828
- .edit-widgets-layout__inserter-panel-header {
829
- display: none;
830
- }
831
- }
832
827
 
833
828
  .edit-widgets-layout__inserter-panel-content {
834
829
  height: calc(100% - 36px - 8px);
@@ -824,11 +824,6 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
824
824
  display: flex;
825
825
  justify-content: flex-end;
826
826
  }
827
- @media (min-width: 782px) {
828
- .edit-widgets-layout__inserter-panel-header {
829
- display: none;
830
- }
831
- }
832
827
 
833
828
  .edit-widgets-layout__inserter-panel-content {
834
829
  height: calc(100% - 36px - 8px);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/edit-widgets",
3
- "version": "3.1.17",
3
+ "version": "3.2.0",
4
4
  "description": "Widgets Page module for WordPress..",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -27,30 +27,30 @@
27
27
  "react-native": "src/index",
28
28
  "dependencies": {
29
29
  "@babel/runtime": "^7.16.0",
30
- "@wordpress/a11y": "^3.2.4",
31
- "@wordpress/api-fetch": "^5.2.6",
32
- "@wordpress/block-editor": "^8.0.15",
33
- "@wordpress/block-library": "^6.0.20",
34
- "@wordpress/blocks": "^11.1.5",
35
- "@wordpress/components": "^19.2.2",
36
- "@wordpress/compose": "^5.0.7",
37
- "@wordpress/core-data": "^4.0.9",
38
- "@wordpress/data": "^6.1.5",
39
- "@wordpress/dom": "^3.2.7",
40
- "@wordpress/element": "^4.0.4",
41
- "@wordpress/hooks": "^3.2.2",
42
- "@wordpress/i18n": "^4.2.4",
43
- "@wordpress/icons": "^6.1.1",
44
- "@wordpress/interface": "^4.1.17",
45
- "@wordpress/keyboard-shortcuts": "^3.0.7",
46
- "@wordpress/keycodes": "^3.2.4",
47
- "@wordpress/media-utils": "^3.0.5",
48
- "@wordpress/notices": "^3.2.8",
49
- "@wordpress/plugins": "^4.0.7",
50
- "@wordpress/reusable-blocks": "^3.0.21",
51
- "@wordpress/server-side-render": "^3.0.19",
52
- "@wordpress/url": "^3.3.1",
53
- "@wordpress/widgets": "^2.0.21",
30
+ "@wordpress/a11y": "^3.3.0",
31
+ "@wordpress/api-fetch": "^6.0.0",
32
+ "@wordpress/block-editor": "^8.1.0",
33
+ "@wordpress/block-library": "^6.1.0",
34
+ "@wordpress/blocks": "^11.2.0",
35
+ "@wordpress/components": "^19.3.0",
36
+ "@wordpress/compose": "^5.1.0",
37
+ "@wordpress/core-data": "^4.1.0",
38
+ "@wordpress/data": "^6.2.0",
39
+ "@wordpress/dom": "^3.3.0",
40
+ "@wordpress/element": "^4.1.0",
41
+ "@wordpress/hooks": "^3.3.0",
42
+ "@wordpress/i18n": "^4.3.0",
43
+ "@wordpress/icons": "^6.2.0",
44
+ "@wordpress/interface": "^4.2.0",
45
+ "@wordpress/keyboard-shortcuts": "^3.1.0",
46
+ "@wordpress/keycodes": "^3.3.0",
47
+ "@wordpress/media-utils": "^3.1.0",
48
+ "@wordpress/notices": "^3.3.0",
49
+ "@wordpress/plugins": "^4.1.0",
50
+ "@wordpress/reusable-blocks": "^3.1.0",
51
+ "@wordpress/server-side-render": "^3.1.0",
52
+ "@wordpress/url": "^3.4.0",
53
+ "@wordpress/widgets": "^2.1.0",
54
54
  "classnames": "^2.3.1",
55
55
  "lodash": "^4.17.21",
56
56
  "rememo": "^3.0.0",
@@ -59,5 +59,5 @@
59
59
  "publishConfig": {
60
60
  "access": "public"
61
61
  },
62
- "gitHead": "8c2cd6a5fd8781266da858a2e7d1bdd9a3a279e4"
62
+ "gitHead": "d95ccb9366e249133cdb1d7b25c382446b9ee502"
63
63
  }
@@ -2,7 +2,7 @@
2
2
  * WordPress dependencies
3
3
  */
4
4
  import { useViewportMatch } from '@wordpress/compose';
5
- import { BlockBreadcrumb } from '@wordpress/block-editor';
5
+ import { BlockBreadcrumb, BlockStyles } from '@wordpress/block-editor';
6
6
  import { useEffect } from '@wordpress/element';
7
7
  import { useDispatch, useSelect } from '@wordpress/data';
8
8
  import {
@@ -96,9 +96,12 @@ function Interface( { blockEditorSettings } ) {
96
96
  )
97
97
  }
98
98
  content={
99
- <WidgetAreasBlockEditorContent
100
- blockEditorSettings={ blockEditorSettings }
101
- />
99
+ <>
100
+ <WidgetAreasBlockEditorContent
101
+ blockEditorSettings={ blockEditorSettings }
102
+ />
103
+ <BlockStyles.Slot scope="core/block-inspector" />
104
+ </>
102
105
  }
103
106
  footer={
104
107
  hasBlockBreadCrumbsEnabled &&
@@ -12,10 +12,6 @@
12
12
  padding-right: $grid-unit-10;
13
13
  display: flex;
14
14
  justify-content: flex-end;
15
-
16
- @include break-medium() {
17
- display: none;
18
- }
19
15
  }
20
16
 
21
17
  .edit-widgets-layout__inserter-panel-content {
@@ -1,15 +1,16 @@
1
1
  /**
2
2
  * WordPress dependencies
3
3
  */
4
- import { Button } from '@wordpress/components';
4
+ import { Button, VisuallyHidden } from '@wordpress/components';
5
5
  import { close } from '@wordpress/icons';
6
6
  import { __experimentalLibrary as Library } from '@wordpress/block-editor';
7
7
  import {
8
8
  useViewportMatch,
9
9
  __experimentalUseDialog as useDialog,
10
10
  } from '@wordpress/compose';
11
- import { useCallback } from '@wordpress/element';
11
+ import { useCallback, useEffect, useRef } from '@wordpress/element';
12
12
  import { useDispatch } from '@wordpress/data';
13
+ import { __ } from '@wordpress/i18n';
13
14
 
14
15
  /**
15
16
  * Internal dependencies
@@ -24,28 +25,40 @@ export default function InserterSidebar() {
24
25
  const { setIsInserterOpened } = useDispatch( editWidgetsStore );
25
26
 
26
27
  const closeInserter = useCallback( () => {
27
- return () => setIsInserterOpened( false );
28
+ return setIsInserterOpened( false );
28
29
  }, [ setIsInserterOpened ] );
29
30
 
31
+ const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
30
32
  const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
31
33
  onClose: closeInserter,
34
+ focusOnMount: null,
32
35
  } );
33
36
 
37
+ const libraryRef = useRef();
38
+ useEffect( () => {
39
+ libraryRef.current.focusSearch();
40
+ }, [] );
41
+
34
42
  return (
35
43
  <div
36
44
  ref={ inserterDialogRef }
37
45
  { ...inserterDialogProps }
38
46
  className="edit-widgets-layout__inserter-panel"
39
47
  >
40
- <div className="edit-widgets-layout__inserter-panel-header">
41
- <Button icon={ close } onClick={ closeInserter } />
42
- </div>
48
+ <TagName className="edit-widgets-layout__inserter-panel-header">
49
+ <Button
50
+ icon={ close }
51
+ onClick={ closeInserter }
52
+ label={ __( 'Close block inserter' ) }
53
+ />
54
+ </TagName>
43
55
  <div className="edit-widgets-layout__inserter-panel-content">
44
56
  <Library
45
57
  showInserterHelpPanel
46
58
  shouldFocusBlock={ isMobileViewport }
47
59
  rootClientId={ rootClientId }
48
60
  __experimentalInsertionIndex={ insertionIndex }
61
+ ref={ libraryRef }
49
62
  />
50
63
  </div>
51
64
  </div>
@@ -32,7 +32,8 @@ export default function ListViewSidebar() {
32
32
  }
33
33
 
34
34
  const focusOnMountRef = useFocusOnMount( 'firstElement' );
35
- const focusReturnRef = useFocusReturn();
35
+ const headerFocusReturnRef = useFocusReturn();
36
+ const contentFocusReturnRef = useFocusReturn();
36
37
  function closeOnEscape( event ) {
37
38
  if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
38
39
  event.preventDefault();
@@ -50,17 +51,23 @@ export default function ListViewSidebar() {
50
51
  className="edit-widgets-editor__list-view-panel"
51
52
  onKeyDown={ closeOnEscape }
52
53
  >
53
- <div className="edit-widgets-editor__list-view-panel-header">
54
- <strong id={ labelId }>{ __( 'List view' ) }</strong>
54
+ <div
55
+ className="edit-widgets-editor__list-view-panel-header"
56
+ ref={ headerFocusReturnRef }
57
+ >
58
+ <strong id={ labelId }>{ __( 'List View' ) }</strong>
55
59
  <Button
56
60
  icon={ closeSmall }
57
- label={ __( 'Close list view sidebar' ) }
61
+ label={ __( 'Close List View Sidebar' ) }
58
62
  onClick={ () => setIsListViewOpened( false ) }
59
63
  />
60
64
  </div>
61
65
  <div
62
66
  className="edit-widgets-editor__list-view-panel-content"
63
- ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
67
+ ref={ useMergeRefs( [
68
+ contentFocusReturnRef,
69
+ focusOnMountRef,
70
+ ] ) }
64
71
  >
65
72
  <ListView
66
73
  onSelect={ selectEditorBlock }