Refactoring the block toolbar to adjust for changes.

The previous block toolbar implementation used margins and positioning which had to be accounted for by the block padding. The new implementation here mitigates its own footprint by using floats, and hence works better with collapsing margins.

edit-post/assets/stylesheets/_variables.scss

@@ -29,7 +29,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 // Visuals
 $shadow-popover: 0 3px 30px rgba( $dark-gray-900, .1 );
 $shadow-toolbar: 0 2px 10px rgba( $dark-gray-900, .1 ), 0 0 2px rgba( $dark-gray-900, .1 );
-$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .1 ), 0 2px 2px rgba( $dark-gray-900, .1 );
+$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .05 ), 0 2px 2px rgba( $dark-gray-900, .05 );
 
 // Editor Widths
 $sidebar-width: 280px;

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

@@ -1,4 +1,4 @@
-// hide all action buttons except the inserter on mobile
+// Hide all action buttons except the inserter on mobile.
 .edit-post-header-toolbar > .components-button {
 	display: none;
 
@@ -18,15 +18,26 @@
 	}
 }
 
+// Block toolbar when fixed to the top of the screen.
 .edit-post-header-toolbar__block-toolbar {
-	// stacked toolbar
+	// Stack toolbar below Editor Bar.
 	position: absolute;
 	top: $header-height;
 	left: 0;
 	right: 0;
+	width: 100%;
 	background: $white;
-	border-bottom: 1px solid $light-gray-500;
 	min-height: $block-toolbar-height;
+	border-bottom: 1px solid $light-gray-500;
+
+	.editor-block-toolbar  {
+		border-left: none;
+	}
+
+	.editor-block-toolbar .components-toolbar {
+		border-top: none;
+		border-bottom: none;
+	}
 
 	.is-sidebar-opened & {
 		display: none;
@@ -39,8 +50,8 @@
 		}
 	}
 
-	// merge toolbars after this breakpoint
-	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
+	// Move toolbar into top Editor Bar.
+	@include break-large {
 		padding-left: $item-spacing;
 		position: static;
 		left: auto;

edit-post/components/visual-editor/style.scss

@@ -50,11 +50,18 @@
 			margin-right: -$block-side-ui-width;
 		}
 
-		&[data-align="full"] > .editor-block-contextual-toolbar,
-		&[data-align="wide"] > .editor-block-contextual-toolbar { // don't affect nested block toolbars
-			max-width: $content-width + 2;	// 1px border left and right
-			margin-left: auto;
-			margin-right: auto;
+		// Center the block toolbar on wide and full-wide blocks.
+		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar,
+		&[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar { // Don't affect nested block toolbars.
+			width: calc( 100% + #{ $parent-block-padding + $parent-block-padding + $border-width + $border-width } );
+			height: 0px; // This collapses the container to an invisible element without margin.
+			text-align: center;
+
+			.editor-block-toolbar {
+				max-width: $content-width + $block-padding + $block-padding;
+				width: 100%;
+				position: relative;
+			}
 		}
 	}
 

editor/components/block-list/style.scss

@@ -131,19 +131,20 @@
 		margin-bottom: -$block-padding;
 	}
 
+	// Adjust the spacing of the appender, or the first block, to sit near the title.
+	.editor-default-block-appender__content,
+	.editor-block-list__block:first-child .editor-block-list__block-edit {
+		margin-top: $block-padding - $block-spacing / 2;
+	}
+
 	// Space every block, and the default appender, using margins.
 	// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
 	.editor-default-block-appender__content,
-	.editor-block-list__block .editor-block-list__block-edit {
+	.editor-block-list__block .editor-block-list__block-edit,
+	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit { // Explicitly target nested blocks, as those need to override the preceeding rule.
 		margin-top: $block-padding * 2 + $block-spacing;
 		margin-bottom: $block-padding * 2 + $block-spacing;
 	}
-
-	// Adjust the spacing of the appender, or the first block, to sit near the title.
-	.editor-default-block-appender__content,
-	.editor-block-list__block:first-child .editor-block-list__block-edit {
-		margin-top: $block-padding - $block-spacing / 2;
-	}
 }
 
 .editor-block-list__layout .editor-block-list__block {
@@ -220,14 +221,14 @@
 			transition: outline .1s linear;
 			pointer-events: none;
 
-			// show wider padding for top level blocks
+			// Show wider padding for top level blocks.
 			right: -$parent-block-padding;
 			left: -$parent-block-padding;
 			top: -$block-padding;
 			bottom: -$block-padding;
 		}
 
-		// show smaller padding for child blocks
+		// Show smaller padding for child blocks.
 		.editor-block-list__block-edit:before {
 			right: -$block-padding;
 			left: -$block-padding;
@@ -241,8 +242,6 @@
 	&.is-selected > .editor-block-list__block-edit:before {
 		// use opacity to work in various editor styles
 		outline: $border-width solid $dark-opacity-light-500;
-		top: -$block-padding;
-		bottom: -$block-padding;
 
 		.is-dark-theme & {
 			outline-color: $light-opacity-light-500;
@@ -390,7 +389,7 @@
 		// Mover and settings above
 		> .editor-block-mover,
 		> .editor-block-settings-menu {
-			top: -$block-side-ui-width - $border-width; // This moves the menu up by the height of the button + border.
+			top: -$block-side-ui-width - $block-padding - $border-width;
 			bottom: auto;
 			min-height: 0;
 			height: auto;
@@ -403,11 +402,11 @@
 		}
 
 		> .editor-block-mover {
-			left: 10px;
+			left: $parent-block-padding;
 		}
 
 		> .editor-block-settings-menu {
-			right: 10px;
+			right: $parent-block-padding;
 			width: $block-side-ui-width * 2;
 			flex-direction: row;
 		}
@@ -514,7 +513,7 @@
 
 
 /**
- * Left and right side UI
+ * Left and right side UI, & Unified toolbar on Mobile
  */
 
 .editor-block-list__block {
@@ -589,19 +588,21 @@
 	.editor-block-list__block-mobile-toolbar {
 		display: flex;
 		flex-direction: row;
-		margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above. 
+		margin-top: $item-spacing + $block-toolbar-height - $block-padding; // Make room for the height of the block toolbar above. 
 		margin-right: -$block-padding;
-		margin-bottom: -$block-padding - $border-width;
 		margin-left: -$block-padding;
 		border-top: $border-width solid $light-gray-500;
+		height: $block-toolbar-height;
+
+		transform: translateY( #{ $block-padding + $border-width } );
 
 		@include break-small() {
 			display: none;
 		}
 
 		// Show a shadow below the selected block to imply separation.
 		box-shadow: $shadow-below-only;
-		@include break-mobile() {
+		@include break-small() {
 			box-shadow: none;
 		}
 
@@ -775,12 +776,28 @@
 
 	// Position toolbar below the block on mobile.
 	position: absolute;
-	bottom: $block-toolbar-height;
-	left: $block-padding;
-	right: $block-padding;
+	bottom: $block-toolbar-height - $block-padding;
+	left: 0;
+	right: 0;
+
+	// Paint the borders on the toolbar itself on mobile.
+	border-top: 1px solid $light-gray-500;
+	.components-toolbar {
+		border-top: none;
+		border-bottom: none;
+
+	}
+
+	@include break-small() {
+		border-top: none;
+		.components-toolbar {
+			border-top: 1px solid $light-gray-500;
+			border-bottom: 1px solid $light-gray-500;
+		}
+	}
 
 	// Position the contextual toolbar above the block.
-	@include break-mobile() {
+	@include break-small() {
 		position: sticky;
 		bottom: auto;
 		left: auto;
@@ -834,19 +851,20 @@
 	}
 }
 
+// Position the block toolbar when contextual.
 .editor-block-contextual-toolbar .editor-block-toolbar {
 	width: 100%;
-	background: $white;
-	border: $border-width solid $light-gray-500;
 
 	// Hide right border on desktop, where the .components-toolbar instead has a right border.
 	@include break-small() {
 		border-right: none;
 	}
 
 	// This prevents floats from messing up the position.
-	position: absolute;
-	left: 0;
+	@include break-small() {
+		position: absolute;
+		left: 0;
+	}
 
 	.editor-block-list__block[data-align="right"] & {
 		left: auto;

editor/components/block-toolbar/style.scss

@@ -2,7 +2,6 @@
 	display: inline-flex;
 	flex-grow: 1;
 	width: 100%;
-	background: $white;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
 
@@ -11,8 +10,14 @@
 		overflow: inherit;
 	}
 
+	// Show a left border on the parent container.
+	border-left: $border-width solid $light-gray-500;
+
+	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
-		border: none;
+		border: 0; 
+		border-top: $border-width solid $light-gray-500;
+		border-bottom: $border-width solid $light-gray-500;
 
 		// Add a right border to show as separator in the block toolbar.
 		border-right: $border-width solid $light-gray-500;