From 36d6f9725c3afd007168adb63fd541658b474544 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 28 May 2024 14:08:57 +0200
Subject: [PATCH] Update: For synced entities the icon should be purple.
 (#62024)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../src/components/document-bar/index.js      |  9 +-----
 .../src/components/post-card-panel/index.js   | 30 +++++++++++++++++--
 .../src/components/post-card-panel/style.scss |  4 +++
 packages/editor/src/store/constants.js        |  6 ++++
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
index 6e487e5afb46ac..25355068ee26e7 100644
--- a/packages/editor/src/components/document-bar/index.js
+++ b/packages/editor/src/components/document-bar/index.js
@@ -25,6 +25,7 @@ import { useReducedMotion } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
@@ -39,14 +40,6 @@ const TYPE_LABELS = {
 	wp_template_part: __( 'Editing template part: %s' ),
 };
 
-const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
-
-const GLOBAL_POST_TYPES = [
-	...TEMPLATE_POST_TYPES,
-	'wp_block',
-	'wp_navigation',
-];
-
 const MotionButton = motion( Button );
 
 /**
diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index b68d075afb5b6b..5804d0955b94be 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -18,11 +22,13 @@ import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	GLOBAL_POST_TYPES,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 
 export default function PostCardPanel( { actions } ) {
-	const { title, icon } = useSelect( ( select ) => {
+	const { title, icon, isSync } = useSelect( ( select ) => {
 		const {
 			getEditedPostAttribute,
 			getCurrentPostType,
@@ -36,11 +42,26 @@ export default function PostCardPanel( { actions } ) {
 		const _templateInfo =
 			[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( _type ) &&
 			__experimentalGetTemplateInfo( _record );
+		let _isSync = false;
+		if ( GLOBAL_POST_TYPES.includes( _type ) ) {
+			if ( PATTERN_POST_TYPE === _type ) {
+				// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
+				const currentSyncStatus =
+					getEditedPostAttribute( 'meta' )?.wp_pattern_sync_status ===
+					'unsynced'
+						? 'unsynced'
+						: getEditedPostAttribute( 'wp_pattern_sync_status' );
+				_isSync = currentSyncStatus !== 'unsynced';
+			} else {
+				_isSync = true;
+			}
+		}
 		return {
 			title: _templateInfo?.title || getEditedPostAttribute( 'title' ),
 			icon: unlock( select( editorStore ) ).getPostIcon( _type, {
 				area: _record?.area,
 			} ),
+			isSync: _isSync,
 		};
 	}, [] );
 	return (
@@ -50,7 +71,12 @@ export default function PostCardPanel( { actions } ) {
 				className="editor-post-card-panel__header"
 				align="flex-start"
 			>
-				<Icon className="editor-post-card-panel__icon" icon={ icon } />
+				<Icon
+					className={ clsx( 'editor-post-card-panel__icon', {
+						'is-sync': isSync,
+					} ) }
+					icon={ icon }
+				/>
 				<Text
 					numberOfLines={ 2 }
 					truncate
diff --git a/packages/editor/src/components/post-card-panel/style.scss b/packages/editor/src/components/post-card-panel/style.scss
index a6928a6efb1e30..7af82a87081242 100644
--- a/packages/editor/src/components/post-card-panel/style.scss
+++ b/packages/editor/src/components/post-card-panel/style.scss
@@ -26,3 +26,7 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
+
+.editor-post-card-panel__icon.is-sync {
+	fill: var(--wp-block-synced-color);
+}
diff --git a/packages/editor/src/store/constants.js b/packages/editor/src/store/constants.js
index 81e2fba5d14af9..c29493266025ed 100644
--- a/packages/editor/src/store/constants.js
+++ b/packages/editor/src/store/constants.js
@@ -27,3 +27,9 @@ export const TEMPLATE_ORIGINS = {
 	theme: 'theme',
 	plugin: 'plugin',
 };
+export const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
+export const GLOBAL_POST_TYPES = [
+	...TEMPLATE_POST_TYPES,
+	'wp_block',
+	'wp_navigation',
+];