Improve and simplify reusable block styles.

WordPress · Dec 4, 2019 · 180dfb9 · 180dfb9
1 parent 0480528
commit 180dfb9
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 45 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -275,18 +275,10 @@
 	}
 
 	// Reusable blocks.
-	&.is-reusable > .block-editor-block-list__block-edit::before {
-		border: $border-width dashed $dark-opacity-light-500;
-
-		.is-dark-theme & {
-			border-color: $light-opacity-light-600;
-		}
-	}
-
 	&.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
-		// Use opacity to work in various editor styles.
-		border-color: $dark-opacity-light-800;
 		border-left-color: transparent;
+		border-style: dashed;
+		border-width: $border-width;
 
 		.is-dark-theme & {
 			border-color: $light-opacity-light-800;

diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss
@@ -73,4 +73,14 @@
 		border-color: $light-opacity-light-800;
 		border-left-color: transparent;
 	}
+
+	.is-navigate-mode & {
+		border-color: $blue-medium-focus;
+		border-left-color: transparent;
+	}
+}
+
+.editor-block-list__layout .is-selected.is-navigate-mode .reusable-block-edit-panel {
+	border-color: $blue-medium-focus;
+	border-left-color: transparent;
 }
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
@@ -25,7 +25,6 @@ import { parse, serialize } from '@wordpress/blocks';
  * Internal dependencies
  */
 import ReusableBlockEditPanel from './edit-panel';
-import ReusableBlockIndicator from './indicator';
 
 class ReusableBlockEdit extends Component {
 	constructor( { reusableBlock } ) {
@@ -147,7 +146,6 @@ class ReusableBlockEdit extends Component {
 						onCancel={ this.stopEditing }
 					/>
 				) }
-				{ ! isSelected && ! isEditing && <ReusableBlockIndicator title={ reusableBlock.title } /> }
 				{ element }
 			</div>
 		);

diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
@@ -1,3 +1,3 @@
 .edit-post-visual-editor .block-library-block__reusable-block-container .block-editor-writing-flow__click-redirect {
-	height: auto;
+	min-height: auto;
 }
diff --git a/packages/block-library/src/block/indicator/editor.scss b/packages/block-library/src/block/indicator/editor.scss
diff --git a/packages/block-library/src/block/indicator/index.js b/packages/block-library/src/block/indicator/index.js
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -42,7 +42,6 @@
  * Import styles from internal editor components used by the blocks.
  */
 @import "./block/edit-panel/editor.scss";
-@import "./block/indicator/editor.scss";
 
 /**
  * Editor Normalization Styles