@wordpress/edit-site 4.16.0 → 4.18.0

package/build-style/style.css

@@ -549,6 +549,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas {
   border-radius: 2px;
+  max-height: 100%;
 }
 .edit-site-visual-editor.is-focus-mode .components-resizable-box__container {
   overflow: visible;
@@ -715,6 +716,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin-bottom: 16px;
   background: #f0f0f0;
   border-radius: 2px;
+  overflow: hidden;
 }
 
 .edit-site-typography-panel__full-width-control {
@@ -805,7 +807,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 +816,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 +844,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 +1615,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;
 }
 
@@ -1729,20 +1706,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 +1727,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 +1744,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 +1753,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 +1767,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.16.0",
+	"version": "4.18.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.19.0",
-		"@wordpress/api-fetch": "^6.16.0",
-		"@wordpress/block-editor": "^10.2.0",
-		"@wordpress/block-library": "^7.16.0",
-		"@wordpress/blocks": "^11.18.0",
-		"@wordpress/components": "^21.2.0",
-		"@wordpress/compose": "^5.17.0",
-		"@wordpress/core-data": "^5.2.0",
-		"@wordpress/data": "^7.3.0",
-		"@wordpress/deprecated": "^3.19.0",
-		"@wordpress/editor": "^12.18.0",
-		"@wordpress/element": "^4.17.0",
-		"@wordpress/hooks": "^3.19.0",
-		"@wordpress/html-entities": "^3.19.0",
-		"@wordpress/i18n": "^4.19.0",
-		"@wordpress/icons": "^9.10.0",
-		"@wordpress/interface": "^4.18.0",
-		"@wordpress/keyboard-shortcuts": "^3.17.0",
-		"@wordpress/keycodes": "^3.19.0",
-		"@wordpress/media-utils": "^4.10.0",
-		"@wordpress/notices": "^3.19.0",
-		"@wordpress/plugins": "^4.17.0",
-		"@wordpress/preferences": "^2.11.0",
-		"@wordpress/reusable-blocks": "^3.17.0",
-		"@wordpress/style-engine": "^1.2.0",
-		"@wordpress/url": "^3.20.0",
-		"@wordpress/viewport": "^4.17.0",
+		"@wordpress/a11y": "^3.21.0",
+		"@wordpress/api-fetch": "^6.18.0",
+		"@wordpress/block-editor": "^10.4.0",
+		"@wordpress/block-library": "^7.18.0",
+		"@wordpress/blocks": "^11.20.0",
+		"@wordpress/components": "^22.0.0",
+		"@wordpress/compose": "^5.19.0",
+		"@wordpress/core-data": "^5.4.0",
+		"@wordpress/data": "^7.5.0",
+		"@wordpress/deprecated": "^3.21.0",
+		"@wordpress/editor": "^12.20.0",
+		"@wordpress/element": "^4.19.0",
+		"@wordpress/hooks": "^3.21.0",
+		"@wordpress/html-entities": "^3.21.0",
+		"@wordpress/i18n": "^4.21.0",
+		"@wordpress/icons": "^9.12.0",
+		"@wordpress/interface": "^4.20.0",
+		"@wordpress/keyboard-shortcuts": "^3.19.0",
+		"@wordpress/keycodes": "^3.21.0",
+		"@wordpress/media-utils": "^4.12.0",
+		"@wordpress/notices": "^3.21.0",
+		"@wordpress/plugins": "^4.19.0",
+		"@wordpress/preferences": "^2.13.0",
+		"@wordpress/reusable-blocks": "^3.19.0",
+		"@wordpress/style-engine": "^1.4.0",
+		"@wordpress/url": "^3.22.0",
+		"@wordpress/viewport": "^4.19.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
+	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
 }

package/src/components/app/index.js

@@ -17,7 +17,7 @@ import List from '../list';
 import NavigationSidebar from '../navigation-sidebar';
 import getIsListPage from '../../utils/get-is-list-page';
 
-export default function EditSiteApp( { reboot } ) {
+export default function EditSiteApp( { reboot, homeTemplate } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -40,6 +40,13 @@ export default function EditSiteApp( { reboot } ) {
 				{ ( { params } ) => {
 					const isListPage = getIsListPage( params );
 
+					// The existence of a 'front-page' supersedes every other setting.
+					const homeTemplateType =
+						params.postId?.includes( 'front-page' ) ||
+						params.postId === homeTemplate?.postId
+							? 'site-editor'
+							: undefined;
+
 					return (
 						<>
 							{ isListPage ? (
@@ -54,7 +61,9 @@ export default function EditSiteApp( { reboot } ) {
 								// Open the navigation sidebar by default when in the list page.
 								isDefaultOpen={ !! isListPage }
 								activeTemplateType={
-									isListPage ? params.postType : undefined
+									isListPage
+										? params.postType
+										: homeTemplateType
 								}
 							/>
 						</>

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/style.scss

@@ -23,6 +23,7 @@
 
 		.edit-site-visual-editor__editor-canvas {
 			border-radius: $radius-block-ui;
+			max-height: 100%;
 		}
 
 		// To hide the horizontal scrollbar and show the drag handle on the