Refactor the layout component to separate the UI from the content.

packages/base-styles/_mixins.scss

@@ -312,21 +312,6 @@
 	}
 }
 
-/**
- * Applies editor right position to the selector passed as argument
- */
-
-@mixin editor-right($selector) {
-	#{ $selector } {
-		right: 0;
-	}
-
-	.edit-post-layout.is-sidebar-opened #{ $selector } {
-		right: $sidebar-width;
-	}
-}
-
-
 /**
  * Styles that are reused verbatim in a few places
  */

packages/base-styles/_z-index.scss

@@ -25,7 +25,7 @@ $z-layers: (
 	".block-library-gallery-item__inline-menu": 20,
 	".block-editor-url-input__suggestions": 30,
 	".edit-post-layout__footer": 30,
-	".edit-post-header": 30,
+	".edit-post-editor-regions__header": 30,
 	".edit-widgets-header": 30,
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
 	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
@@ -66,7 +66,7 @@ $z-layers: (
 
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
-	".edit-post-sidebar": 100000,
+	".edit-post-editor-regions__sidebar": 100000,
 	".edit-widgets-sidebar": 100000,
 	".edit-post-layout .edit-post-post-publish-panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be at top of
@@ -75,7 +75,8 @@ $z-layers: (
 
 	// Show sidebar in greater than small viewports above editor related elements
 	// but bellow #adminmenuback { z-index: 100 }
-	".edit-post-sidebar {greater than small}": 90,
+	".edit-post-editor-regions__sidebar {greater than small}": 90,
+	".edit-widgets-sidebar {greater than small}": 90,
 
 	// Show notices below expanded editor bar
 	// .edit-post-header { z-index: 30 }
@@ -102,7 +103,7 @@ $z-layers: (
 	".components-autocomplete__results": 1000000,
 
 	".skip-to-selected-block": 100000,
-	".edit-post-toggle-publish-panel": 100000,
+	".edit-post-editor-regions__publish": 100000,
 
 	// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
 	".nux-dot-tip": 1000001,

packages/components/src/higher-order/navigate-regions/style.scss

@@ -1,4 +1,6 @@
 .components-navigate-regions.is-focusing-regions [role="region"] {
+	position: relative;
+
 	// For browsers that don't support outline-offset (IE11).
 	&:focus::after {
 		content: "";

packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js

@@ -82,7 +82,6 @@ describe( 'Navigating the block hierarchy', () => {
 		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyTimes( 'Tab', 4 );
 
 		// Tweak the columns count by increasing it by one.

packages/e2e-tests/specs/editor/various/sidebar.test.js

@@ -91,7 +91,6 @@ describe( 'Sidebar', () => {
 		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
 
 		// Tab lands at first (presumed selected) option "Document".
 		await page.keyboard.press( 'Tab' );

packages/edit-post/src/components/editor-regions/index.js

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { navigateRegions } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function EditorRegions( { footer, header, sidebar, content, publish, className } ) {
+	return (
+		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
+			{ !! header && (
+				<div
+					className="edit-post-editor-regions__header"
+					role="region"
+					/* translators: accessibility text for the top bar landmark region. */
+					aria-label={ __( 'Editor top bar' ) }
+					tabIndex="-1"
+				>
+					{ header }
+				</div>
+			) }
+			<div className="edit-post-editor-regions__body">
+				<div
+					className="edit-post-editor-regions__content"
+					role="region"
+					/* translators: accessibility text for the content landmark region. */
+					aria-label={ __( 'Editor content' ) }
+					tabIndex="-1"
+				>
+					{ content }
+				</div>
+				{ !! publish && (
+					<div
+						className="edit-post-editor-regions__publish"
+						role="region"
+						/* translators: accessibility text for the publish landmark region. */
+						aria-label={ __( 'Editor publish' ) }
+						tabIndex="-1"
+					>
+						{ publish }
+					</div>
+				) }
+				{ !! sidebar && (
+					<div
+						className="edit-post-editor-regions__sidebar"
+						role="region"
+						aria-label={ 'Editor settings' }
+						tabIndex="-1"
+					>
+						{ sidebar }
+					</div>
+				) }
+			</div>
+			{ !! footer && (
+				<div
+					className="edit-post-editor-regions__footer"
+					role="region"
+					aria-label={ 'Editor footer' }
+					tabIndex="-1"
+				>
+					{ footer }
+				</div>
+			) }
+		</div>
+	);
+}
+
+export default navigateRegions( EditorRegions );

packages/edit-post/src/components/editor-regions/style.scss

@@ -0,0 +1,118 @@
+.edit-post-editor-regions {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	max-height: 100%;
+	position: relative;
+
+	// On Mobile keep a margin for the header and admin header
+	// as both of these are fixed
+	top: 0;
+	@include break-medium() {
+		margin-top: 0;
+
+		// On Desktop position the container as fixed to avoid scroll bleed.
+		position: fixed;
+		top: $admin-bar-height;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: auto;
+		.is-fullscreen-mode & {
+			top: 0;
+		}
+	}
+}
+@include editor-left(".edit-post-editor-regions");
+
+.edit-post-editor-regions__body {
+	flex-grow: 1;
+	display: flex;
+
+	// On Mobile the header is fixed to keep HTML as scrollable.
+	@include break-medium() {
+		overflow: auto;
+	}
+}
+
+.edit-post-editor-regions__content {
+	flex-grow: 1;
+
+	// On Mobile the header is fixed to keep HTML as scrollable.
+	@include break-medium() {
+		overflow: auto;
+	}
+}
+
+.edit-post-editor-regions__sidebar {
+	width: auto; // Keep the sidebar width flexible.
+	flex-shrink: 0;
+	position: fixed !important; // Need to override the default relative positionning
+	z-index: z-index(".edit-post-editor-regions__sidebar");
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: $white;
+
+	&:empty {
+		display: none;
+	}
+
+	// On Mobile the header is fixed to keep HTML as scrollable.
+	@include break-medium() {
+		overflow: auto;
+		border-left: $border-width solid $light-gray-500;
+		position: relative !important;
+		z-index: z-index(".edit-post-editor-regions__sidebar {greater than small}");
+	}
+}
+
+.edit-post-editor-regions__header {
+	flex-shrink: 0;
+	height: auto;  // Keep the height flexible.
+	border-bottom: $border-width solid $light-gray-500;
+	z-index: z-index(".edit-post-editor-regions__header");
+
+	// On Mobile the header is sticky.
+	position: sticky;
+	top: 0;
+
+	@include break-small() {
+		top: $admin-bar-height-big; // The top bar is fixed on this breakpoint.
+	}
+
+	@include break-medium() {
+		// Cancel the fixed positionning used in mobile.
+		position: initial;
+		top: 0;
+	}
+}
+
+.edit-post-editor-regions__footer {
+	height: auto;  // Keep the height flexible.
+	flex-shrink: 0;
+	overflow: auto;
+	border-top: $border-width solid $light-gray-500;
+
+	// On Mobile the footer is hidden
+	display: none;
+	@include break-medium() {
+		display: block;
+	}
+}
+
+.edit-post-editor-regions__publish {
+	z-index: z-index(".edit-post-editor-regions__publish");
+	position: fixed !important; // Need to override the default relative positionning
+	top: -9999em;
+	bottom: auto;
+	left: auto;
+	right: 0;
+	width: $sidebar-width;
+
+	&:focus {
+		top: auto;
+		bottom: 0;
+	}
+}

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -26,7 +26,7 @@
 .edit-post-header-toolbar__block-toolbar {
 	// Stack toolbar below Editor Bar.
 	position: absolute;
-	top: $header-height;
+	top: $header-height + 1px;
 	left: 0;
 	right: 0;
 	background: $white;

packages/edit-post/src/components/header/index.js

@@ -32,13 +32,7 @@ function Header( {
 	const toggleGeneralSidebar = isEditorSidebarOpened ? closeGeneralSidebar : openGeneralSidebar;
 
 	return (
-		<div
-			role="region"
-			/* translators: accessibility text for the top bar landmark region. */
-			aria-label={ __( 'Editor top bar' ) }
-			className="edit-post-header"
-			tabIndex="-1"
-		>
+		<div className="edit-post-header">
 			<div className="edit-post-header__toolbar">
 				<FullscreenModeClose />
 				<HeaderToolbar />

packages/edit-post/src/components/header/style.scss

@@ -1,39 +1,21 @@
 .edit-post-header {
 	height: $header-height;
 	padding: $grid-size-small 2px;
-	border-bottom: $border-width solid $light-gray-500;
 	background: $white;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
 	align-items: center;
 	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
-	z-index: z-index(".edit-post-header");
-	left: 0;
-	right: 0;
 
 	// Make toolbar sticky on larger breakpoints
 	@include break-zoomed-in {
-		height: $header-height;
-		top: 0;
-		position: sticky;
 		flex-wrap: nowrap;
 	}
 
-	// On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container.
 	@include break-small {
-		position: fixed;
 		padding: $grid-size;
-		top: $admin-bar-height-big;
-	}
-
-	@include break-medium() {
-		top: $admin-bar-height;
-
-		body.is-fullscreen-mode & {
-			top: 0;
-		}
 	}
 
 	// Some browsers, most notably IE11, honor an older version of the flexbox spec
@@ -55,8 +37,6 @@
 	}
 }
 
-@include editor-left(".edit-post-header");
-
 .edit-post-header__toolbar {
 	display: flex;
 }