Block Toolbar: Always show on mobile

WordPress · Oct 27, 2017 · 7e79347 · 7e79347
1 parent f7d72ce
commit 7e79347
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 21 deletions.
diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
@@ -50,6 +50,7 @@ $item-spacing: 10px;
 $panel-padding: 16px;
 $header-height: 56px;
 $inserter-tabs-height: 36px;
+$stacked-toolbar-height: 37px;
 $sidebar-width: 280px;
 $sidebar-panel-header-height: 50px;
 $admin-bar-height: 32px;

diff --git a/editor/block-toolbar/style.scss b/editor/block-toolbar/style.scss
@@ -12,24 +12,6 @@
 	> div:not( .editor-block-toolbar__mobile-tools ) {
 		display: flex;
 	}
-
-	// stacked toolbar
-	position: absolute;
-	top: $header-height;
-	left: 0;
-	right: 0;
-	background: $white;
-	border-bottom: 1px solid $light-gray-500;
-
-	// merge toolbars after this breakpoint
-	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
-		padding-left: $item-spacing;
-		position: static;
-		left: auto;
-		right: auto;
-		background: none;
-		border-bottom: none;
-	}
 }
 
 .editor-block-toolbar .editor-block-switcher {

diff --git a/editor/header/index.js b/editor/header/index.js
@@ -48,7 +48,9 @@ function Header( {
 					label={ __( 'Redo' ) }
 					disabled={ ! hasRedo }
 					onClick={ redo } />
-				<Slot name="Editor.Header" />
+				<div className="editor-header__block-toolbar">
+					<Slot name="Editor.Header" />
+				</div>
 			</div>
 			<div className="editor-header__settings">
 				<SavedState />

diff --git a/editor/header/style.scss b/editor/header/style.scss
@@ -127,3 +127,26 @@
 		}
 	}
 }
+
+
+.editor-header__block-toolbar {
+	// stacked toolbar
+	position: absolute;
+	top: $header-height;
+	left: 0;
+	right: 0;
+	background: $white;
+	border-bottom: 1px solid $light-gray-500;
+	min-height: $stacked-toolbar-height;
+
+	// merge toolbars after this breakpoint
+	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
+		padding-left: $item-spacing;
+		position: static;
+		left: auto;
+		right: auto;
+		background: none;
+		border-bottom: none;
+		min-height: auto;
+	}
+}
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -2,7 +2,7 @@
 	position: relative;
 	height: 100%;
 	margin: 0 auto;
-	padding: 50px 0;	// Floating up/down arrows invisible
+	padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0;
 
 	&,
 	& p {
@@ -12,7 +12,7 @@
 	}
 
 	@include break-small() {
-		padding: 50px 0;
+		padding: ( $stacked-toolbar-height + $admin-bar-height-big ) 0 0;
 	}
 
 	@include break-large() {