@wordpress/edit-site 4.15.1-next.4d3b314fd5.0 → 4.17.0

package/build-style/style.css

@@ -707,7 +707,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   display: block;
 }
 
-.edit-site-typography-panel__preview {
+.edit-site-typography-preview {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -787,7 +787,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   border: var(--wp-admin-theme-color) 1px solid;
 }
 .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-  border: var(--wp-admin-theme-color) 1px solid;
+  border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
 }
 
 .edit-site-global-styles-icon-with-current-color {
@@ -805,7 +805,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   text-overflow: ellipsis;
 }
 
-.edit-site-header {
+.edit-site-header-edit-mode {
   align-items: center;
   background-color: #fff;
   display: flex;
@@ -814,26 +814,26 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   width: 100%;
   justify-content: space-between;
 }
-body.is-fullscreen-mode .edit-site-header {
+body.is-fullscreen-mode .edit-site-header-edit-mode {
   padding-left: 60px;
   transition: padding-left 20ms linear;
   transition-delay: 80ms;
 }
 @media (prefers-reduced-motion: reduce) {
-  body.is-fullscreen-mode .edit-site-header {
+  body.is-fullscreen-mode .edit-site-header-edit-mode {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-site-header .edit-site-header_start {
+.edit-site-header-edit-mode .edit-site-header-edit-mode__start {
   display: flex;
   border: none;
 }
-.edit-site-header .edit-site-header_end {
+.edit-site-header-edit-mode .edit-site-header-edit-mode__end {
   display: flex;
   justify-content: flex-end;
 }
-.edit-site-header .edit-site-header_center {
+.edit-site-header-edit-mode .edit-site-header-edit-mode__center {
   display: flex;
   align-items: center;
   height: 100%;
@@ -842,187 +842,162 @@ body.is-fullscreen-mode .edit-site-header {
   min-width: 0;
 }
 
-body.is-navigation-sidebar-open .edit-site-header {
+body.is-navigation-sidebar-open .edit-site-header-edit-mode {
   padding-left: 0;
   transition: padding-left 20ms linear;
   transition-delay: 0ms;
 }
 @media (prefers-reduced-motion: reduce) {
-  body.is-navigation-sidebar-open .edit-site-header {
+  body.is-navigation-sidebar-open .edit-site-header-edit-mode {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 
 @media (max-width: 959px) {
-  body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle ~ .components-button,
-body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary) {
+  body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-header-edit-mode__inserter-toggle ~ .components-button,
+body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-header-edit-mode__end .components-button:not(.is-primary) {
     display: none;
   }
-  body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button {
+  body.is-navigation-sidebar-open .edit-site-header-edit-mode .edit-site-save-button__button {
     margin-right: 0;
   }
 }
-.edit-site-header__toolbar {
+.edit-site-header-edit-mode__toolbar {
   display: flex;
   align-items: center;
   padding-left: 8px;
 }
 @media (min-width: 600px) {
-  .edit-site-header__toolbar {
+  .edit-site-header-edit-mode__toolbar {
     padding-left: 24px;
   }
 }
 @media (min-width: 1280px) {
-  .edit-site-header__toolbar {
+  .edit-site-header-edit-mode__toolbar {
     padding-right: 8px;
   }
 }
-.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle {
+.edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle {
   margin-right: 8px;
   min-width: 32px;
   width: 32px;
   height: 32px;
   padding: 0;
 }
-.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg {
+.edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle svg {
   transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg {
+  .edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle svg {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
-.edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg {
+.edit-site-header-edit-mode__toolbar .edit-site-header-edit-mode__inserter-toggle.is-pressed svg {
   transform: rotate(45deg);
 }
 
-.edit-site-header__toolbar-switchers {
-  align-items: center;
-  display: flex;
-}
-
-.edit-site-header__toolbar-switchers-separator {
-  margin: 0 -6px 0;
-}
-
 /**
  * Buttons on the right side
  */
-.edit-site-header__actions {
+.edit-site-header-edit-mode__actions {
   display: inline-flex;
   align-items: center;
   padding-right: 4px;
   gap: 4px;
 }
 @media (min-width: 600px) {
-  .edit-site-header__actions {
+  .edit-site-header-edit-mode__actions {
     padding-right: 10px;
   }
 }
 @media (min-width: 600px) {
-  .edit-site-header__actions {
+  .edit-site-header-edit-mode__actions {
     gap: 8px;
   }
 }
-.edit-site-header__actions .interface-pinned-items {
+.edit-site-header-edit-mode__actions .interface-pinned-items {
   display: none;
 }
 @media (min-width: 782px) {
-  .edit-site-header__actions .interface-pinned-items {
+  .edit-site-header-edit-mode__actions .interface-pinned-items {
     display: inline-flex;
   }
 }
 
-.edit-site-header__actions__preview-options {
+.edit-site-header-edit-mode__preview-options {
   opacity: 1;
   transition: opacity 0.3s;
 }
-.edit-site-header__actions__preview-options.is-zoomed-out {
+.edit-site-header-edit-mode__preview-options.is-zoomed-out {
   opacity: 0;
 }
 
-.edit-site-header__actions-more-menu {
-  margin-left: -4px;
-}
-.edit-site-header__actions-more-menu .components-icon-button {
-  padding: 8px 2px;
-  width: auto;
-}
-@media (min-width: 600px) {
-  .edit-site-header__actions-more-menu {
-    margin-left: 4px;
-  }
-  .edit-site-header__actions-more-menu .components-icon-button {
-    padding: 8px 4px;
-  }
-}
-
-.edit-site-header_start {
+.edit-site-header-edit-mode__start {
   display: flex;
   border: none;
 }
-.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon,
-.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon,
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
   height: 36px;
   min-width: 36px;
   padding: 6px;
 }
-.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon.is-pressed,
-.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon.is-pressed,
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
   background: #1e1e1e;
 }
-.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon:focus:not(:disabled),
-.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon:focus:not(:disabled),
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
   outline: 1px solid transparent;
 }
-.edit-site-header_start .edit-site-header__toolbar > .components-button.has-icon::before,
-.edit-site-header_start .edit-site-header__toolbar > .components-dropdown > .components-button.has-icon::before {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-button.has-icon::before,
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon::before {
   display: none;
 }
-.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
   margin-right: 8px;
   min-width: 32px;
   width: 32px;
   height: 32px;
   padding: 0;
 }
-.edit-site-header_start .edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
+.edit-site-header-edit-mode__start .edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
   width: auto;
   padding: 0 8px;
 }
 
-.show-icon-labels .edit-site-header .components-button.has-icon {
+.show-icon-labels .edit-site-header-edit-mode .components-button.has-icon {
   width: auto;
 }
-.show-icon-labels .edit-site-header .components-button.has-icon svg {
+.show-icon-labels .edit-site-header-edit-mode .components-button.has-icon svg {
   display: none;
 }
-.show-icon-labels .edit-site-header .components-button.has-icon::after {
+.show-icon-labels .edit-site-header-edit-mode .components-button.has-icon::after {
   content: attr(aria-label);
 }
-.show-icon-labels .edit-site-header .components-button.has-icon[aria-disabled=true] {
+.show-icon-labels .edit-site-header-edit-mode .components-button.has-icon[aria-disabled=true] {
   background-color: transparent;
 }
-.show-icon-labels .edit-site-header .is-tertiary:active {
+.show-icon-labels .edit-site-header-edit-mode .is-tertiary:active {
   box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
   background-color: transparent;
 }
-.show-icon-labels .edit-site-header .edit-site-save-button__button {
+.show-icon-labels .edit-site-header-edit-mode .edit-site-save-button__button {
   padding-left: 6px;
   padding-right: 6px;
 }
-.show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
+.show-icon-labels .edit-site-header-edit-mode .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
   content: none;
 }
-.show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
-.show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
+.show-icon-labels .edit-site-header-edit-mode .edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
+.show-icon-labels .edit-site-header-edit-mode .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
   height: 36px;
   padding: 0 8px;
 }
-.show-icon-labels .edit-site-header .edit-site-header_start .edit-site-header__toolbar > * + * {
+.show-icon-labels .edit-site-header-edit-mode .edit-site-header__start .edit-site-header__toolbar > * + * {
   margin-left: 8px;
 }
 
@@ -1638,19 +1613,19 @@ body.is-fullscreen-mode .edit-site-list-header {
   height: 100%;
 }
 
-.edit-site-sidebar {
+.edit-site-sidebar-edit-mode {
   width: 280px;
 }
-.edit-site-sidebar > .components-panel {
+.edit-site-sidebar-edit-mode > .components-panel {
   border-left: 0;
   border-right: 0;
   margin-bottom: -1px;
   margin-top: -1px;
 }
-.edit-site-sidebar > .components-panel > .components-panel__header {
+.edit-site-sidebar-edit-mode > .components-panel > .components-panel__header {
   background: #f0f0f0;
 }
-.edit-site-sidebar .block-editor-block-inspector__card {
+.edit-site-sidebar-edit-mode .block-editor-block-inspector__card {
   margin: 0;
 }
 
@@ -1690,7 +1665,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
-.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+.edit-site-global-styles-sidebar .single-column {
   grid-column: span 1;
 }
 
@@ -1729,20 +1704,20 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
-.components-panel__header.edit-site-sidebar__panel-tabs {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;
   padding-right: 16px;
   border-top: 0;
   margin-top: 0;
 }
-.components-panel__header.edit-site-sidebar__panel-tabs ul {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs ul {
   display: flex;
 }
-.components-panel__header.edit-site-sidebar__panel-tabs li {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs li {
   margin: 0;
 }
-.components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs .components-button.has-icon {
   display: none;
   margin: 0 0 0 auto;
   padding: 0;
@@ -1750,12 +1725,12 @@ body.is-fullscreen-mode .edit-site-list-header {
   height: 24px;
 }
 @media (min-width: 782px) {
-  .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon {
+  .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs .components-button.has-icon {
     display: flex;
   }
 }
 
-.components-button.edit-site-sidebar__panel-tab {
+.components-button.edit-site-sidebar-edit-mode__panel-tab {
   border-radius: 0;
   height: 48px;
   background: transparent;
@@ -1767,7 +1742,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-left: 0;
   font-weight: 500;
 }
-.components-button.edit-site-sidebar__panel-tab::after {
+.components-button.edit-site-sidebar-edit-mode__panel-tab::after {
   content: attr(data-label);
   display: block;
   font-weight: 600;
@@ -1776,12 +1751,12 @@ body.is-fullscreen-mode .edit-site-list-header {
   speak: none;
   visibility: hidden;
 }
-.components-button.edit-site-sidebar__panel-tab.is-active {
+.components-button.edit-site-sidebar-edit-mode__panel-tab.is-active {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
   position: relative;
   z-index: 1;
 }
-.components-button.edit-site-sidebar__panel-tab.is-active::before {
+.components-button.edit-site-sidebar-edit-mode__panel-tab.is-active::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1790,12 +1765,12 @@ body.is-fullscreen-mode .edit-site-list-header {
   left: 0;
   border-bottom: 1.5px solid transparent;
 }
-.components-button.edit-site-sidebar__panel-tab:focus {
+.components-button.edit-site-sidebar-edit-mode__panel-tab:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   position: relative;
   z-index: 1;
 }
-.components-button.edit-site-sidebar__panel-tab.is-active:focus {
+.components-button.edit-site-sidebar-edit-mode__panel-tab.is-active:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.15.1-next.4d3b314fd5.0",
+	"version": "4.17.0",
 	"description": "Edit Site 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/a11y": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/api-fetch": "^6.15.1-next.4d3b314fd5.0",
-		"@wordpress/block-editor": "^10.1.1-next.4d3b314fd5.0",
-		"@wordpress/block-library": "^7.15.1-next.4d3b314fd5.0",
-		"@wordpress/blocks": "^11.18.1-next.4d3b314fd5.0",
-		"@wordpress/components": "^21.1.2-next.4d3b314fd5.0",
-		"@wordpress/compose": "^5.16.1-next.4d3b314fd5.0",
-		"@wordpress/core-data": "^5.1.1-next.4d3b314fd5.0",
-		"@wordpress/data": "^7.2.1-next.4d3b314fd5.0",
-		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/editor": "^12.17.1-next.4d3b314fd5.0",
-		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/hooks": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/html-entities": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/i18n": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/icons": "^9.9.1-next.4d3b314fd5.0",
-		"@wordpress/interface": "^4.17.1-next.4d3b314fd5.0",
-		"@wordpress/keyboard-shortcuts": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/media-utils": "^4.9.1-next.4d3b314fd5.0",
-		"@wordpress/notices": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/plugins": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/preferences": "^2.10.1-next.4d3b314fd5.0",
-		"@wordpress/reusable-blocks": "^3.16.1-next.4d3b314fd5.0",
-		"@wordpress/style-engine": "^1.1.1-next.4d3b314fd5.0",
-		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
-		"@wordpress/viewport": "^4.16.1-next.4d3b314fd5.0",
+		"@wordpress/a11y": "^3.20.0",
+		"@wordpress/api-fetch": "^6.17.0",
+		"@wordpress/block-editor": "^10.3.0",
+		"@wordpress/block-library": "^7.17.0",
+		"@wordpress/blocks": "^11.19.0",
+		"@wordpress/components": "^21.3.0",
+		"@wordpress/compose": "^5.18.0",
+		"@wordpress/core-data": "^5.3.0",
+		"@wordpress/data": "^7.4.0",
+		"@wordpress/deprecated": "^3.20.0",
+		"@wordpress/editor": "^12.19.0",
+		"@wordpress/element": "^4.18.0",
+		"@wordpress/hooks": "^3.20.0",
+		"@wordpress/html-entities": "^3.20.0",
+		"@wordpress/i18n": "^4.20.0",
+		"@wordpress/icons": "^9.11.0",
+		"@wordpress/interface": "^4.19.0",
+		"@wordpress/keyboard-shortcuts": "^3.18.0",
+		"@wordpress/keycodes": "^3.20.0",
+		"@wordpress/media-utils": "^4.11.0",
+		"@wordpress/notices": "^3.20.0",
+		"@wordpress/plugins": "^4.18.0",
+		"@wordpress/preferences": "^2.12.0",
+		"@wordpress/reusable-blocks": "^3.18.0",
+		"@wordpress/style-engine": "^1.3.0",
+		"@wordpress/url": "^3.21.0",
+		"@wordpress/viewport": "^4.18.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
+	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
 }

package/src/components/block-editor/block-inspector-button.js

@@ -13,7 +13,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import { store as editSiteStore } from '../../store';
 import { STORE_NAME } from '../../store/constants';
-import { SIDEBAR_BLOCK } from '../sidebar/constants';
+import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 
 export default function BlockInspectorButton( { onClick = () => {} } ) {
 	const { shortcut, isBlockInspectorOpen } = useSelect(

package/src/components/block-editor/index.js

@@ -34,7 +34,7 @@ import { store as interfaceStore } from '@wordpress/interface';
  */
 import TemplatePartConverter from '../template-part-converter';
 import NavigateToLink from '../navigate-to-link';
-import { SidebarInspectorFill } from '../sidebar';
+import { SidebarInspectorFill } from '../sidebar-edit-mode';
 import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
 import BackButton from './back-button';
@@ -46,8 +46,16 @@ const LAYOUT = {
 	alignments: [],
 };
 
+const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
+
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { storedSettings, templateType, templateId, page } = useSelect(
+	const {
+		storedSettings,
+		templateType,
+		templateId,
+		page,
+		isNavigationSidebarOpen,
+	} = useSelect(
 		( select ) => {
 			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
 				select( editSiteStore );
@@ -57,6 +65,10 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				templateType: getEditedPostType(),
 				templateId: getEditedPostId(),
 				page: getPage(),
+				isNavigationSidebarOpen:
+					select( interfaceStore ).getActiveComplementaryArea(
+						editSiteStore.name
+					) === NAVIGATION_SIDEBAR_NAME,
 			};
 		},
 		[ setIsInserterOpen ]
@@ -129,13 +141,14 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		templateType
 	);
 	const { setPage } = useDispatch( editSiteStore );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const openNavigationSidebar = useCallback( () => {
-		enableComplementaryArea(
-			'core/edit-site',
-			'edit-site/navigation-menu'
-		);
-	}, [ enableComplementaryArea ] );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
+	const toggleNavigationSidebar = useCallback( () => {
+		const toggleComplementaryArea = isNavigationSidebarOpen
+			? disableComplementaryArea
+			: enableComplementaryArea;
+		toggleComplementaryArea( editSiteStore.name, NAVIGATION_SIDEBAR_NAME );
+	}, [ isNavigationSidebarOpen ] );
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -148,9 +161,14 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		<ToolbarGroup>
 			<ToolbarButton
 				className="components-toolbar__control"
-				label={ __( 'Open list view' ) }
-				onClick={ openNavigationSidebar }
+				label={
+					isNavigationSidebarOpen
+						? __( 'Close list view' )
+						: __( 'Open list view' )
+				}
+				onClick={ toggleNavigationSidebar }
 				icon={ listView }
+				isActive={ isNavigationSidebarOpen }
 			/>
 		</ToolbarGroup>
 	);

package/src/components/block-editor/resizable-editor.js

@@ -57,38 +57,14 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 
 	useEffect(
 		function autoResizeIframeHeight() {
-			const iframe = iframeRef.current;
-
-			if ( ! iframe || ! enableResizing ) {
+			if ( ! iframeRef.current || ! enableResizing ) {
 				return;
 			}
 
-			let timeoutId = null;
-
-			function resizeHeight() {
-				if ( ! timeoutId ) {
-					// Throttle the updates on timeout. This code previously
-					// used `requestAnimationFrame`, but that seems to not
-					// always work before an iframe is ready.
-					timeoutId = iframe.contentWindow.setTimeout( () => {
-						const { readyState } = iframe.contentDocument;
-
-						// Continue deferring the timeout until the document is ready.
-						// Only then will it have a height.
-						if (
-							readyState !== 'interactive' &&
-							readyState !== 'complete'
-						) {
-							resizeHeight();
-							return;
-						}
-
-						setHeight( iframe.contentDocument.body.scrollHeight );
-						timeoutId = null;
-
-						// 30 frames per second.
-					}, 1000 / 30 );
-				}
+			const iframe = iframeRef.current;
+
+			function setFrameHeight() {
+				setHeight( iframe.contentDocument.body.scrollHeight );
 			}
 
 			let resizeObserver;
@@ -97,28 +73,23 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				resizeObserver?.disconnect();
 
 				resizeObserver = new iframe.contentWindow.ResizeObserver(
-					resizeHeight
+					setFrameHeight
 				);
 
 				// Observe the body, since the `html` element seems to always
 				// have a height of `100%`.
 				resizeObserver.observe( iframe.contentDocument.body );
-
-				resizeHeight();
+				setFrameHeight();
 			}
 
-			// This is only required in Firefox for some unknown reasons.
 			iframe.addEventListener( 'load', registerObserver );
-			// This is required in Chrome and Safari.
-			registerObserver();
 
 			return () => {
-				iframe.contentWindow?.clearTimeout( timeoutId );
 				resizeObserver?.disconnect();
 				iframe.removeEventListener( 'load', registerObserver );
 			};
 		},
-		[ enableResizing ]
+		[ enableResizing, iframeRef.current ]
 	);
 
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {

package/src/components/editor/index.js

@@ -8,7 +8,6 @@ import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import {
 	BlockContextProvider,
 	BlockBreadcrumb,
-	BlockStyles,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
@@ -31,8 +30,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
 /**
  * Internal dependencies
  */
-import Header from '../header';
-import { SidebarComplementaryAreaFills } from '../sidebar';
+import Header from '../header-edit-mode';
+import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
 import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
@@ -260,7 +259,6 @@ function Editor( { onError } ) {
 											content={
 												<>
 													<EditorNotices />
-													<BlockStyles.Slot scope="core/block-inspector" />
 													{ editorMode === 'visual' &&
 														template && (
 															<BlockEditor