@wordpress/edit-widgets 5.21.1-next.f8d8eceb.0 → 5.23.0

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

@@ -1 +1 @@
-{"version":3,"names":["useSelect","useDispatch","__","_x","Button","ToolbarItem","VisuallyHidden","NavigableToolbar","store","blockEditorStore","privateApis","blockEditorPrivateApis","PinnedItems","listView","plus","useCallback","useRef","useViewportMatch","SaveButton","UndoButton","RedoButton","MoreMenu","useLastSelectedWidgetArea","editWidgetsStore","unlock","useShouldContextualToolbarShow","Header","setListViewToggleElement","isMediumViewport","inserterButton","widgetAreaClientId","isLastSelectedWidgetAreaOpen","select","getIsWidgetAreaOpen","isInserterOpen","isListViewOpen","isInserterOpened","isListViewOpened","setIsWidgetAreaOpen","setIsInserterOpened","setIsListViewOpened","selectBlock","handleClick","window","requestAnimationFrame","toggleListView","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","blockToolbarCanBeFocused","createElement","Fragment","className","as","shouldUseKeyboardFocusShortcut","ref","variant","isPressed","onMouseDown","event","preventDefault","onClick","icon","label","Slot","scope"],"sources":["@wordpress/edit-widgets/src/components/header/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __, _x } from '@wordpress/i18n';\nimport { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';\nimport {\n\tNavigableToolbar,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { PinnedItems } from '@wordpress/interface';\nimport { listView, plus } from '@wordpress/icons';\nimport { useCallback, useRef } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport SaveButton from '../save-button';\nimport UndoButton from './undo-redo/undo';\nimport RedoButton from './undo-redo/redo';\nimport MoreMenu from '../more-menu';\nimport useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );\n\nfunction Header( { setListViewToggleElement } ) {\n\tconst isMediumViewport = useViewportMatch( 'medium' );\n\tconst inserterButton = useRef();\n\tconst widgetAreaClientId = useLastSelectedWidgetArea();\n\tconst isLastSelectedWidgetAreaOpen = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editWidgetsStore ).getIsWidgetAreaOpen(\n\t\t\t\twidgetAreaClientId\n\t\t\t),\n\t\t[ widgetAreaClientId ]\n\t);\n\tconst { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {\n\t\tconst { isInserterOpened, isListViewOpened } =\n\t\t\tselect( editWidgetsStore );\n\t\treturn {\n\t\t\tisInserterOpen: isInserterOpened(),\n\t\t\tisListViewOpen: isListViewOpened(),\n\t\t};\n\t}, [] );\n\tconst { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =\n\t\tuseDispatch( editWidgetsStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst handleClick = () => {\n\t\tif ( isInserterOpen ) {\n\t\t\t// Focusing the inserter button closes the inserter popover.\n\t\t\tsetIsInserterOpened( false );\n\t\t} else {\n\t\t\tif ( ! isLastSelectedWidgetAreaOpen ) {\n\t\t\t\t// Select the last selected block if hasn't already.\n\t\t\t\tselectBlock( widgetAreaClientId );\n\t\t\t\t// Open the last selected widget area when opening the inserter.\n\t\t\t\tsetIsWidgetAreaOpen( widgetAreaClientId, true );\n\t\t\t}\n\t\t\t// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the\n\t\t\t// same tick and pretty much in a random order. The inserter is closed if any other part of the\n\t\t\t// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then\n\t\t\t// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to\n\t\t\t// the selected block.\n\t\t\twindow.requestAnimationFrame( () => setIsInserterOpened( true ) );\n\t\t}\n\t};\n\n\tconst toggleListView = useCallback(\n\t\t() => setIsListViewOpened( ! isListViewOpen ),\n\t\t[ setIsListViewOpened, isListViewOpen ]\n\t);\n\n\tconst {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t} = useShouldContextualToolbarShow();\n\t// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.\n\t// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.\n\tconst blockToolbarCanBeFocused =\n\t\tshouldShowContextualToolbar ||\n\t\tcanFocusHiddenToolbar ||\n\t\tfixedToolbarCanBeFocused;\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"edit-widgets-header\">\n\t\t\t\t<div className=\"edit-widgets-header__navigable-toolbar-wrapper\">\n\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t<h1 className=\"edit-widgets-header__title\">\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isMediumViewport && (\n\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\tas=\"h1\"\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header__title\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Widgets' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableToolbar\n\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar\"\n\t\t\t\t\t\taria-label={ __( 'Document tools' ) }\n\t\t\t\t\t\tshouldUseKeyboardFocusShortcut={\n\t\t\t\t\t\t\t! blockToolbarCanBeFocused\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\tref={ inserterButton }\n\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__inserter-toggle\"\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tisPressed={ isInserterOpen }\n\t\t\t\t\t\t\tonMouseDown={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ handleClick }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16\n\t\t\t\t\tcharacters. */\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'Toggle block inserter',\n\t\t\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ isMediumViewport && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\t\t\t\tas={ Button }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-widgets-header-toolbar__list-view-toggle\"\n\t\t\t\t\t\t\t\t\ticon={ listView }\n\t\t\t\t\t\t\t\t\tisPressed={ isListViewOpen }\n\t\t\t\t\t\t\t\t\t/* translators: button label text should, if possible, be under 16 characters. */\n\t\t\t\t\t\t\t\t\tlabel={ __( 'List View' ) }\n\t\t\t\t\t\t\t\t\tonClick={ toggleListView }\n\t\t\t\t\t\t\t\t\tref={ setListViewToggleElement }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableToolbar>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"edit-widgets-header__actions\">\n\t\t\t\t\t<SaveButton />\n\t\t\t\t\t<PinnedItems.Slot scope=\"core/edit-widgets\" />\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Header;\n"],"mappings":"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"}
+{"version":3,"names":["privateApis","blockEditorPrivateApis","useSelect","useRef","__","Popover","VisuallyHidden","PinnedItems","useViewportMatch","store","preferencesStore","DocumentTools","SaveButton","MoreMenu","unlock","BlockContextualToolbar","Header","setListViewToggleElement","isLargeViewport","blockToolbarRef","hasFixedToolbar","select","get","createElement","Fragment","className","as","isFixed","Slot","ref","name","scope"],"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":";AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;AAC/E,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,OAAO,EAAEC,cAAc,QAAQ,uBAAuB;AAC/D,SAASC,WAAW,QAAQ,sBAAsB;AAClD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,wBAAwB;;AAElE;AACA;AACA;AACA,OAAOC,aAAa,MAAM,kBAAkB;AAC5C,OAAOC,UAAU,MAAM,gBAAgB;AACvC,OAAOC,QAAQ,MAAM,cAAc;AACnC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAuB,CAAC,GAAGD,MAAM,CAAEb,sBAAuB,CAAC;AAEnE,SAASe,MAAMA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EAC/C,MAAMC,eAAe,GAAGV,gBAAgB,CAAE,QAAS,CAAC;EACpD,MAAMW,eAAe,GAAGhB,MAAM,CAAC,CAAC;EAChC,MAAM;IAAEiB;EAAgB,CAAC,GAAGlB,SAAS,CAClCmB,MAAM,KAAQ;IACfD,eAAe,EAAE,CAAC,CAAEC,MAAM,CAAEX,gBAAiB,CAAC,CAACY,GAAG,CACjD,mBAAmB,EACnB,cACD;EACD,CAAC,CAAE,EACH,EACD,CAAC;EAED,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA;IAAKE,SAAS,EAAC;EAAqB,GACnCF,aAAA;IAAKE,SAAS,EAAC;EAAgD,GAC5DP,eAAe,IAChBK,aAAA;IAAIE,SAAS,EAAC;EAA4B,GACvCrB,EAAE,CAAE,SAAU,CACb,CACJ,EACC,CAAEc,eAAe,IAClBK,aAAA,CAACjB,cAAc;IACdoB,EAAE,EAAC,IAAI;IACPD,SAAS,EAAC;EAA4B,GAEpCrB,EAAE,CAAE,SAAU,CACD,CAChB,EACDmB,aAAA,CAACZ,aAAa;IACbM,wBAAwB,EAAGA;EAA0B,CACrD,CAAC,EACAG,eAAe,IAAIF,eAAe,IACnCK,aAAA,CAAAC,QAAA,QACCD,aAAA;IAAKE,SAAS,EAAC;EAA8B,GAC5CF,aAAA,CAACR,sBAAsB;IAACY,OAAO;EAAA,CAAE,CAC7B,CAAC,EACNJ,aAAA,CAAClB,OAAO,CAACuB,IAAI;IACZC,GAAG,EAAGV,eAAiB;IACvBW,IAAI,EAAC;EAAe,CACpB,CACA,CAEC,CAAC,EACNP,aAAA;IAAKE,SAAS,EAAC;EAA8B,GAC5CF,aAAA,CAACX,UAAU,MAAE,CAAC,EACdW,aAAA,CAAChB,WAAW,CAACqB,IAAI;IAACG,KAAK,EAAC;EAAmB,CAAE,CAAC,EAC9CR,aAAA,CAACV,QAAQ,MAAE,CACP,CACD,CACJ,CAAC;AAEL;AAEA,eAAeG,MAAM"}

package/build-style/style-rtl.css

@@ -645,11 +645,19 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
     overflow: visible;
   }
 }
+.edit-widgets-header .selected-block-tools-wrapper {
+  overflow-x: hidden;
+}
+.edit-widgets-header .block-editor-block-contextual-toolbar.is-fixed {
+  border: none;
+}
 
 .edit-widgets-header__navigable-toolbar-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 2;
+  overflow-x: hidden;
   padding-right: 16px;
 }
 
@@ -946,12 +954,6 @@ 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;
 }
@@ -1007,105 +1009,6 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
   padding: 6px;
 }
 
-.edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Set left position when auto-fold is not on the body element. */
-  right: 0;
-}
-@media (min-width: 783px) {
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    right: 160px;
-  }
-}
-
-.auto-fold .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-}
-@media (min-width: 783px) {
-  .auto-fold .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    right: 36px;
-  }
-}
-@media (min-width: 961px) {
-  .auto-fold .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    right: 160px;
-  }
-}
-
-/* Sidebar manually collapsed. */
-.folded .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  right: 0;
-}
-@media (min-width: 783px) {
-  .folded .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    right: 36px;
-  }
-}
-
-body.is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  right: 0 !important;
-}
-
-.edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 31;
-  display: block;
-  width: 100%;
-}
-@media (min-width: 782px) {
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 180px;
-    position: fixed;
-    top: 32px;
-    min-height: initial;
-    border-bottom: none;
-    display: flex;
-    height: 60px;
-    align-items: center;
-    width: calc(100% - 180px);
-  }
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 240px;
-    top: 0;
-  }
-  .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 80px;
-    width: calc(100% + 40px - 180px);
-  }
-  .is-fullscreen-mode .show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 144px;
-  }
-  .blocks-widgets-container .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 153.6px;
-  }
-  .blocks-widgets-container .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-right: 268.8px;
-  }
-}
-@media (min-width: 960px) {
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 280px - 256px);
-  }
-}
-
 .edit-widgets-editor__list-view-panel {
   height: 100%;
   display: flex;

package/build-style/style.css

@@ -645,11 +645,19 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
     overflow: visible;
   }
 }
+.edit-widgets-header .selected-block-tools-wrapper {
+  overflow-x: hidden;
+}
+.edit-widgets-header .block-editor-block-contextual-toolbar.is-fixed {
+  border: none;
+}
 
 .edit-widgets-header__navigable-toolbar-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 2;
+  overflow-x: hidden;
   padding-left: 16px;
 }
 
@@ -946,12 +954,6 @@ 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;
 }
@@ -1007,105 +1009,6 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
   padding: 6px;
 }
 
-.edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Set left position when auto-fold is not on the body element. */
-  left: 0;
-}
-@media (min-width: 783px) {
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-.auto-fold .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-}
-@media (min-width: 783px) {
-  .auto-fold .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-@media (min-width: 961px) {
-  .auto-fold .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 160px;
-  }
-}
-
-/* Sidebar manually collapsed. */
-.folded .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0;
-}
-@media (min-width: 783px) {
-  .folded .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    left: 36px;
-  }
-}
-
-body.is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  left: 0 !important;
-}
-
-.edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 31;
-  display: block;
-  width: 100%;
-}
-@media (min-width: 782px) {
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 180px;
-    position: fixed;
-    top: 32px;
-    min-height: initial;
-    border-bottom: none;
-    display: flex;
-    height: 60px;
-    align-items: center;
-    width: calc(100% - 180px);
-  }
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 240px;
-    top: 0;
-  }
-  .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 80px;
-    width: calc(100% + 40px - 180px);
-  }
-  .is-fullscreen-mode .show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 144px;
-  }
-  .blocks-widgets-container .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    margin-left: 153.6px;
-  }
-  .blocks-widgets-container .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-left: 268.8px;
-  }
-}
-@media (min-width: 960px) {
-  .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 280px - 256px);
-  }
-}
-
 .edit-widgets-editor__list-view-panel {
   height: 100%;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "5.21.1-next.f8d8eceb.0",
+	"version": "5.23.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,32 +27,32 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^6.41.1-next.f8d8eceb.0",
-		"@wordpress/block-editor": "^12.12.2-next.f8d8eceb.0",
-		"@wordpress/block-library": "^8.21.1-next.f8d8eceb.0",
-		"@wordpress/blocks": "^12.21.1-next.f8d8eceb.0",
-		"@wordpress/components": "^25.11.1-next.f8d8eceb.0",
-		"@wordpress/compose": "^6.21.1-next.f8d8eceb.0",
-		"@wordpress/core-data": "^6.21.1-next.f8d8eceb.0",
-		"@wordpress/data": "^9.14.1-next.f8d8eceb.0",
-		"@wordpress/deprecated": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/dom": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/element": "^5.21.1-next.f8d8eceb.0",
-		"@wordpress/hooks": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/i18n": "^4.44.1-next.f8d8eceb.0",
-		"@wordpress/icons": "^9.35.1-next.f8d8eceb.0",
-		"@wordpress/interface": "^5.21.1-next.f8d8eceb.0",
-		"@wordpress/keyboard-shortcuts": "^4.21.1-next.f8d8eceb.0",
-		"@wordpress/keycodes": "^3.44.1-next.f8d8eceb.0",
-		"@wordpress/media-utils": "^4.35.1-next.f8d8eceb.0",
-		"@wordpress/notices": "^4.12.1-next.f8d8eceb.0",
-		"@wordpress/patterns": "^1.5.1-next.f8d8eceb.0",
-		"@wordpress/plugins": "^6.12.1-next.f8d8eceb.0",
-		"@wordpress/preferences": "^3.21.1-next.f8d8eceb.0",
-		"@wordpress/private-apis": "^0.26.1-next.f8d8eceb.0",
-		"@wordpress/reusable-blocks": "^4.21.1-next.f8d8eceb.0",
-		"@wordpress/url": "^3.45.1-next.f8d8eceb.0",
-		"@wordpress/widgets": "^3.21.1-next.f8d8eceb.0",
+		"@wordpress/api-fetch": "^6.43.0",
+		"@wordpress/block-editor": "^12.14.0",
+		"@wordpress/block-library": "^8.23.0",
+		"@wordpress/blocks": "^12.23.0",
+		"@wordpress/components": "^25.12.0",
+		"@wordpress/compose": "^6.23.0",
+		"@wordpress/core-data": "^6.23.0",
+		"@wordpress/data": "^9.16.0",
+		"@wordpress/deprecated": "^3.46.0",
+		"@wordpress/dom": "^3.46.0",
+		"@wordpress/element": "^5.23.0",
+		"@wordpress/hooks": "^3.46.0",
+		"@wordpress/i18n": "^4.46.0",
+		"@wordpress/icons": "^9.37.0",
+		"@wordpress/interface": "^5.23.0",
+		"@wordpress/keyboard-shortcuts": "^4.23.0",
+		"@wordpress/keycodes": "^3.46.0",
+		"@wordpress/media-utils": "^4.37.0",
+		"@wordpress/notices": "^4.14.0",
+		"@wordpress/patterns": "^1.7.0",
+		"@wordpress/plugins": "^6.14.0",
+		"@wordpress/preferences": "^3.23.0",
+		"@wordpress/private-apis": "^0.28.0",
+		"@wordpress/reusable-blocks": "^4.23.0",
+		"@wordpress/url": "^3.47.0",
+		"@wordpress/widgets": "^3.23.0",
 		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
@@ -62,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8d8fd197e202b8104ffb1cb83048efd0a6c3faf4"
+	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
 }

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

@@ -0,0 +1,130 @@
+/**
+ * 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 (
+		<NavigableToolbar
+			className="edit-widgets-header-toolbar"
+			aria-label={ __( 'Document tools' ) }
+			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+		>
+			<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 && (
+				<>
+					<UndoButton />
+					<RedoButton />
+					<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 }
+					/>
+				</>
+			) }
+		</NavigableToolbar>
+	);
+}
+
+export default DocumentTools;