Allow margins to collapse & refactor block toolbar (#7365)

* Allow collapsing margins & adjust block toolbar

This PR refactors how the block toolbar is positioned. Because we use sticky, the toolbar is part of the flow of the block itself. In this PR it uses translate to pull it out of the flow, making the positioning more resilient.

The primary purpose of this PR is to allow margins to collapse. When two margins meet, and no borders or paddings are present, they collapse. I.e. a `p` with a 20px margin next to a similar `p` will have only 20px margin between them, not 40px, because the two siblings collapse to whichever margin is the largest. By allowing margins on blocks to collapse, we can make it easier to theme the editor to look like the frontend.

* docs: Tweak comment in CSS

* fix: Multi-block selection on mouse movement after mouseDown

* Fix rebase issues, part 1

- Fixed toolbar position on mobile.
- Fixed toolbar position on desktop breakpoints
- Fixed appender regression
- Fixed issue with warning blocks having no hover or selected outlines.
- Fixed positioning of ellipsis on wide blocks.
- Fixed issue with full-wide gallery.

* Fix rebase issues, part 2.

- Fixed a few typos and an issue with warnings. This will be revisited in a future patch also being worked on separately.
- Fixed position of toolbar on wide and fullwide.
- Fixed positioning of mover on wide and fullwide.
- Fixed issue with additional margins in columns block.
- Fixed issue with the invisible toolbar on the Column (singular) block breaking the layout. This also fixed an issue with the hover label and sibling inserter positioning on the column.

* Fix rebase issues, part 3.

- Fixed a regression in IE.
- Fixed the position of editor warning after the refactor.

* chore: Typo tweaks

* Remove comment.

* Tests: Make adding blocks e2e test pass by refering the area below editor explicitly

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