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.
WordPress · Jun 21, 2018 · 455cdae · 455cdae
1 parent 2fcfeb3
commit 455cdae
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 102 deletions.
diff --git a/core-blocks/columns/editor.scss b/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
+// Note that when using CSS grid, margins do not collapse on the container
 .wp-block-columns .editor-block-list__layout {
 	margin-left: 0;
 	margin-right: 0;

diff --git a/edit-post/assets/stylesheets/_variables.scss b/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 );
 
 // Editor Widths
 $sidebar-width: 280px;

diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -21,6 +21,7 @@ $z-layers: (
 	'.editor-block-switcher__menu': 5,
 	'.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,

diff --git a/edit-post/components/header/header-toolbar/style.scss b/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;

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -2,6 +2,7 @@
 	position: relative;
 	padding: 50px 0;
 
+	.editor-default-block-appender__content, // The default appender should match a single paragraph.
 	&,
 	& p {
 		font-family: $editor-font;
@@ -49,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 + $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.
+		&[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;
+			}
 		}
 	}
 

diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -404,7 +404,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 && ! isMultiSelected && ! isTypingWithinBlock;
 		const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isMultiSelected && ! isTypingWithinBlock;
@@ -423,6 +424,7 @@ export class BlockListBlock extends Component {
 		const wrapperClassName = classnames( 'editor-block-list__block', {
 			'has-warning': ! isValid || !! error,
 			'is-selected': shouldAppearSelected,
+			'is-selected-parent': shouldAppearSelectedParent,
 			'is-multi-selected': isMultiSelected,
 			'is-hovered': isHovered && ! isEmptyDefaultBlock,
 			'is-shared': isSharedBlock( blockType ),
@@ -516,7 +518,6 @@ export class BlockListBlock extends Component {
 					/>
 				) }
 				{ shouldShowBreadcrumb && <BlockBreadcrumb uid={ uid } isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' } /> }
-				{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 				{ isFirstMultiSelected && <BlockMultiControls rootUID={ rootUID } /> }
 				<IgnoreNestedEvents
 					ref={ this.bindBlockNode }
@@ -525,7 +526,7 @@ export class BlockListBlock extends Component {
 					className="editor-block-list__block-edit"
 					data-block={ uid }
 				>
-
+					{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 					<BlockCrashBoundary onError={ this.onBlockError }>
 						{ isValid && mode === 'visual' && (
 							<BlockEdit