npm - @wordpress/edit-widgets - Versions diffs - 5.19.0 → 5.19.1 - Mend

@wordpress/edit-widgets 5.19.0 → 5.19.1

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 (21) hide show

package/build/components/header/index.js CHANGED Viewed

@@ -31,7 +31,9 @@ var _lockUnlock = require("../../lock-unlock");
 const {
   useShouldContextualToolbarShow
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-function Header() {
+function Header({
+  setListViewToggleElement
+}) {
   const isMediumViewport = (0, _compose.useViewportMatch)('medium');
   const inserterButton = (0, _element.useRef)();
   const widgetAreaClientId = (0, _useLastSelectedWidgetArea.default)();
@@ -119,7 +121,8 @@ function Header() {
     isPressed: isListViewOpen
     /* translators: button label text should, if possible, be under 16 characters. */,
     label: (0, _i18n.__)('List View'),
-    onClick: toggleListView
+    onClick: toggleListView,
+    ref: setListViewToggleElement
   })))), (0, _element.createElement)("div", {
     className: "edit-widgets-header__actions"
   }, (0, _element.createElement)(_saveButton.default, null), (0, _element.createElement)(_interface.PinnedItems.Slot, {

package/build/components/header/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_data","_i18n","_components","_blockEditor","_interface","_icons","_compose","_saveButton","_interopRequireDefault","_undo","_redo","_moreMenu","_useLastSelectedWidgetArea","_store","_lockUnlock","useShouldContextualToolbarShow","unlock","blockEditorPrivateApis","Header","isMediumViewport","useViewportMatch","inserterButton","useRef","widgetAreaClientId","useLastSelectedWidgetArea","isLastSelectedWidgetAreaOpen","useSelect","select","editWidgetsStore","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","useDispatch","selectBlock","blockEditorStore","handleClick","window","requestAnimationFrame","toggleListView","useCallback","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","blockToolbarCanBeFocused","createElement","Fragment","className","__","VisuallyHidden","as","NavigableToolbar","shouldUseKeyboardFocusShortcut","ToolbarItem","ref","Button","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","plus","label","_x","default","listView","PinnedItems","Slot","scope","_default","exports"],"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { PinnedItems } from '@wordpress/interface';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport MoreMenu from '../more-menu';\nimport useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );\n\nfunction Header() {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t} = useShouldContextualToolbarShow();\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\t// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.\n\tconst blockToolbarCanBeFocused =\n\t\tshouldShowContextualToolbar \|\|\n\t\tcanFocusHiddenToolbar \|\|\n\t\tfixedToolbarCanBeFocused;\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"edit-widgets-header\">\n\t\t\t\t<div className=\"edit-widgets-header__navigable-toolbar-wrapper\">\n\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t<h1 className=\"edit-widgets-header__title\">\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isMediumViewport && (\n\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\tas=\"h1\"\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header__title\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableToolbar\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\t\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\t\t\t\tshouldUseKeyboardFocusShortcut={\n\t\t\t\t\t\t\t! blockToolbarCanBeFocused\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ handleClick }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\t/ translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. /\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t\t/ translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableToolbar>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"edit-widgets-header__actions\">\n\t\t\t\t\t<SaveButton />\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Header;\n"],"mappings":"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"}
1	+ {"version":3,"names":["_element","require","_data","_i18n","_components","_blockEditor","_interface","_icons","_compose","_saveButton","_interopRequireDefault","_undo","_redo","_moreMenu","_useLastSelectedWidgetArea","_store","_lockUnlock","useShouldContextualToolbarShow","unlock","blockEditorPrivateApis","Header","setListViewToggleElement","isMediumViewport","useViewportMatch","inserterButton","useRef","widgetAreaClientId","useLastSelectedWidgetArea","isLastSelectedWidgetAreaOpen","useSelect","select","editWidgetsStore","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","useDispatch","selectBlock","blockEditorStore","handleClick","window","requestAnimationFrame","toggleListView","useCallback","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","blockToolbarCanBeFocused","createElement","Fragment","className","__","VisuallyHidden","as","NavigableToolbar","shouldUseKeyboardFocusShortcut","ToolbarItem","ref","Button","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","plus","label","_x","default","listView","PinnedItems","Slot","scope","_default","exports"],"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { PinnedItems } from '@wordpress/interface';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport MoreMenu from '../more-menu';\nimport useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );\n\nfunction Header( { setListViewToggleElement } ) {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t} = useShouldContextualToolbarShow();\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\t// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.\n\tconst blockToolbarCanBeFocused =\n\t\tshouldShowContextualToolbar \|\|\n\t\tcanFocusHiddenToolbar \|\|\n\t\tfixedToolbarCanBeFocused;\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"edit-widgets-header\">\n\t\t\t\t<div className=\"edit-widgets-header__navigable-toolbar-wrapper\">\n\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t<h1 className=\"edit-widgets-header__title\">\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isMediumViewport && (\n\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\tas=\"h1\"\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header__title\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableToolbar\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\t\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\t\t\t\tshouldUseKeyboardFocusShortcut={\n\t\t\t\t\t\t\t! blockToolbarCanBeFocused\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ handleClick }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\t/ translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. /\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t\t/ translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\t\tref={ setListViewToggleElement }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableToolbar>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"edit-widgets-header__actions\">\n\t\t\t\t\t<SaveButton />\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Header;\n"],"mappings":"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"}

package/build/components/layout/interface.js CHANGED Viewed

@@ -60,6 +60,7 @@ function Interface({
     previousShortcut: select(_keyboardShortcuts.store).getAllShortcutKeyCombinations('core/edit-widgets/previous-region'),
     nextShortcut: select(_keyboardShortcuts.store).getAllShortcutKeyCombinations('core/edit-widgets/next-region')
   }), []);
+  const [listViewToggleElement, setListViewToggleElement] = (0, _element.useState)(null);
   // Inserter and Sidebars are mutually exclusive
   (0, _element.useEffect)(() => {
@@ -80,8 +81,12 @@ function Interface({
       ...interfaceLabels,
       secondarySidebar: secondarySidebarLabel
     },
-    header: (0, _element.createElement)(_header.default, null),
-    secondarySidebar: hasSecondarySidebar && (0, _element.createElement)(_secondarySidebar.default, null),
+    header: (0, _element.createElement)(_header.default, {
+      setListViewToggleElement: setListViewToggleElement
+    }),
+    secondarySidebar: hasSecondarySidebar && (0, _element.createElement)(_secondarySidebar.default, {
+      listViewToggleElement: listViewToggleElement
+    }),
     sidebar: hasSidebarEnabled && (0, _element.createElement)(_interface.ComplementaryArea.Slot, {
       scope: "core/edit-widgets"
     }),

package/build/components/layout/interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_compose","_blockEditor","_data","_interface","_i18n","_keyboardShortcuts","_preferences","_header","_interopRequireDefault","_widgetAreasBlockEditorContent","_store","_secondarySidebar","interfaceLabels","header","__","body","sidebar","footer","Interface","blockEditorSettings","isMobileViewport","useViewportMatch","isHugeViewport","setIsInserterOpened","setIsListViewOpened","closeGeneralSidebar","useDispatch","editWidgetsStore","hasBlockBreadCrumbsEnabled","hasSidebarEnabled","isInserterOpened","isListViewOpened","previousShortcut","nextShortcut","useSelect","select","interfaceStore","getActiveComplementaryArea","name","preferencesStore","get","keyboardShortcutsStore","getAllShortcutKeyCombinations","useEffect","secondarySidebarLabel","hasSecondarySidebar","createElement","InterfaceSkeleton","labels","secondarySidebar","default","ComplementaryArea","Slot","scope","content","Fragment","className","BlockBreadcrumb","rootLabelText","shortcuts","previous","next","_default","exports"],"sources":["@wordpress/edit-widgets/src/components/layout/interface.js"],"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';\nimport { store as preferencesStore } from '@wordpress/preferences';\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 { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =\n\t\tuseDispatch( 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( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'showBlockBreadcrumbs'\n\t\t\t),\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 secondarySidebarLabel = isListViewOpened\n\t\t? __( 'List View' )\n\t\t: __( 'Block Library' );\n\n\tconst hasSecondarySidebar = isListViewOpened \|\| isInserterOpened;\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tlabels={ {\n\t\t\t\t...interfaceLabels,\n\t\t\t\tsecondarySidebar: secondarySidebarLabel,\n\t\t\t} }\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</>\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"],"mappings":";;;;;;;AAKA,IAAAA,QAAA,GAAAC,OAAA;AAFA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAEA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AAKA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA;AAKA,IAAAQ,OAAA,GAAAC,sBAAA,CAAAT,OAAA;AACA,IAAAU,8BAAA,GAAAD,sBAAA,CAAAT,OAAA;AACA,IAAAW,MAAA,GAAAX,OAAA;AACA,IAAAY,iBAAA,GAAAH,sBAAA,CAAAT,OAAA;AAtBA;AACA;AACA;;AAcA;AACA;AACA;;AAMA,MAAMa,eAAe,GAAG;EACvB;EACAC,MAAM,EAAE,IAAAC,QAAE,EAAE,iBAAkB,CAAC;EAC/B;EACAC,IAAI,EAAE,IAAAD,QAAE,EAAE,oBAAqB,CAAC;EAChC;EACAE,OAAO,EAAE,IAAAF,QAAE,EAAE,kBAAmB,CAAC;EACjC;EACAG,MAAM,EAAE,IAAAH,QAAE,EAAE,gBAAiB;AAC9B,CAAC;AAED,SAASI,SAASA,CAAE;EAAEC;AAAoB,CAAC,EAAG;EAC7C,MAAMC,gBAAgB,GAAG,IAAAC,yBAAgB,EAAE,QAAQ,EAAE,GAAI,CAAC;EAC1D,MAAMC,cAAc,GAAG,IAAAD,yBAAgB,EAAE,MAAM,EAAE,IAAK,CAAC;EACvD,MAAM;IAAEE,mBAAmB;IAAEC,mBAAmB;IAAEC;EAAoB,CAAC,GACtE,IAAAC,iBAAW,EAAEC,YAAiB,CAAC;EAChC,MAAM;IACLC,0BAA0B;IAC1BC,iBAAiB;IACjBC,gBAAgB;IAChBC,gBAAgB;IAChBC,gBAAgB;IAChBC;EACD,CAAC,GAAG,IAAAC,eAAS,EACVC,MAAM,KAAQ;IACfN,iBAAiB,EAAE,CAAC,CAAEM,MAAM,CAC3BC,gBACD,CAAC,CAACC,0BAA0B,CAAEV,YAAgB,CAACW,IAAK,CAAC;IACrDR,gBAAgB,EAAE,CAAC,CAAEK,MAAM,CAAER,YAAiB,CAAC,CAACG,gBAAgB,CAAC,CAAC;IAClEC,gBAAgB,EAAE,CAAC,CAAEI,MAAM,CAAER,YAAiB,CAAC,CAACI,gBAAgB,CAAC,CAAC;IAClEH,0BAA0B,EAAE,CAAC,CAAEO,MAAM,CAAEI,kBAAiB,CAAC,CAACC,GAAG,CAC5D,mBAAmB,EACnB,sBACD,CAAC;IACDR,gBAAgB,EAAEG,MAAM,CACvBM,wBACD,CAAC,CAACC,6BAA6B,CAC9B,mCACD,CAAC;IACDT,YAAY,EAAEE,MAAM,CACnBM,wBACD,CAAC,CAACC,6BAA6B,CAAE,+BAAgC;EAClE,CAAC,CAAE,EACH,EACD,CAAC;;~~EAED~~;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChB,~~IAAKd~~,iBAAiB,IAAI,CAAEP,cAAc,EAAG;MAC5CC,mBAAmB,CAAE,KAAM,CAAC;MAC5BC,mBAAmB,CAAE,KAAM,CAAC;IAC7B;EACD,CAAC,EAAE,CAAEK,iBAAiB,EAAEP,cAAc,CAAG,CAAC;EAE1C,~~IAAAqB~~,kBAAS,EAAE,MAAM;IAChB,IAAK,~~CAAEb~~,gBAAgB,IAAIC,gBAAgB,KAAM,CAAET,cAAc,EAAG;MACnEG,mBAAmB,CAAC,CAAC;IACtB;EACD,CAAC,EAAE,CAAEK,gBAAgB,EAAEC,gBAAgB,EAAET,cAAc,CAAG,CAAC;EAE3D,~~MAAMsB~~,qBAAqB,~~GAAGb~~,gBAAgB,GAC3C,IAAAjB,QAAE,EAAE,WAAY,CAAC,GACjB,IAAAA,QAAE,EAAE,eAAgB,CAAC;EAExB,~~MAAM+B~~,mBAAmB,~~GAAGd~~,gBAAgB,IAAID,gBAAgB;EAEhE,OACC,IAAAhC,QAAA,~~CAAAgD~~,aAAA,~~EAAC3C~~,UAAA,~~CAAA4C~~,iBAAiB;IACjBC,MAAM,EAAG;MACR,~~GAAGpC~~,eAAe;~~MAClBqC~~,gBAAgB,EAAEL;IACnB,CAAG;~~IACH/B~~,MAAM,~~EAAG~~,IAAAf,QAAA,~~CAAAgD~~,aAAA,~~EAACvC~~,OAAA,~~CAAA2C~~,OAAM,~~MAAE~~,~~CAAG~~;~~IACrBD~~,gBAAgB,~~EAAGJ~~,mBAAmB,~~IAAI~~,~~IAAA/C~~,QAAA,~~CAAAgD~~,aAAA,~~EAACnC~~,iBAAA,~~CAAAuC~~,OAAgB,~~MAAE~~,~~CAAG~~;~~IAChElC~~,OAAO,EACNa,iBAAiB,IAChB,IAAA/B,QAAA,~~CAAAgD~~,aAAA,~~EAAC3C~~,UAAA,~~CAAAgD~~,iBAAiB,CAACC,IAAI;MAACC,KAAK,EAAC;IAAmB,CAAE,CAEpD;IACDC,OAAO,EACN,~~IAAAxD~~,QAAA,~~CAAAgD~~,aAAA,~~EAAAhD~~,QAAA,~~CAAAyD~~,QAAA,QACC,~~IAAAzD~~,QAAA,~~CAAAgD~~,aAAA,~~EAACrC~~,8BAAA,~~CAAAyC~~,OAA6B;~~MAC7B/B~~,mBAAmB,EAAGA;IAAqB,CAC3C,CACA,CACF;IACDF,MAAM,EACLW,0BAA0B,IAC1B,CAAER,gBAAgB,IACjB,IAAAtB,QAAA,~~CAAAgD~~,aAAA;MAAKU,SAAS,EAAC;IAA6B,GAC3C,~~IAAA1D~~,QAAA,~~CAAAgD~~,aAAA,~~EAAC7C~~,YAAA,~~CAAAwD~~,eAAe;MAACC,aAAa,EAAG,~~IAAA5C~~,QAAE,EAAE,SAAU;IAAG,CAAE,CAChD,CAEN;~~IACD6C~~,SAAS,EAAG;MACXC,QAAQ,~~EAAE5B~~,gBAAgB;~~MAC1B6B~~,IAAI,~~EAAE5B~~;IACP;EAAG,CACH,CAAC;AAEJ;AAAC,~~IAAA6B~~,QAAA,~~GAEc5C~~,SAAS;~~AAAA6C~~,OAAA,CAAAb,OAAA,GAAAY,QAAA"}
1	+ {"version":3,"names":["_element","require","_compose","_blockEditor","_data","_interface","_i18n","_keyboardShortcuts","_preferences","_header","_interopRequireDefault","_widgetAreasBlockEditorContent","_store","_secondarySidebar","interfaceLabels","header","__","body","sidebar","footer","Interface","blockEditorSettings","isMobileViewport","useViewportMatch","isHugeViewport","setIsInserterOpened","setIsListViewOpened","closeGeneralSidebar","useDispatch","editWidgetsStore","hasBlockBreadCrumbsEnabled","hasSidebarEnabled","isInserterOpened","isListViewOpened","previousShortcut","nextShortcut","useSelect","select","interfaceStore","getActiveComplementaryArea","name","preferencesStore","get","keyboardShortcutsStore","getAllShortcutKeyCombinations","listViewToggleElement","setListViewToggleElement","useState","useEffect","secondarySidebarLabel","hasSecondarySidebar","createElement","InterfaceSkeleton","labels","secondarySidebar","default","ComplementaryArea","Slot","scope","content","Fragment","className","BlockBreadcrumb","rootLabelText","shortcuts","previous","next","_default","exports"],"sources":["@wordpress/edit-widgets/src/components/layout/interface.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useViewportMatch } from '@wordpress/compose';\nimport { BlockBreadcrumb } from '@wordpress/block-editor';\nimport { useEffect, useState } 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';\nimport { store as preferencesStore } from '@wordpress/preferences';\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 { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =\n\t\tuseDispatch( 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( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'showBlockBreadcrumbs'\n\t\t\t),\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\tconst [ listViewToggleElement, setListViewToggleElement ] =\n\t\tuseState( null );\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 secondarySidebarLabel = isListViewOpened\n\t\t? __( 'List View' )\n\t\t: __( 'Block Library' );\n\n\tconst hasSecondarySidebar = isListViewOpened \|\| isInserterOpened;\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tlabels={ {\n\t\t\t\t...interfaceLabels,\n\t\t\t\tsecondarySidebar: secondarySidebarLabel,\n\t\t\t} }\n\t\t\theader={\n\t\t\t\t<Header setListViewToggleElement={ setListViewToggleElement } />\n\t\t\t}\n\t\t\tsecondarySidebar={\n\t\t\t\thasSecondarySidebar && (\n\t\t\t\t\t<SecondarySidebar\n\t\t\t\t\t\tlistViewToggleElement={ listViewToggleElement }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\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</>\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"],"mappings":"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"}

package/build/components/secondary-sidebar/index.js CHANGED Viewed

@@ -22,7 +22,9 @@ var _listViewSidebar = _interopRequireDefault(require("./list-view-sidebar"));
  * Internal dependencies
  */
-function SecondarySidebar() {
+function SecondarySidebar({
+  listViewToggleElement
+}) {
   const {
     isInserterOpen,
     isListViewOpen
@@ -40,7 +42,9 @@ function SecondarySidebar() {
     return (0, _element.createElement)(_inserterSidebar.default, null);
   }
   if (isListViewOpen) {
-    return (0, _element.createElement)(_listViewSidebar.default, null);
+    return (0, _element.createElement)(_listViewSidebar.default, {
+      listViewToggleElement: listViewToggleElement
+    });
   }
   return null;
 }

package/build/components/secondary-sidebar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_data","require","_store","_inserterSidebar","_interopRequireDefault","_listViewSidebar","SecondarySidebar","isInserterOpen","isListViewOpen","useSelect","select","isInserterOpened","isListViewOpened","editWidgetsStore","_element","createElement","default"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect } from '@wordpress/data';\n/\n Internal dependencies\n /\nimport { store as editWidgetsStore } from '../../store';\n\n/\n Internal dependencies\n */\nimport InserterSidebar from './inserter-sidebar';\nimport ListViewSidebar from './list-view-sidebar';\n\nexport default function SecondarySidebar() {\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\n\tif ( isInserterOpen ) {\n\t\treturn <InserterSidebar />;\n\t}\n\tif ( isListViewOpen ) {\n\t\treturn <ListViewSidebar ~~/>;\~~n\t}\n\treturn null;\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,gBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAD,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;;AAIe,SAASK,gBAAgBA,~~CAAA~~,EAAG;~~EAC1C~~,MAAM;IAAEC,cAAc;IAAEC;EAAe,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IACnE,MAAM;MAAEC,gBAAgB;MAAEC;IAAiB,CAAC,GAC3CF,MAAM,CAAEG,YAAiB,CAAC;IAC3B,OAAO;MACNN,cAAc,EAAEI,gBAAgB,CAAC,CAAC;MAClCH,cAAc,EAAEI,gBAAgB,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,IAAKL,cAAc,EAAG;IACrB,OAAO,IAAAO,QAAA,CAAAC,aAAA,~~EAACZ~~,gBAAA,~~CAAAa~~,OAAe,MAAE,CAAC;EAC3B;EACA,IAAKR,cAAc,EAAG;IACrB,~~OAAO~~,IAAAM,QAAA,CAAAC,aAAA,~~EAACV~~,gBAAA,~~CAAAW~~,OAAe,~~MAAE~~,CAAC;~~EAC3B~~;EACA,OAAO,IAAI;AACZ"}
1	+ {"version":3,"names":["_data","require","_store","_inserterSidebar","_interopRequireDefault","_listViewSidebar","SecondarySidebar","listViewToggleElement","isInserterOpen","isListViewOpen","useSelect","select","isInserterOpened","isListViewOpened","editWidgetsStore","_element","createElement","default"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect } from '@wordpress/data';\n/\n Internal dependencies\n /\nimport { store as editWidgetsStore } from '../../store';\n\n/\n Internal dependencies\n */\nimport InserterSidebar from './inserter-sidebar';\nimport ListViewSidebar from './list-view-sidebar';\n\nexport default function SecondarySidebar( { listViewToggleElement } ) {\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\n\tif ( isInserterOpen ) {\n\t\treturn <InserterSidebar />;\n\t}\n\tif ( isListViewOpen ) {\n\t\treturn (\n\t\t\t<ListViewSidebar listViewToggleElement={ listViewToggleElement } />\n\t\t);\n\t}\n\treturn null;\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,gBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAD,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;;AAIe,SAASK,gBAAgBA,CAAE;EAAEC;AAAsB,CAAC,EAAG;EACrE,MAAM;IAAEC,cAAc;IAAEC;EAAe,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IACnE,MAAM;MAAEC,gBAAgB;MAAEC;IAAiB,CAAC,GAC3CF,MAAM,CAAEG,YAAiB,CAAC;IAC3B,OAAO;MACNN,cAAc,EAAEI,gBAAgB,CAAC,CAAC;MAClCH,cAAc,EAAEI,gBAAgB,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,IAAKL,cAAc,EAAG;IACrB,OAAO,IAAAO,QAAA,CAAAC,aAAA,EAACb,gBAAA,CAAAc,OAAe,MAAE,CAAC;EAC3B;EACA,IAAKR,cAAc,EAAG;IACrB,OACC,IAAAM,QAAA,CAAAC,aAAA,EAACX,gBAAA,CAAAY,OAAe;MAACV,qBAAqB,EAAGA;IAAuB,CAAE,CAAC;EAErE;EACA,OAAO,IAAI;AACZ"}

package/build/components/secondary-sidebar/list-view-sidebar.js CHANGED Viewed

@@ -21,7 +21,9 @@ var _store = require("../../store");
  * Internal dependencies
  */
-function ListViewSidebar() {
+function ListViewSidebar({
+  listViewToggleElement
+}) {
   const {
     setIsListViewOpened
   } = (0, _data.useDispatch)(_store.store);
@@ -30,29 +32,32 @@ function ListViewSidebar() {
   // re-renders when the dropZoneElement updates.
   const [dropZoneElement, setDropZoneElement] = (0, _element.useState)(null);
   const focusOnMountRef = (0, _compose.useFocusOnMount)('firstElement');
-  const headerFocusReturnRef = (0, _compose.useFocusReturn)();
-  const contentFocusReturnRef = (0, _compose.useFocusReturn)();
-  function closeOnEscape(event) {
+  // When closing the list view, focus should return to the toggle button.
+  const closeListView = (0, _element.useCallback)(() => {
+    setIsListViewOpened(false);
+    listViewToggleElement?.focus();
+  }, [listViewToggleElement, setIsListViewOpened]);
+  const closeOnEscape = (0, _element.useCallback)(event => {
     if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented) {
       event.preventDefault();
-      setIsListViewOpened(false);
+      closeListView();
     }
-  }
+  }, [closeListView]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, _element.createElement)("div", {
       className: "edit-widgets-editor__list-view-panel",
       onKeyDown: closeOnEscape
     }, (0, _element.createElement)("div", {
-      className: "edit-widgets-editor__list-view-panel-header",
-      ref: headerFocusReturnRef
+      className: "edit-widgets-editor__list-view-panel-header"
     }, (0, _element.createElement)("strong", null, (0, _i18n.__)('List View')), (0, _element.createElement)(_components.Button, {
       icon: _icons.closeSmall,
       label: (0, _i18n.__)('Close'),
-      onClick: () => setIsListViewOpened(false)
+      onClick: closeListView
     })), (0, _element.createElement)("div", {
       className: "edit-widgets-editor__list-view-panel-content",
-      ref: (0, _compose.useMergeRefs)([contentFocusReturnRef, focusOnMountRef, setDropZoneElement])
+      ref: (0, _compose.useMergeRefs)([focusOnMountRef, setDropZoneElement])
     }, (0, _element.createElement)(_blockEditor.__experimentalListView, {
       dropZoneElement: dropZoneElement
     })))

package/build/components/secondary-sidebar/list-view-sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_element","require","_blockEditor","_components","_compose","_data","_i18n","_icons","_keycodes","_store","ListViewSidebar","setIsListViewOpened","useDispatch","editWidgetsStore","dropZoneElement","setDropZoneElement","useState","focusOnMountRef","useFocusOnMount","~~headerFocusReturnRef~~","~~useFocusReturn~~","~~contentFocusReturnRef~~","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","createElement","className","onKeyDown","~~ref","~~__","Button","icon","closeSmall","label","onClick","useMergeRefs","__experimentalListView"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalListView as ListView } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {~~\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n~~} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\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\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst ~~headerFocusReturnRef~~ = ~~useFocusReturn~~();\n\~~tconst~~ ~~contentFocusReturnRef~~ = ~~useFocusReturn(~~);\n\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\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\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>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\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\tsetDropZoneElement,\n\t\t\t\t~~] ) }\n\t\t\t>\n\t\t\t\t<ListView dropZoneElement={ dropZoneElement } />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;~~AAWA~~,IAAAA,QAAA,GAAAC,OAAA;~~AARA~~,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;~~AAKA~~,IAAAI,KAAA,GAAAJ,OAAA;AAEA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAP,OAAA;AAKA,IAAAQ,MAAA,GAAAR,OAAA;~~AAnBA~~;AACA;AACA;;~~AAcA~~;AACA;AACA;;AAGe,SAASS,eAAeA,~~CAAA~~,EAAG;~~EACzC~~,MAAM;IAAEC;EAAoB,CAAC,GAAG,IAAAC,iBAAW,EAAEC,YAAiB,CAAC;;EAE/D;EACA;EACA,MAAM,CAAEC,eAAe,EAAEC,kBAAkB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAEhE,MAAMC,eAAe,GAAG,IAAAC,wBAAe,EAAE,cAAe,CAAC;~~EACzD~~,MAAMC,~~oBAAoB~~,GAAG,IAAAC,~~uBAAc~~,~~EAAC~~,CAAC;~~EAC7C~~,~~MAAMC,~~qBAAqB,~~GAAG~~,~~IAAAD~~,~~uBAAc~~,~~EAAC~~,CAAC;~~EAE9C~~,~~SAASE~~,~~aAAaA~~,~~CAAEC~~,KAAK,~~EAAG~~;~~IAC/B~~,IAAKA,KAAK,CAACC,OAAO,KAAKC,gBAAM,IAAI,CAAEF,KAAK,CAACG,gBAAgB,EAAG;MAC3DH,KAAK,CAACI,cAAc,CAAC,CAAC;~~MACtBhB~~,~~mBAAmB~~,~~CAAE~~,~~KAAM,~~CAAC;~~IAC7B~~;EACD;~~EAEA~~;IACC;IACA,~~IAAAX~~,QAAA,~~CAAA4B~~,aAAA;MACCC,SAAS,EAAC,sCAAsC;MAChDC,SAAS,EAAGR;IAAe,GAE3B,~~IAAAtB~~,QAAA,~~CAAA4B~~,aAAA;~~MACCC~~,SAAS,EAAC~~,6CAA6C~~;~~MACvDE~~,~~GAAG~~,~~EAAGZ;IAAsB~~,~~GAE5B,IAAAnB,~~QAAA,~~CAAA4B~~,aAAA,kBAAU,~~IAAAI~~,QAAE,EAAE,WAAY,CAAW,CAAC,EACtC,IAAAhC,QAAA,~~CAAA4B~~,aAAA,~~EAACzB~~,WAAA,CAAA8B,MAAM;MACNC,IAAI,EAAGC,iBAAY;MACnBC,KAAK,EAAG,IAAAJ,QAAE,EAAE,OAAQ,CAAG;MACvBK,OAAO,~~EAAGA,CAAA,KAAM1B,mBAAmB,CAAE,KAAM~~;~~IAAG~~,~~CAC9C~~,CACG,CAAC,EACN,~~IAAAX~~,QAAA,~~CAAA4B~~,aAAA;MACCC,SAAS,EAAC,8CAA8C;~~MACxDE~~,GAAG,EAAG,~~IAAAO~~,qBAAY,EAAE,~~CACnBjB~~,~~qBAAqB,EACrBJ,~~eAAe,~~EACfF~~,kBAAkB,~~CACjB~~;IAAG,~~GAEL~~,~~IAAAf~~,QAAA,~~CAAA4B~~,aAAA,~~EAAC1B~~,YAAA,~~CAAAqC~~,sBAAQ;MAACzB,eAAe,EAAGA;IAAiB,CAAE,CAC3C,CACD;EAAC;AAER"}
1	+ {"version":3,"names":["_element","require","_blockEditor","_components","_compose","_data","_i18n","_icons","_keycodes","_store","ListViewSidebar","listViewToggleElement","setIsListViewOpened","useDispatch","editWidgetsStore","dropZoneElement","setDropZoneElement","useState","focusOnMountRef","useFocusOnMount","closeListView","useCallback","focus","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","createElement","className","onKeyDown","__","Button","icon","closeSmall","label","onClick","ref","useMergeRefs","__experimentalListView"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalListView as ListView } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport { useFocusOnMount, useMergeRefs } from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { useCallback, useState } from '@wordpress/element';\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( { listViewToggleElement } ) {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\n\t// When closing the list view, focus should return to the toggle button.\n\tconst closeListView = useCallback( () => {\n\t\tsetIsListViewOpened( false );\n\t\tlistViewToggleElement?.focus();\n\t}, [ listViewToggleElement, setIsListViewOpened ] );\n\n\tconst closeOnEscape = useCallback(\n\t\t( event ) => {\n\t\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcloseListView();\n\t\t\t}\n\t\t},\n\t\t[ closeListView ]\n\t);\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\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>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\tonClick={ closeListView }\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( [ focusOnMountRef, setDropZoneElement ] ) }\n\t\t\t>\n\t\t\t\t<ListView dropZoneElement={ dropZoneElement } />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;AAOA,IAAAA,QAAA,GAAAC,OAAA;AAJA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAEA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAP,OAAA;AAKA,IAAAQ,MAAA,GAAAR,OAAA;AAfA;AACA;AACA;;AAUA;AACA;AACA;;AAGe,SAASS,eAAeA,CAAE;EAAEC;AAAsB,CAAC,EAAG;EACpE,MAAM;IAAEC;EAAoB,CAAC,GAAG,IAAAC,iBAAW,EAAEC,YAAiB,CAAC;;EAE/D;EACA;EACA,MAAM,CAAEC,eAAe,EAAEC,kBAAkB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAEhE,MAAMC,eAAe,GAAG,IAAAC,wBAAe,EAAE,cAAe,CAAC;;EAEzD;EACA,MAAMC,aAAa,GAAG,IAAAC,oBAAW,EAAE,MAAM;IACxCT,mBAAmB,CAAE,KAAM,CAAC;IAC5BD,qBAAqB,EAAEW,KAAK,CAAC,CAAC;EAC/B,CAAC,EAAE,CAAEX,qBAAqB,EAAEC,mBAAmB,CAAG,CAAC;EAEnD,MAAMW,aAAa,GAAG,IAAAF,oBAAW,EAC9BG,KAAK,IAAM;IACZ,IAAKA,KAAK,CAACC,OAAO,KAAKC,gBAAM,IAAI,CAAEF,KAAK,CAACG,gBAAgB,EAAG;MAC3DH,KAAK,CAACI,cAAc,CAAC,CAAC;MACtBR,aAAa,CAAC,CAAC;IAChB;EACD,CAAC,EACD,CAAEA,aAAa,CAChB,CAAC;EAED;IACC;IACA,IAAApB,QAAA,CAAA6B,aAAA;MACCC,SAAS,EAAC,sCAAsC;MAChDC,SAAS,EAAGR;IAAe,GAE3B,IAAAvB,QAAA,CAAA6B,aAAA;MAAKC,SAAS,EAAC;IAA6C,GAC3D,IAAA9B,QAAA,CAAA6B,aAAA,kBAAU,IAAAG,QAAE,EAAE,WAAY,CAAW,CAAC,EACtC,IAAAhC,QAAA,CAAA6B,aAAA,EAAC1B,WAAA,CAAA8B,MAAM;MACNC,IAAI,EAAGC,iBAAY;MACnBC,KAAK,EAAG,IAAAJ,QAAE,EAAE,OAAQ,CAAG;MACvBK,OAAO,EAAGjB;IAAe,CACzB,CACG,CAAC,EACN,IAAApB,QAAA,CAAA6B,aAAA;MACCC,SAAS,EAAC,8CAA8C;MACxDQ,GAAG,EAAG,IAAAC,qBAAY,EAAE,CAAErB,eAAe,EAAEF,kBAAkB,CAAG;IAAG,GAE/D,IAAAhB,QAAA,CAAA6B,aAAA,EAAC3B,YAAA,CAAAsC,sBAAQ;MAACzB,eAAe,EAAGA;IAAiB,CAAE,CAC3C,CACD;EAAC;AAER"}

package/build-module/components/header/index.js CHANGED Viewed

@@ -24,7 +24,9 @@ import { unlock } from '../../lock-unlock';
 const {
   useShouldContextualToolbarShow
 } = unlock(blockEditorPrivateApis);
-function Header() {
+function Header({
+  setListViewToggleElement
+}) {
   const isMediumViewport = useViewportMatch('medium');
   const inserterButton = useRef();
   const widgetAreaClientId = useLastSelectedWidgetArea();
@@ -112,7 +114,8 @@ function Header() {
     isPressed: isListViewOpen
     /* translators: button label text should, if possible, be under 16 characters. */,
     label: __('List View'),
-    onClick: toggleListView
+    onClick: toggleListView,
+    ref: setListViewToggleElement
   })))), createElement("div", {
     className: "edit-widgets-header__actions"
   }, createElement(SaveButton, null), createElement(PinnedItems.Slot, {

package/build-module/components/header/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useSelect","useDispatch","__","_x","Button","ToolbarItem","VisuallyHidden","NavigableToolbar","store","blockEditorStore","privateApis","blockEditorPrivateApis","PinnedItems","listView","plus","useCallback","useRef","useViewportMatch","SaveButton","UndoButton","RedoButton","MoreMenu","useLastSelectedWidgetArea","editWidgetsStore","unlock","useShouldContextualToolbarShow","Header","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","handleClick","window","requestAnimationFrame","toggleListView","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","blockToolbarCanBeFocused","createElement","Fragment","className","as","shouldUseKeyboardFocusShortcut","ref","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","label","Slot","scope"],"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { PinnedItems } from '@wordpress/interface';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport MoreMenu from '../more-menu';\nimport useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );\n\nfunction Header() {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t} = useShouldContextualToolbarShow();\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\t// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.\n\tconst blockToolbarCanBeFocused =\n\t\tshouldShowContextualToolbar \|\|\n\t\tcanFocusHiddenToolbar \|\|\n\t\tfixedToolbarCanBeFocused;\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"edit-widgets-header\">\n\t\t\t\t<div className=\"edit-widgets-header__navigable-toolbar-wrapper\">\n\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t<h1 className=\"edit-widgets-header__title\">\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isMediumViewport && (\n\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\tas=\"h1\"\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header__title\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableToolbar\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\t\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\t\t\t\tshouldUseKeyboardFocusShortcut={\n\t\t\t\t\t\t\t! blockToolbarCanBeFocused\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ handleClick }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\t/ translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. /\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t\t/ translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableToolbar>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"edit-widgets-header__actions\">\n\t\t\t\t\t<SaveButton />\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Header;\n"],"mappings":"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"}
1	+ {"version":3,"names":["useSelect","useDispatch","__","_x","Button","ToolbarItem","VisuallyHidden","NavigableToolbar","store","blockEditorStore","privateApis","blockEditorPrivateApis","PinnedItems","listView","plus","useCallback","useRef","useViewportMatch","SaveButton","UndoButton","RedoButton","MoreMenu","useLastSelectedWidgetArea","editWidgetsStore","unlock","useShouldContextualToolbarShow","Header","setListViewToggleElement","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","handleClick","window","requestAnimationFrame","toggleListView","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","blockToolbarCanBeFocused","createElement","Fragment","className","as","shouldUseKeyboardFocusShortcut","ref","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","label","Slot","scope"],"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { PinnedItems } from '@wordpress/interface';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport MoreMenu from '../more-menu';\nimport useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );\n\nfunction Header( { setListViewToggleElement } ) {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t} = useShouldContextualToolbarShow();\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\t// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.\n\tconst blockToolbarCanBeFocused =\n\t\tshouldShowContextualToolbar \|\|\n\t\tcanFocusHiddenToolbar \|\|\n\t\tfixedToolbarCanBeFocused;\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"edit-widgets-header\">\n\t\t\t\t<div className=\"edit-widgets-header__navigable-toolbar-wrapper\">\n\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t<h1 className=\"edit-widgets-header__title\">\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isMediumViewport && (\n\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\tas=\"h1\"\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header__title\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableToolbar\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\t\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\t\t\t\tshouldUseKeyboardFocusShortcut={\n\t\t\t\t\t\t\t! blockToolbarCanBeFocused\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ handleClick }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\t/ translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. /\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t\t/ translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\t\tref={ setListViewToggleElement }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableToolbar>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"edit-widgets-header__actions\">\n\t\t\t\t\t<SaveButton />\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Header;\n"],"mappings":"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"}

package/build-module/components/layout/interface.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { createElement, Fragment } from "@wordpress/element";
  */
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockBreadcrumb } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { InterfaceSkeleton, ComplementaryArea, store as interfaceStore } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
@@ -53,6 +53,7 @@ function Interface({
     previousShortcut: select(keyboardShortcutsStore).getAllShortcutKeyCombinations('core/edit-widgets/previous-region'),
     nextShortcut: select(keyboardShortcutsStore).getAllShortcutKeyCombinations('core/edit-widgets/next-region')
   }), []);
+  const [listViewToggleElement, setListViewToggleElement] = useState(null);
   // Inserter and Sidebars are mutually exclusive
   useEffect(() => {
@@ -73,8 +74,12 @@ function Interface({
       ...interfaceLabels,
       secondarySidebar: secondarySidebarLabel
     },
-    header: createElement(Header, null),
-    secondarySidebar: hasSecondarySidebar && createElement(SecondarySidebar, null),
+    header: createElement(Header, {
+      setListViewToggleElement: setListViewToggleElement
+    }),
+    secondarySidebar: hasSecondarySidebar && createElement(SecondarySidebar, {
+      listViewToggleElement: listViewToggleElement
+    }),
     sidebar: hasSidebarEnabled && createElement(ComplementaryArea.Slot, {
       scope: "core/edit-widgets"
     }),

package/build-module/components/layout/interface.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useViewportMatch","BlockBreadcrumb","useEffect","useDispatch","useSelect","InterfaceSkeleton","ComplementaryArea","store","interfaceStore","__","keyboardShortcutsStore","preferencesStore","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","get","getAllShortcutKeyCombinations","secondarySidebarLabel","hasSecondarySidebar","createElement","labels","secondarySidebar","Slot","scope","content","Fragment","className","rootLabelText","shortcuts","previous","next"],"sources":["@wordpress/edit-widgets/src/components/layout/interface.js"],"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';\nimport { store as preferencesStore } from '@wordpress/preferences';\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 { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =\n\t\tuseDispatch( 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( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'showBlockBreadcrumbs'\n\t\t\t),\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 secondarySidebarLabel = isListViewOpened\n\t\t? __( 'List View' )\n\t\t: __( 'Block Library' );\n\n\tconst hasSecondarySidebar = isListViewOpened \|\| isInserterOpened;\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tlabels={ {\n\t\t\t\t...interfaceLabels,\n\t\t\t\tsecondarySidebar: secondarySidebarLabel,\n\t\t\t} }\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</>\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,SAAS,QAAQ,oBAAoB;~~AAC9C~~,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SACCC,iBAAiB,EACjBC,iBAAiB,EACjBC,KAAK,IAAIC,cAAc,QACjB,sBAAsB;AAC7B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASF,KAAK,IAAIG,sBAAsB,QAAQ,+BAA+B;AAC/E,SAASH,KAAK,IAAII,gBAAgB,QAAQ,wBAAwB;;AAElE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,6BAA6B,MAAM,sCAAsC;AAChF,SAASN,KAAK,IAAIO,gBAAgB,QAAQ,aAAa;AACvD,OAAOC,gBAAgB,MAAM,sBAAsB;AAEnD,MAAMC,eAAe,GAAG;EACvB;EACAC,MAAM,EAAER,EAAE,CAAE,iBAAkB,CAAC;EAC/B;EACAS,IAAI,EAAET,EAAE,CAAE,oBAAqB,CAAC;EAChC;EACAU,OAAO,EAAEV,EAAE,CAAE,kBAAmB,CAAC;EACjC;EACAW,MAAM,EAAEX,EAAE,CAAE,gBAAiB;AAC9B,CAAC;AAED,SAASY,SAASA,CAAE;EAAEC;AAAoB,CAAC,EAAG;EAC7C,MAAMC,gBAAgB,~~GAAGvB~~,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAC1D,~~MAAMwB~~,cAAc,~~GAAGxB~~,gBAAgB,CAAE,MAAM,EAAE,IAAK,CAAC;EACvD,MAAM;~~IAAEyB~~,mBAAmB;IAAEC,mBAAmB;IAAEC;EAAoB,CAAC,GACtExB,WAAW,CAAEW,gBAAiB,CAAC;EAChC,MAAM;IACLc,0BAA0B;IAC1BC,iBAAiB;IACjBC,gBAAgB;IAChBC,gBAAgB;IAChBC,gBAAgB;IAChBC;EACD,CAAC,GAAG7B,SAAS,CACV8B,MAAM,KAAQ;IACfL,iBAAiB,EAAE,CAAC,CAAEK,MAAM,CAC3B1B,cACD,CAAC,CAAC2B,0BAA0B,CAAErB,gBAAgB,CAACsB,IAAK,CAAC;IACrDN,gBAAgB,EAAE,CAAC,CAAEI,MAAM,CAAEpB,gBAAiB,CAAC,CAACgB,gBAAgB,CAAC,CAAC;IAClEC,gBAAgB,EAAE,CAAC,CAAEG,MAAM,CAAEpB,gBAAiB,CAAC,CAACiB,gBAAgB,CAAC,CAAC;IAClEH,0BAA0B,EAAE,CAAC,CAAEM,MAAM,CAAEvB,gBAAiB,CAAC,CAAC0B,GAAG,CAC5D,mBAAmB,EACnB,sBACD,CAAC;IACDL,gBAAgB,EAAEE,MAAM,CACvBxB,sBACD,CAAC,CAAC4B,6BAA6B,CAC9B,mCACD,CAAC;IACDL,YAAY,EAAEC,MAAM,CACnBxB,sBACD,CAAC,CAAC4B,6BAA6B,CAAE,+BAAgC;EAClE,CAAC,CAAE,EACH,EACD,CAAC;;~~EAED~~;~~EACApC~~,SAAS,CAAE,MAAM;IAChB,~~IAAK2B~~,iBAAiB,IAAI,CAAEL,cAAc,EAAG;MAC5CC,mBAAmB,CAAE,KAAM,CAAC;MAC5BC,mBAAmB,CAAE,KAAM,CAAC;IAC7B;EACD,CAAC,EAAE,CAAEG,iBAAiB,EAAEL,cAAc,CAAG,CAAC;~~EAE1CtB~~,SAAS,CAAE,MAAM;IAChB,IAAK,~~CAAE4B~~,gBAAgB,IAAIC,gBAAgB,KAAM,CAAEP,cAAc,EAAG;MACnEG,mBAAmB,CAAC,CAAC;IACtB;EACD,CAAC,EAAE,CAAEG,gBAAgB,EAAEC,gBAAgB,EAAEP,cAAc,CAAG,CAAC;EAE3D,~~MAAMe~~,qBAAqB,~~GAAGR~~,gBAAgB,GAC3CtB,EAAE,CAAE,WAAY,CAAC,GACjBA,EAAE,CAAE,eAAgB,CAAC;EAExB,~~MAAM+B~~,mBAAmB,~~GAAGT~~,gBAAgB,IAAID,gBAAgB;EAEhE,~~OACCW~~,aAAA,~~CAACpC~~,iBAAiB;~~IACjBqC~~,MAAM,EAAG;MACR,~~GAAG1B~~,eAAe;~~MAClB2B~~,gBAAgB,EAAEJ;IACnB,CAAG;~~IACHtB~~,MAAM,~~EAAGwB~~,aAAA,~~CAAC7B~~,MAAM,~~MAAE~~,~~CAAG~~;~~IACrB+B~~,gBAAgB,~~EAAGH~~,mBAAmB,~~IAAIC~~,aAAA,~~CAAC1B~~,gBAAgB,~~MAAE~~,~~CAAG~~;~~IAChEI~~,OAAO,EACNU,iBAAiB,~~IAChBY~~,aAAA,~~CAACnC~~,iBAAiB,~~CAACsC~~,IAAI;MAACC,KAAK,EAAC;IAAmB,CAAE,CAEpD;IACDC,OAAO,EACNL,aAAA,CAAAM,QAAA,QACCN,aAAA,~~CAAC5B~~,6BAA6B;MAC7BS,mBAAmB,EAAGA;IAAqB,CAC3C,CACA,CACF;IACDF,MAAM,EACLQ,0BAA0B,IAC1B,CAAEL,gBAAgB,~~IACjBkB~~,aAAA;MAAKO,SAAS,EAAC;IAA6B,GAC3CP,aAAA,~~CAACxC~~,eAAe;~~MAACgD~~,aAAa,~~EAAGxC~~,EAAE,CAAE,SAAU;IAAG,CAAE,CAChD,CAEN;~~IACDyC~~,SAAS,EAAG;MACXC,QAAQ,~~EAAEnB~~,gBAAgB;~~MAC1BoB~~,IAAI,~~EAAEnB~~;IACP;EAAG,CACH,CAAC;AAEJ;AAEA,eAAeZ,SAAS"}
1	+ {"version":3,"names":["useViewportMatch","BlockBreadcrumb","useEffect","useState","useDispatch","useSelect","InterfaceSkeleton","ComplementaryArea","store","interfaceStore","__","keyboardShortcutsStore","preferencesStore","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","get","getAllShortcutKeyCombinations","listViewToggleElement","setListViewToggleElement","secondarySidebarLabel","hasSecondarySidebar","createElement","labels","secondarySidebar","Slot","scope","content","Fragment","className","rootLabelText","shortcuts","previous","next"],"sources":["@wordpress/edit-widgets/src/components/layout/interface.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useViewportMatch } from '@wordpress/compose';\nimport { BlockBreadcrumb } from '@wordpress/block-editor';\nimport { useEffect, useState } 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';\nimport { store as preferencesStore } from '@wordpress/preferences';\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 { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =\n\t\tuseDispatch( 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( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'showBlockBreadcrumbs'\n\t\t\t),\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\tconst [ listViewToggleElement, setListViewToggleElement ] =\n\t\tuseState( null );\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 secondarySidebarLabel = isListViewOpened\n\t\t? __( 'List View' )\n\t\t: __( 'Block Library' );\n\n\tconst hasSecondarySidebar = isListViewOpened \|\| isInserterOpened;\n\n\treturn (\n\t\t<InterfaceSkeleton\n\t\t\tlabels={ {\n\t\t\t\t...interfaceLabels,\n\t\t\t\tsecondarySidebar: secondarySidebarLabel,\n\t\t\t} }\n\t\t\theader={\n\t\t\t\t<Header setListViewToggleElement={ setListViewToggleElement } />\n\t\t\t}\n\t\t\tsecondarySidebar={\n\t\t\t\thasSecondarySidebar && (\n\t\t\t\t\t<SecondarySidebar\n\t\t\t\t\t\tlistViewToggleElement={ listViewToggleElement }\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\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</>\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"],"mappings":"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"}

package/build-module/components/secondary-sidebar/index.js CHANGED Viewed

@@ -13,7 +13,9 @@ import { store as editWidgetsStore } from '../../store';
  */
 import InserterSidebar from './inserter-sidebar';
 import ListViewSidebar from './list-view-sidebar';
-export default function SecondarySidebar() {
+export default function SecondarySidebar({
+  listViewToggleElement
+}) {
   const {
     isInserterOpen,
     isListViewOpen
@@ -31,7 +33,9 @@ export default function SecondarySidebar() {
     return createElement(InserterSidebar, null);
   }
   if (isListViewOpen) {
-    return createElement(ListViewSidebar, null);
+    return createElement(ListViewSidebar, {
+      listViewToggleElement: listViewToggleElement
+    });
   }
   return null;
 }

package/build-module/components/secondary-sidebar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useSelect","store","editWidgetsStore","InserterSidebar","ListViewSidebar","SecondarySidebar","isInserterOpen","isListViewOpen","select","isInserterOpened","isListViewOpened","createElement"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect } from '@wordpress/data';\n/\n Internal dependencies\n /\nimport { store as editWidgetsStore } from '../../store';\n\n/\n Internal dependencies\n */\nimport InserterSidebar from './inserter-sidebar';\nimport ListViewSidebar from './list-view-sidebar';\n\nexport default function SecondarySidebar() {\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\n\tif ( isInserterOpen ) {\n\t\treturn <InserterSidebar />;\n\t}\n\tif ( isListViewOpen ) {\n\t\treturn <ListViewSidebar ~~/>;\~~n\t}\n\treturn null;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;;AAEvD;AACA;AACA;AACA,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,eAAe,MAAM,qBAAqB;AAEjD,eAAe,SAASC,gBAAgBA,~~CAAA~~,EAAG;~~EAC1C~~,MAAM;IAAEC,cAAc;IAAEC;EAAe,CAAC,~~GAAGP~~,SAAS,~~CAAIQ~~,MAAM,IAAM;IACnE,MAAM;MAAEC,gBAAgB;MAAEC;IAAiB,CAAC,GAC3CF,MAAM,~~CAAEN~~,gBAAiB,CAAC;IAC3B,OAAO;~~MACNI~~,cAAc,EAAEG,gBAAgB,CAAC,CAAC;MAClCF,cAAc,EAAEG,gBAAgB,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,IAAKJ,cAAc,EAAG;IACrB,OAAOK,aAAA,~~CAACR~~,eAAe,MAAE,CAAC;EAC3B;EACA,~~IAAKI~~,cAAc,EAAG;IACrB,~~OAAOI~~,aAAA,~~CAACP~~,eAAe,~~MAAE~~,CAAC;~~EAC3B~~;EACA,OAAO,IAAI;AACZ"}
1	+ {"version":3,"names":["useSelect","store","editWidgetsStore","InserterSidebar","ListViewSidebar","SecondarySidebar","listViewToggleElement","isInserterOpen","isListViewOpen","select","isInserterOpened","isListViewOpened","createElement"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { useSelect } from '@wordpress/data';\n/\n Internal dependencies\n /\nimport { store as editWidgetsStore } from '../../store';\n\n/\n Internal dependencies\n */\nimport InserterSidebar from './inserter-sidebar';\nimport ListViewSidebar from './list-view-sidebar';\n\nexport default function SecondarySidebar( { listViewToggleElement } ) {\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\n\tif ( isInserterOpen ) {\n\t\treturn <InserterSidebar />;\n\t}\n\tif ( isListViewOpen ) {\n\t\treturn (\n\t\t\t<ListViewSidebar listViewToggleElement={ listViewToggleElement } />\n\t\t);\n\t}\n\treturn null;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;;AAEvD;AACA;AACA;AACA,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,eAAe,MAAM,qBAAqB;AAEjD,eAAe,SAASC,gBAAgBA,CAAE;EAAEC;AAAsB,CAAC,EAAG;EACrE,MAAM;IAAEC,cAAc;IAAEC;EAAe,CAAC,GAAGR,SAAS,CAAIS,MAAM,IAAM;IACnE,MAAM;MAAEC,gBAAgB;MAAEC;IAAiB,CAAC,GAC3CF,MAAM,CAAEP,gBAAiB,CAAC;IAC3B,OAAO;MACNK,cAAc,EAAEG,gBAAgB,CAAC,CAAC;MAClCF,cAAc,EAAEG,gBAAgB,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,IAAKJ,cAAc,EAAG;IACrB,OAAOK,aAAA,CAACT,eAAe,MAAE,CAAC;EAC3B;EACA,IAAKK,cAAc,EAAG;IACrB,OACCI,aAAA,CAACR,eAAe;MAACE,qBAAqB,EAAGA;IAAuB,CAAE,CAAC;EAErE;EACA,OAAO,IAAI;AACZ"}

package/build-module/components/secondary-sidebar/list-view-sidebar.js CHANGED Viewed

@@ -4,9 +4,9 @@ import { createElement } from "@wordpress/element";
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import { useFocusOnMount, useFocusReturn, useMergeRefs } from '@wordpress/compose';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -15,7 +15,9 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editWidgetsStore } from '../../store';
-export default function ListViewSidebar() {
+export default function ListViewSidebar({
+  listViewToggleElement
+}) {
   const {
     setIsListViewOpened
   } = useDispatch(editWidgetsStore);
@@ -24,29 +26,32 @@ export default function ListViewSidebar() {
   // re-renders when the dropZoneElement updates.
   const [dropZoneElement, setDropZoneElement] = useState(null);
   const focusOnMountRef = useFocusOnMount('firstElement');
-  const headerFocusReturnRef = useFocusReturn();
-  const contentFocusReturnRef = useFocusReturn();
-  function closeOnEscape(event) {
+  // When closing the list view, focus should return to the toggle button.
+  const closeListView = useCallback(() => {
+    setIsListViewOpened(false);
+    listViewToggleElement?.focus();
+  }, [listViewToggleElement, setIsListViewOpened]);
+  const closeOnEscape = useCallback(event => {
     if (event.keyCode === ESCAPE && !event.defaultPrevented) {
       event.preventDefault();
-      setIsListViewOpened(false);
+      closeListView();
     }
-  }
+  }, [closeListView]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     createElement("div", {
       className: "edit-widgets-editor__list-view-panel",
       onKeyDown: closeOnEscape
     }, createElement("div", {
-      className: "edit-widgets-editor__list-view-panel-header",
-      ref: headerFocusReturnRef
+      className: "edit-widgets-editor__list-view-panel-header"
     }, createElement("strong", null, __('List View')), createElement(Button, {
       icon: closeSmall,
       label: __('Close'),
-      onClick: () => setIsListViewOpened(false)
+      onClick: closeListView
     })), createElement("div", {
       className: "edit-widgets-editor__list-view-panel-content",
-      ref: useMergeRefs([contentFocusReturnRef, focusOnMountRef, setDropZoneElement])
+      ref: useMergeRefs([focusOnMountRef, setDropZoneElement])
     }, createElement(ListView, {
       dropZoneElement: dropZoneElement
     })))

package/build-module/components/secondary-sidebar/list-view-sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__experimentalListView","ListView","Button","useFocusOnMount","~~useFocusReturn~~","~~useMergeRefs~~","~~useDispatch~~","useState","__","closeSmall","ESCAPE","store","editWidgetsStore","ListViewSidebar","setIsListViewOpened","dropZoneElement","setDropZoneElement","focusOnMountRef","~~headerFocusReturnRef~~","~~contentFocusReturnRef~~","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","createElement","className","onKeyDown","~~ref","~~icon","label","onClick"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalListView as ListView } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {~~\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseMergeRefs,\n~~} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\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\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst ~~headerFocusReturnRef~~ = ~~useFocusReturn~~();\n\~~tconst~~ ~~contentFocusReturnRef~~ = ~~useFocusReturn(~~);\n\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\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\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>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\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\tsetDropZoneElement,\n\t\t\t\t~~] ) }\n\t\t\t>\n\t\t\t\t<ListView dropZoneElement={ dropZoneElement } />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,sBAAsB,IAAIC,QAAQ,QAAQ,yBAAyB;AAC5E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,~~SACCC~~,eAAe,~~EACfC~~,~~cAAc,EACdC,~~YAAY,~~QACN~~,oBAAoB;~~AAC3B~~,SAASC,WAAW,QAAQ,iBAAiB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;~~AAC7C~~,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAEvD,eAAe,SAASC,eAAeA,~~CAAA~~,EAAG;~~EACzC~~,MAAM;IAAEC;EAAoB,CAAC,~~GAAGR~~,WAAW,~~CAAEM~~,gBAAiB,CAAC;;EAE/D;EACA;EACA,MAAM,~~CAAEG~~,eAAe,EAAEC,kBAAkB,CAAE,~~GAAGT~~,QAAQ,CAAE,IAAK,CAAC;EAEhE,~~MAAMU~~,eAAe,~~GAAGd~~,eAAe,CAAE,cAAe,CAAC;~~EACzD~~,~~MAAMe~~,~~oBAAoB~~,~~GAAGd~~,~~cAAc~~,CAAC,CAAC;~~EAC7C~~,~~MAAMe~~,qBAAqB,~~GAAGf~~,~~cAAc~~,~~CAAC~~,CAAC;~~EAE9C~~,~~SAASgB~~,~~aAAaA~~,~~CAAEC~~,KAAK,~~EAAG~~;~~IAC/B~~,IAAKA,KAAK,CAACC,OAAO,~~KAAKZ~~,MAAM,IAAI,~~CAAEW~~,KAAK,CAACE,gBAAgB,EAAG;MAC3DF,KAAK,CAACG,cAAc,CAAC,CAAC;~~MACtBV~~,~~mBAAmB~~,~~CAAE~~,~~KAAM,~~CAAC;~~IAC7B~~;EACD;~~EAEA~~;IACC;~~IACAW~~,aAAA;MACCC,SAAS,EAAC,sCAAsC;MAChDC,SAAS,EAAGP;IAAe,GAE3BK,aAAA;~~MACCC~~,SAAS,EAAC~~,6CAA6C~~;~~MACvDE~~,~~GAAG~~,~~EAAGV;IAAsB,GAE5BO,~~aAAA,~~iBAAUjB~~,EAAE,CAAE,WAAY,CAAW,CAAC,~~EACtCiB~~,aAAA,~~CAACvB~~,MAAM;MACN2B,IAAI,EAAGpB,UAAY;MACnBqB,KAAK,EAAGtB,EAAE,CAAE,OAAQ,CAAG;MACvBuB,OAAO,~~EAAGA,CAAA,KAAMjB,mBAAmB,CAAE,KAAM~~;~~IAAG~~,~~CAC9C~~,CACG,CAAC,~~EACNW~~,aAAA;MACCC,SAAS,EAAC,8CAA8C;~~MACxDE~~,GAAG,~~EAAGvB~~,YAAY,CAAE,~~CACnBc~~,~~qBAAqB,EACrBF,~~eAAe,~~EACfD~~,kBAAkB,~~CACjB~~;IAAG,~~GAELS~~,aAAA,~~CAACxB~~,QAAQ;~~MAACc~~,eAAe,EAAGA;IAAiB,CAAE,CAC3C,CACD;EAAC;AAER"}
1	+ {"version":3,"names":["__experimentalListView","ListView","Button","useFocusOnMount","useMergeRefs","useDispatch","useCallback","useState","__","closeSmall","ESCAPE","store","editWidgetsStore","ListViewSidebar","listViewToggleElement","setIsListViewOpened","dropZoneElement","setDropZoneElement","focusOnMountRef","closeListView","focus","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","createElement","className","onKeyDown","icon","label","onClick","ref"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalListView as ListView } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport { useFocusOnMount, useMergeRefs } from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { useCallback, useState } from '@wordpress/element';\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( { listViewToggleElement } ) {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\n\t// When closing the list view, focus should return to the toggle button.\n\tconst closeListView = useCallback( () => {\n\t\tsetIsListViewOpened( false );\n\t\tlistViewToggleElement?.focus();\n\t}, [ listViewToggleElement, setIsListViewOpened ] );\n\n\tconst closeOnEscape = useCallback(\n\t\t( event ) => {\n\t\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcloseListView();\n\t\t\t}\n\t\t},\n\t\t[ closeListView ]\n\t);\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\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>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\tonClick={ closeListView }\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( [ focusOnMountRef, setDropZoneElement ] ) }\n\t\t\t>\n\t\t\t\t<ListView dropZoneElement={ dropZoneElement } />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,sBAAsB,IAAIC,QAAQ,QAAQ,yBAAyB;AAC5E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,eAAe,EAAEC,YAAY,QAAQ,oBAAoB;AAClE,SAASC,WAAW,QAAQ,iBAAiB;AAC7C,SAASC,WAAW,EAAEC,QAAQ,QAAQ,oBAAoB;AAC1D,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAEvD,eAAe,SAASC,eAAeA,CAAE;EAAEC;AAAsB,CAAC,EAAG;EACpE,MAAM;IAAEC;EAAoB,CAAC,GAAGV,WAAW,CAAEO,gBAAiB,CAAC;;EAE/D;EACA;EACA,MAAM,CAAEI,eAAe,EAAEC,kBAAkB,CAAE,GAAGV,QAAQ,CAAE,IAAK,CAAC;EAEhE,MAAMW,eAAe,GAAGf,eAAe,CAAE,cAAe,CAAC;;EAEzD;EACA,MAAMgB,aAAa,GAAGb,WAAW,CAAE,MAAM;IACxCS,mBAAmB,CAAE,KAAM,CAAC;IAC5BD,qBAAqB,EAAEM,KAAK,CAAC,CAAC;EAC/B,CAAC,EAAE,CAAEN,qBAAqB,EAAEC,mBAAmB,CAAG,CAAC;EAEnD,MAAMM,aAAa,GAAGf,WAAW,CAC9BgB,KAAK,IAAM;IACZ,IAAKA,KAAK,CAACC,OAAO,KAAKb,MAAM,IAAI,CAAEY,KAAK,CAACE,gBAAgB,EAAG;MAC3DF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBN,aAAa,CAAC,CAAC;IAChB;EACD,CAAC,EACD,CAAEA,aAAa,CAChB,CAAC;EAED;IACC;IACAO,aAAA;MACCC,SAAS,EAAC,sCAAsC;MAChDC,SAAS,EAAGP;IAAe,GAE3BK,aAAA;MAAKC,SAAS,EAAC;IAA6C,GAC3DD,aAAA,iBAAUlB,EAAE,CAAE,WAAY,CAAW,CAAC,EACtCkB,aAAA,CAACxB,MAAM;MACN2B,IAAI,EAAGpB,UAAY;MACnBqB,KAAK,EAAGtB,EAAE,CAAE,OAAQ,CAAG;MACvBuB,OAAO,EAAGZ;IAAe,CACzB,CACG,CAAC,EACNO,aAAA;MACCC,SAAS,EAAC,8CAA8C;MACxDK,GAAG,EAAG5B,YAAY,CAAE,CAAEc,eAAe,EAAED,kBAAkB,CAAG;IAAG,GAE/DS,aAAA,CAACzB,QAAQ;MAACe,eAAe,EAAGA;IAAiB,CAAE,CAC3C,CACD;EAAC;AAER"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "5.19.0",
+	"version": "5.19.1",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,32 +27,32 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^6.39.0",
-		"@wordpress/block-editor": "^12.10.0",
-		"@wordpress/block-library": "^8.19.0",
-		"@wordpress/blocks": "^12.19.0",
-		"@wordpress/components": "^25.8.0",
-		"@wordpress/compose": "^6.19.0",
-		"@wordpress/core-data": "^6.19.0",
-		"@wordpress/data": "^9.12.0",
-		"@wordpress/deprecated": "^3.42.0",
-		"@wordpress/dom": "^3.42.0",
-		"@wordpress/element": "^5.19.0",
-		"@wordpress/hooks": "^3.42.0",
-		"@wordpress/i18n": "^4.42.0",
-		"@wordpress/icons": "^9.33.0",
-		"@wordpress/interface": "^5.19.0",
-		"@wordpress/keyboard-shortcuts": "^4.19.0",
-		"@wordpress/keycodes": "^3.42.0",
-		"@wordpress/media-utils": "^4.33.0",
-		"@wordpress/notices": "^4.10.0",
-		"@wordpress/patterns": "^1.3.0",
-		"@wordpress/plugins": "^6.10.0",
-		"@wordpress/preferences": "^3.19.0",
-		"@wordpress/private-apis": "^0.24.0",
-		"@wordpress/reusable-blocks": "^4.19.0",
-		"@wordpress/url": "^3.43.0",
-		"@wordpress/widgets": "^3.19.0",
+		"@wordpress/api-fetch": "^6.39.1",
+		"@wordpress/block-editor": "^12.10.1",
+		"@wordpress/block-library": "^8.19.1",
+		"@wordpress/blocks": "^12.19.1",
+		"@wordpress/components": "^25.8.1",
+		"@wordpress/compose": "^6.19.1",
+		"@wordpress/core-data": "^6.19.1",
+		"@wordpress/data": "^9.12.1",
+		"@wordpress/deprecated": "^3.42.1",
+		"@wordpress/dom": "^3.42.1",
+		"@wordpress/element": "^5.19.1",
+		"@wordpress/hooks": "^3.42.1",
+		"@wordpress/i18n": "^4.42.1",
+		"@wordpress/icons": "^9.33.1",
+		"@wordpress/interface": "^5.19.1",
+		"@wordpress/keyboard-shortcuts": "^4.19.1",
+		"@wordpress/keycodes": "^3.42.1",
+		"@wordpress/media-utils": "^4.33.1",
+		"@wordpress/notices": "^4.10.1",
+		"@wordpress/patterns": "^1.3.1",
+		"@wordpress/plugins": "^6.10.1",
+		"@wordpress/preferences": "^3.19.1",
+		"@wordpress/private-apis": "^0.24.1",
+		"@wordpress/reusable-blocks": "^4.19.1",
+		"@wordpress/url": "^3.43.1",
+		"@wordpress/widgets": "^3.19.1",
 		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
@@ -62,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
+	"gitHead": "4987d16acb5c41b62704dc4f88225acb97ddd698"
 }

package/src/components/header/index.js CHANGED Viewed

@@ -27,7 +27,7 @@ import { unlock } from '../../lock-unlock';
 const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
-function Header() {
+function Header( { setListViewToggleElement } ) {
 	const isMediumViewport = useViewportMatch( 'medium' );
 	const inserterButton = useRef();
 	const widgetAreaClientId = useLastSelectedWidgetArea();
@@ -140,6 +140,7 @@ function Header() {
 									/* translators: button label text should, if possible, be under 16 characters. */
 									label={ __( 'List View' ) }
 									onClick={ toggleListView }
+									ref={ setListViewToggleElement }
 								/>
 							</>
 						) }

package/src/components/layout/interface.js CHANGED Viewed

@@ -3,7 +3,7 @@
  */
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockBreadcrumb } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	InterfaceSkeleton,
@@ -68,6 +68,9 @@ function Interface( { blockEditorSettings } ) {
 		[]
 	);
+	const [ listViewToggleElement, setListViewToggleElement ] =
+		useState( null );
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
 		if ( hasSidebarEnabled && ! isHugeViewport ) {
@@ -94,8 +97,16 @@ function Interface( { blockEditorSettings } ) {
 				...interfaceLabels,
 				secondarySidebar: secondarySidebarLabel,
 			} }
-			header={ <Header /> }
-			secondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }
+			header={
+				<Header setListViewToggleElement={ setListViewToggleElement } />
+			}
+			secondarySidebar={
+				hasSecondarySidebar && (
+					<SecondarySidebar
+						listViewToggleElement={ listViewToggleElement }
+					/>
+				)
+			}
 			sidebar={
 				hasSidebarEnabled && (
 					<ComplementaryArea.Slot scope="core/edit-widgets" />

package/src/components/secondary-sidebar/index.js CHANGED Viewed

@@ -13,7 +13,7 @@ import { store as editWidgetsStore } from '../../store';
 import InserterSidebar from './inserter-sidebar';
 import ListViewSidebar from './list-view-sidebar';
-export default function SecondarySidebar() {
+export default function SecondarySidebar( { listViewToggleElement } ) {
 	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
 		const { isInserterOpened, isListViewOpened } =
 			select( editWidgetsStore );
@@ -27,7 +27,9 @@ export default function SecondarySidebar() {
 		return <InserterSidebar />;
 	}
 	if ( isListViewOpen ) {
-		return <ListViewSidebar />;
+		return (
+			<ListViewSidebar listViewToggleElement={ listViewToggleElement } />
+		);
 	}
 	return null;
 }

package/src/components/secondary-sidebar/list-view-sidebar.js CHANGED Viewed

@@ -3,13 +3,9 @@
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import {
-	useFocusOnMount,
-	useFocusReturn,
-	useMergeRefs,
-} from '@wordpress/compose';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -19,7 +15,7 @@ import { ESCAPE } from '@wordpress/keycodes';
  */
 import { store as editWidgetsStore } from '../../store';
-export default function ListViewSidebar() {
+export default function ListViewSidebar( { listViewToggleElement } ) {
 	const { setIsListViewOpened } = useDispatch( editWidgetsStore );
 	// Use internal state instead of a ref to make sure that the component
@@ -27,15 +23,22 @@ export default function ListViewSidebar() {
 	const [ dropZoneElement, setDropZoneElement ] = useState( null );
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const headerFocusReturnRef = useFocusReturn();
-	const contentFocusReturnRef = useFocusReturn();
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			setIsListViewOpened( false );
-		}
-	}
+	// When closing the list view, focus should return to the toggle button.
+	const closeListView = useCallback( () => {
+		setIsListViewOpened( false );
+		listViewToggleElement?.focus();
+	}, [ listViewToggleElement, setIsListViewOpened ] );
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeListView();
+			}
+		},
+		[ closeListView ]
+	);
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -43,24 +46,17 @@ export default function ListViewSidebar() {
 			className="edit-widgets-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
-			<div
-				className="edit-widgets-editor__list-view-panel-header"
-				ref={ headerFocusReturnRef }
-			>
+			<div className="edit-widgets-editor__list-view-panel-header">
 				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
 					label={ __( 'Close' ) }
-					onClick={ () => setIsListViewOpened( false ) }
+					onClick={ closeListView }
 				/>
 			</div>
 			<div
 				className="edit-widgets-editor__list-view-panel-content"
-				ref={ useMergeRefs( [
-					contentFocusReturnRef,
-					focusOnMountRef,
-					setDropZoneElement,
-				] ) }
+				ref={ useMergeRefs( [ focusOnMountRef, setDropZoneElement ] ) }
 			>
 				<ListView dropZoneElement={ dropZoneElement } />
 			</div>