Improve and simplify reusable block styles. (#18903)

packages/block-editor/src/components/block-list/style.scss

@@ -293,18 +293,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;

packages/block-library/src/block/edit-panel/editor.scss

@@ -74,3 +74,8 @@
 		border-left-color: transparent;
 	}
 }
+
+.is-selected.is-navigate-mode .reusable-block-edit-panel {
+	border-color: $blue-medium-focus;
+	border-left-color: transparent;
+}

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

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