Allow margins to collapse & refactor block toolbar

components/toolbar/style.scss

@@ -7,7 +7,12 @@
 
 div.components-toolbar {
 	&> div {
-		display: inline-flex;
+		// IE11 does not support `position: sticky`, or Flex very well, so use block.
+		display: inline-block;
+		@supports ( position: sticky ) {
+			display: inline-flex;
+		}
+
 		margin: 0;
 	}
 

core-blocks/columns/editor.scss

@@ -1,6 +1,7 @@
 // These margins make sure that nested blocks stack/overlay with the parent block chrome
 // This is sort of an experiment at making sure the editor looks as much like the end result as possible
 // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
+// When using CSS grid, margins do not collapse on the container.
 .wp-block-columns .editor-block-list__layout {
 	margin-left: 0;
 	margin-right: 0;
@@ -31,6 +32,14 @@
 	}
 }
 
+// Flex container margins do not collapse: https://www.w3.org/TR/css-flexbox-1/#flex-containers.
+// Therefore, let's at least not add any additional margins here.
+.editor-block-list__layout .editor-block-list__block[data-type="core/columns"] > .editor-block-list__block-edit,
+.editor-block-list__layout .editor-block-list__block[data-type="core/column"] > .editor-block-list__block-edit {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
 .wp-block-columns {
 	display: block;
 

core-blocks/gallery/editor.scss

@@ -1,12 +1,19 @@
 .wp-block-gallery.components-placeholder {
 	margin: 0px;
 }
+
+// Allow gallery items to go edge to edge.
 .gutenberg .wp-block-gallery:not( .components-placeholder ) {
-	// Allow gallery items to go edge to edge.
 	margin-left: -8px;
 	margin-right: -8px;
 }
 
+// Don't use negative margins when full-wide.
+.gutenberg [data-align="full"] .wp-block-gallery:not( .components-placeholder ) {
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .blocks-gallery-item {
 
 	.is-selected {

edit-post/assets/stylesheets/_variables.scss

@@ -24,11 +24,12 @@ $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
 $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
+$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 );
 $shadow-modal: 0 3px 30px rgba( $dark-gray-900, .2 );
 
 // Editor Widths

edit-post/assets/stylesheets/_z-index.scss

@@ -20,6 +20,7 @@ $z-layers: (
 	'.editor-block-contextual-toolbar': 21,
 	'.components-popover__close': 5,
 	'.editor-block-list__insertion-point': 5,
+	'.editor-inserter-with-shortcuts': 5,
 	'.core-blocks-gallery-item__inline-menu': 20,
 	'.editor-url-input__suggestions': 30,
 	'.edit-post-header': 30,

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,25 @@
 	}
 }
 
+// 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;
 	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 +49,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

@@ -2,11 +2,16 @@
 	position: relative;
 	padding: 50px 0;
 
+	input[type="text"].editor-default-block-appender__content, // The default appender should match a single paragraph. Needs specificity.
 	&,
 	& p {
 		font-family: $editor-font;
 		font-size: $editor-font-size;
 		line-height: $editor-line-height;
+	}
+
+	&,
+	& p {
 		color: $dark-gray-700;
 	}
 
@@ -50,11 +55,28 @@
 			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 + $parent-block-padding; // Add 1px border left and right.
-			margin-left: auto;
-			margin-right: auto;
+		// Center the block toolbar on wide and full-wide blocks.
+		// Use specific selector to not affect nested block toolbars.
+		&[data-align="wide"] > .editor-block-contextual-toolbar,
+		&[data-align="full"] > .editor-block-contextual-toolbar {
+			width: calc( 100% + #{ ( $parent-block-padding * 4 ) + $border-width + $border-width } ); // Matches the negative margins applied to parent blocks.
+			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;
+			}
+		}
+
+		// The centering math changes when a fullwide image doesn't have block padding.
+		&[data-align="full"] > .editor-block-contextual-toolbar {
+			width: calc( 100% + #{ ( $parent-block-padding * 2 ) + ( $block-padding * 2 ) } ); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide.
+
+			.editor-block-toolbar {
+				max-width: $content-width - $border-width - $border-width;
+			}
 		}
 	}
 

editor/components/block-list/block.js

@@ -401,7 +401,8 @@ export class BlockListBlock extends Component {
 		// Empty paragraph blocks should always show up as unselected.
 		const showEmptyBlockSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
 		const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
-		const shouldAppearSelected = ! showSideInserter && ( isSelected || hasSelectedInnerBlock ) && ! isTypingWithinBlock;
+		const shouldAppearSelected = ! showSideInserter && isSelected && ! isTypingWithinBlock;
+		const shouldAppearSelectedParent = ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock;
 		// We render block movers and block settings to keep them tabbale even if hidden
 		const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock;
 		const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock;
@@ -421,6 +422,7 @@ export class BlockListBlock extends Component {
 			'has-warning': ! isValid || !! error,
 			'is-selected': shouldAppearSelected,
 			'is-multi-selected': isPartOfMultiSelection,
+			'is-selected-parent': shouldAppearSelectedParent,
 			'is-hovered': isHovered && ! isEmptyDefaultBlock,
 			'is-shared': isSharedBlock( blockType ),
 			'is-hidden': dragging,
@@ -522,7 +524,6 @@ export class BlockListBlock extends Component {
 					className="editor-block-list__block-edit"
 					data-block={ uid }
 				>
-
 					<BlockCrashBoundary onError={ this.onBlockError }>
 						{ isValid && mode === 'visual' && (
 							<BlockEdit