G2: UI surrounding the editor canvas (#19348)

Co-authored-by: Joen Asmussen <[email protected]> Co-authored-by: Jon Quach <[email protected]>
WordPress · Feb 24, 2020 · 6d946a9 · 6d946a9
1 parent 12756c4
commit 6d946a9
Show file tree

Hide file tree

Showing 61 changed files with 521 additions and 503 deletions.
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
@@ -29,8 +29,9 @@ $white: #fff;
 $dark-gray-primary: #1e1e1e;
 $medium-gray-text: #757575;
 $light-gray-secondary: #ccc;
+$light-gray-tertiary: #e7e8e9;
 $theme-color: theme(button);
-$blue-medium-focus: #007cba;	// @todo: consider revisiting for theme colors.
+$blue-medium-focus: #007cba;	// @todo: Currently being used as "spot" color. Needs to be considered in context of themes.
 $blue-medium-focus-dark: #fff;
 
 // Dark opacities, for use with light themes.

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -214,35 +214,26 @@
 }
 
 @mixin block-style__hover {
-	background: $light-gray-200;
-	color: $dark-gray-900 !important;
+	border-color: $theme-color;
+	color: $theme-color !important;
 }
 
 @mixin block-style__focus() {
-	color: $dark-gray-900;
-	box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;
+	box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $theme-color;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 }
 
 @mixin block-style__is-active() {
-	color: $dark-gray-900;
-	box-shadow: inset 0 0 0 2px $dark-gray-500;
+	color: $white;
+	background: $dark-gray-primary;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 	outline-offset: -2px;
 }
 
-@mixin block-style__is-active-focus() {
-	color: $dark-gray-900;
-	box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500, inset 0 0 0 2px $dark-gray-500;
-
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 4px solid transparent;
-	outline-offset: -4px;
-}
 
 /**
  * Applies editor left position to the selector passed as argument

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -58,7 +58,7 @@ $grid-size-xlarge: 24px;
  */
 
 $panel-padding: 16px;
-$header-height: 56px;
+$header-height: 60px;
 $panel-header-height: 50px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
@@ -74,9 +74,7 @@ $spinner-size: 18px;
  * Shadows.
  */
 
-$shadow-popover: 0 3px 30px rgba($dark-gray-900, 0.1);
-$shadow-toolbar: 0 2px 10px rgba($dark-gray-900, 0.1), 0 0 2px rgba($dark-gray-900, 0.1);
-$shadow-below-only: 0 5px 10px rgba($dark-gray-900, 0.05), 0 2px 2px rgba($dark-gray-900, 0.05);
+$shadow-popover: 0 2px 6px rgba($black, 0.05);
 $shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2);
 
 
@@ -94,10 +92,9 @@ $widget-area-width: 700px;
  */
 
 $border-width: 1px;
-$block-controls-height: 36px;
 $icon-button-size: 36px;
-$icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
+$icon-button-size-small: 24px;
 $block-toolbar-height: $grid-unit-60;
 $resize-handler-size: 15px;
 $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // Make the resize handle container larger so there's a larger grabbable area.

diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -35,7 +35,7 @@
 
 .block-editor-block-breadcrumb__button.components-button,
 .block-editor-block-breadcrumb__current {
-	color: $dark-gray-500;
+	color: $dark-gray-primary;
 	padding: 0 $grid-unit-10;
 	font-size: inherit;
 }
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -96,6 +96,11 @@
 		// 2px outside.
 		box-shadow: 0 0 0 2px $blue-medium-focus;
 		border-radius: $radius-block-ui;
+
+		// Show a light color for dark themes.
+		.is-dark-theme & {
+			box-shadow: 0 0 0 2px $blue-medium-focus-dark;
+		}
 	}
 
 	// Spotlight mode.
@@ -137,7 +142,6 @@
 	.is-navigate-mode & .block-editor-block-list__block.is-selected,
 	.block-editor-block-list__block.is-multi-selected {
 
-
 		// Show selection borders around every non-nested block's actual footprint.
 		&::after {
 			position: absolute;
@@ -159,9 +163,9 @@
 			// Windows High Contrast mode will show this outline.
 			outline: 2px solid transparent;
 
-			// Show a lighter blue for dark themes.
+			// Show a lighter color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 1px $blue-medium-focus-dark, inset 0 0 0 1px $blue-medium-focus-dark;
+				box-shadow: 0 0 0 2px $blue-medium-focus-dark;
 			}
 		}
 
@@ -178,7 +182,6 @@
 	.block-editor-block-list__block.is-block-collapsed::after {
 		content: none;
 	}
-
 }
 
 
@@ -361,21 +364,13 @@
 	}
 }
 
+// Sibling inserter / "inbetweenserter".
 .block-editor-block-list__insertion-point-inserter,
 .block-editor-block-list__block-popover-inserter {
-	// Show a clickable plus.
 	.block-editor-inserter__toggle.components-button {
-		border-radius: 50%;
-		color: $blue-medium-focus;
-		background: $white;
-		height: $block-padding * 2;
-		width: $block-padding * 2;
-		padding: 0;
-		justify-content: center;
-
-		&:not(:disabled):not([aria-disabled="true"]):hover {
-			box-shadow: none;
-		}
+		// Special dimensions for this button.
+		min-width: 32px;
+		height: 32px;
 	}
 }
 
@@ -422,12 +417,13 @@
 
 
 /**
- * Block Toolbar when contextual.
+ * Block Toolbar, top and contextual.
  */
 .block-editor-block-contextual-toolbar-wrapper {
 	padding-left: $block-toolbar-height; // Provide space for the mover control on full-wide items.
 }
 
+.edit-post-header-toolbar__block-toolbar,
 .block-editor-block-contextual-toolbar {
 	// Adapt the height of the toolbar items.
 	.components-toolbar {
@@ -439,7 +435,14 @@
 	.components-button {
 		height: $block-toolbar-height;
 	}
+}
+
 
+/**
+ * Block Toolbar when contextual.
+ */
+
+.block-editor-block-contextual-toolbar {
 	// Block UI appearance.
 	border: $border-width solid $dark-gray-primary;
 	border-radius: $radius-block-ui;
@@ -474,6 +477,7 @@
 			// When button is focused, it receives a box-shadow instead of the border.
 			&:focus {
 				border: none;
+				box-shadow: inset 0 0 0 1px color($theme-color), 0 0 0 1px color($theme-color);
 			}
 		}
 

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -7,12 +7,12 @@
 	display: none;
 }
 
-.block-editor-block-mover__control {
+.block-editor-block-mover__control.has-icon {
 	padding: 0;
 }
 
 // Show the mover in a single button under the contextual toolbar.
-.block-editor-block-contextual-toolbar .block-editor-block-mover {
+.block-editor-block-mover {
 	.components-toolbar {
 		flex-direction: column;
 	}
@@ -22,7 +22,7 @@
 	}
 
 	// Position the icons correctly.
-	.block-editor-block-mover__control-up {
+	.components-toolbar .block-editor-block-mover__control-up {
 		svg {
 			margin-bottom: -$grid-unit-10;
 		}
@@ -34,7 +34,7 @@
 		}
 	}
 
-	.block-editor-block-mover__control-down {
+	.components-toolbar .block-editor-block-mover__control-down {
 		svg {
 			margin-top: -$grid-unit-10;
 		}
@@ -52,7 +52,8 @@
 			height: $block-toolbar-height;
 			width: $block-toolbar-height/2 !important;
 			min-width: $grid-unit-30;
-			padding: 0;
+			padding-left: 0;
+			padding-right: 0;
 
 			// Focus style.
 			&::before {

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -92,8 +92,8 @@ $tree-item-height: 36px;
 
 	&.is-selected,
 	&.is-selected:focus {
-		color: $dark-gray-700;
-		background: $light-gray-300;
+		color: $white;
+		background: $dark-gray-primary;
 	}
 }
 

diff --git a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
@@ -3,17 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
-import { grid } from '@wordpress/icons';
 
 export default function BlockConvertButton( { shouldRender, onClick, small } ) {
 	if ( ! shouldRender ) {
 		return null;
 	}
 
 	const label = __( 'Convert to Blocks' );
-	return (
-		<MenuItem onClick={ onClick } icon={ grid }>
-			{ ! small && label }
-		</MenuItem>
-	);
+	return <MenuItem onClick={ onClick }>{ ! small && label }</MenuItem>;
 }
diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -11,7 +11,6 @@ import { MenuItem } from '@wordpress/components';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { html } from '@wordpress/icons';
 
 export function BlockModeToggle( {
 	blockType,
@@ -30,11 +29,7 @@ export function BlockModeToggle( {
 	const label =
 		mode === 'visual' ? __( 'Edit as HTML' ) : __( 'Edit visually' );
 
-	return (
-		<MenuItem onClick={ onToggleMode } icon={ html }>
-			{ ! small && label }
-		</MenuItem>
-	);
+	return <MenuItem onClick={ onToggleMode }>{ ! small && label }</MenuItem>;
 }
 
 export default compose( [

diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -14,13 +14,7 @@ import {
 	MenuItem,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import {
-	page,
-	trash,
-	moreHorizontal,
-	insertAfter,
-	insertBefore,
-} from '@wordpress/icons';
+import { moreHorizontal } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -35,6 +29,7 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls';
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
+	noArrow: true,
 };
 
 export function BlockSettingsMenu( { clientIds } ) {
@@ -77,6 +72,7 @@ export function BlockSettingsMenu( { clientIds } ) {
 						label={ __( 'More options' ) }
 						className="block-editor-block-settings-menu"
 						popoverProps={ POPOVER_PROPS }
+						noIcons
 					>
 						{ ( { onClose } ) => (
 							<>
@@ -100,7 +96,6 @@ export function BlockSettingsMenu( { clientIds } ) {
 												onClose,
 												onDuplicate
 											) }
-											icon={ page }
 											shortcut={ shortcuts.duplicate }
 										>
 											{ __( 'Duplicate' ) }
@@ -113,7 +108,6 @@ export function BlockSettingsMenu( { clientIds } ) {
 													onClose,
 													onInsertBefore
 												) }
-												icon={ insertBefore }
 												shortcut={
 													shortcuts.insertBefore
 												}
@@ -125,7 +119,6 @@ export function BlockSettingsMenu( { clientIds } ) {
 													onClose,
 													onInsertAfter
 												) }
-												icon={ insertAfter }
 												shortcut={
 													shortcuts.insertAfter
 												}
@@ -151,7 +144,6 @@ export function BlockSettingsMenu( { clientIds } ) {
 												onClose,
 												onRemove
 											) }
-											icon={ trash }
 											shortcut={ shortcuts.remove }
 										>
 											{ _n(

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -20,22 +20,22 @@
 
 	&:hover {
 		@include block-style__hover;
+
+		.block-editor-block-styles__item-preview {
+			border-color: $theme-color;
+		}
 	}
 
 	&.is-active {
 		@include block-style__is-active();
-
-		&:focus {
-			@include block-style__is-active-focus();
-		}
 	}
 }
 
 // Show a little preview thumbnail for style variations.
 .block-editor-block-styles__item-preview {
 	outline: $border-width solid transparent; // Shown in Windows High Contrast mode.
 	padding: 0;
-	border: $border-width solid rgba($dark-gray-900, 0.2);
+	border: $border-width solid rgba($dark-gray-primary, 0.2);
 	border-radius: $radius-round-rectangle;
 	display: flex;
 	overflow: hidden;