Adjust primary, secondary and tertiary buttons.

This will no doubt need additional feedback, and the branch should stay open for a while to gather all those thoughts. One of the primary reasons for reducing the borders is, similar to tertiary buttons, that they work due to their context, just like how menu ite ms work in their menu item contexts. This puts a great onus on the implementer to choose the right button for the right context. In that vein, w e may even want to provide additional buttons, such as a solid background button that isn't primary, for cases where a primary button is insuffi cient, and a secondary button does not work well enough in the context. An example could be considered the link dialog mocked up here #20007 (comment)
WordPress · Feb 20, 2020 · fec0a75 · fec0a75
1 parent 95a905c
commit fec0a75
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 109 deletions.
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
@@ -29,6 +29,7 @@ $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: Currently being used as "spot" color. Needs to be considered in context of themes.
 $blue-medium-focus-dark: #fff;

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/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-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;

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -7,7 +7,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Dropdown, Button, Toolbar, PanelBody } from '@wordpress/components';
+import { Dropdown, Button, Toolbar, MenuGroup } from '@wordpress/components';
 import {
 	getBlockType,
 	getPossibleBlockTransformations,
@@ -143,22 +143,24 @@ export class BlockSwitcher extends Component {
 							possibleBlockTransformations.length !== 0 ) && (
 							<div className="block-editor-block-switcher__container">
 								{ hasBlockStyles && (
-									<PanelBody
-										title={ __( 'Block Styles' ) }
-										initialOpen
-									>
+									<MenuGroup>
+										<div className="block-editor-block-switcher__label">
+											{ __( 'Styles' ) }
+										</div>
 										<BlockStyles
 											clientId={ blocks[ 0 ].clientId }
 											onSwitch={ onClose }
 											onHoverClassName={
 												this.onHoverClassName
 											}
 										/>
-									</PanelBody>
+									</MenuGroup>
 								) }
 								{ possibleBlockTransformations.length !== 0 && (
-									<>
-										<div>{ __( 'Transform to:' ) }</div>
+									<MenuGroup>
+										<div className="block-editor-block-switcher__label">
+											{ __( 'Transform to' ) }
+										</div>
 										<BlockTypesList
 											items={ possibleBlockTransformations.map(
 												( destinationBlockType ) => ( {
@@ -175,7 +177,7 @@ export class BlockSwitcher extends Component {
 												onClose();
 											} }
 										/>
-									</>
+									</MenuGroup>
 								) }
 							</div>
 						) }

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -90,7 +90,15 @@
 	display: flex;
 	background: $white;
 	box-shadow: $shadow-popover;
-	padding: $grid-unit-30;
+	padding: 0;
+
+	.components-menu-group {
+		padding: $grid-unit-20 $grid-unit-30;
+	}
+
+	.components-menu-group + .components-menu-group {
+		border-color: $light-gray-secondary;
+	}
 }
 
 .block-editor-block-switcher__popover .components-popover__content {
@@ -100,6 +108,11 @@
 		width: 50%;
 	}
 
+	.block-editor-block-switcher__label {
+		margin-bottom: $grid-unit-10;
+		color: $medium-gray-text;
+	}
+
 	@include break-medium {
 		position: relative;
 

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -35,10 +35,6 @@
 
 		&.is-active {
 			@include block-style__is-active();
-
-			&:focus {
-				@include block-style__is-active-focus();
-			}
 		}
 	}
 }

diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss
@@ -29,15 +29,6 @@
 
 .block-editor-media-placeholder__button {
 	margin-bottom: 0.5rem;
-
-	.dashicon {
-		vertical-align: middle;
-		margin-bottom: 3px;
-	}
-
-	&:hover {
-		color: $dark-gray-800;
-	}
 }
 
 .block-editor-media-placeholder__cancel-button.is-link {
@@ -46,20 +37,10 @@
 }
 
 .block-editor-media-placeholder.is-appender {
-	min-height: 100px;
+	min-height: 0;
 
 	&:hover {
 		cursor: pointer;
-		border: 1px solid $theme-color;
+		box-shadow: 0 0 0 1px $theme-color;
 	}
-
-	.block-editor-media-placeholder__upload-button {
-		margin-right: $grid-unit-05;
-		&.components-button:hover,
-		&.components-button:focus {
-			box-shadow: none;
-			border: $border-width solid $dark-gray-500;
-		}
-	}
-
 }
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -6,8 +6,19 @@
 		list-style-type: none;
 	}
 
+	// @todo: this deserves a refactor, by being moved to the toolbar.
 	.block-editor-media-placeholder {
-		margin-bottom: $grid-unit-10;
+		margin-bottom: $grid-unit-15;
+		padding: $grid-unit-15;
+
+		// This element is empty here anyway.
+		.components-placeholder__label {
+			display: none;
+		}
+
+		.components-button {
+			margin-bottom: 0;
+		}
 	}
 }
 
@@ -26,12 +37,19 @@ figure.wp-block-gallery {
 .blocks-gallery-item {
 
 	// Hide the focus outline that otherwise briefly appears when selecting a block.
-	figure:not(.is-selected):focus {
+	figure:not(.is-selected):focus,
+	img:focus {
 		outline: none;
 	}
 
 	figure.is-selected {
-		outline: 4px solid theme(primary);
+		box-shadow: 0 0 0 $border-width $white, 0 0 0 3px $theme-color;
+		border-radius: $radius-block-ui;
+		outline: 2px solid transparent;
+
+		img {
+			border-radius: $radius-block-ui;
+		}
 	}
 
 	figure.is-transient img {
@@ -103,9 +121,9 @@ figure.wp-block-gallery {
 	left: -2px;
 }
 
-.blocks-gallery-item__move-backward,
-.blocks-gallery-item__move-forward,
-.blocks-gallery-item__remove {
+.blocks-gallery-item__move-backward.components-button,
+.blocks-gallery-item__move-forward.components-button,
+.blocks-gallery-item__remove.components-button {
 	padding: 0;
 }