@wordpress/edit-widgets 5.33.0 → 5.35.0

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

@@ -1 +1 @@
-{"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","ignoreList":[]}
+{"version":3,"names":["combineReducers","widgetAreasOpenState","state","action","type","clientId","isOpen","blockInserterPanel","value","listViewPanel","listViewToggleRef","current","inserterSidebarToggleRef"],"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\n/**\n * This reducer does nothing aside initializing a ref to the inserter sidebar toggle.\n * We will have a unique ref per \"editor\" instance.\n *\n * @param {Object} state\n * @return {Object} Reference to the inserter sidebar toggle button.\n */\nexport function inserterSidebarToggleRef( state = { current: null } ) {\n\treturn state;\n}\n\nexport default combineReducers( {\n\tblockInserterPanel,\n\tinserterSidebarToggleRef,\n\tlistViewPanel,\n\tlistViewToggleRef,\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;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASU,wBAAwBA,CAAEV,KAAK,GAAG;EAAES,OAAO,EAAE;AAAK,CAAC,EAAG;EACrE,OAAOT,KAAK;AACb;AAEA,eAAeF,eAAe,CAAE;EAC/BO,kBAAkB;EAClBK,wBAAwB;EACxBH,aAAa;EACbC,iBAAiB;EACjBT;AACD,CAAE,CAAC","ignoreList":[]}

package/build-style/style-rtl.css

@@ -123,7 +123,8 @@
 
 .interface-complementary-area-header {
   background: #fff;
-  padding-left: 4px;
+  padding-left: 12px;
+  gap: 8px;
 }
 .interface-complementary-area-header .interface-complementary-area-header__title {
   margin: 0;
@@ -141,15 +142,11 @@
   }
 }
 
-@media (min-width: 782px) {
-  .components-panel__header + .interface-complementary-area-header {
-    margin-top: 0;
-  }
-}
-
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
+  height: 100%;
+  overflow: auto;
 }
 @media (min-width: 600px) {
   .interface-complementary-area {
@@ -171,11 +168,11 @@
   top: 0;
   z-index: 1;
 }
-.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+.interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
   top: 48px;
 }
 @media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
     top: 0;
   }
 }
@@ -184,6 +181,7 @@
 }
 .interface-complementary-area h2 {
   font-size: 13px;
+  font-weight: 500;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
@@ -215,6 +213,10 @@
   right: auto;
 }
 
+.interface-complementary-area__fill {
+  height: 100%;
+}
+
 @media (min-width: 782px) {
   body.js.is-fullscreen-mode {
     margin-top: -32px;
@@ -235,7 +237,7 @@ html.interface-interface-skeleton__html-container {
   width: 100%;
 }
 @media (min-width: 782px) {
-  html.interface-interface-skeleton__html-container {
+  html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
     position: initial;
     width: initial;
   }
@@ -307,6 +309,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-interface-skeleton__body {
+  position: relative;
   flex-grow: 1;
   display: flex;
   overflow: auto;
@@ -355,7 +358,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-interface-skeleton__sidebar {
-  overflow: auto;
+  overflow: hidden;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {
@@ -790,6 +793,9 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
 .edit-widgets-layout__inserter-panel-content {
   height: calc(100% - 36px - 8px);
 }
+.edit-widgets-layout__inserter-panel-content .block-editor-inserter-sidebar__header {
+  display: none;
+}
 @media (min-width: 782px) {
   .edit-widgets-layout__inserter-panel-content {
     height: 100%;

package/build-style/style.css

@@ -123,7 +123,8 @@
 
 .interface-complementary-area-header {
   background: #fff;
-  padding-right: 4px;
+  padding-right: 12px;
+  gap: 8px;
 }
 .interface-complementary-area-header .interface-complementary-area-header__title {
   margin: 0;
@@ -141,15 +142,11 @@
   }
 }
 
-@media (min-width: 782px) {
-  .components-panel__header + .interface-complementary-area-header {
-    margin-top: 0;
-  }
-}
-
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
+  height: 100%;
+  overflow: auto;
 }
 @media (min-width: 600px) {
   .interface-complementary-area {
@@ -171,11 +168,11 @@
   top: 0;
   z-index: 1;
 }
-.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+.interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
   top: 48px;
 }
 @media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
     top: 0;
   }
 }
@@ -184,6 +181,7 @@
 }
 .interface-complementary-area h2 {
   font-size: 13px;
+  font-weight: 500;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
@@ -215,6 +213,10 @@
   left: auto;
 }
 
+.interface-complementary-area__fill {
+  height: 100%;
+}
+
 @media (min-width: 782px) {
   body.js.is-fullscreen-mode {
     margin-top: -32px;
@@ -235,7 +237,7 @@ html.interface-interface-skeleton__html-container {
   width: 100%;
 }
 @media (min-width: 782px) {
-  html.interface-interface-skeleton__html-container {
+  html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
     position: initial;
     width: initial;
   }
@@ -307,6 +309,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-interface-skeleton__body {
+  position: relative;
   flex-grow: 1;
   display: flex;
   overflow: auto;
@@ -355,7 +358,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-interface-skeleton__sidebar {
-  overflow: auto;
+  overflow: hidden;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {
@@ -790,6 +793,9 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
 .edit-widgets-layout__inserter-panel-content {
   height: calc(100% - 36px - 8px);
 }
+.edit-widgets-layout__inserter-panel-content .block-editor-inserter-sidebar__header {
+  display: none;
+}
 @media (min-width: 782px) {
   .edit-widgets-layout__inserter-panel-content {
     height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "5.33.0",
+	"version": "5.35.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "^6.53.0",
-		"@wordpress/block-editor": "^12.24.0",
-		"@wordpress/block-library": "^8.33.0",
-		"@wordpress/blocks": "^12.33.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/core-data": "^6.33.0",
-		"@wordpress/data": "^9.26.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/interface": "^5.33.0",
-		"@wordpress/keyboard-shortcuts": "^4.33.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/media-utils": "^4.47.0",
-		"@wordpress/notices": "^4.24.0",
-		"@wordpress/patterns": "^1.17.0",
-		"@wordpress/plugins": "^6.24.0",
-		"@wordpress/preferences": "^3.33.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/reusable-blocks": "^4.33.0",
-		"@wordpress/url": "^3.57.0",
-		"@wordpress/widgets": "^3.33.0",
-		"classnames": "^2.3.1"
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/block-editor": "^12.26.0",
+		"@wordpress/block-library": "^8.35.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/core-data": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/interface": "^5.35.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/media-utils": "^4.49.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/patterns": "^1.19.0",
+		"@wordpress/plugins": "^6.26.0",
+		"@wordpress/preferences": "^3.35.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/reusable-blocks": "^4.35.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/widgets": "^3.35.0",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -62,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

package/src/blocks/widget-area/edit/inner-blocks.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export default function WidgetAreaInnerBlocks( { id } ) {
 	return (
 		<div
 			data-widget-area-id={ id }
-			className={ classnames(
+			className={ clsx(
 				'wp-block-widget-area__inner-blocks block-editor-inner-blocks editor-styles-wrapper',
 				{
 					'wp-block-widget-area__highlight-drop-zone':

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

@@ -4,13 +4,9 @@
 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 { NavigableToolbar } from '@wordpress/block-editor';
 import { listView, plus } from '@wordpress/icons';
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -18,75 +14,52 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 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 { useShowBlockTools } = unlock( blockEditorPrivateApis );
-
 function DocumentTools() {
 	const isMediumViewport = useViewportMatch( 'medium' );
-	const inserterButton = useRef();
-	const widgetAreaClientId = useLastSelectedWidgetArea();
-	const isLastSelectedWidgetAreaOpen = useSelect(
-		( select ) =>
-			select( editWidgetsStore ).getIsWidgetAreaOpen(
-				widgetAreaClientId
-			),
-		[ widgetAreaClientId ]
-	);
-	const { isInserterOpen, isListViewOpen, listViewToggleRef } = useSelect(
-		( select ) => {
-			const { isInserterOpened, isListViewOpened, getListViewToggleRef } =
-				unlock( select( editWidgetsStore ) );
-			return {
-				isInserterOpen: isInserterOpened(),
-				isListViewOpen: isListViewOpened(),
-				listViewToggleRef: getListViewToggleRef(),
-			};
-		},
-		[]
-	);
-	const { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =
+
+	const {
+		isInserterOpen,
+		isListViewOpen,
+		inserterSidebarToggleRef,
+		listViewToggleRef,
+	} = useSelect( ( select ) => {
+		const {
+			isInserterOpened,
+			getInserterSidebarToggleRef,
+			isListViewOpened,
+			getListViewToggleRef,
+		} = unlock( select( editWidgetsStore ) );
+		return {
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
+			listViewToggleRef: getListViewToggleRef(),
+		};
+	}, [] );
+	const { 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 ]
 	);
 
-	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
-	const { showFixedToolbar } = useShowBlockTools();
+	const toggleInserterSidebar = useCallback(
+		() => setIsInserterOpened( ! isInserterOpen ),
+		[ setIsInserterOpened, isInserterOpen ]
+	);
 
 	return (
 		<NavigableToolbar
 			className="edit-widgets-header-toolbar"
 			aria-label={ __( 'Document tools' ) }
-			shouldUseKeyboardFocusShortcut={ ! showFixedToolbar }
 			variant="unstyled"
 		>
 			<ToolbarItem
-				ref={ inserterButton }
+				ref={ inserterSidebarToggleRef }
 				as={ Button }
 				className="edit-widgets-header-toolbar__inserter-toggle"
 				variant="primary"
@@ -94,7 +67,7 @@ function DocumentTools() {
 				onMouseDown={ ( event ) => {
 					event.preventDefault();
 				} }
-				onClick={ handleClick }
+				onClick={ toggleInserterSidebar }
 				icon={ plus }
 				/* translators: button label text should, if possible, be under 16
 					characters. */

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -37,7 +37,16 @@ export const textFormattingShortcuts = [
 		description: __( 'Make the selected text inline code.' ),
 	},
 	{
-		keyCombination: { modifier: 'access', character: '0' },
+		keyCombination: {
+			modifier: 'access',
+			character: '0',
+		},
+		aliases: [
+			{
+				modifier: 'access',
+				character: '7',
+			},
+		],
 		description: __( 'Convert the current heading to a paragraph.' ),
 	},
 	{

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ const ShortcutList = ( { shortcuts } ) => (
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (
 	<section
-		className={ classnames(
+		className={ clsx(
 			'edit-widgets-keyboard-shortcut-help-modal__section',
 			className
 		) }

package/src/components/keyboard-shortcuts/index.js

@@ -7,11 +7,9 @@ import {
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { isAppleOS } from '@wordpress/keycodes';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -22,38 +20,6 @@ function KeyboardShortcuts() {
 	const { redo, undo } = useDispatch( coreStore );
 	const { saveEditedWidgetAreas } = useDispatch( editWidgetsStore );
 
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
-		useSelect( blockEditorStore );
-
-	const handleTextLevelShortcut = ( event, level ) => {
-		event.preventDefault();
-		const destinationBlockName =
-			level === 0 ? 'core/paragraph' : 'core/heading';
-		const currentClientId = getSelectedBlockClientId();
-		if ( currentClientId === null ) {
-			return;
-		}
-		const blockName = getBlockName( currentClientId );
-		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
-			return;
-		}
-		const attributes = getBlockAttributes( currentClientId );
-		const textAlign =
-			blockName === 'core/paragraph' ? 'align' : 'textAlign';
-		const destinationTextAlign =
-			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
-
-		replaceBlocks(
-			currentClientId,
-			createBlock( destinationBlockName, {
-				level,
-				content: attributes.content,
-				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
-			} )
-		);
-	};
-
 	useShortcut( 'core/edit-widgets/undo', ( event ) => {
 		undo();
 		event.preventDefault();
@@ -69,21 +35,6 @@ function KeyboardShortcuts() {
 		saveEditedWidgetAreas();
 	} );
 
-	useShortcut(
-		'core/edit-widgets/transform-heading-to-paragraph',
-		( event ) => handleTextLevelShortcut( event, 0 )
-	);
-
-	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-		//the loop is based off on a constant therefore
-		//the hook will execute the same way every time
-		//eslint-disable-next-line react-hooks/rules-of-hooks
-		useShortcut(
-			`core/edit-widgets/transform-paragraph-to-heading-${ level }`,
-			( event ) => handleTextLevelShortcut( event, level )
-		);
-	} );
-
 	return null;
 }
 
@@ -178,28 +129,6 @@ function KeyboardShortcutsRegister() {
 				},
 			],
 		} );
-
-		registerShortcut( {
-			name: 'core/edit-widgets/transform-heading-to-paragraph',
-			category: 'block-library',
-			description: __( 'Transform heading to paragraph.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: `0`,
-			},
-		} );
-
-		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-			registerShortcut( {
-				name: `core/edit-widgets/transform-paragraph-to-heading-${ level }`,
-				category: 'block-library',
-				description: __( 'Transform paragraph to heading.' ),
-				keyCombination: {
-					modifier: 'access',
-					character: `${ level }`,
-				},
-			} );
-		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/layout/style.scss

@@ -18,6 +18,10 @@
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
 
+	.block-editor-inserter-sidebar__header {
+		display: none;
+	}
+
 	@include break-medium() {
 		height: 100%;
 	}

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -8,7 +8,7 @@ import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -31,13 +31,10 @@ export default function InserterSidebar() {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: closeInserter,
-		focusOnMount: null,
+		focusOnMount: true,
 	} );
 
 	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
 
 	return (
 		<div

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

@@ -14,6 +14,7 @@ import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -27,6 +28,8 @@ import { unlock } from '../../lock-unlock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
+
 export default function WidgetAreasBlockEditorProvider( {
 	blockEditorSettings,
 	children,
@@ -111,6 +114,7 @@ export default function WidgetAreasBlockEditorProvider( {
 	return (
 		<SlotFillProvider>
 			<KeyboardShortcuts.Register />
+			<BlockKeyboardShortcuts />
 			<ExperimentalBlockEditorProvider
 				value={ blocks }
 				onInput={ onInput }

package/src/store/private-selectors.js

@@ -1,3 +1,7 @@
 export function getListViewToggleRef( state ) {
 	return state.listViewToggleRef;
 }
+
+export function getInserterSidebarToggleRef( state ) {
+	return state.inserterSidebarToggleRef;
+}

package/src/store/reducer.js

@@ -79,8 +79,21 @@ export function listViewToggleRef( state = { current: null } ) {
 	return state;
 }
 
+/**
+ * This reducer does nothing aside initializing a ref to the inserter sidebar toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the inserter sidebar toggle button.
+ */
+export function inserterSidebarToggleRef( state = { current: null } ) {
+	return state;
+}
+
 export default combineReducers( {
 	blockInserterPanel,
+	inserterSidebarToggleRef,
 	listViewPanel,
+	listViewToggleRef,
 	widgetAreasOpenState,
 } );