Restore fixed positionning for the footer

WordPress · Oct 23, 2019 · dbed385 · dbed385
1 parent a76b200
commit dbed385
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 23 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -60,7 +60,7 @@ function Layout( {
 } ) {
 	const sidebarIsOpened = editorSidebarOpened || pluginSidebarOpened || publishSidebarOpened;
 
-	const className = classnames( 'edit-post-layout', {
+	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
 		'is-sidebar-opened': sidebarIsOpened,
 		'has-fixed-toolbar': hasFixedToolbar,
 		'has-metaboxes': hasActiveMetaboxes,
@@ -81,7 +81,7 @@ function Layout( {
 			<LocalAutosaveMonitor />
 			<Header />
 			<div
-				className="edit-post-layout__content"
+				className="edit-post-layout__content edit-post-layout__scrollable-container"
 				role="region"
 				/* translators: accessibility text for the content landmark region. */
 				aria-label={ __( 'Editor content' ) }
@@ -92,23 +92,21 @@ function Layout( {
 				<KeyboardShortcutHelpModal />
 				<ManageBlocksModal />
 				<OptionsModal />
-				<div className="edit-post-layout__scrollable-container">
-					{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
-					{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
-					<div className="edit-post-layout__metaboxes">
-						<MetaBoxes location="normal" />
-					</div>
-					<div className="edit-post-layout__metaboxes">
-						<MetaBoxes location="advanced" />
-					</div>
-					{ isMobileViewport && sidebarIsOpened && <ScrollLock /> }
+				{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
+				{ isRichEditingEnabled && mode === 'visual' && <VisualEditor /> }
+				<div className="edit-post-layout__metaboxes">
+					<MetaBoxes location="normal" />
 				</div>
-				{ isRichEditingEnabled && mode === 'visual' && (
-					<div className="edit-post-layout__footer">
-						<BlockBreadcrumb />
-					</div>
-				) }
+				<div className="edit-post-layout__metaboxes">
+					<MetaBoxes location="advanced" />
+				</div>
+				{ isMobileViewport && sidebarIsOpened && <ScrollLock /> }
 			</div>
+			{ isRichEditingEnabled && mode === 'visual' && (
+				<div className="edit-post-layout__footer">
+					<BlockBreadcrumb />
+				</div>
+			) }
 			{ publishSidebarOpened ? (
 				<PostPublishPanel
 					{ ...publishLandmarkProps }

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -54,7 +54,7 @@
 		// Because the body element scrolls the navigation sidebar, we have to use position fixed here.
 		// Otherwise you would scroll the editing canvas out of view when you scroll the sidebar.
 		position: fixed;
-		bottom: 0;
+		bottom: $footer-height;
 		left: 0;
 		right: 0;
 
@@ -70,6 +70,12 @@
 		// Because we are beyond the medium breakpoint, we only have to worry about folded, auto-folded, and default.
 		margin-left: $admin-sidebar-width;
 
+		// Make room for the footer
+		.edit-post-layout.is-mode-visual & {
+			bottom: $footer-height;
+			min-height: calc(100% - #{ $header-height + $admin-bar-height + $footer-height });
+		}
+
 		// Auto fold is when on smaller breakpoints, nav menu auto colllapses.
 		body.auto-fold & {
 			margin-left: $admin-sidebar-width-collapsed;
@@ -217,18 +223,19 @@
 	// Stretch to mimic outline padding on desktop.
 	@include break-medium() {
 		display: flex;
+		position: fixed;
+		bottom: 0;
+		right: 0;
 		background: $white;
-		height: $icon-button-size-small;
+		height: $footer-height;
 		padding: 0 $grid-size;
 		align-items: center;
 		border-top: $border-width solid $light-gray-500;
 		font-size: $default-font-size;
-
-		.edit-post-layout.is-sidebar-opened & {
-			right: $sidebar-width;
-		}
+		box-sizing: border-box;
 	}
 }
+@include editor-left(".edit-post-layout__footer");
 
 .edit-post-layout__scrollable-container {
 	// On mobile the main content (html or body) area has to scroll.

diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
@@ -22,6 +22,10 @@
 	@include break-medium() {
 		top: $admin-bar-height + $header-height;
 
+		.edit-post-layout.is-mode-visual & {
+			bottom: $footer-height;
+		}
+
 		body.is-fullscreen-mode & {
 			top: $header-height;
 		}

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -1,3 +1,5 @@
+$footer-height: $icon-button-size-small;
+
 @import "./components/fullscreen-mode/style.scss";
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";