remove the synced icon and instead use synced colored border on hover

WordPress · Sep 10, 2023 · bf74886 · bf74886
1 parent 2f53ea2
commit bf74886
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -11,7 +16,6 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { Icon, symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -71,7 +75,13 @@ function BlockPattern( {
 							role="option"
 							as="div"
 							{ ...composite }
-							className="block-editor-block-patterns-list__item"
+							className={ classnames(
+								'block-editor-block-patterns-list__item',
+								{
+									'block-editor-block-patterns-list__list-item-synced':
+										pattern.id && ! pattern.syncStatus,
+								}
+							) }
 							onClick={ () => {
 								onClick( pattern, blocks );
 								onHover?.( null );
@@ -98,21 +108,6 @@ function BlockPattern( {
 										{ pattern.title }
 									</div>
 								) }
-								{ pattern.id && ! pattern.syncStatus && (
-									<Tooltip
-										position="top center"
-										text={ __(
-											'Editing this pattern will also update anywhere it is usedxx'
-										) }
-									>
-										<div className="block-editor-patterns__pattern-icon-wrapper">
-											<Icon
-												className="block-editor-patterns__pattern-icon"
-												icon={ symbol }
-											/>
-										</div>
-									</Tooltip>
-								) }
 							</div>
 							{ !! pattern.description && (
 								<VisuallyHidden id={ descriptionId }>

diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -45,10 +45,11 @@
 		color: var(--wp-admin-theme-color);
 	}
 
-	.block-editor-patterns__pattern-icon-wrapper {
-		text-align: center;
-		.block-editor-patterns__pattern-icon {
-			fill: var(--wp-block-synced-color);
+	&.block-editor-block-patterns-list__list-item-synced {
+		.block-editor-block-preview__container:hover {
+			box-shadow:
+				0 0 0 2px var(--wp-block-synced-color),
+				0 15px 25px rgb(0 0 0 / 7%);
 		}
 	}
 }