G2 (#19344)

Co-authored-by: Ella van Durpe <ella@automattic.com> Co-authored-by: Joen Asmussen <joen@automattic.com> Co-authored-by: Jon Quach <hello@jonquach.com> Co-authored-by: tellthemachines <tellthemachines@users.noreply.github.com>
WordPress · Feb 25, 2020 · ef73ed0 · ef73ed0
1 parent 19f87d0
commit ef73ed0
Show file tree

Hide file tree

Showing 166 changed files with 1,828 additions and 1,934 deletions.
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
@@ -25,6 +25,15 @@ $light-gray-200: #f3f4f5;
 $light-gray-100: #f8f9f9;
 $white: #fff;
 
+// G2 colors.
+$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: 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.
 $dark-opacity-900: rgba(#000510, 0.9);
 $dark-opacity-800: rgba(#00000a, 0.85);
@@ -82,8 +91,6 @@ $blue-medium-300: #66c6e4;
 $blue-medium-200: #bfe7f3;
 $blue-medium-100: #e5f5fa;
 $blue-medium-highlight: #b3e7fe;
-$blue-medium-focus: #007cba;
-$blue-medium-focus-dark: #fff;
 
 // Alert colors.
 $alert-yellow: #f0b849;

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -123,12 +123,6 @@
 	cursor: default;
 }
 
-@mixin button-style__hover {
-	background-color: $white;
-	color: $dark-gray-900;
-	box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
-}
-
 @mixin button-style__active() {
 	outline: none;
 	background-color: $white;
@@ -137,12 +131,10 @@
 }
 
 @mixin button-style__focus-active() {
-	background-color: $white;
-	color: $dark-gray-900;
-	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
+	box-shadow: 0 0 0 1px color($theme-color);
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
+	outline: 1px solid transparent;
 }
 
 // Switch.
@@ -154,26 +146,17 @@
 	outline-offset: 2px;
 }
 
-// Formatting Buttons.
-@mixin formatting-button-style__hover {
-	color: $dark-gray-500;
-	box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
-}
 
-@mixin formatting-button-style__active() {
-	outline: none;
-	color: $white;
-	box-shadow: none;
-	background: $dark-gray-500;
-}
-
-@mixin formatting-button-style__focus() {
-	box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
+/**
+ * Block Toolbar/Formatting Buttons
+ */
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
+@mixin block-toolbar-button-style__focus() {
+	box-shadow: inset 0 0 0 2px color($theme-color), inset 0 0 0 4px $white; // Inner halo makes this work on top of a toggled button.
+	outline: 2px solid transparent; // Shown to Windows 10 High Contrast Mode.
 }
 
+
 // Tabs, Inputs, Square buttons.
 @mixin input-style__neutral() {
 	box-shadow: 0 0 0 transparent;
@@ -231,35 +214,26 @@
 }
 
 @mixin block-style__hover {
-	background: $light-gray-200;
-	color: $dark-gray-900;
+	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
@@ -337,13 +311,14 @@
 	border-left: 3px solid transparent;
 	border-right: 3px solid transparent;
 	border-top: 5px solid;
-	margin-left: $grid-size-small;
+	margin-left: $grid-unit-05;
 
 	// This gives the icon space on the right side consistent with the material
 	// icon standards.
 	margin-right: 2px;
 }
 
+
 /**
  * Allows users to opt-out of animations via OS-level preferences.
  */

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -1,10 +1,9 @@
 @import "./colors";
 
 /**
- * Often re-used variables
+ * Fonts & basic variables.
  */
 
-// Fonts & basics
 $default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
 $default-font-size: 13px;
 $default-line-height: 1.4;
@@ -17,15 +16,49 @@ $editor-line-height: 1.8;
 $big-font-size: 18px;
 $mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"
 
-// Grid size
+
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+
+$grid-unit: 8px;
+$grid-unit-05: 0.5 * $grid-unit;	// 4px
+$grid-unit-10: 1 * $grid-unit;		// 8px
+$grid-unit-15: 1.5 * $grid-unit;	// 12px
+$grid-unit-20: 2 * $grid-unit;		// 16px
+$grid-unit-30: 3 * $grid-unit;		// 24px
+$grid-unit-40: 4 * $grid-unit;		// 32px
+$grid-unit-50: 5 * $grid-unit;		// 40px
+$grid-unit-60: 6 * $grid-unit;		// 48px
+
+/* @Todo: Move towards custom properties:
+:root {
+	--grid-unit: 8px;
+	--grid-unit-05: calc(0.5 * var(--grid-unit)); // 4px
+	--grid-unit-10: calc(1 * var(--grid-unit));   // 8px
+	--grid-unit-15: calc(1.5 * var(--grid-unit)); // 12px
+	--grid-unit-20: calc(2 * var(--grid-unit));   // 16px
+	--grid-unit-30: calc(3 * var(--grid-unit));   // 24px
+	--grid-unit-40: calc(4 * var(--grid-unit));   // 32px
+	--grid-unit-50: calc(5 * var(--grid-unit));   // 40px
+	--grid-unit-60: calc(6 * var(--grid-unit));   // 48px
+}
+*/
+
+// Deprecated grid units.
 $grid-size-small: 4px;
 $grid-size: 8px;
 $grid-size-large: 16px;
 $grid-size-xlarge: 24px;
 
-// Widths, heights & dimensions
+
+/**
+ * Dimensions.
+ */
+
 $panel-padding: 16px;
-$header-height: 56px;
+$header-height: 60px;
 $panel-header-height: 50px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
@@ -34,25 +67,39 @@ $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $empty-paragraph-height: $text-editor-font-size * 4;
 $modal-min-width: 360px;
+$spinner-size: 18px;
+
+
+/**
+ * Shadows.
+ */
 
-// Visuals
-$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);
 
-// Editor Widths
+
+/**
+ * Editor widths.
+ */
+
 $sidebar-width: 280px;
 $content-width: 580px; // This is optimized for 70 characters.
+$widget-area-width: 700px;
+
+
+/**
+ * Block UI.
+ */
 
-// Block UI
 $border-width: 1px;
-$block-controls-height: 36px;
+$icon-button-size: 36px;
 $inserter-tabs-height: 36px;
-$block-toolbar-height: $block-controls-height + $border-width;
+$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.
 
-// Blocks
-$block-left-border-width: $border-width * 3;
+// Block specific dimensions.
 $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: 28px; // Width of the movers/drag handle UI.
@@ -75,14 +122,11 @@ $block-media-container-to-content: $block-selected-child-margin + $block-selecte
 $block-selected-vertical-margin-descendant: 2 * $block-selected-to-content;
 $block-selected-vertical-margin-child: $block-edge-to-content;
 
-// Buttons & UI Widgets
+
+/**
+ * Border radii.
+ */
+
 $radius-round-rectangle: 4px;
 $radius-round: 50%;
-$icon-button-size: 36px;
-$icon-button-size-small: 24px;
-$resize-handler-size: 15px;
-$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
-$spinner-size: 18px;
-
-// Widgets screen
-$widget-area-width: 700px;
+$radius-block-ui: 2px;
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -28,7 +28,6 @@ $z-layers: (
 	".edit-site-header": 62,
 	".edit-widgets-header": 30,
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
-	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
 	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
@@ -55,7 +54,6 @@ $z-layers: (
 	".block-editor-inner-blocks.has-overlay::after": 60,
 
 	// The toolbar, when contextual, should be above any adjacent nested block click overlays.
-	".block-editor-block-list__layout .reusable-block-edit-panel": 61,
 	".block-editor-block-contextual-toolbar": 61,
 
 	// The block mover, particularly in nested contexts,
@@ -117,7 +115,8 @@ $z-layers: (
 	".components-tooltip": 1000002,
 
 	// Make sure corner handles are above side handles for ResizableBox component
-	".components-resizable-box__side-handle": 1,
+	".components-resizable-box__handle": 2,
+	".components-resizable-box__side-handle": 2,
 	".components-resizable-box__corner-handle": 2,
 
 	// Make sure block manager sticky category titles appear above the options

diff --git a/packages/block-directory/src/components/downloadable-block-info/style.scss b/packages/block-directory/src/components/downloadable-block-info/style.scss
@@ -6,7 +6,7 @@
 	display: flex;
 	justify-content: space-between;
 	color: $dark-gray-400;
-	margin-top: $grid-size;
+	margin-top: $grid-unit-10;
 	font-size: 12px;
 
 	.block-directory-downloadable-block-info__column {

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -345,10 +345,6 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-upload/README.md>
 
-<a name="MultiBlocksSwitcher" href="#MultiBlocksSwitcher">#</a> **MultiBlocksSwitcher**
-
-Undocumented declaration.
-
 <a name="MultiSelectScrollIntoView" href="#MultiSelectScrollIntoView">#</a> **MultiSelectScrollIntoView**
 
 Scrolls the multi block selection end into view if not in view already. This

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;
-	padding: 0 $grid-size;
+	color: $dark-gray-primary;
+	padding: 0 $grid-unit-10;
 	font-size: inherit;
 }
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,20 +13,18 @@ const BlockDraggable = ( { children, clientIds } ) => {
 				getBlockRootClientId,
 				getTemplateLock,
 			} = select( 'core/block-editor' );
-			const normalizedClientIds = castArray( clientIds );
 			const rootClientId =
-				normalizedClientIds.length === 1
-					? getBlockRootClientId( normalizedClientIds[ 0 ] )
+				clientIds.length === 1
+					? getBlockRootClientId( clientIds[ 0 ] )
 					: null;
 			const templateLock = rootClientId
 				? getTemplateLock( rootClientId )
 				: null;
 
 			return {
-				index: getBlockIndex( normalizedClientIds[ 0 ], rootClientId ),
+				index: getBlockIndex( clientIds[ 0 ], rootClientId ),
 				srcRootClientId: rootClientId,
-				isDraggable:
-					normalizedClientIds.length === 1 && 'all' !== templateLock,
+				isDraggable: clientIds.length === 1 && 'all' !== templateLock,
 			};
 		},
 		[ clientIds ]
@@ -51,15 +44,14 @@ const BlockDraggable = ( { children, clientIds } ) => {
 	}, [] );
 
 	if ( ! isDraggable ) {
-		return null;
+		return children( { isDraggable: false } );
 	}
 
-	const normalizedClientIds = castArray( clientIds );
-	const blockElementId = `block-${ normalizedClientIds[ 0 ] }`;
+	const blockElementId = `block-${ clientIds[ 0 ] }`;
 	const transferData = {
 		type: 'block',
 		srcIndex: index,
-		srcClientId: normalizedClientIds[ 0 ],
+		srcClientId: clientIds[ 0 ],
 		srcRootClientId,
 	};
 
@@ -78,6 +70,7 @@ const BlockDraggable = ( { children, clientIds } ) => {
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {
+					isDraggable: true,
 					onDraggableStart,
 					onDraggableEnd,
 				} );