Use flexbox to align the block breadcrumb

WordPress · Oct 18, 2019 · f9e579f · f9e579f
1 parent 619d37f
commit f9e579f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 95 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -92,21 +92,22 @@ function Layout( {
 				<KeyboardShortcutHelpModal />
 				<ManageBlocksModal />
 				<OptionsModal />
-				{ ( mode === 'text' || ! isRichEditingEnabled ) && <TextEditor /> }
+				<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 /> }
+				</div>
 				{ isRichEditingEnabled && mode === 'visual' && (
-					<>
-						<VisualEditor />
-						<div className="edit-post-layout__footer">
-							<BlockBreadcrumb />
-						</div>
-					</>
+					<div className="edit-post-layout__footer">
+						<BlockBreadcrumb />
+					</div>
 				) }
-				<div className="edit-post-layout__metaboxes">
-					<MetaBoxes location="normal" />
-				</div>
-				<div className="edit-post-layout__metaboxes">
-					<MetaBoxes location="advanced" />
-				</div>
 			</div>
 			{ publishSidebarOpened ? (
 				<PostPublishPanel
@@ -132,9 +133,6 @@ function Layout( {
 					</div>
 					<SettingsSidebar />
 					<Sidebar.Slot />
-					{
-						isMobileViewport && sidebarIsOpened && <ScrollLock />
-					}
 				</>
 			) }
 			<Popover.Slot />

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -104,31 +104,6 @@
 		}
 	}
 
-	// Pad the scroll box so content on the bottom can be scrolled up.
-	padding-bottom: 50vh;
-	@include break-small {
-		padding-bottom: 0;
-	}
-
-	// On mobile the main content (html or body) area has to scroll.
-	// If, like we do on the desktop, scroll an element (.edit-post-layout__content) you can invoke
-	// the overscroll bounce on the non-scrolling container, causing for a frustrating scrolling experience.
-	// The following rule enables this scrolling beyond the mobile breakpoint, because on the desktop
-	// breakpoints scrolling an isolated element helps avoid scroll bleed.
-	@include break-small() {
-		overflow-y: auto;
-	}
-	-webkit-overflow-scrolling: touch;
-
-	// This rule ensures that if you've scrolled to the end of a container,
-	// then pause, then keep scrolling downwards, the browser doesn't try to scroll
-	// the parent element, usually invoking a "bounce" effect and then preventing you
-	// from scrolling upwards until you pause again.
-	// This is only necessary beyond the small breakpoint because that's when the scroll container changes.
-	@include break-small() {
-		overscroll-behavior-y: none;
-	}
-
 	.edit-post-visual-editor {
 		flex: 1 1 auto;
 
@@ -241,10 +216,7 @@
 
 	// Stretch to mimic outline padding on desktop.
 	@include break-medium() {
-		display: inline-flex;
-		position: fixed;
-		bottom: 0;
-		right: 0;
+		display: flex;
 		background: $white;
 		height: $icon-button-size-small;
 		padding: 0 $grid-size;
@@ -258,4 +230,29 @@
 	}
 }
 
-@include editor-left(".edit-post-layout__footer");
+.edit-post-layout__scrollable-container {
+	// On mobile the main content (html or body) area has to scroll.
+	// If, like we do on the desktop, scroll an element (.edit-post-layout__content) you can invoke
+	// the overscroll bounce on the non-scrolling container, causing for a frustrating scrolling experience.
+	// The following rule enables this scrolling beyond the mobile breakpoint, because on the desktop
+	// breakpoints scrolling an isolated element helps avoid scroll bleed.
+	@include break-small() {
+		overflow-y: auto;
+	}
+	-webkit-overflow-scrolling: touch;
+
+	// This rule ensures that if you've scrolled to the end of a container,
+	// then pause, then keep scrolling downwards, the browser doesn't try to scroll
+	// the parent element, usually invoking a "bounce" effect and then preventing you
+	// from scrolling upwards until you pause again.
+	// This is only necessary beyond the small breakpoint because that's when the scroll container changes.
+	@include break-small() {
+		overscroll-behavior-y: none;
+	}
+
+	// Pad the scroll box so content on the bottom can be scrolled up.
+	padding-bottom: 50vh;
+	@include break-small {
+		padding-bottom: 0;
+	}
+}
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
@@ -1,30 +1,5 @@
-.edit-post-text-editor__body {
-	padding-top: $grid-size * 5;
-
-	@include break-small() {
-		padding-top: ($grid-size * 5) + $admin-bar-height-big;
-	}
-
-	@include break-medium() {
-		padding-top: $grid-size * 5;
-
-		body.is-fullscreen-mode & {
-			padding-top: $grid-size * 5;
-		}
-	}
-}
-
 .edit-post-text-editor {
 	width: 100%;
-	max-width: calc(100% - #{$grid-size-large * 2});
-	margin-left: $grid-size-large;
-	margin-right: $grid-size-large;
-
-	@include break-small() {
-		max-width: $content-width;
-		margin-left: auto;
-		margin-right: auto;
-	}
 
 	// Always show outlines in code editor
 	.editor-post-title__block {
@@ -67,34 +42,41 @@
 		}
 	}
 
-	.editor-post-text-editor {
-		padding: $block-padding;
-		min-height: 200px;
-		line-height: 1.8;
-	}
-
 	// Make room for toolbar.
 	padding-top: $block-controls-height + $grid-size;
+}
 
-	// Exit Code Editor toolbar.
-	.edit-post-text-editor__toolbar {
-		position: absolute;
-		top: $grid-size;
-		left: 0;
-		right: 0;
-		height: $block-controls-height;
-		line-height: $block-controls-height;
-		padding: 0 $grid-size 0 $grid-size-large;
-		display: flex;
+// Exit Code Editor toolbar.
+.edit-post-text-editor__toolbar {
+	position: absolute;
+	top: $grid-size;
+	left: 0;
+	right: 0;
+	height: $block-controls-height;
+	line-height: $block-controls-height;
+	padding: 0 $grid-size 0 $grid-size-large;
+	display: flex;
+
+	h2 {
+		margin: 0 auto 0 0;
+		font-size: $default-font-size;
+		color: $dark-gray-500;
+	}
 
-		h2 {
-			margin: 0 auto 0 0;
-			font-size: $default-font-size;
-			color: $dark-gray-500;
-		}
+	.components-icon-button svg {
+		order: 1;
+	}
+}
 
-		.components-icon-button svg {
-			order: 1;
-		}
+.edit-post-text-editor__body {
+	max-width: calc(100% - #{$grid-size-large * 2});
+	margin-left: $grid-size-large;
+	margin-right: $grid-size-large;
+	padding-top: $grid-size * 5;
+
+	@include break-small() {
+		max-width: $content-width;
+		margin-left: auto;
+		margin-right: auto;
 	}
 }