Polish horizontal nav and text footprint experiment.

This moves the flashing footprint indicator to only the paragraph block.
WordPress · Feb 20, 2020 · c218783 · c218783
1 parent 3f82e61
commit c218783
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 32 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -177,38 +177,6 @@
 		}
 	}
 
-	// Show a footprint fade effect when first selecting any block.
-	.block-editor-block-list__block.is-selected::before {
-		position: absolute;
-		z-index: 1;
-		pointer-events: none;
-		content: "";
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-
-		background: rgba($black, 0.04);
-
-		// Flash a white color for dark themes.
-		.is-dark-theme & {
-			background: rgba($white, 0.15);
-		}
-
-		animation: block-editor-block-list__block-fade-out-animation 0.3s ease-out 0.3s;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-	}
-
-	@keyframes block-editor-block-list__block-fade-out-animation {
-		from {
-			opacity: 1;
-		}
-		to {
-			opacity: 0;
-		}
-	}
-
 	// Hide the focus indicator for collapsed blocks.
 	// These serve as only as column containers for floated blocks.
 	.block-editor-block-list__block.is-block-collapsed::after {

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -52,6 +52,8 @@
 			height: $block-toolbar-height;
 			width: $block-toolbar-height/2 !important;
 			min-width: $grid-unit-30;
+			padding-left: 0;
+			padding-right: 0;
 
 			// Focus style.
 			&::before {

diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
@@ -2,3 +2,36 @@
 .block-editor-block-list__block[data-type="core/paragraph"] .has-drop-cap:focus {
 	min-height: auto !important;
 }
+
+
+// Show a footprint fade effect when first selecting any block.
+.block-editor-block-list__block[data-type="core/paragraph"].is-selected:not(.is-typing)::before {
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+	content: "";
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+
+	background: rgba($black, 0.03);
+
+	// Flash a white color for dark themes.
+	.is-dark-theme & {
+		background: rgba($white, 0.1);
+	}
+
+	animation: block-editor-block-list__block-fade-out-animation 0.3s ease-out 0.2s;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+}
+
+@keyframes block-editor-block-list__block-fade-out-animation {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}