Merge pull request #5720 from WordPress/update/add-reusable-block-ind…

…icator Update UI to better indicate that a block is reusable
WordPress · Mar 23, 2018 · 0fa6c7e · 0fa6c7e
2 parents 8d77d9e + 7164afb
commit 0fa6c7e
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 16 deletions.
diff --git a/blocks/library/block/edit-panel/style.scss b/blocks/library/block/edit-panel/style.scss
@@ -6,8 +6,10 @@
 	font-family: $default-font;
 	font-size: $default-font-size;
 	justify-content: flex-end;
-	margin: $block-padding (-$block-padding) (-$block-padding);
+	margin: 0 (-$block-padding);
 	padding: 10px $block-padding;
+	position: relative;
+	top: $block-padding;
 
 	.reusable-block-edit-panel__spinner {
 		margin: 0 5px;

diff --git a/blocks/library/block/index.js b/blocks/library/block/index.js
@@ -16,6 +16,7 @@ import { __ } from '@wordpress/i18n';
  */
 import BlockEdit from '../../block-edit';
 import ReusableBlockEditPanel from './edit-panel';
+import ReusableBlockIndicator from './indicator';
 
 class ReusableBlockEdit extends Component {
 	constructor( { reusableBlock } ) {
@@ -118,6 +119,7 @@ class ReusableBlockEdit extends Component {
 						onCancel={ this.stopEditing }
 					/>
 				) }
+				{ ! isSelected && ! isEditing && <ReusableBlockIndicator title={ reusableBlock.title } /> }
 			</Fragment>
 		);
 	}

diff --git a/blocks/library/block/indicator/index.js b/blocks/library/block/indicator/index.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { Tooltip, Dashicon } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function ReusableBlockIndicator( { title } ) {
+	return (
+		<Tooltip text={ sprintf( __( 'Shared Block: %s' ), title ) }>
+			<span className="reusable-block-indicator">
+				<Dashicon icon="controls-repeat" />
+			</span>
+		</Tooltip>
+	);
+}
+
+export default ReusableBlockIndicator;
diff --git a/blocks/library/block/indicator/style.scss b/blocks/library/block/indicator/style.scss
@@ -0,0 +1,12 @@
+.reusable-block-indicator {
+	background: $white;
+	border-left: 1px dashed $light-gray-500;
+	color: $dark-gray-500;
+	border-top: 1px dashed $light-gray-500;
+	bottom: -$block-padding;
+	height: 30px;
+	padding: 5px;
+	position: absolute;
+	right: -$block-padding;
+	width: 30px;
+}
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -92,21 +92,12 @@
 		transition: opacity 0.2s;
 	}
 
-	&.is-reusable.is-selected > .editor-block-mover:before {
-		border-right: none;
-	}
-
 	&.is-selected > .editor-block-settings-menu:before,
 	&.is-hovered > .editor-block-settings-menu:before {
 		border-left: 1px solid $light-gray-500;
 		left: 6px;
 	}
 
-	&.is-reusable.is-selected > .editor-block-settings-menu:before {
-		border-left: none;
-	}
-
-
 	/**
 	 * Selected Block style
 	 */
@@ -132,12 +123,6 @@
 		outline: 1px solid $light-gray-500;
 	}
 
-	// give reusable blocks a dashed outline
-	&.is-reusable.is-selected > .editor-block-list__block-edit:before {
-		outline: 1px dashed $light-gray-500;
-	}
-
-
 	/**
 	 * Selection Style
 	 */
@@ -159,6 +144,21 @@
 		background: $blue-medium-highlight;
 	}
 
+	/**
+	 * Reusable Block style
+	 */
+
+	&.is-reusable > .editor-block-mover:before {
+		border-right: none;
+	}
+
+	&.is-reusable > .editor-block-settings-menu:before {
+		border-left: none;
+	}
+
+	&.is-reusable > .editor-block-list__block-edit:before {
+		outline: 1px dashed $light-gray-500;
+	}
 
 	// @todo, this appears to be unused
 	.iframe-overlay {