General layout polish.

WordPress · Feb 18, 2020 · 1dd1f9c · 1dd1f9c
1 parent 79534ad
commit 1dd1f9c
Show file tree

Hide file tree

Showing 41 changed files with 289 additions and 251 deletions.
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
@@ -30,7 +30,7 @@ $dark-gray-primary: #1e1e1e;
 $medium-gray-text: #757575;
 $light-gray-secondary: #ccc;
 $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/_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
@@ -361,20 +361,22 @@
 	}
 }
 
+// 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;
+		// Special dimensions for this button.
+		min-width: 32px;
+		height: 32px;
+
+		// Spot color button.
+		background-color: $blue-medium-focus;
+		color: $white;
+		border-radius: $radius-block-ui;
 
-		&:not(:disabled):not([aria-disabled="true"]):hover {
-			box-shadow: none;
+		&:hover {
+			color: $white;
+			background-color: rgba($blue-medium-focus, 0.8);
 		}
 	}
 }
@@ -422,9 +424,10 @@
 
 
 /**
- * Block Toolbar when contextual.
+ * Block Toolbar, top and contextual.
  */
 
+.edit-post-header-toolbar__block-toolbar,
 .block-editor-block-contextual-toolbar {
 	// Adapt the height of the toolbar items.
 	.components-toolbar {
@@ -436,7 +439,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;
@@ -471,6 +481,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);
 			}
 		}
 
@@ -540,7 +551,7 @@
 
 			// @todo It should position the block transform dialog as the left margin of a block. It currently
 			// positions instead, the mover control.
-			margin-left: -$grid-unit-60;
+			margin-left: -$grid-unit-60 - $border-width;
 		}
 
 		.block-editor-block-contextual-toolbar[data-align="full"],

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,6 @@
 			height: $block-toolbar-height;
 			width: $block-toolbar-height/2 !important;
 			min-width: $grid-unit-30;
-			padding: 0;
 
 			// Focus style.
 			&::before {

diff --git a/packages/block-editor/src/components/block-settings-menu/style.scss b/packages/block-editor/src/components/block-settings-menu/style.scss
@@ -3,7 +3,7 @@
 }
 
 .block-editor-block-settings-menu__popover .components-popover__content {
-	margin-top: $grid-size;
+	margin-top: $grid-unit-15;
 }
 
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -157,10 +157,8 @@ export class BlockSwitcher extends Component {
 									</PanelBody>
 								) }
 								{ possibleBlockTransformations.length !== 0 && (
-									<PanelBody
-										title={ __( 'Transform To:' ) }
-										initialOpen
-									>
+									<>
+										<div>{ __( 'Transform to:' ) }</div>
 										<BlockTypesList
 											items={ possibleBlockTransformations.map(
 												( destinationBlockType ) => ( {
@@ -177,7 +175,7 @@ export class BlockSwitcher extends Component {
 												onClose();
 											} }
 										/>
-									</PanelBody>
+									</>
 								) }
 							</div>
 						) }

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -10,13 +10,19 @@
 		display: none;
 		content: "";
 		position: absolute;
-		bottom: 0;
+		bottom: 1px;
 		right: 0;
 		border-color: transparent;
 		border-style: solid;
+		border-width: 4px;
+		border-right-color: currentColor;
+		border-bottom-color: currentColor;
+		transition: border 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+	}
+
+	// Grow the indicator a little bit on hover.
+	&:hover::after {
 		border-width: 5px;
-		border-right-color: $dark-gray-primary;
-		border-bottom-color: $dark-gray-primary;
 	}
 }
 
@@ -25,7 +31,7 @@
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	margin: 0;
 	display: block;
-	height: $icon-button-size;
+	height: $grid-unit-60;
 
 	.block-editor-block-icon {
 		margin: auto;
@@ -84,7 +90,7 @@
 	display: flex;
 	background: $white;
 	box-shadow: $shadow-popover;
-	padding: 0;
+	padding: $grid-unit-30;
 }
 
 .block-editor-block-switcher__popover .components-popover__content {
@@ -131,7 +137,7 @@
 }
 
 .block-editor-block-switcher__popover .block-editor-block-types-list {
-	margin: 8px -8px -8px;
+	margin: $grid-unit-15 0 0 0;
 }
 
 .block-editor-block-switcher__preview-title {
@@ -143,11 +149,11 @@
 .block-editor-block-contextual-toolbar {
 	.components-button.block-editor-block-switcher__toggle,
 	.components-button.block-editor-block-switcher__no-switcher-icon {
-		height: $block-toolbar-height;
+		height: $grid-unit-60;
 	}
 
 	.components-button.block-editor-block-switcher__no-switcher-icon {
-		width: $block-toolbar-height;
+		width: $grid-unit-60;
 	}
 
 	.components-button.block-editor-block-switcher__toggle {

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -44,6 +44,16 @@
 	> :last-child .components-toolbar {
 		border-right: none;
 	}
+
+	// Add a border and adjust the color for Top Toolbar mode.
+	.has-fixed-toolbar & {
+		.block-editor-block-mover .components-toolbar {
+			border-left: $border-width solid $light-gray-500;
+		}
+		.components-toolbar {
+			border-color: $light-gray-500;
+		}
+	}
 }
 
 .block-editor-block-toolbar,
@@ -173,16 +183,6 @@
 			right: $grid-unit-10;
 		}
 	}
-
-	// Add a left border and adjust the color for Top Toolbar mode.
-	.has-fixed-toolbar & {
-		box-shadow: none;
-		border-left: $border-width solid $light-gray-500;
-
-		.components-toolbar {
-			border-color: $light-gray-500;
-		}
-	}
 }
 
 .block-editor-block-toolbar__slot {

diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -94,21 +94,6 @@
 	&:disabled {
 		display: none;
 	}
-
-	.block-editor-inserter__toggle {
-		border-radius: 50%;
-		width: $block-side-ui-width;
-		height: $block-side-ui-width;
-		padding: 0;
-
-		// Use opacity to work in various editor styles.
-		&:not(:hover) {
-			color: $dark-opacity-500;
-			.is-dark-theme & {
-				color: $light-opacity-500;
-			}
-		}
-	}
 }
 
 .block-editor-default-block-appender .block-editor-inserter {

diff --git a/packages/block-editor/src/components/editor-skeleton/style.scss b/packages/block-editor/src/components/editor-skeleton/style.scss
@@ -105,6 +105,7 @@ html.block-editor-editor-skeleton__html-container {
 	bottom: 0;
 	left: 0;
 	background: $white;
+	color: $dark-gray-primary;
 
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
@@ -120,6 +121,7 @@ html.block-editor-editor-skeleton__html-container {
 	height: auto;  // Keep the height flexible.
 	border-bottom: $border-width solid $light-gray-500;
 	z-index: z-index(".block-editor-editor-skeleton__header");
+	color: $dark-gray-primary;
 
 	// On Mobile the header is sticky.
 	position: sticky;
@@ -135,8 +137,8 @@ html.block-editor-editor-skeleton__html-container {
 .block-editor-editor-skeleton__footer {
 	height: auto;  // Keep the height flexible.
 	flex-shrink: 0;
-	overflow: auto;
 	border-top: $border-width solid $light-gray-500;
+	color: $dark-gray-primary;
 
 	// On Mobile the footer is hidden
 	display: none;
@@ -153,6 +155,7 @@ html.block-editor-editor-skeleton__html-container {
 	left: auto;
 	right: 0;
 	width: $sidebar-width;
+	color: $dark-gray-primary;
 
 	&:focus {
 		top: auto;

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -17,14 +17,40 @@ $block-inserter-search-height: 38px;
 }
 
 .block-editor-inserter__popover > .components-popover__content {
-	padding: 0;
+	padding: 0 0 $border-width 0;
 
 	@include break-medium {
 		overflow-y: visible;
 		height: $block-inserter-content-height + $block-inserter-tabs-height + $block-inserter-search-height;
 	}
 }
 
+.block-editor-inserter__toggle.components-button {
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	padding: 0;
+	transition: color 0.2s ease;
+	@include reduce-motion("transition");
+
+	&:hover:not(:disabled) {
+		background: color($theme-color shade(10%));
+		color: $white;
+	}
+
+	&:active:not(:disabled) {
+		background: color($theme-color shade(20%));
+		border-color: color($theme-color shade(20%));
+		color: $white;
+	}
+
+	&:focus:not(:disabled) {
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color);
+	}
+}
+
 .block-editor-inserter__menu {
 	height: 100%;
 	display: flex;