@wordpress/edit-widgets 5.24.1 → 5.25.1-next.79a6196f.0

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

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

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

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

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

@@ -5,7 +5,7 @@ import { createElement } from "react";
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
@@ -15,12 +15,14 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editWidgetsStore } from '../../store';
-export default function ListViewSidebar({
-  listViewToggleElement
-}) {
+import { unlock } from '../../lock-unlock';
+export default function ListViewSidebar() {
   const {
     setIsListViewOpened
   } = useDispatch(editWidgetsStore);
+  const {
+    getListViewToggleRef
+  } = unlock(useSelect(editWidgetsStore));
 
   // Use internal state instead of a ref to make sure that the component
   // re-renders when the dropZoneElement updates.
@@ -30,8 +32,8 @@ export default function ListViewSidebar({
   // When closing the list view, focus should return to the toggle button.
   const closeListView = useCallback(() => {
     setIsListViewOpened(false);
-    listViewToggleElement?.focus();
-  }, [listViewToggleElement, setIsListViewOpened]);
+    getListViewToggleRef().current?.focus();
+  }, [getListViewToggleRef, setIsListViewOpened]);
   const closeOnEscape = useCallback(event => {
     if (event.keyCode === ESCAPE && !event.defaultPrevented) {
       event.preventDefault();

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalListView","ListView","Button","useFocusOnMount","useMergeRefs","useDispatch","useCallback","useState","__","closeSmall","ESCAPE","store","editWidgetsStore","ListViewSidebar","listViewToggleElement","setIsListViewOpened","dropZoneElement","setDropZoneElement","focusOnMountRef","closeListView","focus","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","createElement","className","onKeyDown","icon","label","onClick","ref"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalListView as ListView } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport { useFocusOnMount, useMergeRefs } from '@wordpress/compose';\nimport { useDispatch } from '@wordpress/data';\nimport { useCallback, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\n\nexport default function ListViewSidebar( { listViewToggleElement } ) {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\n\t// When closing the list view, focus should return to the toggle button.\n\tconst closeListView = useCallback( () => {\n\t\tsetIsListViewOpened( false );\n\t\tlistViewToggleElement?.focus();\n\t}, [ listViewToggleElement, setIsListViewOpened ] );\n\n\tconst closeOnEscape = useCallback(\n\t\t( event ) => {\n\t\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcloseListView();\n\t\t\t}\n\t\t},\n\t\t[ closeListView ]\n\t);\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"edit-widgets-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div className=\"edit-widgets-editor__list-view-panel-header\">\n\t\t\t\t<strong>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\tonClick={ closeListView }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [ focusOnMountRef, setDropZoneElement ] ) }\n\t\t\t>\n\t\t\t\t<ListView dropZoneElement={ dropZoneElement } />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,sBAAsB,IAAIC,QAAQ,QAAQ,yBAAyB;AAC5E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,eAAe,EAAEC,YAAY,QAAQ,oBAAoB;AAClE,SAASC,WAAW,QAAQ,iBAAiB;AAC7C,SAASC,WAAW,EAAEC,QAAQ,QAAQ,oBAAoB;AAC1D,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAEvD,eAAe,SAASC,eAAeA,CAAE;EAAEC;AAAsB,CAAC,EAAG;EACpE,MAAM;IAAEC;EAAoB,CAAC,GAAGV,WAAW,CAAEO,gBAAiB,CAAC;;EAE/D;EACA;EACA,MAAM,CAAEI,eAAe,EAAEC,kBAAkB,CAAE,GAAGV,QAAQ,CAAE,IAAK,CAAC;EAEhE,MAAMW,eAAe,GAAGf,eAAe,CAAE,cAAe,CAAC;;EAEzD;EACA,MAAMgB,aAAa,GAAGb,WAAW,CAAE,MAAM;IACxCS,mBAAmB,CAAE,KAAM,CAAC;IAC5BD,qBAAqB,EAAEM,KAAK,CAAC,CAAC;EAC/B,CAAC,EAAE,CAAEN,qBAAqB,EAAEC,mBAAmB,CAAG,CAAC;EAEnD,MAAMM,aAAa,GAAGf,WAAW,CAC9BgB,KAAK,IAAM;IACZ,IAAKA,KAAK,CAACC,OAAO,KAAKb,MAAM,IAAI,CAAEY,KAAK,CAACE,gBAAgB,EAAG;MAC3DF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBN,aAAa,CAAC,CAAC;IAChB;EACD,CAAC,EACD,CAAEA,aAAa,CAChB,CAAC;EAED;IACC;IACAO,aAAA;MACCC,SAAS,EAAC,sCAAsC;MAChDC,SAAS,EAAGP;IAAe,GAE3BK,aAAA;MAAKC,SAAS,EAAC;IAA6C,GAC3DD,aAAA,iBAAUlB,EAAE,CAAE,WAAY,CAAW,CAAC,EACtCkB,aAAA,CAACxB,MAAM;MACN2B,IAAI,EAAGpB,UAAY;MACnBqB,KAAK,EAAGtB,EAAE,CAAE,OAAQ,CAAG;MACvBuB,OAAO,EAAGZ;IAAe,CACzB,CACG,CAAC,EACNO,aAAA;MACCC,SAAS,EAAC,8CAA8C;MACxDK,GAAG,EAAG5B,YAAY,CAAE,CAAEc,eAAe,EAAED,kBAAkB,CAAG;IAAG,GAE/DS,aAAA,CAACzB,QAAQ;MAACe,eAAe,EAAGA;IAAiB,CAAE,CAC3C,CACD;EAAC;AAER"}
+{"version":3,"names":["__experimentalListView","ListView","Button","useFocusOnMount","useMergeRefs","useDispatch","useSelect","useCallback","useState","__","closeSmall","ESCAPE","store","editWidgetsStore","unlock","ListViewSidebar","setIsListViewOpened","getListViewToggleRef","dropZoneElement","setDropZoneElement","focusOnMountRef","closeListView","current","focus","closeOnEscape","event","keyCode","defaultPrevented","preventDefault","createElement","className","onKeyDown","icon","label","onClick","ref"],"sources":["@wordpress/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalListView as ListView } from '@wordpress/block-editor';\nimport { Button } from '@wordpress/components';\nimport { useFocusOnMount, useMergeRefs } from '@wordpress/compose';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useCallback, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as editWidgetsStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editWidgetsStore );\n\tconst { getListViewToggleRef } = unlock( useSelect( editWidgetsStore ) );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\n\tconst focusOnMountRef = useFocusOnMount( 'firstElement' );\n\n\t// When closing the list view, focus should return to the toggle button.\n\tconst closeListView = useCallback( () => {\n\t\tsetIsListViewOpened( false );\n\t\tgetListViewToggleRef().current?.focus();\n\t}, [ getListViewToggleRef, setIsListViewOpened ] );\n\n\tconst closeOnEscape = useCallback(\n\t\t( event ) => {\n\t\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcloseListView();\n\t\t\t}\n\t\t},\n\t\t[ closeListView ]\n\t);\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"edit-widgets-editor__list-view-panel\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t>\n\t\t\t<div className=\"edit-widgets-editor__list-view-panel-header\">\n\t\t\t\t<strong>{ __( 'List View' ) }</strong>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\tonClick={ closeListView }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"edit-widgets-editor__list-view-panel-content\"\n\t\t\t\tref={ useMergeRefs( [ focusOnMountRef, setDropZoneElement ] ) }\n\t\t\t>\n\t\t\t\t<ListView dropZoneElement={ dropZoneElement } />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,sBAAsB,IAAIC,QAAQ,QAAQ,yBAAyB;AAC5E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,eAAe,EAAEC,YAAY,QAAQ,oBAAoB;AAClE,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,oBAAoB;AAC1D,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AACvD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,eAAe,SAASC,eAAeA,CAAA,EAAG;EACzC,MAAM;IAAEC;EAAoB,CAAC,GAAGX,WAAW,CAAEQ,gBAAiB,CAAC;EAC/D,MAAM;IAAEI;EAAqB,CAAC,GAAGH,MAAM,CAAER,SAAS,CAAEO,gBAAiB,CAAE,CAAC;;EAExE;EACA;EACA,MAAM,CAAEK,eAAe,EAAEC,kBAAkB,CAAE,GAAGX,QAAQ,CAAE,IAAK,CAAC;EAEhE,MAAMY,eAAe,GAAGjB,eAAe,CAAE,cAAe,CAAC;;EAEzD;EACA,MAAMkB,aAAa,GAAGd,WAAW,CAAE,MAAM;IACxCS,mBAAmB,CAAE,KAAM,CAAC;IAC5BC,oBAAoB,CAAC,CAAC,CAACK,OAAO,EAAEC,KAAK,CAAC,CAAC;EACxC,CAAC,EAAE,CAAEN,oBAAoB,EAAED,mBAAmB,CAAG,CAAC;EAElD,MAAMQ,aAAa,GAAGjB,WAAW,CAC9BkB,KAAK,IAAM;IACZ,IAAKA,KAAK,CAACC,OAAO,KAAKf,MAAM,IAAI,CAAEc,KAAK,CAACE,gBAAgB,EAAG;MAC3DF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBP,aAAa,CAAC,CAAC;IAChB;EACD,CAAC,EACD,CAAEA,aAAa,CAChB,CAAC;EAED;IACC;IACAQ,aAAA;MACCC,SAAS,EAAC,sCAAsC;MAChDC,SAAS,EAAGP;IAAe,GAE3BK,aAAA;MAAKC,SAAS,EAAC;IAA6C,GAC3DD,aAAA,iBAAUpB,EAAE,CAAE,WAAY,CAAW,CAAC,EACtCoB,aAAA,CAAC3B,MAAM;MACN8B,IAAI,EAAGtB,UAAY;MACnBuB,KAAK,EAAGxB,EAAE,CAAE,OAAQ,CAAG;MACvByB,OAAO,EAAGb;IAAe,CACzB,CACG,CAAC,EACNQ,aAAA;MACCC,SAAS,EAAC,8CAA8C;MACxDK,GAAG,EAAG/B,YAAY,CAAE,CAAEgB,eAAe,EAAED,kBAAkB,CAAG;IAAG,GAE/DU,aAAA,CAAC5B,QAAQ;MAACiB,eAAe,EAAGA;IAAiB,CAAE,CAC3C,CACD;EAAC;AAER"}

package/build-module/components/widget-areas-block-editor-content/index.js

@@ -2,7 +2,8 @@ import { createElement } from "react";
 /**
  * WordPress dependencies
  */
-import { BlockList, BlockTools, BlockSelectionClearer, WritingFlow, __unstableEditorStyles as EditorStyles } from '@wordpress/block-editor';
+import { BlockList, BlockToolbar, BlockTools, BlockSelectionClearer, WritingFlow, __unstableEditorStyles as EditorStyles } from '@wordpress/block-editor';
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -16,12 +17,15 @@ export default function WidgetAreasBlockEditorContent({
   blockEditorSettings
 }) {
   const hasThemeStyles = useSelect(select => !!select(preferencesStore).get('core/edit-widgets', 'themeStyles'), []);
+  const isLargeViewport = useViewportMatch('medium');
   const styles = useMemo(() => {
     return hasThemeStyles ? blockEditorSettings.styles : [];
   }, [blockEditorSettings, hasThemeStyles]);
   return createElement("div", {
     className: "edit-widgets-block-editor"
-  }, createElement(Notices, null), createElement(BlockTools, null, createElement(KeyboardShortcuts, null), createElement(EditorStyles, {
+  }, createElement(Notices, null), !isLargeViewport && createElement(BlockToolbar, {
+    hideDragHandle: true
+  }), createElement(BlockTools, null, createElement(KeyboardShortcuts, null), createElement(EditorStyles, {
     styles: styles,
     scope: ".editor-styles-wrapper"
   }), createElement(BlockSelectionClearer, null, createElement(WritingFlow, null, createElement(BlockList, {

package/build-module/components/widget-areas-block-editor-content/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["BlockList","BlockTools","BlockSelectionClearer","WritingFlow","__unstableEditorStyles","EditorStyles","useSelect","useMemo","store","preferencesStore","Notices","KeyboardShortcuts","WidgetAreasBlockEditorContent","blockEditorSettings","hasThemeStyles","select","get","styles","createElement","className","scope"],"sources":["@wordpress/edit-widgets/src/components/widget-areas-block-editor-content/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tBlockList,\n\tBlockTools,\n\tBlockSelectionClearer,\n\tWritingFlow,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport Notices from '../notices';\nimport KeyboardShortcuts from '../keyboard-shortcuts';\n\nexport default function WidgetAreasBlockEditorContent( {\n\tblockEditorSettings,\n} ) {\n\tconst hasThemeStyles = useSelect(\n\t\t( select ) =>\n\t\t\t!! select( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'themeStyles'\n\t\t\t),\n\t\t[]\n\t);\n\n\tconst styles = useMemo( () => {\n\t\treturn hasThemeStyles ? blockEditorSettings.styles : [];\n\t}, [ blockEditorSettings, hasThemeStyles ] );\n\n\treturn (\n\t\t<div className=\"edit-widgets-block-editor\">\n\t\t\t<Notices />\n\t\t\t<BlockTools>\n\t\t\t\t<KeyboardShortcuts />\n\t\t\t\t<EditorStyles\n\t\t\t\t\tstyles={ styles }\n\t\t\t\t\tscope=\".editor-styles-wrapper\"\n\t\t\t\t/>\n\t\t\t\t<BlockSelectionClearer>\n\t\t\t\t\t<WritingFlow>\n\t\t\t\t\t\t<BlockList className=\"edit-widgets-main-block-list\" />\n\t\t\t\t\t</WritingFlow>\n\t\t\t\t</BlockSelectionClearer>\n\t\t\t</BlockTools>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,SAAS,EACTC,UAAU,EACVC,qBAAqB,EACrBC,WAAW,EACXC,sBAAsB,IAAIC,YAAY,QAChC,yBAAyB;AAChC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,wBAAwB;;AAElE;AACA;AACA;AACA,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,iBAAiB,MAAM,uBAAuB;AAErD,eAAe,SAASC,6BAA6BA,CAAE;EACtDC;AACD,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGR,SAAS,CAC7BS,MAAM,IACP,CAAC,CAAEA,MAAM,CAAEN,gBAAiB,CAAC,CAACO,GAAG,CAChC,mBAAmB,EACnB,aACD,CAAC,EACF,EACD,CAAC;EAED,MAAMC,MAAM,GAAGV,OAAO,CAAE,MAAM;IAC7B,OAAOO,cAAc,GAAGD,mBAAmB,CAACI,MAAM,GAAG,EAAE;EACxD,CAAC,EAAE,CAAEJ,mBAAmB,EAAEC,cAAc,CAAG,CAAC;EAE5C,OACCI,aAAA;IAAKC,SAAS,EAAC;EAA2B,GACzCD,aAAA,CAACR,OAAO,MAAE,CAAC,EACXQ,aAAA,CAACjB,UAAU,QACViB,aAAA,CAACP,iBAAiB,MAAE,CAAC,EACrBO,aAAA,CAACb,YAAY;IACZY,MAAM,EAAGA,MAAQ;IACjBG,KAAK,EAAC;EAAwB,CAC9B,CAAC,EACFF,aAAA,CAAChB,qBAAqB,QACrBgB,aAAA,CAACf,WAAW,QACXe,aAAA,CAAClB,SAAS;IAACmB,SAAS,EAAC;EAA8B,CAAE,CACzC,CACS,CACZ,CACR,CAAC;AAER"}
+{"version":3,"names":["BlockList","BlockToolbar","BlockTools","BlockSelectionClearer","WritingFlow","__unstableEditorStyles","EditorStyles","useViewportMatch","useSelect","useMemo","store","preferencesStore","Notices","KeyboardShortcuts","WidgetAreasBlockEditorContent","blockEditorSettings","hasThemeStyles","select","get","isLargeViewport","styles","createElement","className","hideDragHandle","scope"],"sources":["@wordpress/edit-widgets/src/components/widget-areas-block-editor-content/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tBlockList,\n\tBlockToolbar,\n\tBlockTools,\n\tBlockSelectionClearer,\n\tWritingFlow,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport Notices from '../notices';\nimport KeyboardShortcuts from '../keyboard-shortcuts';\n\nexport default function WidgetAreasBlockEditorContent( {\n\tblockEditorSettings,\n} ) {\n\tconst hasThemeStyles = useSelect(\n\t\t( select ) =>\n\t\t\t!! select( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'themeStyles'\n\t\t\t),\n\t\t[]\n\t);\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst styles = useMemo( () => {\n\t\treturn hasThemeStyles ? blockEditorSettings.styles : [];\n\t}, [ blockEditorSettings, hasThemeStyles ] );\n\n\treturn (\n\t\t<div className=\"edit-widgets-block-editor\">\n\t\t\t<Notices />\n\t\t\t{ ! isLargeViewport && <BlockToolbar hideDragHandle /> }\n\t\t\t<BlockTools>\n\t\t\t\t<KeyboardShortcuts />\n\t\t\t\t<EditorStyles\n\t\t\t\t\tstyles={ styles }\n\t\t\t\t\tscope=\".editor-styles-wrapper\"\n\t\t\t\t/>\n\t\t\t\t<BlockSelectionClearer>\n\t\t\t\t\t<WritingFlow>\n\t\t\t\t\t\t<BlockList className=\"edit-widgets-main-block-list\" />\n\t\t\t\t\t</WritingFlow>\n\t\t\t\t</BlockSelectionClearer>\n\t\t\t</BlockTools>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,SAAS,EACTC,YAAY,EACZC,UAAU,EACVC,qBAAqB,EACrBC,WAAW,EACXC,sBAAsB,IAAIC,YAAY,QAChC,yBAAyB;AAChC,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,wBAAwB;;AAElE;AACA;AACA;AACA,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,iBAAiB,MAAM,uBAAuB;AAErD,eAAe,SAASC,6BAA6BA,CAAE;EACtDC;AACD,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGR,SAAS,CAC7BS,MAAM,IACP,CAAC,CAAEA,MAAM,CAAEN,gBAAiB,CAAC,CAACO,GAAG,CAChC,mBAAmB,EACnB,aACD,CAAC,EACF,EACD,CAAC;EACD,MAAMC,eAAe,GAAGZ,gBAAgB,CAAE,QAAS,CAAC;EAEpD,MAAMa,MAAM,GAAGX,OAAO,CAAE,MAAM;IAC7B,OAAOO,cAAc,GAAGD,mBAAmB,CAACK,MAAM,GAAG,EAAE;EACxD,CAAC,EAAE,CAAEL,mBAAmB,EAAEC,cAAc,CAAG,CAAC;EAE5C,OACCK,aAAA;IAAKC,SAAS,EAAC;EAA2B,GACzCD,aAAA,CAACT,OAAO,MAAE,CAAC,EACT,CAAEO,eAAe,IAAIE,aAAA,CAACpB,YAAY;IAACsB,cAAc;EAAA,CAAE,CAAC,EACtDF,aAAA,CAACnB,UAAU,QACVmB,aAAA,CAACR,iBAAiB,MAAE,CAAC,EACrBQ,aAAA,CAACf,YAAY;IACZc,MAAM,EAAGA,MAAQ;IACjBI,KAAK,EAAC;EAAwB,CAC9B,CAAC,EACFH,aAAA,CAAClB,qBAAqB,QACrBkB,aAAA,CAACjB,WAAW,QACXiB,aAAA,CAACrB,SAAS;IAACsB,SAAS,EAAC;EAA8B,CAAE,CACzC,CACS,CACZ,CACR,CAAC;AAER"}

package/build-module/components/widget-areas-block-editor-provider/index.js

@@ -3,6 +3,7 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 import { uploadMedia } from '@wordpress/media-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEntityBlockEditor, store as coreStore, useResourcePermissions } from '@wordpress/core-data';
@@ -32,6 +33,7 @@ export default function WidgetAreasBlockEditorProvider({
   ...props
 }) {
   const mediaPermissions = useResourcePermissions('media');
+  const isLargeViewport = useViewportMatch('medium');
   const {
     reusableBlocks,
     isFixedToolbarActive,
@@ -77,7 +79,7 @@ export default function WidgetAreasBlockEditorProvider({
     return {
       ...blockEditorSettings,
       __experimentalReusableBlocks: reusableBlocks,
-      hasFixedToolbar: isFixedToolbarActive,
+      hasFixedToolbar: isFixedToolbarActive || !isLargeViewport,
       keepCaretInsideBlock,
       mediaUpload: mediaUploadBlockEditor,
       templateLock: 'all',
@@ -85,7 +87,7 @@ export default function WidgetAreasBlockEditorProvider({
       pageOnFront,
       pageForPosts
     };
-  }, [blockEditorSettings, isFixedToolbarActive, keepCaretInsideBlock, mediaPermissions.canCreate, reusableBlocks, setIsInserterOpened, pageOnFront, pageForPosts]);
+  }, [blockEditorSettings, isFixedToolbarActive, isLargeViewport, keepCaretInsideBlock, mediaPermissions.canCreate, reusableBlocks, setIsInserterOpened, pageOnFront, pageForPosts]);
   const widgetAreaId = useLastSelectedWidgetArea();
   const [blocks, onInput, onChange] = useEntityBlockEditor(KIND, POST_TYPE, {
     id: buildWidgetAreasPostId()

package/build-module/components/widget-areas-block-editor-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["SlotFillProvider","uploadMedia","useDispatch","useSelect","useEntityBlockEditor","store","coreStore","useResourcePermissions","useMemo","privateApis","blockEditorPrivateApis","editPatternsPrivateApis","preferencesStore","KeyboardShortcuts","buildWidgetAreasPostId","KIND","POST_TYPE","useLastSelectedWidgetArea","editWidgetsStore","ALLOW_REUSABLE_BLOCKS","unlock","ExperimentalBlockEditorProvider","PatternsMenuItems","WidgetAreasBlockEditorProvider","blockEditorSettings","children","props","mediaPermissions","reusableBlocks","isFixedToolbarActive","keepCaretInsideBlock","pageOnFront","pageForPosts","select","canUser","getEntityRecord","getEntityRecords","siteSettings","undefined","widgetAreas","getWidgetAreas","widgets","getWidgets","get","page_on_front","page_for_posts","setIsInserterOpened","settings","mediaUploadBlockEditor","canCreate","onError","argumentsObject","wpAllowedMimeTypes","allowedMimeTypes","message","__experimentalReusableBlocks","hasFixedToolbar","mediaUpload","templateLock","__experimentalSetIsInserterOpened","widgetAreaId","blocks","onInput","onChange","id","createElement","Register","value","useSubRegistry","rootClientId"],"sources":["@wordpress/edit-widgets/src/components/widget-areas-block-editor-provider/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SlotFillProvider } from '@wordpress/components';\nimport { uploadMedia } from '@wordpress/media-utils';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tuseEntityBlockEditor,\n\tstore as coreStore,\n\tuseResourcePermissions,\n} from '@wordpress/core-data';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport KeyboardShortcuts from '../keyboard-shortcuts';\nimport { buildWidgetAreasPostId, KIND, POST_TYPE } from '../../store/utils';\nimport useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../store';\nimport { ALLOW_REUSABLE_BLOCKS } from '../../constants';\nimport { unlock } from '../../lock-unlock';\n\nconst { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );\nconst { PatternsMenuItems } = unlock( editPatternsPrivateApis );\nexport default function WidgetAreasBlockEditorProvider( {\n\tblockEditorSettings,\n\tchildren,\n\t...props\n} ) {\n\tconst mediaPermissions = useResourcePermissions( 'media' );\n\tconst {\n\t\treusableBlocks,\n\t\tisFixedToolbarActive,\n\t\tkeepCaretInsideBlock,\n\t\tpageOnFront,\n\t\tpageForPosts,\n\t} = useSelect( ( select ) => {\n\t\tconst { canUser, getEntityRecord, getEntityRecords } =\n\t\t\tselect( coreStore );\n\t\tconst siteSettings = canUser( 'read', 'settings' )\n\t\t\t? getEntityRecord( 'root', 'site' )\n\t\t\t: undefined;\n\t\treturn {\n\t\t\twidgetAreas: select( editWidgetsStore ).getWidgetAreas(),\n\t\t\twidgets: select( editWidgetsStore ).getWidgets(),\n\t\t\treusableBlocks: ALLOW_REUSABLE_BLOCKS\n\t\t\t\t? getEntityRecords( 'postType', 'wp_block' )\n\t\t\t\t: [],\n\t\t\tisFixedToolbarActive: !! select( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t\tkeepCaretInsideBlock: !! select( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'keepCaretInsideBlock'\n\t\t\t),\n\t\t\tpageOnFront: siteSettings?.page_on_front,\n\t\t\tpageForPosts: siteSettings?.page_for_posts,\n\t\t};\n\t}, [] );\n\tconst { setIsInserterOpened } = useDispatch( editWidgetsStore );\n\n\tconst settings = useMemo( () => {\n\t\tlet mediaUploadBlockEditor;\n\t\tif ( mediaPermissions.canCreate ) {\n\t\t\tmediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => {\n\t\t\t\tuploadMedia( {\n\t\t\t\t\twpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes,\n\t\t\t\t\tonError: ( { message } ) => onError( message ),\n\t\t\t\t\t...argumentsObject,\n\t\t\t\t} );\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\t...blockEditorSettings,\n\t\t\t__experimentalReusableBlocks: reusableBlocks,\n\t\t\thasFixedToolbar: isFixedToolbarActive,\n\t\t\tkeepCaretInsideBlock,\n\t\t\tmediaUpload: mediaUploadBlockEditor,\n\t\t\ttemplateLock: 'all',\n\t\t\t__experimentalSetIsInserterOpened: setIsInserterOpened,\n\t\t\tpageOnFront,\n\t\t\tpageForPosts,\n\t\t};\n\t}, [\n\t\tblockEditorSettings,\n\t\tisFixedToolbarActive,\n\t\tkeepCaretInsideBlock,\n\t\tmediaPermissions.canCreate,\n\t\treusableBlocks,\n\t\tsetIsInserterOpened,\n\t\tpageOnFront,\n\t\tpageForPosts,\n\t] );\n\n\tconst widgetAreaId = useLastSelectedWidgetArea();\n\n\tconst [ blocks, onInput, onChange ] = useEntityBlockEditor(\n\t\tKIND,\n\t\tPOST_TYPE,\n\t\t{ id: buildWidgetAreasPostId() }\n\t);\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<KeyboardShortcuts.Register />\n\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\tvalue={ blocks }\n\t\t\t\tonInput={ onInput }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsettings={ settings }\n\t\t\t\tuseSubRegistry={ false }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t<PatternsMenuItems rootClientId={ widgetAreaId } />\n\t\t\t</ExperimentalBlockEditorProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SACCC,oBAAoB,EACpBC,KAAK,IAAIC,SAAS,EAClBC,sBAAsB,QAChB,sBAAsB;AAC7B,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;AAC/E,SAASD,WAAW,IAAIE,uBAAuB,QAAQ,qBAAqB;AAC5E,SAASN,KAAK,IAAIO,gBAAgB,QAAQ,wBAAwB;;AAElE;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,SAASC,sBAAsB,EAAEC,IAAI,EAAEC,SAAS,QAAQ,mBAAmB;AAC3E,OAAOC,yBAAyB,MAAM,2CAA2C;AACjF,SAASZ,KAAK,IAAIa,gBAAgB,QAAQ,aAAa;AACvD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAgC,CAAC,GAAGD,MAAM,CAAEV,sBAAuB,CAAC;AAC5E,MAAM;EAAEY;AAAkB,CAAC,GAAGF,MAAM,CAAET,uBAAwB,CAAC;AAC/D,eAAe,SAASY,8BAA8BA,CAAE;EACvDC,mBAAmB;EACnBC,QAAQ;EACR,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,gBAAgB,GAAGpB,sBAAsB,CAAE,OAAQ,CAAC;EAC1D,MAAM;IACLqB,cAAc;IACdC,oBAAoB;IACpBC,oBAAoB;IACpBC,WAAW;IACXC;EACD,CAAC,GAAG7B,SAAS,CAAI8B,MAAM,IAAM;IAC5B,MAAM;MAAEC,OAAO;MAAEC,eAAe;MAAEC;IAAiB,CAAC,GACnDH,MAAM,CAAE3B,SAAU,CAAC;IACpB,MAAM+B,YAAY,GAAGH,OAAO,CAAE,MAAM,EAAE,UAAW,CAAC,GAC/CC,eAAe,CAAE,MAAM,EAAE,MAAO,CAAC,GACjCG,SAAS;IACZ,OAAO;MACNC,WAAW,EAAEN,MAAM,CAAEf,gBAAiB,CAAC,CAACsB,cAAc,CAAC,CAAC;MACxDC,OAAO,EAAER,MAAM,CAAEf,gBAAiB,CAAC,CAACwB,UAAU,CAAC,CAAC;MAChDd,cAAc,EAAET,qBAAqB,GAClCiB,gBAAgB,CAAE,UAAU,EAAE,UAAW,CAAC,GAC1C,EAAE;MACLP,oBAAoB,EAAE,CAAC,CAAEI,MAAM,CAAErB,gBAAiB,CAAC,CAAC+B,GAAG,CACtD,mBAAmB,EACnB,cACD,CAAC;MACDb,oBAAoB,EAAE,CAAC,CAAEG,MAAM,CAAErB,gBAAiB,CAAC,CAAC+B,GAAG,CACtD,mBAAmB,EACnB,sBACD,CAAC;MACDZ,WAAW,EAAEM,YAAY,EAAEO,aAAa;MACxCZ,YAAY,EAAEK,YAAY,EAAEQ;IAC7B,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP,MAAM;IAAEC;EAAoB,CAAC,GAAG5C,WAAW,CAAEgB,gBAAiB,CAAC;EAE/D,MAAM6B,QAAQ,GAAGvC,OAAO,CAAE,MAAM;IAC/B,IAAIwC,sBAAsB;IAC1B,IAAKrB,gBAAgB,CAACsB,SAAS,EAAG;MACjCD,sBAAsB,GAAGA,CAAE;QAAEE,OAAO;QAAE,GAAGC;MAAgB,CAAC,KAAM;QAC/DlD,WAAW,CAAE;UACZmD,kBAAkB,EAAE5B,mBAAmB,CAAC6B,gBAAgB;UACxDH,OAAO,EAAEA,CAAE;YAAEI;UAAQ,CAAC,KAAMJ,OAAO,CAAEI,OAAQ,CAAC;UAC9C,GAAGH;QACJ,CAAE,CAAC;MACJ,CAAC;IACF;IACA,OAAO;MACN,GAAG3B,mBAAmB;MACtB+B,4BAA4B,EAAE3B,cAAc;MAC5C4B,eAAe,EAAE3B,oBAAoB;MACrCC,oBAAoB;MACpB2B,WAAW,EAAET,sBAAsB;MACnCU,YAAY,EAAE,KAAK;MACnBC,iCAAiC,EAAEb,mBAAmB;MACtDf,WAAW;MACXC;IACD,CAAC;EACF,CAAC,EAAE,CACFR,mBAAmB,EACnBK,oBAAoB,EACpBC,oBAAoB,EACpBH,gBAAgB,CAACsB,SAAS,EAC1BrB,cAAc,EACdkB,mBAAmB,EACnBf,WAAW,EACXC,YAAY,CACX,CAAC;EAEH,MAAM4B,YAAY,GAAG3C,yBAAyB,CAAC,CAAC;EAEhD,MAAM,CAAE4C,MAAM,EAAEC,OAAO,EAAEC,QAAQ,CAAE,GAAG3D,oBAAoB,CACzDW,IAAI,EACJC,SAAS,EACT;IAAEgD,EAAE,EAAElD,sBAAsB,CAAC;EAAE,CAChC,CAAC;EAED,OACCmD,aAAA,CAACjE,gBAAgB,QAChBiE,aAAA,CAACpD,iBAAiB,CAACqD,QAAQ,MAAE,CAAC,EAC9BD,aAAA,CAAC5C,+BAA+B;IAC/B8C,KAAK,EAAGN,MAAQ;IAChBC,OAAO,EAAGA,OAAS;IACnBC,QAAQ,EAAGA,QAAU;IACrBhB,QAAQ,EAAGA,QAAU;IACrBqB,cAAc,EAAG,KAAO;IAAA,GACnB1C;EAAK,GAERD,QAAQ,EACVwC,aAAA,CAAC3C,iBAAiB;IAAC+C,YAAY,EAAGT;EAAc,CAAE,CAClB,CAChB,CAAC;AAErB"}
+{"version":3,"names":["SlotFillProvider","useViewportMatch","uploadMedia","useDispatch","useSelect","useEntityBlockEditor","store","coreStore","useResourcePermissions","useMemo","privateApis","blockEditorPrivateApis","editPatternsPrivateApis","preferencesStore","KeyboardShortcuts","buildWidgetAreasPostId","KIND","POST_TYPE","useLastSelectedWidgetArea","editWidgetsStore","ALLOW_REUSABLE_BLOCKS","unlock","ExperimentalBlockEditorProvider","PatternsMenuItems","WidgetAreasBlockEditorProvider","blockEditorSettings","children","props","mediaPermissions","isLargeViewport","reusableBlocks","isFixedToolbarActive","keepCaretInsideBlock","pageOnFront","pageForPosts","select","canUser","getEntityRecord","getEntityRecords","siteSettings","undefined","widgetAreas","getWidgetAreas","widgets","getWidgets","get","page_on_front","page_for_posts","setIsInserterOpened","settings","mediaUploadBlockEditor","canCreate","onError","argumentsObject","wpAllowedMimeTypes","allowedMimeTypes","message","__experimentalReusableBlocks","hasFixedToolbar","mediaUpload","templateLock","__experimentalSetIsInserterOpened","widgetAreaId","blocks","onInput","onChange","id","createElement","Register","value","useSubRegistry","rootClientId"],"sources":["@wordpress/edit-widgets/src/components/widget-areas-block-editor-provider/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SlotFillProvider } from '@wordpress/components';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { uploadMedia } from '@wordpress/media-utils';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tuseEntityBlockEditor,\n\tstore as coreStore,\n\tuseResourcePermissions,\n} from '@wordpress/core-data';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport KeyboardShortcuts from '../keyboard-shortcuts';\nimport { buildWidgetAreasPostId, KIND, POST_TYPE } from '../../store/utils';\nimport useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';\nimport { store as editWidgetsStore } from '../../store';\nimport { ALLOW_REUSABLE_BLOCKS } from '../../constants';\nimport { unlock } from '../../lock-unlock';\n\nconst { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );\nconst { PatternsMenuItems } = unlock( editPatternsPrivateApis );\nexport default function WidgetAreasBlockEditorProvider( {\n\tblockEditorSettings,\n\tchildren,\n\t...props\n} ) {\n\tconst mediaPermissions = useResourcePermissions( 'media' );\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst {\n\t\treusableBlocks,\n\t\tisFixedToolbarActive,\n\t\tkeepCaretInsideBlock,\n\t\tpageOnFront,\n\t\tpageForPosts,\n\t} = useSelect( ( select ) => {\n\t\tconst { canUser, getEntityRecord, getEntityRecords } =\n\t\t\tselect( coreStore );\n\t\tconst siteSettings = canUser( 'read', 'settings' )\n\t\t\t? getEntityRecord( 'root', 'site' )\n\t\t\t: undefined;\n\t\treturn {\n\t\t\twidgetAreas: select( editWidgetsStore ).getWidgetAreas(),\n\t\t\twidgets: select( editWidgetsStore ).getWidgets(),\n\t\t\treusableBlocks: ALLOW_REUSABLE_BLOCKS\n\t\t\t\t? getEntityRecords( 'postType', 'wp_block' )\n\t\t\t\t: [],\n\t\t\tisFixedToolbarActive: !! select( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t\tkeepCaretInsideBlock: !! select( preferencesStore ).get(\n\t\t\t\t'core/edit-widgets',\n\t\t\t\t'keepCaretInsideBlock'\n\t\t\t),\n\t\t\tpageOnFront: siteSettings?.page_on_front,\n\t\t\tpageForPosts: siteSettings?.page_for_posts,\n\t\t};\n\t}, [] );\n\tconst { setIsInserterOpened } = useDispatch( editWidgetsStore );\n\n\tconst settings = useMemo( () => {\n\t\tlet mediaUploadBlockEditor;\n\t\tif ( mediaPermissions.canCreate ) {\n\t\t\tmediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => {\n\t\t\t\tuploadMedia( {\n\t\t\t\t\twpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes,\n\t\t\t\t\tonError: ( { message } ) => onError( message ),\n\t\t\t\t\t...argumentsObject,\n\t\t\t\t} );\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\t...blockEditorSettings,\n\t\t\t__experimentalReusableBlocks: reusableBlocks,\n\t\t\thasFixedToolbar: isFixedToolbarActive || ! isLargeViewport,\n\t\t\tkeepCaretInsideBlock,\n\t\t\tmediaUpload: mediaUploadBlockEditor,\n\t\t\ttemplateLock: 'all',\n\t\t\t__experimentalSetIsInserterOpened: setIsInserterOpened,\n\t\t\tpageOnFront,\n\t\t\tpageForPosts,\n\t\t};\n\t}, [\n\t\tblockEditorSettings,\n\t\tisFixedToolbarActive,\n\t\tisLargeViewport,\n\t\tkeepCaretInsideBlock,\n\t\tmediaPermissions.canCreate,\n\t\treusableBlocks,\n\t\tsetIsInserterOpened,\n\t\tpageOnFront,\n\t\tpageForPosts,\n\t] );\n\n\tconst widgetAreaId = useLastSelectedWidgetArea();\n\n\tconst [ blocks, onInput, onChange ] = useEntityBlockEditor(\n\t\tKIND,\n\t\tPOST_TYPE,\n\t\t{ id: buildWidgetAreasPostId() }\n\t);\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<KeyboardShortcuts.Register />\n\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\tvalue={ blocks }\n\t\t\t\tonInput={ onInput }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsettings={ settings }\n\t\t\t\tuseSubRegistry={ false }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t<PatternsMenuItems rootClientId={ widgetAreaId } />\n\t\t\t</ExperimentalBlockEditorProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n"],"mappings":"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"}

package/build-module/store/index.js

@@ -11,7 +11,9 @@ import reducer from './reducer';
 import * as resolvers from './resolvers';
 import * as selectors from './selectors';
 import * as actions from './actions';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Block editor data store configuration.
@@ -46,4 +48,5 @@ apiFetch.use(function (options, next) {
   }
   return next(options);
 });
+unlock(store).registerPrivateSelectors(privateSelectors);
 //# sourceMappingURL=index.js.map

package/build-module/store/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["apiFetch","createReduxStore","register","reducer","resolvers","selectors","actions","STORE_NAME","storeConfig","store","use","options","next","path","indexOf","Promise","resolve"],"sources":["@wordpress/edit-widgets/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as resolvers from './resolvers';\nimport * as selectors from './selectors';\nimport * as actions from './actions';\nimport { STORE_NAME } from './constants';\n\n/**\n * Block editor data store configuration.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#register\n *\n * @type {Object}\n */\nconst storeConfig = {\n\treducer,\n\tselectors,\n\tresolvers,\n\tactions,\n};\n\n/**\n * Store definition for the edit widgets namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, storeConfig );\nregister( store );\n\n// This package uses a few in-memory post types as wrappers for convenience.\n// This middleware prevents any network requests related to these types as they are\n// bound to fail anyway.\napiFetch.use( function ( options, next ) {\n\tif ( options.path?.indexOf( '/wp/v2/types/widget-area' ) === 0 ) {\n\t\treturn Promise.resolve( {} );\n\t}\n\n\treturn next( options );\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,SAASC,gBAAgB,EAAEC,QAAQ,QAAQ,iBAAiB;;AAE5D;AACA;AACA;AACA,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,SAASC,UAAU,QAAQ,aAAa;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAG;EACnBL,OAAO;EACPE,SAAS;EACTD,SAAS;EACTE;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,KAAK,GAAGR,gBAAgB,CAAEM,UAAU,EAAEC,WAAY,CAAC;AAChEN,QAAQ,CAAEO,KAAM,CAAC;;AAEjB;AACA;AACA;AACAT,QAAQ,CAACU,GAAG,CAAE,UAAWC,OAAO,EAAEC,IAAI,EAAG;EACxC,IAAKD,OAAO,CAACE,IAAI,EAAEC,OAAO,CAAE,0BAA2B,CAAC,KAAK,CAAC,EAAG;IAChE,OAAOC,OAAO,CAACC,OAAO,CAAE,CAAC,CAAE,CAAC;EAC7B;EAEA,OAAOJ,IAAI,CAAED,OAAQ,CAAC;AACvB,CAAE,CAAC"}
+{"version":3,"names":["apiFetch","createReduxStore","register","reducer","resolvers","selectors","actions","privateSelectors","STORE_NAME","unlock","storeConfig","store","use","options","next","path","indexOf","Promise","resolve","registerPrivateSelectors"],"sources":["@wordpress/edit-widgets/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport apiFetch from '@wordpress/api-fetch';\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as resolvers from './resolvers';\nimport * as selectors from './selectors';\nimport * as actions from './actions';\nimport * as privateSelectors from './private-selectors';\nimport { STORE_NAME } from './constants';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Block editor data store configuration.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#register\n *\n * @type {Object}\n */\nconst storeConfig = {\n\treducer,\n\tselectors,\n\tresolvers,\n\tactions,\n};\n\n/**\n * Store definition for the edit widgets namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, storeConfig );\nregister( store );\n\n// This package uses a few in-memory post types as wrappers for convenience.\n// This middleware prevents any network requests related to these types as they are\n// bound to fail anyway.\napiFetch.use( function ( options, next ) {\n\tif ( options.path?.indexOf( '/wp/v2/types/widget-area' ) === 0 ) {\n\t\treturn Promise.resolve( {} );\n\t}\n\n\treturn next( options );\n} );\n\nunlock( store ).registerPrivateSelectors( privateSelectors );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,SAASC,gBAAgB,EAAEC,QAAQ,QAAQ,iBAAiB;;AAE5D;AACA;AACA;AACA,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,gBAAgB,MAAM,qBAAqB;AACvD,SAASC,UAAU,QAAQ,aAAa;AACxC,SAASC,MAAM,QAAQ,gBAAgB;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAG;EACnBP,OAAO;EACPE,SAAS;EACTD,SAAS;EACTE;AACD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,KAAK,GAAGV,gBAAgB,CAAEO,UAAU,EAAEE,WAAY,CAAC;AAChER,QAAQ,CAAES,KAAM,CAAC;;AAEjB;AACA;AACA;AACAX,QAAQ,CAACY,GAAG,CAAE,UAAWC,OAAO,EAAEC,IAAI,EAAG;EACxC,IAAKD,OAAO,CAACE,IAAI,EAAEC,OAAO,CAAE,0BAA2B,CAAC,KAAK,CAAC,EAAG;IAChE,OAAOC,OAAO,CAACC,OAAO,CAAE,CAAC,CAAE,CAAC;EAC7B;EAEA,OAAOJ,IAAI,CAAED,OAAQ,CAAC;AACvB,CAAE,CAAC;AAEHJ,MAAM,CAAEE,KAAM,CAAC,CAACQ,wBAAwB,CAAEZ,gBAAiB,CAAC"}

package/build-module/store/private-selectors.js

@@ -0,0 +1,4 @@
+export function getListViewToggleRef(state) {
+  return state.listViewToggleRef;
+}
+//# sourceMappingURL=private-selectors.js.map

package/build-module/store/private-selectors.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getListViewToggleRef","state","listViewToggleRef"],"sources":["@wordpress/edit-widgets/src/store/private-selectors.js"],"sourcesContent":["export function getListViewToggleRef( state ) {\n\treturn state.listViewToggleRef;\n}\n"],"mappings":"AAAA,OAAO,SAASA,oBAAoBA,CAAEC,KAAK,EAAG;EAC7C,OAAOA,KAAK,CAACC,iBAAiB;AAC/B"}

package/build-module/store/reducer.js

@@ -75,6 +75,19 @@ export function listViewPanel(state = false, action) {
   }
   return state;
 }
+
+/**
+ * This reducer does nothing aside initializing a ref to the list view toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the list view toggle button.
+ */
+export function listViewToggleRef(state = {
+  current: null
+}) {
+  return state;
+}
 export default combineReducers({
   blockInserterPanel,
   listViewPanel,

package/build-module/store/reducer.js.map

@@ -1 +1 @@
-{"version":3,"names":["combineReducers","widgetAreasOpenState","state","action","type","clientId","isOpen","blockInserterPanel","value","listViewPanel"],"sources":["@wordpress/edit-widgets/src/store/reducer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Controls the open state of the widget areas.\n *\n * @param {Object} state  Redux state.\n * @param {Object} action Redux action.\n *\n * @return {Array} Updated state.\n */\nexport function widgetAreasOpenState( state = {}, action ) {\n\tconst { type } = action;\n\tswitch ( type ) {\n\t\tcase 'SET_WIDGET_AREAS_OPEN_STATE': {\n\t\t\treturn action.widgetAreasOpenState;\n\t\t}\n\t\tcase 'SET_IS_WIDGET_AREA_OPEN': {\n\t\t\tconst { clientId, isOpen } = action;\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ clientId ]: isOpen,\n\t\t\t};\n\t\t}\n\t\tdefault: {\n\t\t\treturn state;\n\t\t}\n\t}\n}\n\n/**\n * Reducer to set the block inserter panel open or closed.\n *\n * Note: this reducer interacts with the list view panel reducer\n * to make sure that only one of the two panels is open at the same time.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n */\nexport function blockInserterPanel( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_IS_LIST_VIEW_OPENED':\n\t\t\treturn action.isOpen ? false : state;\n\t\tcase 'SET_IS_INSERTER_OPENED':\n\t\t\treturn action.value;\n\t}\n\treturn state;\n}\n\n/**\n * Reducer to set the list view panel open or closed.\n *\n * Note: this reducer interacts with the inserter panel reducer\n * to make sure that only one of the two panels is open at the same time.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n */\nexport function listViewPanel( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_IS_INSERTER_OPENED':\n\t\t\treturn action.value ? false : state;\n\t\tcase 'SET_IS_LIST_VIEW_OPENED':\n\t\t\treturn action.isOpen;\n\t}\n\treturn state;\n}\n\nexport default combineReducers( {\n\tblockInserterPanel,\n\tlistViewPanel,\n\twidgetAreasOpenState,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,iBAAiB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAAEC,KAAK,GAAG,CAAC,CAAC,EAAEC,MAAM,EAAG;EAC1D,MAAM;IAAEC;EAAK,CAAC,GAAGD,MAAM;EACvB,QAASC,IAAI;IACZ,KAAK,6BAA6B;MAAE;QACnC,OAAOD,MAAM,CAACF,oBAAoB;MACnC;IACA,KAAK,yBAAyB;MAAE;QAC/B,MAAM;UAAEI,QAAQ;UAAEC;QAAO,CAAC,GAAGH,MAAM;QACnC,OAAO;UACN,GAAGD,KAAK;UACR,CAAEG,QAAQ,GAAIC;QACf,CAAC;MACF;IACA;MAAS;QACR,OAAOJ,KAAK;MACb;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,kBAAkBA,CAAEL,KAAK,GAAG,KAAK,EAAEC,MAAM,EAAG;EAC3D,QAASA,MAAM,CAACC,IAAI;IACnB,KAAK,yBAAyB;MAC7B,OAAOD,MAAM,CAACG,MAAM,GAAG,KAAK,GAAGJ,KAAK;IACrC,KAAK,wBAAwB;MAC5B,OAAOC,MAAM,CAACK,KAAK;EACrB;EACA,OAAON,KAAK;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASO,aAAaA,CAAEP,KAAK,GAAG,KAAK,EAAEC,MAAM,EAAG;EACtD,QAASA,MAAM,CAACC,IAAI;IACnB,KAAK,wBAAwB;MAC5B,OAAOD,MAAM,CAACK,KAAK,GAAG,KAAK,GAAGN,KAAK;IACpC,KAAK,yBAAyB;MAC7B,OAAOC,MAAM,CAACG,MAAM;EACtB;EACA,OAAOJ,KAAK;AACb;AAEA,eAAeF,eAAe,CAAE;EAC/BO,kBAAkB;EAClBE,aAAa;EACbR;AACD,CAAE,CAAC"}
+{"version":3,"names":["combineReducers","widgetAreasOpenState","state","action","type","clientId","isOpen","blockInserterPanel","value","listViewPanel","listViewToggleRef","current"],"sources":["@wordpress/edit-widgets/src/store/reducer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Controls the open state of the widget areas.\n *\n * @param {Object} state  Redux state.\n * @param {Object} action Redux action.\n *\n * @return {Array} Updated state.\n */\nexport function widgetAreasOpenState( state = {}, action ) {\n\tconst { type } = action;\n\tswitch ( type ) {\n\t\tcase 'SET_WIDGET_AREAS_OPEN_STATE': {\n\t\t\treturn action.widgetAreasOpenState;\n\t\t}\n\t\tcase 'SET_IS_WIDGET_AREA_OPEN': {\n\t\t\tconst { clientId, isOpen } = action;\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ clientId ]: isOpen,\n\t\t\t};\n\t\t}\n\t\tdefault: {\n\t\t\treturn state;\n\t\t}\n\t}\n}\n\n/**\n * Reducer to set the block inserter panel open or closed.\n *\n * Note: this reducer interacts with the list view panel reducer\n * to make sure that only one of the two panels is open at the same time.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n */\nexport function blockInserterPanel( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_IS_LIST_VIEW_OPENED':\n\t\t\treturn action.isOpen ? false : state;\n\t\tcase 'SET_IS_INSERTER_OPENED':\n\t\t\treturn action.value;\n\t}\n\treturn state;\n}\n\n/**\n * Reducer to set the list view panel open or closed.\n *\n * Note: this reducer interacts with the inserter panel reducer\n * to make sure that only one of the two panels is open at the same time.\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n */\nexport function listViewPanel( state = false, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'SET_IS_INSERTER_OPENED':\n\t\t\treturn action.value ? false : state;\n\t\tcase 'SET_IS_LIST_VIEW_OPENED':\n\t\t\treturn action.isOpen;\n\t}\n\treturn state;\n}\n\n/**\n * This reducer does nothing aside initializing a ref to the list view toggle.\n * We will have a unique ref per \"editor\" instance.\n *\n * @param {Object} state\n * @return {Object} Reference to the list view toggle button.\n */\nexport function listViewToggleRef( state = { current: null } ) {\n\treturn state;\n}\n\nexport default combineReducers( {\n\tblockInserterPanel,\n\tlistViewPanel,\n\twidgetAreasOpenState,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,iBAAiB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAAEC,KAAK,GAAG,CAAC,CAAC,EAAEC,MAAM,EAAG;EAC1D,MAAM;IAAEC;EAAK,CAAC,GAAGD,MAAM;EACvB,QAASC,IAAI;IACZ,KAAK,6BAA6B;MAAE;QACnC,OAAOD,MAAM,CAACF,oBAAoB;MACnC;IACA,KAAK,yBAAyB;MAAE;QAC/B,MAAM;UAAEI,QAAQ;UAAEC;QAAO,CAAC,GAAGH,MAAM;QACnC,OAAO;UACN,GAAGD,KAAK;UACR,CAAEG,QAAQ,GAAIC;QACf,CAAC;MACF;IACA;MAAS;QACR,OAAOJ,KAAK;MACb;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,kBAAkBA,CAAEL,KAAK,GAAG,KAAK,EAAEC,MAAM,EAAG;EAC3D,QAASA,MAAM,CAACC,IAAI;IACnB,KAAK,yBAAyB;MAC7B,OAAOD,MAAM,CAACG,MAAM,GAAG,KAAK,GAAGJ,KAAK;IACrC,KAAK,wBAAwB;MAC5B,OAAOC,MAAM,CAACK,KAAK;EACrB;EACA,OAAON,KAAK;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASO,aAAaA,CAAEP,KAAK,GAAG,KAAK,EAAEC,MAAM,EAAG;EACtD,QAASA,MAAM,CAACC,IAAI;IACnB,KAAK,wBAAwB;MAC5B,OAAOD,MAAM,CAACK,KAAK,GAAG,KAAK,GAAGN,KAAK;IACpC,KAAK,yBAAyB;MAC7B,OAAOC,MAAM,CAACG,MAAM;EACtB;EACA,OAAOJ,KAAK;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASQ,iBAAiBA,CAAER,KAAK,GAAG;EAAES,OAAO,EAAE;AAAK,CAAC,EAAG;EAC9D,OAAOT,KAAK;AACb;AAEA,eAAeF,eAAe,CAAE;EAC/BO,kBAAkB;EAClBE,aAAa;EACbR;AACD,CAAE,CAAC"}

package/build-style/style-rtl.css

@@ -468,7 +468,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .interface-pinned-items {
   display: flex;
-  gap: 4px;
+  gap: 8px;
   margin-left: -4px;
 }
 .interface-pinned-items .components-button {
@@ -569,6 +569,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #757575;
 }
 
+.interface-preferences-modal__section:has(.interface-preferences-modal__section-content:empty) {
+  display: none;
+}
+
 .interface-preferences-modal__option + .interface-preferences-modal__option {
   margin-top: 16px;
 }
@@ -648,8 +652,25 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
 .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 .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
+  border-bottom: 0;
+}
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group,
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar {
+  border-left: none;
+}
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group::after,
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar::after {
+  content: "";
+  width: 1px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  background-color: #ddd;
+  margin-right: 8px;
+}
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar .components-toolbar-group.components-toolbar-group::after {
+  display: none;
 }
 
 .edit-widgets-header__navigable-toolbar-wrapper {
@@ -657,7 +678,6 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
   align-items: center;
   justify-content: center;
   flex-shrink: 2;
-  overflow-x: hidden;
   padding-right: 16px;
 }
 
@@ -680,7 +700,7 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
 }
 
 .edit-widgets-header-toolbar {
-  border: none;
+  gap: 8px;
 }
 .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {

package/build-style/style.css

@@ -468,7 +468,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .interface-pinned-items {
   display: flex;
-  gap: 4px;
+  gap: 8px;
   margin-right: -4px;
 }
 .interface-pinned-items .components-button {
@@ -569,6 +569,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #757575;
 }
 
+.interface-preferences-modal__section:has(.interface-preferences-modal__section-content:empty) {
+  display: none;
+}
+
 .interface-preferences-modal__option + .interface-preferences-modal__option {
   margin-top: 16px;
 }
@@ -648,8 +652,25 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
 .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 .selected-block-tools-wrapper .block-editor-block-contextual-toolbar {
+  border-bottom: 0;
+}
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group,
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar {
+  border-right: none;
+}
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group::after,
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar::after {
+  content: "";
+  width: 1px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  background-color: #ddd;
+  margin-left: 8px;
+}
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
+.edit-widgets-header .selected-block-tools-wrapper .components-toolbar .components-toolbar-group.components-toolbar-group::after {
+  display: none;
 }
 
 .edit-widgets-header__navigable-toolbar-wrapper {
@@ -657,7 +678,6 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
   align-items: center;
   justify-content: center;
   flex-shrink: 2;
-  overflow-x: hidden;
   padding-left: 16px;
 }
 
@@ -680,7 +700,7 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
 }
 
 .edit-widgets-header-toolbar {
-  border: none;
+  gap: 8px;
 }
 .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon,
 .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "5.24.1",
+	"version": "5.25.1-next.79a6196f.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,34 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^6.44.0",
-		"@wordpress/block-editor": "^12.15.0",
-		"@wordpress/block-library": "^8.24.1",
-		"@wordpress/blocks": "^12.24.0",
-		"@wordpress/components": "^25.13.0",
-		"@wordpress/compose": "^6.24.0",
-		"@wordpress/core-data": "^6.24.0",
-		"@wordpress/data": "^9.17.0",
-		"@wordpress/deprecated": "^3.47.0",
-		"@wordpress/dom": "^3.47.0",
-		"@wordpress/element": "^5.24.0",
-		"@wordpress/hooks": "^3.47.0",
-		"@wordpress/i18n": "^4.47.0",
-		"@wordpress/icons": "^9.38.0",
-		"@wordpress/interface": "^5.24.0",
-		"@wordpress/keyboard-shortcuts": "^4.24.0",
-		"@wordpress/keycodes": "^3.47.0",
-		"@wordpress/media-utils": "^4.38.0",
-		"@wordpress/notices": "^4.15.0",
-		"@wordpress/patterns": "^1.8.0",
-		"@wordpress/plugins": "^6.15.0",
-		"@wordpress/preferences": "^3.24.0",
-		"@wordpress/private-apis": "^0.29.0",
-		"@wordpress/reusable-blocks": "^4.24.0",
-		"@wordpress/url": "^3.48.0",
-		"@wordpress/widgets": "^3.24.0",
-		"classnames": "^2.3.1"
+		"@wordpress/api-fetch": "^6.45.1-next.79a6196f.0",
+		"@wordpress/block-editor": "^12.16.1-next.79a6196f.0",
+		"@wordpress/block-library": "^8.25.1-next.79a6196f.0",
+		"@wordpress/blocks": "^12.25.1-next.79a6196f.0",
+		"@wordpress/components": "^25.15.1-next.79a6196f.0",
+		"@wordpress/compose": "^6.25.1-next.79a6196f.0",
+		"@wordpress/core-data": "^6.25.1-next.79a6196f.0",
+		"@wordpress/data": "^9.18.1-next.79a6196f.0",
+		"@wordpress/deprecated": "^3.48.1-next.79a6196f.0",
+		"@wordpress/dom": "^3.48.1-next.79a6196f.0",
+		"@wordpress/element": "^5.25.1-next.79a6196f.0",
+		"@wordpress/hooks": "^3.48.1-next.79a6196f.0",
+		"@wordpress/i18n": "^4.48.1-next.79a6196f.0",
+		"@wordpress/icons": "^9.39.1-next.79a6196f.0",
+		"@wordpress/interface": "^5.25.1-next.79a6196f.0",
+		"@wordpress/keyboard-shortcuts": "^4.25.1-next.79a6196f.0",
+		"@wordpress/keycodes": "^3.48.1-next.79a6196f.0",
+		"@wordpress/media-utils": "^4.39.1-next.79a6196f.0",
+		"@wordpress/notices": "^4.16.1-next.79a6196f.0",
+		"@wordpress/patterns": "^1.9.1-next.79a6196f.0",
+		"@wordpress/plugins": "^6.16.1-next.79a6196f.0",
+		"@wordpress/preferences": "^3.25.1-next.79a6196f.0",
+		"@wordpress/private-apis": "^0.30.1-next.79a6196f.0",
+		"@wordpress/reusable-blocks": "^4.25.1-next.79a6196f.0",
+		"@wordpress/url": "^3.49.1-next.79a6196f.0",
+		"@wordpress/widgets": "^3.25.1-next.79a6196f.0",
+		"classnames": "^2.3.1",
+		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -62,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "12b897d7feff1cb00ddbf9016b62c1177d9c0081"
+	"gitHead": "1e74b942ac0119a22ceaaf5c9594263f3ec516ab"
 }

package/src/blocks/widget-area/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"name": "core/widget-area",
 	"category": "widgets",
 	"attributes": {

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

@@ -22,9 +22,9 @@ import useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-a
 import { store as editWidgetsStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
 
-function DocumentTools( { setListViewToggleElement } ) {
+function DocumentTools() {
 	const isMediumViewport = useViewportMatch( 'medium' );
 	const inserterButton = useRef();
 	const widgetAreaClientId = useLastSelectedWidgetArea();
@@ -35,14 +35,18 @@ function DocumentTools( { setListViewToggleElement } ) {
 			),
 		[ widgetAreaClientId ]
 	);
-	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
-		const { isInserterOpened, isListViewOpened } =
-			select( editWidgetsStore );
-		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-		};
-	}, [] );
+	const { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(
+		( select ) => {
+			const { isInserterOpened, isListViewOpened, getListViewToggleRef } =
+				unlock( select( editWidgetsStore ) );
+			return {
+				isInserterOpen: isInserterOpened(),
+				isListViewOpen: isListViewOpened(),
+				listViewToggleRef: getListViewToggleRef(),
+			};
+		},
+		[]
+	);
 	const { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editWidgetsStore );
 	const { selectBlock } = useDispatch( blockEditorStore );
@@ -71,23 +75,15 @@ function DocumentTools( { setListViewToggleElement } ) {
 		[ 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;
+	const blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();
 
 	return (
 		<NavigableToolbar
 			className="edit-widgets-header-toolbar"
 			aria-label={ __( 'Document tools' ) }
 			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
+			variant="unstyled"
 		>
 			<ToolbarItem
 				ref={ inserterButton }
@@ -109,8 +105,8 @@ function DocumentTools( { setListViewToggleElement } ) {
 			/>
 			{ isMediumViewport && (
 				<>
-					<UndoButton />
-					<RedoButton />
+					<ToolbarItem as={ UndoButton } />
+					<ToolbarItem as={ RedoButton } />
 					<ToolbarItem
 						as={ Button }
 						className="edit-widgets-header-toolbar__list-view-toggle"
@@ -119,7 +115,7 @@ function DocumentTools( { setListViewToggleElement } ) {
 						/* translators: button label text should, if possible, be under 16 characters. */
 						label={ __( 'List View' ) }
 						onClick={ toggleListView }
-						ref={ setListViewToggleElement }
+						ref={ listViewToggleRef }
 					/>
 				</>
 			) }