@wordpress/edit-widgets 5.9.0 → 5.11.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 5.11.0 (2023-05-24)
+
+## 5.10.0 (2023-05-10)
+
 ## 5.9.0 (2023-04-26)
 
 ## 5.8.0 (2023-04-12)

package/build/components/header/index.js

@@ -35,6 +35,8 @@ var _useLastSelectedWidgetArea = _interopRequireDefault(require("../../hooks/use
 
 var _store = require("../../store");
 
+var _privateApis = require("../../private-apis");
+
 /**
  * WordPress dependencies
  */
@@ -42,6 +44,10 @@ var _store = require("../../store");
 /**
  * Internal dependencies
  */
+const {
+  useShouldContextualToolbarShow
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+
 function Header() {
   const isMediumViewport = (0, _compose.useViewportMatch)('medium');
   const inserterButton = (0, _element.useRef)();
@@ -91,6 +97,14 @@ function Header() {
   };
 
   const toggleListView = (0, _element.useCallback)(() => setIsListViewOpened(!isListViewOpen), [setIsListViewOpened, isListViewOpen]);
+  const {
+    shouldShowContextualToolbar,
+    canFocusHiddenToolbar,
+    fixedToolbarCanBeFocused
+  } = useShouldContextualToolbarShow(); // If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+  // There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+
+  const blockToolbarCanBeFocused = shouldShowContextualToolbar || canFocusHiddenToolbar || fixedToolbarCanBeFocused;
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
     className: "edit-widgets-header"
   }, (0, _element.createElement)("div", {
@@ -102,7 +116,8 @@ function Header() {
     className: "edit-widgets-header__title"
   }, (0, _i18n.__)('Widgets')), (0, _element.createElement)(_blockEditor.NavigableToolbar, {
     className: "edit-widgets-header-toolbar",
-    "aria-label": (0, _i18n.__)('Document tools')
+    "aria-label": (0, _i18n.__)('Document tools'),
+    shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused
   }, (0, _element.createElement)(_components.ToolbarItem, {
     ref: inserterButton,
     as: _components.Button,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"names":["Header","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","editWidgetsStore","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","blockEditorStore","handleClick","window","requestAnimationFrame","toggleListView","Button","event","preventDefault","plus","listView"],"mappings":"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","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} 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';\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\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>\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"]}
+{"version":3,"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"names":["useShouldContextualToolbarShow","blockEditorPrivateApis","Header","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","editWidgetsStore","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","blockEditorStore","handleClick","window","requestAnimationFrame","toggleListView","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","blockToolbarCanBeFocused","Button","event","preventDefault","plus","listView"],"mappings":"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","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 '../../private-apis';\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"]}

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

@@ -45,21 +45,16 @@ function ListViewSidebar() {
     }
   }
 
-  const instanceId = (0, _compose.useInstanceId)(ListViewSidebar);
-  const labelId = `edit-widgets-editor__list-view-panel-label-${instanceId}`;
   return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, _element.createElement)("div", {
-      "aria-labelledby": labelId,
       className: "edit-widgets-editor__list-view-panel",
       onKeyDown: closeOnEscape
     }, (0, _element.createElement)("div", {
       className: "edit-widgets-editor__list-view-panel-header",
       ref: headerFocusReturnRef
-    }, (0, _element.createElement)("strong", {
-      id: labelId
-    }, (0, _i18n.__)('List View')), (0, _element.createElement)(_components.Button, {
+    }, (0, _element.createElement)("strong", null, (0, _i18n.__)('List View')), (0, _element.createElement)(_components.Button, {
       icon: _icons.closeSmall,
-      label: (0, _i18n.__)('Close List View Sidebar'),
+      label: (0, _i18n.__)('Close'),
       onClick: () => setIsListViewOpened(false)
     })), (0, _element.createElement)("div", {
       className: "edit-widgets-editor__list-view-panel-content",

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["ListViewSidebar","setIsListViewOpened","editWidgetsStore","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","instanceId","labelId","closeSmall"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AAKA;;AAnBA;AACA;AACA;;AAcA;AACA;AACA;AAGe,SAASA,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,YAAb,CAAhC;AAEA,QAAMC,eAAe,GAAG,8BAAiB,cAAjB,CAAxB;AACA,QAAMC,oBAAoB,GAAG,8BAA7B;AACA,QAAMC,qBAAqB,GAAG,8BAA9B;;AACA,WAASC,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBC,gBAAlB,IAA4B,CAAEF,KAAK,CAACG,gBAAzC,EAA4D;AAC3DH,MAAAA,KAAK,CAACI,cAAN;AACAV,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,QAAMW,UAAU,GAAG,4BAAeZ,eAAf,CAAnB;AACA,QAAMa,OAAO,GAAI,8CAA8CD,UAAY,EAA3E;AAEA,SACC;AACA;AACC,yBAAkBC,OADnB;AAEC,MAAA,SAAS,EAAC,sCAFX;AAGC,MAAA,SAAS,EAAGP;AAHb,OAKC;AACC,MAAA,SAAS,EAAC,6CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC;AAAQ,MAAA,EAAE,EAAGS;AAAb,OAAyB,cAAI,WAAJ,CAAzB,CAJD,EAKC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGC,iBADR;AAEC,MAAA,KAAK,EAAG,cAAI,yBAAJ,CAFT;AAGC,MAAA,OAAO,EAAG,MAAMb,mBAAmB,CAAE,KAAF;AAHpC,MALD,CALD,EAgBC;AACC,MAAA,SAAS,EAAC,8CADX;AAEC,MAAA,GAAG,EAAG,2BAAc,CACnBI,qBADmB,EAEnBF,eAFmB,CAAd;AAFP,OAOC,4BAAC,mCAAD,OAPD,CAhBD;AAFD;AA6BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalListView as ListView } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseInstanceId,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\tconst instanceId = useInstanceId( ListViewSidebar );\n\tconst labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\taria-labelledby={ labelId }\n\t\t\tclassName=\"edit-widgets-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-header\"\n\t\t\t\tref={ headerFocusReturnRef }\n\t\t\t>\n\t\t\t\t<strong id={ labelId }>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close List View Sidebar' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tcontentFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t<ListView />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["ListViewSidebar","setIsListViewOpened","editWidgetsStore","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","ESCAPE","defaultPrevented","preventDefault","closeSmall"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AAlBA;AACA;AACA;;AAaA;AACA;AACA;AAGe,SAASA,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0B,uBAAaC,YAAb,CAAhC;AAEA,QAAMC,eAAe,GAAG,8BAAiB,cAAjB,CAAxB;AACA,QAAMC,oBAAoB,GAAG,8BAA7B;AACA,QAAMC,qBAAqB,GAAG,8BAA9B;;AACA,WAASC,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBC,gBAAlB,IAA4B,CAAEF,KAAK,CAACG,gBAAzC,EAA4D;AAC3DH,MAAAA,KAAK,CAACI,cAAN;AACAV,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,SACC;AACA;AACC,MAAA,SAAS,EAAC,sCADX;AAEC,MAAA,SAAS,EAAGK;AAFb,OAIC;AACC,MAAA,SAAS,EAAC,6CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC,4CAAU,cAAI,WAAJ,CAAV,CAJD,EAKC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGQ,iBADR;AAEC,MAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,MAAA,OAAO,EAAG,MAAMX,mBAAmB,CAAE,KAAF;AAHpC,MALD,CAJD,EAeC;AACC,MAAA,SAAS,EAAC,8CADX;AAEC,MAAA,GAAG,EAAG,2BAAc,CACnBI,qBADmB,EAEnBF,eAFmB,CAAd;AAFP,OAOC,4BAAC,mCAAD,OAPD,CAfD;AAFD;AA4BA","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 { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\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] ) }\n\t\t\t>\n\t\t\t\t<ListView />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build/components/sidebar/index.js

@@ -140,7 +140,7 @@ function Sidebar() {
     /* translators: button label text should, if possible, be under 16 characters. */
     ,
     title: (0, _i18n.__)('Settings'),
-    closeLabel: (0, _i18n.__)('Close settings'),
+    closeLabel: (0, _i18n.__)('Close Settings'),
     scope: "core/edit-widgets",
     identifier: currentArea,
     icon: _icons.cog,

package/build/components/sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-widgets/src/components/sidebar/index.js"],"names":["SIDEBAR_ACTIVE_BY_DEFAULT","Platform","select","web","native","BLOCK_INSPECTOR_IDENTIFIER","WIDGET_AREAS_IDENTIFIER","ComplementaryAreaTab","identifier","label","isActive","enableComplementaryArea","interfaceStore","editWidgetsStore","name","Sidebar","currentArea","hasSelectedNonAreaBlock","isGeneralSidebarOpen","selectedWidgetAreaBlock","getSelectedBlock","getBlock","getBlockParentsByBlockName","blockEditorStore","getActiveComplementaryArea","selectedBlock","activeArea","currentSelection","widgetAreaBlock","clientId","attributes","cog","id"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, Platform } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport {\n\tBlockInspector,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\nimport { cog } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\nconst SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {\n\tweb: true,\n\tnative: false,\n} );\n\nconst BLOCK_INSPECTOR_IDENTIFIER = 'edit-widgets/block-inspector';\n\n// Widget areas were one called block areas, so use 'edit-widgets/block-areas'\n// for backwards compatibility.\nconst WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';\n\n/**\n * Internal dependencies\n */\nimport WidgetAreas from './widget-areas';\nimport { store as editWidgetsStore } from '../../store';\n\nfunction ComplementaryAreaTab( { identifier, label, isActive } ) {\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\treturn (\n\t\t<Button\n\t\t\tonClick={ () =>\n\t\t\t\tenableComplementaryArea( editWidgetsStore.name, identifier )\n\t\t\t}\n\t\t\tclassName={ classnames( 'edit-widgets-sidebar__panel-tab', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\taria-label={\n\t\t\t\tisActive\n\t\t\t\t\t? // translators: %s: sidebar label e.g: \"Widget Areas\".\n\t\t\t\t\t  sprintf( __( '%s (selected)' ), label )\n\t\t\t\t\t: label\n\t\t\t}\n\t\t\tdata-label={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nexport default function Sidebar() {\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst {\n\t\tcurrentArea,\n\t\thasSelectedNonAreaBlock,\n\t\tisGeneralSidebarOpen,\n\t\tselectedWidgetAreaBlock,\n\t} = useSelect( ( select ) => {\n\t\tconst { getSelectedBlock, getBlock, getBlockParentsByBlockName } =\n\t\t\tselect( blockEditorStore );\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\n\t\tconst selectedBlock = getSelectedBlock();\n\n\t\tconst activeArea = getActiveComplementaryArea( editWidgetsStore.name );\n\n\t\tlet currentSelection = activeArea;\n\t\tif ( ! currentSelection ) {\n\t\t\tif ( selectedBlock ) {\n\t\t\t\tcurrentSelection = BLOCK_INSPECTOR_IDENTIFIER;\n\t\t\t} else {\n\t\t\t\tcurrentSelection = WIDGET_AREAS_IDENTIFIER;\n\t\t\t}\n\t\t}\n\n\t\tlet widgetAreaBlock;\n\t\tif ( selectedBlock ) {\n\t\t\tif ( selectedBlock.name === 'core/widget-area' ) {\n\t\t\t\twidgetAreaBlock = selectedBlock;\n\t\t\t} else {\n\t\t\t\twidgetAreaBlock = getBlock(\n\t\t\t\t\tgetBlockParentsByBlockName(\n\t\t\t\t\t\tselectedBlock.clientId,\n\t\t\t\t\t\t'core/widget-area'\n\t\t\t\t\t)[ 0 ]\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tcurrentArea: currentSelection,\n\t\t\thasSelectedNonAreaBlock: !! (\n\t\t\t\tselectedBlock && selectedBlock.name !== 'core/widget-area'\n\t\t\t),\n\t\t\tisGeneralSidebarOpen: !! activeArea,\n\t\t\tselectedWidgetAreaBlock: widgetAreaBlock,\n\t\t};\n\t}, [] );\n\n\t// currentArea, and isGeneralSidebarOpen are intentionally left out from the dependencies,\n\t// because we want to run the effect when a block is selected/unselected and not when the sidebar state changes.\n\tuseEffect( () => {\n\t\tif (\n\t\t\thasSelectedNonAreaBlock &&\n\t\t\tcurrentArea === WIDGET_AREAS_IDENTIFIER &&\n\t\t\tisGeneralSidebarOpen\n\t\t) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\tBLOCK_INSPECTOR_IDENTIFIER\n\t\t\t);\n\t\t}\n\t\tif (\n\t\t\t! hasSelectedNonAreaBlock &&\n\t\t\tcurrentArea === BLOCK_INSPECTOR_IDENTIFIER &&\n\t\t\tisGeneralSidebarOpen\n\t\t) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\tWIDGET_AREAS_IDENTIFIER\n\t\t\t);\n\t\t}\n\t}, [ hasSelectedNonAreaBlock, enableComplementaryArea ] );\n\n\treturn (\n\t\t<ComplementaryArea\n\t\t\tclassName=\"edit-widgets-sidebar\"\n\t\t\theader={\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ComplementaryAreaTab\n\t\t\t\t\t\t\tidentifier={ WIDGET_AREAS_IDENTIFIER }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tselectedWidgetAreaBlock\n\t\t\t\t\t\t\t\t\t? selectedWidgetAreaBlock.attributes.name\n\t\t\t\t\t\t\t\t\t: __( 'Widget Areas' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisActive={ currentArea === WIDGET_AREAS_IDENTIFIER }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ComplementaryAreaTab\n\t\t\t\t\t\t\tidentifier={ BLOCK_INSPECTOR_IDENTIFIER }\n\t\t\t\t\t\t\tlabel={ __( 'Block' ) }\n\t\t\t\t\t\t\tisActive={\n\t\t\t\t\t\t\t\tcurrentArea === BLOCK_INSPECTOR_IDENTIFIER\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t}\n\t\t\theaderClassName=\"edit-widgets-sidebar__panel-tabs\"\n\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\ttitle={ __( 'Settings' ) }\n\t\t\tcloseLabel={ __( 'Close settings' ) }\n\t\t\tscope=\"core/edit-widgets\"\n\t\t\tidentifier={ currentArea }\n\t\t\ticon={ cog }\n\t\t\tisActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }\n\t\t>\n\t\t\t{ currentArea === WIDGET_AREAS_IDENTIFIER && (\n\t\t\t\t<WidgetAreas\n\t\t\t\t\tselectedWidgetAreaId={\n\t\t\t\t\t\tselectedWidgetAreaBlock?.attributes.id\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ currentArea === BLOCK_INSPECTOR_IDENTIFIER &&\n\t\t\t\t( hasSelectedNonAreaBlock ? (\n\t\t\t\t\t<BlockInspector />\n\t\t\t\t) : (\n\t\t\t\t\t// Pretend that Widget Areas are part of the UI by not\n\t\t\t\t\t// showing the Block Inspector when one is selected.\n\t\t\t\t\t<span className=\"block-editor-block-inspector__no-blocks\">\n\t\t\t\t\t\t{ __( 'No block selected.' ) }\n\t\t\t\t\t</span>\n\t\t\t\t) ) }\n\t\t</ComplementaryArea>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-widgets/src/components/sidebar/index.js"],"names":["SIDEBAR_ACTIVE_BY_DEFAULT","Platform","select","web","native","BLOCK_INSPECTOR_IDENTIFIER","WIDGET_AREAS_IDENTIFIER","ComplementaryAreaTab","identifier","label","isActive","enableComplementaryArea","interfaceStore","editWidgetsStore","name","Sidebar","currentArea","hasSelectedNonAreaBlock","isGeneralSidebarOpen","selectedWidgetAreaBlock","getSelectedBlock","getBlock","getBlockParentsByBlockName","blockEditorStore","getActiveComplementaryArea","selectedBlock","activeArea","currentSelection","widgetAreaBlock","clientId","attributes","cog","id"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, Platform } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport {\n\tBlockInspector,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\nimport { cog } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\nconst SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {\n\tweb: true,\n\tnative: false,\n} );\n\nconst BLOCK_INSPECTOR_IDENTIFIER = 'edit-widgets/block-inspector';\n\n// Widget areas were one called block areas, so use 'edit-widgets/block-areas'\n// for backwards compatibility.\nconst WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';\n\n/**\n * Internal dependencies\n */\nimport WidgetAreas from './widget-areas';\nimport { store as editWidgetsStore } from '../../store';\n\nfunction ComplementaryAreaTab( { identifier, label, isActive } ) {\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\treturn (\n\t\t<Button\n\t\t\tonClick={ () =>\n\t\t\t\tenableComplementaryArea( editWidgetsStore.name, identifier )\n\t\t\t}\n\t\t\tclassName={ classnames( 'edit-widgets-sidebar__panel-tab', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\taria-label={\n\t\t\t\tisActive\n\t\t\t\t\t? // translators: %s: sidebar label e.g: \"Widget Areas\".\n\t\t\t\t\t  sprintf( __( '%s (selected)' ), label )\n\t\t\t\t\t: label\n\t\t\t}\n\t\t\tdata-label={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nexport default function Sidebar() {\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst {\n\t\tcurrentArea,\n\t\thasSelectedNonAreaBlock,\n\t\tisGeneralSidebarOpen,\n\t\tselectedWidgetAreaBlock,\n\t} = useSelect( ( select ) => {\n\t\tconst { getSelectedBlock, getBlock, getBlockParentsByBlockName } =\n\t\t\tselect( blockEditorStore );\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\n\t\tconst selectedBlock = getSelectedBlock();\n\n\t\tconst activeArea = getActiveComplementaryArea( editWidgetsStore.name );\n\n\t\tlet currentSelection = activeArea;\n\t\tif ( ! currentSelection ) {\n\t\t\tif ( selectedBlock ) {\n\t\t\t\tcurrentSelection = BLOCK_INSPECTOR_IDENTIFIER;\n\t\t\t} else {\n\t\t\t\tcurrentSelection = WIDGET_AREAS_IDENTIFIER;\n\t\t\t}\n\t\t}\n\n\t\tlet widgetAreaBlock;\n\t\tif ( selectedBlock ) {\n\t\t\tif ( selectedBlock.name === 'core/widget-area' ) {\n\t\t\t\twidgetAreaBlock = selectedBlock;\n\t\t\t} else {\n\t\t\t\twidgetAreaBlock = getBlock(\n\t\t\t\t\tgetBlockParentsByBlockName(\n\t\t\t\t\t\tselectedBlock.clientId,\n\t\t\t\t\t\t'core/widget-area'\n\t\t\t\t\t)[ 0 ]\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tcurrentArea: currentSelection,\n\t\t\thasSelectedNonAreaBlock: !! (\n\t\t\t\tselectedBlock && selectedBlock.name !== 'core/widget-area'\n\t\t\t),\n\t\t\tisGeneralSidebarOpen: !! activeArea,\n\t\t\tselectedWidgetAreaBlock: widgetAreaBlock,\n\t\t};\n\t}, [] );\n\n\t// currentArea, and isGeneralSidebarOpen are intentionally left out from the dependencies,\n\t// because we want to run the effect when a block is selected/unselected and not when the sidebar state changes.\n\tuseEffect( () => {\n\t\tif (\n\t\t\thasSelectedNonAreaBlock &&\n\t\t\tcurrentArea === WIDGET_AREAS_IDENTIFIER &&\n\t\t\tisGeneralSidebarOpen\n\t\t) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\tBLOCK_INSPECTOR_IDENTIFIER\n\t\t\t);\n\t\t}\n\t\tif (\n\t\t\t! hasSelectedNonAreaBlock &&\n\t\t\tcurrentArea === BLOCK_INSPECTOR_IDENTIFIER &&\n\t\t\tisGeneralSidebarOpen\n\t\t) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\tWIDGET_AREAS_IDENTIFIER\n\t\t\t);\n\t\t}\n\t}, [ hasSelectedNonAreaBlock, enableComplementaryArea ] );\n\n\treturn (\n\t\t<ComplementaryArea\n\t\t\tclassName=\"edit-widgets-sidebar\"\n\t\t\theader={\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ComplementaryAreaTab\n\t\t\t\t\t\t\tidentifier={ WIDGET_AREAS_IDENTIFIER }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tselectedWidgetAreaBlock\n\t\t\t\t\t\t\t\t\t? selectedWidgetAreaBlock.attributes.name\n\t\t\t\t\t\t\t\t\t: __( 'Widget Areas' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisActive={ currentArea === WIDGET_AREAS_IDENTIFIER }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ComplementaryAreaTab\n\t\t\t\t\t\t\tidentifier={ BLOCK_INSPECTOR_IDENTIFIER }\n\t\t\t\t\t\t\tlabel={ __( 'Block' ) }\n\t\t\t\t\t\t\tisActive={\n\t\t\t\t\t\t\t\tcurrentArea === BLOCK_INSPECTOR_IDENTIFIER\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t}\n\t\t\theaderClassName=\"edit-widgets-sidebar__panel-tabs\"\n\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\ttitle={ __( 'Settings' ) }\n\t\t\tcloseLabel={ __( 'Close Settings' ) }\n\t\t\tscope=\"core/edit-widgets\"\n\t\t\tidentifier={ currentArea }\n\t\t\ticon={ cog }\n\t\t\tisActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }\n\t\t>\n\t\t\t{ currentArea === WIDGET_AREAS_IDENTIFIER && (\n\t\t\t\t<WidgetAreas\n\t\t\t\t\tselectedWidgetAreaId={\n\t\t\t\t\t\tselectedWidgetAreaBlock?.attributes.id\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ currentArea === BLOCK_INSPECTOR_IDENTIFIER &&\n\t\t\t\t( hasSelectedNonAreaBlock ? (\n\t\t\t\t\t<BlockInspector />\n\t\t\t\t) : (\n\t\t\t\t\t// Pretend that Widget Areas are part of the UI by not\n\t\t\t\t\t// showing the Block Inspector when one is selected.\n\t\t\t\t\t<span className=\"block-editor-block-inspector__no-blocks\">\n\t\t\t\t\t\t{ __( 'No block selected.' ) }\n\t\t\t\t\t</span>\n\t\t\t\t) ) }\n\t\t</ComplementaryArea>\n\t);\n}\n"]}

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

@@ -6,7 +6,7 @@ import { createElement, Fragment } from "@wordpress/element";
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';
-import { NavigableToolbar, store as blockEditorStore } from '@wordpress/block-editor';
+import { NavigableToolbar, store as blockEditorStore, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
 import { listView, plus } from '@wordpress/icons';
 import { useCallback, useRef } from '@wordpress/element';
@@ -21,6 +21,10 @@ import RedoButton from './undo-redo/redo';
 import MoreMenu from '../more-menu';
 import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../private-apis';
+const {
+  useShouldContextualToolbarShow
+} = unlock(blockEditorPrivateApis);
 
 function Header() {
   const isMediumViewport = useViewportMatch('medium');
@@ -71,6 +75,14 @@ function Header() {
   };
 
   const toggleListView = useCallback(() => setIsListViewOpened(!isListViewOpen), [setIsListViewOpened, isListViewOpen]);
+  const {
+    shouldShowContextualToolbar,
+    canFocusHiddenToolbar,
+    fixedToolbarCanBeFocused
+  } = useShouldContextualToolbarShow(); // If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+  // There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+
+  const blockToolbarCanBeFocused = shouldShowContextualToolbar || canFocusHiddenToolbar || fixedToolbarCanBeFocused;
   return createElement(Fragment, null, createElement("div", {
     className: "edit-widgets-header"
   }, createElement("div", {
@@ -82,7 +94,8 @@ function Header() {
     className: "edit-widgets-header__title"
   }, __('Widgets')), createElement(NavigableToolbar, {
     className: "edit-widgets-header-toolbar",
-    "aria-label": __('Document tools')
+    "aria-label": __('Document tools'),
+    shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused
   }, createElement(ToolbarItem, {
     ref: inserterButton,
     as: Button,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"names":["useSelect","useDispatch","__","_x","Button","ToolbarItem","VisuallyHidden","NavigableToolbar","store","blockEditorStore","PinnedItems","listView","plus","useCallback","useRef","useViewportMatch","SaveButton","UndoButton","RedoButton","MoreMenu","useLastSelectedWidgetArea","editWidgetsStore","Header","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","handleClick","window","requestAnimationFrame","toggleListView","event","preventDefault"],"mappings":"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","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} 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';\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\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>\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"]}
+{"version":3,"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"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","event","preventDefault"],"mappings":"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","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 '../../private-apis';\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"]}

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

@@ -5,7 +5,7 @@ import { createElement } from "@wordpress/element";
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import { useFocusOnMount, useFocusReturn, useInstanceId, useMergeRefs } from '@wordpress/compose';
+import { useFocusOnMount, useFocusReturn, useMergeRefs } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
@@ -30,21 +30,16 @@ export default function ListViewSidebar() {
     }
   }
 
-  const instanceId = useInstanceId(ListViewSidebar);
-  const labelId = `edit-widgets-editor__list-view-panel-label-${instanceId}`;
   return (// eslint-disable-next-line jsx-a11y/no-static-element-interactions
     createElement("div", {
-      "aria-labelledby": labelId,
       className: "edit-widgets-editor__list-view-panel",
       onKeyDown: closeOnEscape
     }, createElement("div", {
       className: "edit-widgets-editor__list-view-panel-header",
       ref: headerFocusReturnRef
-    }, createElement("strong", {
-      id: labelId
-    }, __('List View')), createElement(Button, {
+    }, createElement("strong", null, __('List View')), createElement(Button, {
       icon: closeSmall,
-      label: __('Close List View Sidebar'),
+      label: __('Close'),
       onClick: () => setIsListViewOpened(false)
     })), createElement("div", {
       className: "edit-widgets-editor__list-view-panel-content",

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["__experimentalListView","ListView","Button","useFocusOnMount","useFocusReturn","useInstanceId","useMergeRefs","useDispatch","__","closeSmall","ESCAPE","store","editWidgetsStore","ListViewSidebar","setIsListViewOpened","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","instanceId","labelId"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,sBAAsB,IAAIC,QAAnC,QAAmD,yBAAnD;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SACCC,eADD,EAECC,cAFD,EAGCC,aAHD,EAICC,YAJD,QAKO,oBALP;AAMA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,kBAA3B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0BP,WAAW,CAAEK,gBAAF,CAA3C;AAEA,QAAMG,eAAe,GAAGZ,eAAe,CAAE,cAAF,CAAvC;AACA,QAAMa,oBAAoB,GAAGZ,cAAc,EAA3C;AACA,QAAMa,qBAAqB,GAAGb,cAAc,EAA5C;;AACA,WAASc,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBV,MAAlB,IAA4B,CAAES,KAAK,CAACE,gBAAzC,EAA4D;AAC3DF,MAAAA,KAAK,CAACG,cAAN;AACAR,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,QAAMS,UAAU,GAAGlB,aAAa,CAAEQ,eAAF,CAAhC;AACA,QAAMW,OAAO,GAAI,8CAA8CD,UAAY,EAA3E;AAEA,SACC;AACA;AACC,yBAAkBC,OADnB;AAEC,MAAA,SAAS,EAAC,sCAFX;AAGC,MAAA,SAAS,EAAGN;AAHb,OAKC;AACC,MAAA,SAAS,EAAC,6CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC;AAAQ,MAAA,EAAE,EAAGQ;AAAb,OAAyBhB,EAAE,CAAE,WAAF,CAA3B,CAJD,EAKC,cAAC,MAAD;AACC,MAAA,IAAI,EAAGC,UADR;AAEC,MAAA,KAAK,EAAGD,EAAE,CAAE,yBAAF,CAFX;AAGC,MAAA,OAAO,EAAG,MAAMM,mBAAmB,CAAE,KAAF;AAHpC,MALD,CALD,EAgBC;AACC,MAAA,SAAS,EAAC,8CADX;AAEC,MAAA,GAAG,EAAGR,YAAY,CAAE,CACnBW,qBADmB,EAEnBF,eAFmB,CAAF;AAFnB,OAOC,cAAC,QAAD,OAPD,CAhBD;AAFD;AA6BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalListView as ListView } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport {\n\tuseFocusOnMount,\n\tuseFocusReturn,\n\tuseInstanceId,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\tconst instanceId = useInstanceId( ListViewSidebar );\n\tconst labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\taria-labelledby={ labelId }\n\t\t\tclassName=\"edit-widgets-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-header\"\n\t\t\t\tref={ headerFocusReturnRef }\n\t\t\t>\n\t\t\t\t<strong id={ labelId }>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close List View Sidebar' ) }\n\t\t\t\t\tonClick={ () => setIsListViewOpened( false ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\tcontentFocusReturnRef,\n\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t] ) }\n\t\t\t>\n\t\t\t\t<ListView />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"names":["__experimentalListView","ListView","Button","useFocusOnMount","useFocusReturn","useMergeRefs","useDispatch","__","closeSmall","ESCAPE","store","editWidgetsStore","ListViewSidebar","setIsListViewOpened","focusOnMountRef","headerFocusReturnRef","contentFocusReturnRef","closeOnEscape","event","keyCode","defaultPrevented","preventDefault"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,sBAAsB,IAAIC,QAAnC,QAAmD,yBAAnD;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SACCC,eADD,EAECC,cAFD,EAGCC,YAHD,QAIO,oBAJP;AAKA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,kBAA3B;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,eAAT,GAA2B;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA0BP,WAAW,CAAEK,gBAAF,CAA3C;AAEA,QAAMG,eAAe,GAAGX,eAAe,CAAE,cAAF,CAAvC;AACA,QAAMY,oBAAoB,GAAGX,cAAc,EAA3C;AACA,QAAMY,qBAAqB,GAAGZ,cAAc,EAA5C;;AACA,WAASa,aAAT,CAAwBC,KAAxB,EAAgC;AAC/B,QAAKA,KAAK,CAACC,OAAN,KAAkBV,MAAlB,IAA4B,CAAES,KAAK,CAACE,gBAAzC,EAA4D;AAC3DF,MAAAA,KAAK,CAACG,cAAN;AACAR,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA;AACD;;AAED,SACC;AACA;AACC,MAAA,SAAS,EAAC,sCADX;AAEC,MAAA,SAAS,EAAGI;AAFb,OAIC;AACC,MAAA,SAAS,EAAC,6CADX;AAEC,MAAA,GAAG,EAAGF;AAFP,OAIC,8BAAUR,EAAE,CAAE,WAAF,CAAZ,CAJD,EAKC,cAAC,MAAD;AACC,MAAA,IAAI,EAAGC,UADR;AAEC,MAAA,KAAK,EAAGD,EAAE,CAAE,OAAF,CAFX;AAGC,MAAA,OAAO,EAAG,MAAMM,mBAAmB,CAAE,KAAF;AAHpC,MALD,CAJD,EAeC;AACC,MAAA,SAAS,EAAC,8CADX;AAEC,MAAA,GAAG,EAAGR,YAAY,CAAE,CACnBW,qBADmB,EAEnBF,eAFmB,CAAF;AAFnB,OAOC,cAAC,QAAD,OAPD,CAfD;AAFD;AA4BA","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 { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\tconst headerFocusReturnRef = useFocusReturn();\n\tconst contentFocusReturnRef = useFocusReturn();\n\tfunction closeOnEscape( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsListViewOpened( false );\n\t\t}\n\t}\n\n\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] ) }\n\t\t\t>\n\t\t\t\t<ListView />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/sidebar/index.js

@@ -123,7 +123,7 @@ export default function Sidebar() {
     /* translators: button label text should, if possible, be under 16 characters. */
     ,
     title: __('Settings'),
-    closeLabel: __('Close settings'),
+    closeLabel: __('Close Settings'),
     scope: "core/edit-widgets",
     identifier: currentArea,
     icon: cog,

package/build-module/components/sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-widgets/src/components/sidebar/index.js"],"names":["classnames","useEffect","Platform","__","sprintf","ComplementaryArea","store","interfaceStore","BlockInspector","blockEditorStore","cog","Button","useSelect","useDispatch","SIDEBAR_ACTIVE_BY_DEFAULT","select","web","native","BLOCK_INSPECTOR_IDENTIFIER","WIDGET_AREAS_IDENTIFIER","WidgetAreas","editWidgetsStore","ComplementaryAreaTab","identifier","label","isActive","enableComplementaryArea","name","Sidebar","currentArea","hasSelectedNonAreaBlock","isGeneralSidebarOpen","selectedWidgetAreaBlock","getSelectedBlock","getBlock","getBlockParentsByBlockName","getActiveComplementaryArea","selectedBlock","activeArea","currentSelection","widgetAreaBlock","clientId","attributes","id"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, Platform } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport {\n\tBlockInspector,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\nimport { cog } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\nconst SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {\n\tweb: true,\n\tnative: false,\n} );\n\nconst BLOCK_INSPECTOR_IDENTIFIER = 'edit-widgets/block-inspector';\n\n// Widget areas were one called block areas, so use 'edit-widgets/block-areas'\n// for backwards compatibility.\nconst WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';\n\n/**\n * Internal dependencies\n */\nimport WidgetAreas from './widget-areas';\nimport { store as editWidgetsStore } from '../../store';\n\nfunction ComplementaryAreaTab( { identifier, label, isActive } ) {\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\treturn (\n\t\t<Button\n\t\t\tonClick={ () =>\n\t\t\t\tenableComplementaryArea( editWidgetsStore.name, identifier )\n\t\t\t}\n\t\t\tclassName={ classnames( 'edit-widgets-sidebar__panel-tab', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\taria-label={\n\t\t\t\tisActive\n\t\t\t\t\t? // translators: %s: sidebar label e.g: \"Widget Areas\".\n\t\t\t\t\t  sprintf( __( '%s (selected)' ), label )\n\t\t\t\t\t: label\n\t\t\t}\n\t\t\tdata-label={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nexport default function Sidebar() {\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst {\n\t\tcurrentArea,\n\t\thasSelectedNonAreaBlock,\n\t\tisGeneralSidebarOpen,\n\t\tselectedWidgetAreaBlock,\n\t} = useSelect( ( select ) => {\n\t\tconst { getSelectedBlock, getBlock, getBlockParentsByBlockName } =\n\t\t\tselect( blockEditorStore );\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\n\t\tconst selectedBlock = getSelectedBlock();\n\n\t\tconst activeArea = getActiveComplementaryArea( editWidgetsStore.name );\n\n\t\tlet currentSelection = activeArea;\n\t\tif ( ! currentSelection ) {\n\t\t\tif ( selectedBlock ) {\n\t\t\t\tcurrentSelection = BLOCK_INSPECTOR_IDENTIFIER;\n\t\t\t} else {\n\t\t\t\tcurrentSelection = WIDGET_AREAS_IDENTIFIER;\n\t\t\t}\n\t\t}\n\n\t\tlet widgetAreaBlock;\n\t\tif ( selectedBlock ) {\n\t\t\tif ( selectedBlock.name === 'core/widget-area' ) {\n\t\t\t\twidgetAreaBlock = selectedBlock;\n\t\t\t} else {\n\t\t\t\twidgetAreaBlock = getBlock(\n\t\t\t\t\tgetBlockParentsByBlockName(\n\t\t\t\t\t\tselectedBlock.clientId,\n\t\t\t\t\t\t'core/widget-area'\n\t\t\t\t\t)[ 0 ]\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tcurrentArea: currentSelection,\n\t\t\thasSelectedNonAreaBlock: !! (\n\t\t\t\tselectedBlock && selectedBlock.name !== 'core/widget-area'\n\t\t\t),\n\t\t\tisGeneralSidebarOpen: !! activeArea,\n\t\t\tselectedWidgetAreaBlock: widgetAreaBlock,\n\t\t};\n\t}, [] );\n\n\t// currentArea, and isGeneralSidebarOpen are intentionally left out from the dependencies,\n\t// because we want to run the effect when a block is selected/unselected and not when the sidebar state changes.\n\tuseEffect( () => {\n\t\tif (\n\t\t\thasSelectedNonAreaBlock &&\n\t\t\tcurrentArea === WIDGET_AREAS_IDENTIFIER &&\n\t\t\tisGeneralSidebarOpen\n\t\t) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\tBLOCK_INSPECTOR_IDENTIFIER\n\t\t\t);\n\t\t}\n\t\tif (\n\t\t\t! hasSelectedNonAreaBlock &&\n\t\t\tcurrentArea === BLOCK_INSPECTOR_IDENTIFIER &&\n\t\t\tisGeneralSidebarOpen\n\t\t) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\tWIDGET_AREAS_IDENTIFIER\n\t\t\t);\n\t\t}\n\t}, [ hasSelectedNonAreaBlock, enableComplementaryArea ] );\n\n\treturn (\n\t\t<ComplementaryArea\n\t\t\tclassName=\"edit-widgets-sidebar\"\n\t\t\theader={\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ComplementaryAreaTab\n\t\t\t\t\t\t\tidentifier={ WIDGET_AREAS_IDENTIFIER }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tselectedWidgetAreaBlock\n\t\t\t\t\t\t\t\t\t? selectedWidgetAreaBlock.attributes.name\n\t\t\t\t\t\t\t\t\t: __( 'Widget Areas' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisActive={ currentArea === WIDGET_AREAS_IDENTIFIER }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ComplementaryAreaTab\n\t\t\t\t\t\t\tidentifier={ BLOCK_INSPECTOR_IDENTIFIER }\n\t\t\t\t\t\t\tlabel={ __( 'Block' ) }\n\t\t\t\t\t\t\tisActive={\n\t\t\t\t\t\t\t\tcurrentArea === BLOCK_INSPECTOR_IDENTIFIER\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t}\n\t\t\theaderClassName=\"edit-widgets-sidebar__panel-tabs\"\n\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\ttitle={ __( 'Settings' ) }\n\t\t\tcloseLabel={ __( 'Close settings' ) }\n\t\t\tscope=\"core/edit-widgets\"\n\t\t\tidentifier={ currentArea }\n\t\t\ticon={ cog }\n\t\t\tisActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }\n\t\t>\n\t\t\t{ currentArea === WIDGET_AREAS_IDENTIFIER && (\n\t\t\t\t<WidgetAreas\n\t\t\t\t\tselectedWidgetAreaId={\n\t\t\t\t\t\tselectedWidgetAreaBlock?.attributes.id\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ currentArea === BLOCK_INSPECTOR_IDENTIFIER &&\n\t\t\t\t( hasSelectedNonAreaBlock ? (\n\t\t\t\t\t<BlockInspector />\n\t\t\t\t) : (\n\t\t\t\t\t// Pretend that Widget Areas are part of the UI by not\n\t\t\t\t\t// showing the Block Inspector when one is selected.\n\t\t\t\t\t<span className=\"block-editor-block-inspector__no-blocks\">\n\t\t\t\t\t\t{ __( 'No block selected.' ) }\n\t\t\t\t\t</span>\n\t\t\t\t) ) }\n\t\t</ComplementaryArea>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-widgets/src/components/sidebar/index.js"],"names":["classnames","useEffect","Platform","__","sprintf","ComplementaryArea","store","interfaceStore","BlockInspector","blockEditorStore","cog","Button","useSelect","useDispatch","SIDEBAR_ACTIVE_BY_DEFAULT","select","web","native","BLOCK_INSPECTOR_IDENTIFIER","WIDGET_AREAS_IDENTIFIER","WidgetAreas","editWidgetsStore","ComplementaryAreaTab","identifier","label","isActive","enableComplementaryArea","name","Sidebar","currentArea","hasSelectedNonAreaBlock","isGeneralSidebarOpen","selectedWidgetAreaBlock","getSelectedBlock","getBlock","getBlockParentsByBlockName","getActiveComplementaryArea","selectedBlock","activeArea","currentSelection","widgetAreaBlock","clientId","attributes","id"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, Platform } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tComplementaryArea,\n\tstore as interfaceStore,\n} from '@wordpress/interface';\nimport {\n\tBlockInspector,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\nimport { cog } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\nconst SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {\n\tweb: true,\n\tnative: false,\n} );\n\nconst BLOCK_INSPECTOR_IDENTIFIER = 'edit-widgets/block-inspector';\n\n// Widget areas were one called block areas, so use 'edit-widgets/block-areas'\n// for backwards compatibility.\nconst WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';\n\n/**\n * Internal dependencies\n */\nimport WidgetAreas from './widget-areas';\nimport { store as editWidgetsStore } from '../../store';\n\nfunction ComplementaryAreaTab( { identifier, label, isActive } ) {\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\treturn (\n\t\t<Button\n\t\t\tonClick={ () =>\n\t\t\t\tenableComplementaryArea( editWidgetsStore.name, identifier )\n\t\t\t}\n\t\t\tclassName={ classnames( 'edit-widgets-sidebar__panel-tab', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\taria-label={\n\t\t\t\tisActive\n\t\t\t\t\t? // translators: %s: sidebar label e.g: \"Widget Areas\".\n\t\t\t\t\t  sprintf( __( '%s (selected)' ), label )\n\t\t\t\t\t: label\n\t\t\t}\n\t\t\tdata-label={ label }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nexport default function Sidebar() {\n\tconst { enableComplementaryArea } = useDispatch( interfaceStore );\n\tconst {\n\t\tcurrentArea,\n\t\thasSelectedNonAreaBlock,\n\t\tisGeneralSidebarOpen,\n\t\tselectedWidgetAreaBlock,\n\t} = useSelect( ( select ) => {\n\t\tconst { getSelectedBlock, getBlock, getBlockParentsByBlockName } =\n\t\t\tselect( blockEditorStore );\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\n\t\tconst selectedBlock = getSelectedBlock();\n\n\t\tconst activeArea = getActiveComplementaryArea( editWidgetsStore.name );\n\n\t\tlet currentSelection = activeArea;\n\t\tif ( ! currentSelection ) {\n\t\t\tif ( selectedBlock ) {\n\t\t\t\tcurrentSelection = BLOCK_INSPECTOR_IDENTIFIER;\n\t\t\t} else {\n\t\t\t\tcurrentSelection = WIDGET_AREAS_IDENTIFIER;\n\t\t\t}\n\t\t}\n\n\t\tlet widgetAreaBlock;\n\t\tif ( selectedBlock ) {\n\t\t\tif ( selectedBlock.name === 'core/widget-area' ) {\n\t\t\t\twidgetAreaBlock = selectedBlock;\n\t\t\t} else {\n\t\t\t\twidgetAreaBlock = getBlock(\n\t\t\t\t\tgetBlockParentsByBlockName(\n\t\t\t\t\t\tselectedBlock.clientId,\n\t\t\t\t\t\t'core/widget-area'\n\t\t\t\t\t)[ 0 ]\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tcurrentArea: currentSelection,\n\t\t\thasSelectedNonAreaBlock: !! (\n\t\t\t\tselectedBlock && selectedBlock.name !== 'core/widget-area'\n\t\t\t),\n\t\t\tisGeneralSidebarOpen: !! activeArea,\n\t\t\tselectedWidgetAreaBlock: widgetAreaBlock,\n\t\t};\n\t}, [] );\n\n\t// currentArea, and isGeneralSidebarOpen are intentionally left out from the dependencies,\n\t// because we want to run the effect when a block is selected/unselected and not when the sidebar state changes.\n\tuseEffect( () => {\n\t\tif (\n\t\t\thasSelectedNonAreaBlock &&\n\t\t\tcurrentArea === WIDGET_AREAS_IDENTIFIER &&\n\t\t\tisGeneralSidebarOpen\n\t\t) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\tBLOCK_INSPECTOR_IDENTIFIER\n\t\t\t);\n\t\t}\n\t\tif (\n\t\t\t! hasSelectedNonAreaBlock &&\n\t\t\tcurrentArea === BLOCK_INSPECTOR_IDENTIFIER &&\n\t\t\tisGeneralSidebarOpen\n\t\t) {\n\t\t\tenableComplementaryArea(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\tWIDGET_AREAS_IDENTIFIER\n\t\t\t);\n\t\t}\n\t}, [ hasSelectedNonAreaBlock, enableComplementaryArea ] );\n\n\treturn (\n\t\t<ComplementaryArea\n\t\t\tclassName=\"edit-widgets-sidebar\"\n\t\t\theader={\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ComplementaryAreaTab\n\t\t\t\t\t\t\tidentifier={ WIDGET_AREAS_IDENTIFIER }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tselectedWidgetAreaBlock\n\t\t\t\t\t\t\t\t\t? selectedWidgetAreaBlock.attributes.name\n\t\t\t\t\t\t\t\t\t: __( 'Widget Areas' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisActive={ currentArea === WIDGET_AREAS_IDENTIFIER }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ComplementaryAreaTab\n\t\t\t\t\t\t\tidentifier={ BLOCK_INSPECTOR_IDENTIFIER }\n\t\t\t\t\t\t\tlabel={ __( 'Block' ) }\n\t\t\t\t\t\t\tisActive={\n\t\t\t\t\t\t\t\tcurrentArea === BLOCK_INSPECTOR_IDENTIFIER\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t}\n\t\t\theaderClassName=\"edit-widgets-sidebar__panel-tabs\"\n\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\ttitle={ __( 'Settings' ) }\n\t\t\tcloseLabel={ __( 'Close Settings' ) }\n\t\t\tscope=\"core/edit-widgets\"\n\t\t\tidentifier={ currentArea }\n\t\t\ticon={ cog }\n\t\t\tisActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }\n\t\t>\n\t\t\t{ currentArea === WIDGET_AREAS_IDENTIFIER && (\n\t\t\t\t<WidgetAreas\n\t\t\t\t\tselectedWidgetAreaId={\n\t\t\t\t\t\tselectedWidgetAreaBlock?.attributes.id\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ currentArea === BLOCK_INSPECTOR_IDENTIFIER &&\n\t\t\t\t( hasSelectedNonAreaBlock ? (\n\t\t\t\t\t<BlockInspector />\n\t\t\t\t) : (\n\t\t\t\t\t// Pretend that Widget Areas are part of the UI by not\n\t\t\t\t\t// showing the Block Inspector when one is selected.\n\t\t\t\t\t<span className=\"block-editor-block-inspector__no-blocks\">\n\t\t\t\t\t\t{ __( 'No block selected.' ) }\n\t\t\t\t\t</span>\n\t\t\t\t) ) }\n\t\t</ComplementaryArea>\n\t);\n}\n"]}

package/build-style/style-rtl.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -633,6 +633,7 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
   height: 60px;
   padding: 0 16px;
   overflow: auto;
+  background: #fff;
 }
 @media (min-width: 600px) {
   .edit-widgets-header {
@@ -941,6 +942,12 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
   }
 }
 
+@media (min-width: 782px) {
+  .blocks-widgets-container .interface-interface-skeleton__header:not(:focus-within) {
+    z-index: 19;
+  }
+}
+
 .edit-widgets-welcome-guide {
   width: 312px;
 }
@@ -951,8 +958,7 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
 .edit-widgets-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .edit-widgets-welcome-guide__heading {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1117,7 +1123,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1132,7 +1138,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1147,7 +1153,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1162,7 +1168,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1177,7 +1183,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1192,7 +1198,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1207,7 +1213,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1222,7 +1228,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }

package/build-style/style.css

@@ -97,7 +97,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -633,6 +633,7 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
   height: 60px;
   padding: 0 16px;
   overflow: auto;
+  background: #fff;
 }
 @media (min-width: 600px) {
   .edit-widgets-header {
@@ -941,6 +942,12 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
   }
 }
 
+@media (min-width: 782px) {
+  .blocks-widgets-container .interface-interface-skeleton__header:not(:focus-within) {
+    z-index: 19;
+  }
+}
+
 .edit-widgets-welcome-guide {
   width: 312px;
 }
@@ -951,8 +958,7 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
 .edit-widgets-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .edit-widgets-welcome-guide__heading {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1117,7 +1123,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1132,7 +1138,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1147,7 +1153,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1162,7 +1168,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1177,7 +1183,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1192,7 +1198,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1207,7 +1213,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -1222,7 +1228,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "5.9.0",
+	"version": "5.11.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^6.29.0",
-		"@wordpress/block-editor": "^12.0.0",
-		"@wordpress/block-library": "^8.9.0",
-		"@wordpress/blocks": "^12.9.0",
-		"@wordpress/components": "^23.9.0",
-		"@wordpress/compose": "^6.9.0",
-		"@wordpress/core-data": "^6.9.0",
-		"@wordpress/data": "^9.2.0",
-		"@wordpress/deprecated": "^3.32.0",
-		"@wordpress/dom": "^3.32.0",
-		"@wordpress/element": "^5.9.0",
-		"@wordpress/hooks": "^3.32.0",
-		"@wordpress/i18n": "^4.32.0",
-		"@wordpress/icons": "^9.23.0",
-		"@wordpress/interface": "^5.9.0",
-		"@wordpress/keyboard-shortcuts": "^4.9.0",
-		"@wordpress/keycodes": "^3.32.0",
-		"@wordpress/media-utils": "^4.23.0",
-		"@wordpress/notices": "^4.0.0",
-		"@wordpress/plugins": "^6.0.0",
-		"@wordpress/preferences": "^3.9.0",
-		"@wordpress/private-apis": "^0.14.0",
-		"@wordpress/reusable-blocks": "^4.9.0",
-		"@wordpress/url": "^3.33.0",
-		"@wordpress/widgets": "^3.9.0",
+		"@wordpress/api-fetch": "^6.31.0",
+		"@wordpress/block-editor": "^12.2.0",
+		"@wordpress/block-library": "^8.11.0",
+		"@wordpress/blocks": "^12.11.0",
+		"@wordpress/components": "^25.0.0",
+		"@wordpress/compose": "^6.11.0",
+		"@wordpress/core-data": "^6.11.0",
+		"@wordpress/data": "^9.4.0",
+		"@wordpress/deprecated": "^3.34.0",
+		"@wordpress/dom": "^3.34.0",
+		"@wordpress/element": "^5.11.0",
+		"@wordpress/hooks": "^3.34.0",
+		"@wordpress/i18n": "^4.34.0",
+		"@wordpress/icons": "^9.25.0",
+		"@wordpress/interface": "^5.11.0",
+		"@wordpress/keyboard-shortcuts": "^4.11.0",
+		"@wordpress/keycodes": "^3.34.0",
+		"@wordpress/media-utils": "^4.25.0",
+		"@wordpress/notices": "^4.2.0",
+		"@wordpress/plugins": "^6.2.0",
+		"@wordpress/preferences": "^3.11.0",
+		"@wordpress/private-apis": "^0.16.0",
+		"@wordpress/reusable-blocks": "^4.11.0",
+		"@wordpress/url": "^3.35.0",
+		"@wordpress/widgets": "^3.11.0",
 		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
@@ -61,5 +61,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
+	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
 }

package/src/components/header/index.js

@@ -7,6 +7,7 @@ import { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';
 import {
 	NavigableToolbar,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
 import { listView, plus } from '@wordpress/icons';
@@ -22,6 +23,9 @@ import RedoButton from './undo-redo/redo';
 import MoreMenu from '../more-menu';
 import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../private-apis';
+
+const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
 
 function Header() {
 	const isMediumViewport = useViewportMatch( 'medium' );
@@ -70,6 +74,18 @@ function Header() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
+	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+	const blockToolbarCanBeFocused =
+		shouldShowContextualToolbar ||
+		canFocusHiddenToolbar ||
+		fixedToolbarCanBeFocused;
+
 	return (
 		<>
 			<div className="edit-widgets-header">
@@ -90,6 +106,9 @@ function Header() {
 					<NavigableToolbar
 						className="edit-widgets-header-toolbar"
 						aria-label={ __( 'Document tools' ) }
+						shouldUseKeyboardFocusShortcut={
+							! blockToolbarCanBeFocused
+						}
 					>
 						<ToolbarItem
 							ref={ inserterButton }

package/src/components/header/style.scss

@@ -5,6 +5,7 @@
 	height: $header-height;
 	padding: 0 $grid-unit-20;
 	overflow: auto;
+	background: #fff;
 
 	@include break-small {
 		overflow: visible;

package/src/components/layout/style.scss

@@ -22,3 +22,15 @@
 		height: 100%;
 	}
 }
+
+.blocks-widgets-container {
+	// making the header be lower than the content
+	// so the fixed toolbar can be positioned on top of it
+	// but only on desktop
+	@include break-medium() {
+		.interface-interface-skeleton__header:not(:focus-within) {
+			z-index: 19;
+		}
+	}
+
+}

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

@@ -6,7 +6,6 @@ import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
@@ -32,13 +31,9 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;
-
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
 			className="edit-widgets-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
@@ -46,10 +41,10 @@ export default function ListViewSidebar() {
 				className="edit-widgets-editor__list-view-panel-header"
 				ref={ headerFocusReturnRef }
 			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
+				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close List View Sidebar' ) }
+					label={ __( 'Close' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
 			</div>

package/src/components/sidebar/index.js

@@ -165,7 +165,7 @@ export default function Sidebar() {
 			headerClassName="edit-widgets-sidebar__panel-tabs"
 			/* translators: button label text should, if possible, be under 16 characters. */
 			title={ __( 'Settings' ) }
-			closeLabel={ __( 'Close settings' ) }
+			closeLabel={ __( 'Close Settings' ) }
 			scope="core/edit-widgets"
 			identifier={ currentArea }
 			icon={ cog }