@wordpress/edit-widgets 5.22.0 → 5.24.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 5.24.0 (2023-11-29)
+
+## 5.23.0 (2023-11-16)
+
 ## 5.22.0 (2023-11-02)
 
 ## 5.21.0 (2023-10-18)

package/build/components/header/document-tools/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _data = require("@wordpress/data");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _blockEditor = require("@wordpress/block-editor");
+var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
+var _undo = _interopRequireDefault(require("../undo-redo/undo"));
+var _redo = _interopRequireDefault(require("../undo-redo/redo"));
+var _useLastSelectedWidgetArea = _interopRequireDefault(require("../../../hooks/use-last-selected-widget-area"));
+var _store = require("../../../store");
+var _lockUnlock = require("../../../lock-unlock");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  useShouldContextualToolbarShow
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+function DocumentTools({
+  setListViewToggleElement
+}) {
+  const isMediumViewport = (0, _compose.useViewportMatch)('medium');
+  const inserterButton = (0, _element.useRef)();
+  const widgetAreaClientId = (0, _useLastSelectedWidgetArea.default)();
+  const isLastSelectedWidgetAreaOpen = (0, _data.useSelect)(select => select(_store.store).getIsWidgetAreaOpen(widgetAreaClientId), [widgetAreaClientId]);
+  const {
+    isInserterOpen,
+    isListViewOpen
+  } = (0, _data.useSelect)(select => {
+    const {
+      isInserterOpened,
+      isListViewOpened
+    } = select(_store.store);
+    return {
+      isInserterOpen: isInserterOpened(),
+      isListViewOpen: isListViewOpened()
+    };
+  }, []);
+  const {
+    setIsWidgetAreaOpen,
+    setIsInserterOpened,
+    setIsListViewOpened
+  } = (0, _data.useDispatch)(_store.store);
+  const {
+    selectBlock
+  } = (0, _data.useDispatch)(_blockEditor.store);
+  const handleClick = () => {
+    if (isInserterOpen) {
+      // Focusing the inserter button closes the inserter popover.
+      setIsInserterOpened(false);
+    } else {
+      if (!isLastSelectedWidgetAreaOpen) {
+        // Select the last selected block if hasn't already.
+        selectBlock(widgetAreaClientId);
+        // Open the last selected widget area when opening the inserter.
+        setIsWidgetAreaOpen(widgetAreaClientId, true);
+      }
+      // The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the
+      // same tick and pretty much in a random order. The inserter is closed if any other part of the
+      // app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then
+      // the inserter is visible for a brief moment and then gets auto-closed due to focus moving to
+      // the selected block.
+      window.requestAnimationFrame(() => setIsInserterOpened(true));
+    }
+  };
+  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, _react.createElement)(_blockEditor.NavigableToolbar, {
+    className: "edit-widgets-header-toolbar",
+    "aria-label": (0, _i18n.__)('Document tools'),
+    shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused
+  }, (0, _react.createElement)(_components.ToolbarItem, {
+    ref: inserterButton,
+    as: _components.Button,
+    className: "edit-widgets-header-toolbar__inserter-toggle",
+    variant: "primary",
+    isPressed: isInserterOpen,
+    onMouseDown: event => {
+      event.preventDefault();
+    },
+    onClick: handleClick,
+    icon: _icons.plus
+    /* translators: button label text should, if possible, be under 16
+    	characters. */,
+    label: (0, _i18n._x)('Toggle block inserter', 'Generic label for block inserter button')
+  }), isMediumViewport && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_undo.default, null), (0, _react.createElement)(_redo.default, null), (0, _react.createElement)(_components.ToolbarItem, {
+    as: _components.Button,
+    className: "edit-widgets-header-toolbar__list-view-toggle",
+    icon: _icons.listView,
+    isPressed: isListViewOpen
+    /* translators: button label text should, if possible, be under 16 characters. */,
+    label: (0, _i18n.__)('List View'),
+    onClick: toggleListView,
+    ref: setListViewToggleElement
+  })));
+}
+var _default = DocumentTools;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/build/components/header/document-tools/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_data","require","_i18n","_components","_blockEditor","_icons","_element","_compose","_undo","_interopRequireDefault","_redo","_useLastSelectedWidgetArea","_store","_lockUnlock","useShouldContextualToolbarShow","unlock","blockEditorPrivateApis","DocumentTools","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","_react","createElement","NavigableToolbar","className","__","shouldUseKeyboardFocusShortcut","ToolbarItem","ref","as","Button","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","plus","label","_x","Fragment","default","listView","_default","exports"],"sources":["@wordpress/edit-widgets/src/components/header/document-tools/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport UndoButton from '../undo-redo/undo';\nimport RedoButton from '../undo-redo/redo';\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 DocumentTools( { 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<NavigableToolbar\n\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\tshouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }\n\t\t>\n\t\t\t<ToolbarItem\n\t\t\t\tref={ inserterButton }\n\t\t\t\tas={ Button }\n\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t\tonClick={ handleClick }\n\t\t\t\ticon={ plus }\n\t\t\t\t/* translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. */\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isMediumViewport && (\n\t\t\t\t<>\n\t\t\t\t\t<UndoButton />\n\t\t\t\t\t<RedoButton />\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\tref={ setListViewToggleElement }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default DocumentTools;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAKA,IAAAO,KAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,KAAA,GAAAD,sBAAA,CAAAR,OAAA;AACA,IAAAU,0BAAA,GAAAF,sBAAA,CAAAR,OAAA;AACA,IAAAW,MAAA,GAAAX,OAAA;AACA,IAAAY,WAAA,GAAAZ,OAAA;AAtBA;AACA;AACA;;AAaA;AACA;AACA;;AAOA,MAAM;EAAEa;AAA+B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAE3E,SAASC,aAAaA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EACtD,MAAMC,gBAAgB,GAAG,IAAAC,yBAAgB,EAAE,QAAS,CAAC;EACrD,MAAMC,cAAc,GAAG,IAAAC,eAAM,EAAC,CAAC;EAC/B,MAAMC,kBAAkB,GAAG,IAAAC,kCAAyB,EAAC,CAAC;EACtD,MAAMC,4BAA4B,GAAG,IAAAC,eAAS,EAC3CC,MAAM,IACPA,MAAM,CAAEC,YAAiB,CAAC,CAACC,mBAAmB,CAC7CN,kBACD,CAAC,EACF,CAAEA,kBAAkB,CACrB,CAAC;EACD,MAAM;IAAEO,cAAc;IAAEC;EAAe,CAAC,GAAG,IAAAL,eAAS,EAAIC,MAAM,IAAM;IACnE,MAAM;MAAEK,gBAAgB;MAAEC;IAAiB,CAAC,GAC3CN,MAAM,CAAEC,YAAiB,CAAC;IAC3B,OAAO;MACNE,cAAc,EAAEE,gBAAgB,CAAC,CAAC;MAClCD,cAAc,EAAEE,gBAAgB,CAAC;IAClC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP,MAAM;IAAEC,mBAAmB;IAAEC,mBAAmB;IAAEC;EAAoB,CAAC,GACtE,IAAAC,iBAAW,EAAET,YAAiB,CAAC;EAChC,MAAM;IAAEU;EAAY,CAAC,GAAG,IAAAD,iBAAW,EAAEE,kBAAiB,CAAC;EACvD,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACzB,IAAKV,cAAc,EAAG;MACrB;MACAK,mBAAmB,CAAE,KAAM,CAAC;IAC7B,CAAC,MAAM;MACN,IAAK,CAAEV,4BAA4B,EAAG;QACrC;QACAa,WAAW,CAAEf,kBAAmB,CAAC;QACjC;QACAW,mBAAmB,CAAEX,kBAAkB,EAAE,IAAK,CAAC;MAChD;MACA;MACA;MACA;MACA;MACA;MACAkB,MAAM,CAACC,qBAAqB,CAAE,MAAMP,mBAAmB,CAAE,IAAK,CAAE,CAAC;IAClE;EACD,CAAC;EAED,MAAMQ,cAAc,GAAG,IAAAC,oBAAW,EACjC,MAAMR,mBAAmB,CAAE,CAAEL,cAAe,CAAC,EAC7C,CAAEK,mBAAmB,EAAEL,cAAc,CACtC,CAAC;EAED,MAAM;IACLc,2BAA2B;IAC3BC,qBAAqB;IACrBC;EACD,CAAC,GAAGjC,8BAA8B,CAAC,CAAC;EACpC;EACA;EACA,MAAMkC,wBAAwB,GAC7BH,2BAA2B,IAC3BC,qBAAqB,IACrBC,wBAAwB;EAEzB,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAC9C,YAAA,CAAA+C,gBAAgB;IAChBC,SAAS,EAAC,6BAA6B;IACvC,cAAa,IAAAC,QAAE,EAAE,gBAAiB,CAAG;IACrCC,8BAA8B,EAAG,CAAEN;EAA0B,GAE7D,IAAAC,MAAA,CAAAC,aAAA,EAAC/C,WAAA,CAAAoD,WAAW;IACXC,GAAG,EAAGnC,cAAgB;IACtBoC,EAAE,EAAGC,kBAAQ;IACbN,SAAS,EAAC,8CAA8C;IACxDO,OAAO,EAAC,SAAS;IACjBC,SAAS,EAAG9B,cAAgB;IAC5B+B,WAAW,EAAKC,KAAK,IAAM;MAC1BA,KAAK,CAACC,cAAc,CAAC,CAAC;IACvB,CAAG;IACHC,OAAO,EAAGxB,WAAa;IACvByB,IAAI,EAAGC;IACP;AACJ,mBADI;IAEAC,KAAK,EAAG,IAAAC,QAAE,EACT,uBAAuB,EACvB,yCACD;EAAG,CACH,CAAC,EACAjD,gBAAgB,IACjB,IAAA8B,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAoB,QAAA,QACC,IAAApB,MAAA,CAAAC,aAAA,EAAC1C,KAAA,CAAA8D,OAAU,MAAE,CAAC,EACd,IAAArB,MAAA,CAAAC,aAAA,EAACxC,KAAA,CAAA4D,OAAU,MAAE,CAAC,EACd,IAAArB,MAAA,CAAAC,aAAA,EAAC/C,WAAA,CAAAoD,WAAW;IACXE,EAAE,EAAGC,kBAAQ;IACbN,SAAS,EAAC,+CAA+C;IACzDa,IAAI,EAAGM,eAAU;IACjBX,SAAS,EAAG7B;IACZ;IACAoC,KAAK,EAAG,IAAAd,QAAE,EAAE,WAAY,CAAG;IAC3BW,OAAO,EAAGrB,cAAgB;IAC1Ba,GAAG,EAAGtC;EAA0B,CAChC,CACA,CAEc,CAAC;AAErB;AAAC,IAAAsD,QAAA,GAEcvD,aAAa;AAAAwD,OAAA,CAAAH,OAAA,GAAAE,QAAA"}

package/build/components/header/index.js

@@ -6,20 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+var _blockEditor = require("@wordpress/block-editor");
 var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
-var _blockEditor = require("@wordpress/block-editor");
 var _interface = require("@wordpress/interface");
-var _icons = require("@wordpress/icons");
-var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
+var _preferences = require("@wordpress/preferences");
+var _documentTools = _interopRequireDefault(require("./document-tools"));
 var _saveButton = _interopRequireDefault(require("../save-button"));
-var _undo = _interopRequireDefault(require("./undo-redo/undo"));
-var _redo = _interopRequireDefault(require("./undo-redo/redo"));
 var _moreMenu = _interopRequireDefault(require("../more-menu"));
-var _useLastSelectedWidgetArea = _interopRequireDefault(require("../../hooks/use-last-selected-widget-area"));
-var _store = require("../../store");
 var _lockUnlock = require("../../lock-unlock");
 /**
  * WordPress dependencies
@@ -30,101 +27,37 @@ var _lockUnlock = require("../../lock-unlock");
  */
 
 const {
-  useShouldContextualToolbarShow
+  BlockContextualToolbar
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 function Header({
   setListViewToggleElement
 }) {
-  const isMediumViewport = (0, _compose.useViewportMatch)('medium');
-  const inserterButton = (0, _element.useRef)();
-  const widgetAreaClientId = (0, _useLastSelectedWidgetArea.default)();
-  const isLastSelectedWidgetAreaOpen = (0, _data.useSelect)(select => select(_store.store).getIsWidgetAreaOpen(widgetAreaClientId), [widgetAreaClientId]);
-  const {
-    isInserterOpen,
-    isListViewOpen
-  } = (0, _data.useSelect)(select => {
-    const {
-      isInserterOpened,
-      isListViewOpened
-    } = select(_store.store);
-    return {
-      isInserterOpen: isInserterOpened(),
-      isListViewOpen: isListViewOpened()
-    };
-  }, []);
-  const {
-    setIsWidgetAreaOpen,
-    setIsInserterOpened,
-    setIsListViewOpened
-  } = (0, _data.useDispatch)(_store.store);
-  const {
-    selectBlock
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const handleClick = () => {
-    if (isInserterOpen) {
-      // Focusing the inserter button closes the inserter popover.
-      setIsInserterOpened(false);
-    } else {
-      if (!isLastSelectedWidgetAreaOpen) {
-        // Select the last selected block if hasn't already.
-        selectBlock(widgetAreaClientId);
-        // Open the last selected widget area when opening the inserter.
-        setIsWidgetAreaOpen(widgetAreaClientId, true);
-      }
-      // The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the
-      // same tick and pretty much in a random order. The inserter is closed if any other part of the
-      // app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then
-      // the inserter is visible for a brief moment and then gets auto-closed due to focus moving to
-      // the selected block.
-      window.requestAnimationFrame(() => setIsInserterOpened(true));
-    }
-  };
-  const toggleListView = (0, _element.useCallback)(() => setIsListViewOpened(!isListViewOpen), [setIsListViewOpened, isListViewOpen]);
+  const isLargeViewport = (0, _compose.useViewportMatch)('medium');
+  const blockToolbarRef = (0, _element.useRef)();
   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;
+    hasFixedToolbar
+  } = (0, _data.useSelect)(select => ({
+    hasFixedToolbar: !!select(_preferences.store).get('core/edit-widgets', 'fixedToolbar')
+  }), []);
   return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("div", {
     className: "edit-widgets-header"
   }, (0, _react.createElement)("div", {
     className: "edit-widgets-header__navigable-toolbar-wrapper"
-  }, isMediumViewport && (0, _react.createElement)("h1", {
+  }, isLargeViewport && (0, _react.createElement)("h1", {
     className: "edit-widgets-header__title"
-  }, (0, _i18n.__)('Widgets')), !isMediumViewport && (0, _react.createElement)(_components.VisuallyHidden, {
+  }, (0, _i18n.__)('Widgets')), !isLargeViewport && (0, _react.createElement)(_components.VisuallyHidden, {
     as: "h1",
     className: "edit-widgets-header__title"
-  }, (0, _i18n.__)('Widgets')), (0, _react.createElement)(_blockEditor.NavigableToolbar, {
-    className: "edit-widgets-header-toolbar",
-    "aria-label": (0, _i18n.__)('Document tools'),
-    shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused
-  }, (0, _react.createElement)(_components.ToolbarItem, {
-    ref: inserterButton,
-    as: _components.Button,
-    className: "edit-widgets-header-toolbar__inserter-toggle",
-    variant: "primary",
-    isPressed: isInserterOpen,
-    onMouseDown: event => {
-      event.preventDefault();
-    },
-    onClick: handleClick,
-    icon: _icons.plus
-    /* translators: button label text should, if possible, be under 16
-    characters. */,
-    label: (0, _i18n._x)('Toggle block inserter', 'Generic label for block inserter button')
-  }), isMediumViewport && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_undo.default, null), (0, _react.createElement)(_redo.default, null), (0, _react.createElement)(_components.ToolbarItem, {
-    as: _components.Button,
-    className: "edit-widgets-header-toolbar__list-view-toggle",
-    icon: _icons.listView,
-    isPressed: isListViewOpen
-    /* translators: button label text should, if possible, be under 16 characters. */,
-    label: (0, _i18n.__)('List View'),
-    onClick: toggleListView,
-    ref: setListViewToggleElement
-  })))), (0, _react.createElement)("div", {
+  }, (0, _i18n.__)('Widgets')), (0, _react.createElement)(_documentTools.default, {
+    setListViewToggleElement: setListViewToggleElement
+  }), hasFixedToolbar && isLargeViewport && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("div", {
+    className: "selected-block-tools-wrapper"
+  }, (0, _react.createElement)(BlockContextualToolbar, {
+    isFixed: true
+  })), (0, _react.createElement)(_components.Popover.Slot, {
+    ref: blockToolbarRef,
+    name: "block-toolbar"
+  }))), (0, _react.createElement)("div", {
     className: "edit-widgets-header__actions"
   }, (0, _react.createElement)(_saveButton.default, null), (0, _react.createElement)(_interface.PinnedItems.Slot, {
     scope: "core/edit-widgets"

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

@@ -1 +1 @@
-{"version":3,"names":["_data","require","_i18n","_components","_blockEditor","_interface","_icons","_element","_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","_react","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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"}
+{"version":3,"names":["_blockEditor","require","_data","_element","_i18n","_components","_interface","_compose","_preferences","_documentTools","_interopRequireDefault","_saveButton","_moreMenu","_lockUnlock","BlockContextualToolbar","unlock","blockEditorPrivateApis","Header","setListViewToggleElement","isLargeViewport","useViewportMatch","blockToolbarRef","useRef","hasFixedToolbar","useSelect","select","preferencesStore","get","_react","createElement","Fragment","className","__","VisuallyHidden","as","default","isFixed","Popover","Slot","ref","name","PinnedItems","scope","_default","exports"],"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Popover, VisuallyHidden } from '@wordpress/components';\nimport { PinnedItems } from '@wordpress/interface';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport DocumentTools from './document-tools';\nimport SaveButton from '../save-button';\nimport MoreMenu from '../more-menu';\nimport { unlock } from '../../lock-unlock';\n\nconst { BlockContextualToolbar } = unlock( blockEditorPrivateApis );\n\nfunction Header( { setListViewToggleElement } ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst blockToolbarRef = useRef();\n\tconst { hasFixedToolbar } = useSelect(\n\t\t( select ) => ( {\n\t\t\thasFixedToolbar: !! select( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t} ),\n\t\t[]\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{ isLargeViewport && (\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{ ! isLargeViewport && (\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<DocumentTools\n\t\t\t\t\t\tsetListViewToggleElement={ setListViewToggleElement }\n\t\t\t\t\t/>\n\t\t\t\t\t{ hasFixedToolbar && isLargeViewport && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div className=\"selected-block-tools-wrapper\">\n\t\t\t\t\t\t\t\t<BlockContextualToolbar isFixed />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Popover.Slot\n\t\t\t\t\t\t\t\tref={ blockToolbarRef }\n\t\t\t\t\t\t\t\tname=\"block-toolbar\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA;AAKA,IAAAQ,cAAA,GAAAC,sBAAA,CAAAT,OAAA;AACA,IAAAU,WAAA,GAAAD,sBAAA,CAAAT,OAAA;AACA,IAAAW,SAAA,GAAAF,sBAAA,CAAAT,OAAA;AACA,IAAAY,WAAA,GAAAZ,OAAA;AAlBA;AACA;AACA;;AAUA;AACA;AACA;;AAMA,MAAM;EAAEa;AAAuB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEnE,SAASC,MAAMA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EAC/C,MAAMC,eAAe,GAAG,IAAAC,yBAAgB,EAAE,QAAS,CAAC;EACpD,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAC,CAAC;EAChC,MAAM;IAAEC;EAAgB,CAAC,GAAG,IAAAC,eAAS,EAClCC,MAAM,KAAQ;IACfF,eAAe,EAAE,CAAC,CAAEE,MAAM,CAAEC,kBAAiB,CAAC,CAACC,GAAG,CACjD,mBAAmB,EACnB,cACD;EACD,CAAC,CAAE,EACH,EACD,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAAqB,GACnC,IAAAH,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAAgD,GAC5DZ,eAAe,IAChB,IAAAS,MAAA,CAAAC,aAAA;IAAIE,SAAS,EAAC;EAA4B,GACvC,IAAAC,QAAE,EAAE,SAAU,CACb,CACJ,EACC,CAAEb,eAAe,IAClB,IAAAS,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAA4B,cAAc;IACdC,EAAE,EAAC,IAAI;IACPH,SAAS,EAAC;EAA4B,GAEpC,IAAAC,QAAE,EAAE,SAAU,CACD,CAChB,EACD,IAAAJ,MAAA,CAAAC,aAAA,EAACpB,cAAA,CAAA0B,OAAa;IACbjB,wBAAwB,EAAGA;EAA0B,CACrD,CAAC,EACAK,eAAe,IAAIJ,eAAe,IACnC,IAAAS,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAA8B,GAC5C,IAAAH,MAAA,CAAAC,aAAA,EAACf,sBAAsB;IAACsB,OAAO;EAAA,CAAE,CAC7B,CAAC,EACN,IAAAR,MAAA,CAAAC,aAAA,EAACxB,WAAA,CAAAgC,OAAO,CAACC,IAAI;IACZC,GAAG,EAAGlB,eAAiB;IACvBmB,IAAI,EAAC;EAAe,CACpB,CACA,CAEC,CAAC,EACN,IAAAZ,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAA8B,GAC5C,IAAAH,MAAA,CAAAC,aAAA,EAAClB,WAAA,CAAAwB,OAAU,MAAE,CAAC,EACd,IAAAP,MAAA,CAAAC,aAAA,EAACvB,UAAA,CAAAmC,WAAW,CAACH,IAAI;IAACI,KAAK,EAAC;EAAmB,CAAE,CAAC,EAC9C,IAAAd,MAAA,CAAAC,aAAA,EAACjB,SAAA,CAAAuB,OAAQ,MAAE,CACP,CACD,CACJ,CAAC;AAEL;AAAC,IAAAQ,QAAA,GAEc1B,MAAM;AAAA2B,OAAA,CAAAT,OAAA,GAAAQ,QAAA"}

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

@@ -0,0 +1,110 @@
+import { createElement, Fragment } from "react";
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import { Button, ToolbarItem } from '@wordpress/components';
+import { NavigableToolbar, store as blockEditorStore, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { listView, plus } from '@wordpress/icons';
+import { useCallback, useRef } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import UndoButton from '../undo-redo/undo';
+import RedoButton from '../undo-redo/redo';
+import useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-area';
+import { store as editWidgetsStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+const {
+  useShouldContextualToolbarShow
+} = unlock(blockEditorPrivateApis);
+function DocumentTools({
+  setListViewToggleElement
+}) {
+  const isMediumViewport = useViewportMatch('medium');
+  const inserterButton = useRef();
+  const widgetAreaClientId = useLastSelectedWidgetArea();
+  const isLastSelectedWidgetAreaOpen = useSelect(select => select(editWidgetsStore).getIsWidgetAreaOpen(widgetAreaClientId), [widgetAreaClientId]);
+  const {
+    isInserterOpen,
+    isListViewOpen
+  } = useSelect(select => {
+    const {
+      isInserterOpened,
+      isListViewOpened
+    } = select(editWidgetsStore);
+    return {
+      isInserterOpen: isInserterOpened(),
+      isListViewOpen: isListViewOpened()
+    };
+  }, []);
+  const {
+    setIsWidgetAreaOpen,
+    setIsInserterOpened,
+    setIsListViewOpened
+  } = useDispatch(editWidgetsStore);
+  const {
+    selectBlock
+  } = useDispatch(blockEditorStore);
+  const handleClick = () => {
+    if (isInserterOpen) {
+      // Focusing the inserter button closes the inserter popover.
+      setIsInserterOpened(false);
+    } else {
+      if (!isLastSelectedWidgetAreaOpen) {
+        // Select the last selected block if hasn't already.
+        selectBlock(widgetAreaClientId);
+        // Open the last selected widget area when opening the inserter.
+        setIsWidgetAreaOpen(widgetAreaClientId, true);
+      }
+      // The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the
+      // same tick and pretty much in a random order. The inserter is closed if any other part of the
+      // app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then
+      // the inserter is visible for a brief moment and then gets auto-closed due to focus moving to
+      // the selected block.
+      window.requestAnimationFrame(() => setIsInserterOpened(true));
+    }
+  };
+  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(NavigableToolbar, {
+    className: "edit-widgets-header-toolbar",
+    "aria-label": __('Document tools'),
+    shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused
+  }, createElement(ToolbarItem, {
+    ref: inserterButton,
+    as: Button,
+    className: "edit-widgets-header-toolbar__inserter-toggle",
+    variant: "primary",
+    isPressed: isInserterOpen,
+    onMouseDown: event => {
+      event.preventDefault();
+    },
+    onClick: handleClick,
+    icon: plus
+    /* translators: button label text should, if possible, be under 16
+    	characters. */,
+    label: _x('Toggle block inserter', 'Generic label for block inserter button')
+  }), isMediumViewport && createElement(Fragment, null, createElement(UndoButton, null), createElement(RedoButton, null), createElement(ToolbarItem, {
+    as: Button,
+    className: "edit-widgets-header-toolbar__list-view-toggle",
+    icon: listView,
+    isPressed: isListViewOpen
+    /* translators: button label text should, if possible, be under 16 characters. */,
+    label: __('List View'),
+    onClick: toggleListView,
+    ref: setListViewToggleElement
+  })));
+}
+export default DocumentTools;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useSelect","useDispatch","__","_x","Button","ToolbarItem","NavigableToolbar","store","blockEditorStore","privateApis","blockEditorPrivateApis","listView","plus","useCallback","useRef","useViewportMatch","UndoButton","RedoButton","useLastSelectedWidgetArea","editWidgetsStore","unlock","useShouldContextualToolbarShow","DocumentTools","setListViewToggleElement","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","handleClick","window","requestAnimationFrame","toggleListView","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","blockToolbarCanBeFocused","createElement","className","shouldUseKeyboardFocusShortcut","ref","as","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","label","Fragment"],"sources":["@wordpress/edit-widgets/src/components/header/document-tools/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport UndoButton from '../undo-redo/undo';\nimport RedoButton from '../undo-redo/redo';\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 DocumentTools( { 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<NavigableToolbar\n\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\tshouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }\n\t\t>\n\t\t\t<ToolbarItem\n\t\t\t\tref={ inserterButton }\n\t\t\t\tas={ Button }\n\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} }\n\t\t\t\tonClick={ handleClick }\n\t\t\t\ticon={ plus }\n\t\t\t\t/* translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. */\n\t\t\t\tlabel={ _x(\n\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ isMediumViewport && (\n\t\t\t\t<>\n\t\t\t\t\t<UndoButton />\n\t\t\t\t\t<RedoButton />\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\tref={ setListViewToggleElement }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default DocumentTools;\n"],"mappings":"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"}

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

@@ -2,121 +2,54 @@ import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, _x } from '@wordpress/i18n';
-import { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';
-import { NavigableToolbar, store as blockEditorStore, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Popover, VisuallyHidden } from '@wordpress/components';
 import { PinnedItems } from '@wordpress/interface';
-import { listView, plus } from '@wordpress/icons';
-import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
+import DocumentTools from './document-tools';
 import SaveButton from '../save-button';
-import UndoButton from './undo-redo/undo';
-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 '../../lock-unlock';
 const {
-  useShouldContextualToolbarShow
+  BlockContextualToolbar
 } = unlock(blockEditorPrivateApis);
 function Header({
   setListViewToggleElement
 }) {
-  const isMediumViewport = useViewportMatch('medium');
-  const inserterButton = useRef();
-  const widgetAreaClientId = useLastSelectedWidgetArea();
-  const isLastSelectedWidgetAreaOpen = useSelect(select => select(editWidgetsStore).getIsWidgetAreaOpen(widgetAreaClientId), [widgetAreaClientId]);
+  const isLargeViewport = useViewportMatch('medium');
+  const blockToolbarRef = useRef();
   const {
-    isInserterOpen,
-    isListViewOpen
-  } = useSelect(select => {
-    const {
-      isInserterOpened,
-      isListViewOpened
-    } = select(editWidgetsStore);
-    return {
-      isInserterOpen: isInserterOpened(),
-      isListViewOpen: isListViewOpened()
-    };
-  }, []);
-  const {
-    setIsWidgetAreaOpen,
-    setIsInserterOpened,
-    setIsListViewOpened
-  } = useDispatch(editWidgetsStore);
-  const {
-    selectBlock
-  } = useDispatch(blockEditorStore);
-  const handleClick = () => {
-    if (isInserterOpen) {
-      // Focusing the inserter button closes the inserter popover.
-      setIsInserterOpened(false);
-    } else {
-      if (!isLastSelectedWidgetAreaOpen) {
-        // Select the last selected block if hasn't already.
-        selectBlock(widgetAreaClientId);
-        // Open the last selected widget area when opening the inserter.
-        setIsWidgetAreaOpen(widgetAreaClientId, true);
-      }
-      // The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the
-      // same tick and pretty much in a random order. The inserter is closed if any other part of the
-      // app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then
-      // the inserter is visible for a brief moment and then gets auto-closed due to focus moving to
-      // the selected block.
-      window.requestAnimationFrame(() => setIsInserterOpened(true));
-    }
-  };
-  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;
+    hasFixedToolbar
+  } = useSelect(select => ({
+    hasFixedToolbar: !!select(preferencesStore).get('core/edit-widgets', 'fixedToolbar')
+  }), []);
   return createElement(Fragment, null, createElement("div", {
     className: "edit-widgets-header"
   }, createElement("div", {
     className: "edit-widgets-header__navigable-toolbar-wrapper"
-  }, isMediumViewport && createElement("h1", {
+  }, isLargeViewport && createElement("h1", {
     className: "edit-widgets-header__title"
-  }, __('Widgets')), !isMediumViewport && createElement(VisuallyHidden, {
+  }, __('Widgets')), !isLargeViewport && createElement(VisuallyHidden, {
     as: "h1",
     className: "edit-widgets-header__title"
-  }, __('Widgets')), createElement(NavigableToolbar, {
-    className: "edit-widgets-header-toolbar",
-    "aria-label": __('Document tools'),
-    shouldUseKeyboardFocusShortcut: !blockToolbarCanBeFocused
-  }, createElement(ToolbarItem, {
-    ref: inserterButton,
-    as: Button,
-    className: "edit-widgets-header-toolbar__inserter-toggle",
-    variant: "primary",
-    isPressed: isInserterOpen,
-    onMouseDown: event => {
-      event.preventDefault();
-    },
-    onClick: handleClick,
-    icon: plus
-    /* translators: button label text should, if possible, be under 16
-    characters. */,
-    label: _x('Toggle block inserter', 'Generic label for block inserter button')
-  }), isMediumViewport && createElement(Fragment, null, createElement(UndoButton, null), createElement(RedoButton, null), createElement(ToolbarItem, {
-    as: Button,
-    className: "edit-widgets-header-toolbar__list-view-toggle",
-    icon: listView,
-    isPressed: isListViewOpen
-    /* translators: button label text should, if possible, be under 16 characters. */,
-    label: __('List View'),
-    onClick: toggleListView,
-    ref: setListViewToggleElement
-  })))), createElement("div", {
+  }, __('Widgets')), createElement(DocumentTools, {
+    setListViewToggleElement: setListViewToggleElement
+  }), hasFixedToolbar && isLargeViewport && createElement(Fragment, null, createElement("div", {
+    className: "selected-block-tools-wrapper"
+  }, createElement(BlockContextualToolbar, {
+    isFixed: true
+  })), createElement(Popover.Slot, {
+    ref: blockToolbarRef,
+    name: "block-toolbar"
+  }))), createElement("div", {
     className: "edit-widgets-header__actions"
   }, createElement(SaveButton, null), createElement(PinnedItems.Slot, {
     scope: "core/edit-widgets"