Improve nested blocks UI

This PR is very much a work in progress. Pushing now early, so I can work on it both at work and at home. It will not even be made a PR yet, and with a good squash there's every chance you won't even read this message. Github squashing is like Terminator time travel!
WordPress · Mar 22, 2018 · 381fa4c · 381fa4c
1 parent f00b08b
commit 381fa4c
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 86 deletions.
diff --git a/blocks/library/columns/editor.scss b/blocks/library/columns/editor.scss
@@ -0,0 +1,21 @@
+// 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
+.wp-block-columns .editor-block-list__layout {
+	&:first-child {
+		margin-left: -$block-padding;
+	}
+	&:last-child {
+		margin-right: -$block-padding;
+	}
+}
+
+// Prevent the parent block from being hovered, allow only nested blocks
+// Selecting the parent block can be an explicit choice using a separate control
+.editor-block-list__block[data-type="core/columns"] {
+	pointer-events: none;
+
+	> .editor-block-list__block-edit .editor-block-list__block {
+		pointer-events: all;
+	}
+}
diff --git a/blocks/library/columns/index.js b/blocks/library/columns/index.js
@@ -15,6 +15,7 @@ import { RangeControl } from '@wordpress/components';
  * Internal dependencies
  */
 import './style.scss';
+import './editor.scss';
 import InspectorControls from '../../inspector-controls';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';

diff --git a/blocks/library/paragraph/editor.scss b/blocks/library/paragraph/editor.scss
@@ -2,6 +2,11 @@
 	background: white;
 }
 
+// Don't show white background when a nesting parent is selected
+.editor-block-list__layout .editor-block-list__layout .editor-block-list__block .wp-block-paragraph {
+	background: inherit;
+}
+
 .blocks-font-size__main {
 	display: flex;
 	justify-content: space-between;

diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
@@ -46,6 +46,7 @@ $block-padding: 14px;
 $block-mover-margin: 18px;
 $block-spacing: 4px;
 $block-side-ui-padding: 36px;
+$block-side-ui-width: 28px;		// The side UI max height matches a single line of text, 56px. 28px is half, allowing 2 mover arrows
 
 // Buttons & UI Widgets
 $button-style__radius-roundrect: 4px;

diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -43,8 +43,8 @@
 			margin-right: -$block-side-ui-padding;
 		}
 
-		&[data-align="full"] .editor-block-contextual-toolbar,
-		&[data-align="wide"] .editor-block-contextual-toolbar {
+		&[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;

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -5,6 +5,12 @@
 		padding-left: $block-side-ui-padding;
 		padding-right: $block-side-ui-padding;
 	}
+
+	// Don't add side padding for nested blocks, @todo see if this can be scoped better
+	.editor-block-list__block & {
+		padding-left: 0;
+		padding-right: 0;
+	}
 }
 
 .editor-block-list__layout .editor-block-list__block {
@@ -78,7 +84,13 @@
 	&.is-selected > .editor-block-mover:before,
 	&.is-hovered > .editor-block-mover:before {
 		border-right: 1px solid $light-gray-500;
-		right: 6px;
+		right: 0;
+	}
+
+	&.is-selected > .editor-block-settings-menu:before,
+	&.is-hovered > .editor-block-settings-menu:before {
+		border-left: 1px solid $light-gray-500;
+		left: 0;
 	}
 
 	&.is-typing .editor-block-list__empty-block-inserter,
@@ -96,12 +108,6 @@
 		border-right: none;
 	}
 
-	&.is-selected > .editor-block-settings-menu:before,
-	&.is-hovered > .editor-block-settings-menu:before {
-		border-left: 1px solid $light-gray-500;
-		left: 6px;
-	}
-
 	&.is-reusable.is-selected > .editor-block-settings-menu:before {
 		border-left: none;
 	}
@@ -160,26 +166,6 @@
 	}
 
 
-	// @todo, this appears to be unused
-	.iframe-overlay {
-		position: relative;
-	}
-
-	.iframe-overlay:before {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-
-	&.is-selected .iframe-overlay:before {
-		display: none;
-	}
-
-
 	/**
 	 * Alignments
 	 */
@@ -334,23 +320,37 @@
 			border-bottom: 3px solid $blue-medium-500;
 		}
 	}
+}
 
 
-	/**
-	 * Left and right side UI
-	 */
+/**
+ * Left and right side UI
+ */
+
+.editor-block-list__block {
 
+	// Left and right
 	> .editor-block-settings-menu,
 	> .editor-block-mover {
 		position: absolute;
-		top: 0;
+		top: -.9px; // .9px because of the collapsing margins hack, see line 27, @todo revisit when we allow margins to collapse
+		bottom: -.9px; // utilize full vertical space to increase hoverable area
 		padding: 0;
+		width: $block-side-ui-width;
+	}
+
+	// Elevate when selected or hovered
+	&.is-selected,
+	&.is-hovered {
+		.editor-block-settings-menu,
+		.editor-block-mover {
+			z-index: 9999;	// @todo
+		}
 	}
 
 	// Right side UI
 	> .editor-block-settings-menu {
-		right: #{ -1 * $block-mover-margin - $block-padding + 2px };
-		padding-top: 2px;
+		right: -$block-side-ui-width;
 
 		// Mobile
 		display: none;
@@ -362,8 +362,7 @@
 
 	// Left side UI
 	> .editor-block-mover {
-		left: -$block-mover-margin - $block-padding + 4px;
-		padding-top: 6px;
+		left: -$block-side-ui-width;
 		z-index: z-index( '.editor-block-mover' );
 
 		// Mobile
@@ -373,7 +372,7 @@
 		}
 	}
 
-	// Mobile tools
+	// Show side UI inline below the block on mobile
 	.editor-block-list__block-mobile-toolbar {
 		display: flex;
 		flex-direction: row;
@@ -420,6 +419,11 @@
 	}
 }
 
+
+/**
+ * In-Canvas Inserter
+ */
+
 .editor-block-list .editor-inserter {
 	margin: $item-spacing;
 

diff --git a/editor/components/block-mover/style.scss b/editor/components/block-mover/style.scss
@@ -1,22 +1,37 @@
 // Mover icon buttons
 .editor-block-mover__control {
 	display: block;
-	padding: 2px;
-	margin: 0 6px 0 4px;
 	border: none;
 	outline: none;
 	background: none;
 	color: $dark-gray-300;
 	cursor: pointer;
-	border-radius: 50%;
-	width: $icon-button-size-small;
+	padding: 0;
+	width: $block-side-ui-width;
+	height: $block-side-ui-width;	// the side UI can be no taller than 2 * $block-side-ui-width, which matches the height of a line of text
 
 	&[aria-disabled="true"] {
 		cursor: default;
 		color: $light-gray-300;
 		pointer-events: none;
 	}
 
+	// Try a background, only for nested situations @todo
+	@include break-small() {
+		.editor-block-list__layout .editor-block-list__layout & {
+			background: $white;
+			border-color: $light-gray-500;
+			border-style: solid;
+
+			&:first-child {
+				border-width: 1px 1px 0 1px;
+			}
+			&:last-child {
+				border-width: 0 1px 1px 1px;
+			}
+		}
+	}
+
 	// apply styles to SVG for movers on the desktop breakpoint
 	@include break-small {
 		// unstyle inherited icon button styles

diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss
@@ -1,3 +1,26 @@
+// The Blocks "More" Menu ellipsis icon button
+.editor-block-settings-menu__toggle {
+	justify-content: center;
+	padding: 0;
+	width: $block-side-ui-width;
+	height: $block-side-ui-width * 2;	// same height as a single line of text, our smallest block
+
+	// Try a background, only for nested situations @todo
+	@include break-small() {
+		.editor-block-list__layout .editor-block-list__layout & {
+			background: $white;
+			border-color: $light-gray-500;
+			border-style: solid;
+			border-width: 1px;
+		}
+	}
+
+	.dashicon {
+		transform: rotate( 90deg );
+	}
+}
+
+// Popout menu
 .editor-block-settings-menu__popover {
 	z-index: z-index( '.editor-block-settings-menu__popover' );
 
@@ -9,56 +32,43 @@
 	.components-popover__content {
 		width: 182px;
 	}
-}
-
-.editor-block-settings-menu__content {
-	width: 100%;
-}
 
-// The ellipsis icon button
-.editor-block-settings-menu__toggle {
-	border-radius: 50%;
-	width: auto;
-	padding: 2px;
-	margin: 14px 4px 14px 8px;
-	width: $icon-button-size-small;
-
-	.dashicon {
-		transform: rotate( 90deg );
+	.editor-block-settings-menu__content {
+		width: 100%;
 	}
-}
 
-.editor-block-settings-menu__separator {
-	margin-top: $item-spacing;
-	margin-bottom: $item-spacing;
-	border-top: 1px solid $light-gray-500;
-}
+	.editor-block-settings-menu__separator {
+		margin-top: $item-spacing;
+		margin-bottom: $item-spacing;
+		border-top: 1px solid $light-gray-500;
+	}
 
-.editor-block-settings-menu__title {
-	display: block;
-	padding: 6px;
-	color: $dark-gray-300;
-}
+	.editor-block-settings-menu__title {
+		display: block;
+		padding: 6px;
+		color: $dark-gray-300;
+	}
 
-// Popout menu
-.editor-block-settings-menu__control {
-	width: 100%;
-	justify-content: flex-start;
-	padding: 8px;
-	background: none;
-	outline: none;
-	border-radius: 0;
-	color: $dark-gray-500;
-	cursor: pointer;
-	@include menu-style__neutral;
+	// Menu items
+	.editor-block-settings-menu__control {
+		width: 100%;
+		justify-content: flex-start;
+		padding: 8px;
+		background: none;
+		outline: none;
+		border-radius: 0;
+		color: $dark-gray-500;
+		cursor: pointer;
+		@include menu-style__neutral;
 
-	&:hover,
-	&:focus,
-	&:not(:disabled):hover {
-		@include menu-style__focus;
-	}
+		&:hover,
+		&:focus,
+		&:not(:disabled):hover {
+			@include menu-style__focus;
+		}
 
-	.dashicon {
-		margin-right: 5px;
+		.dashicon {
+			margin-right: 5px;
+		}
 	}
 }