Update: For synced entities the icon should be purple. (WordPress#62024)

Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: jameskoster <[email protected]>
patil-vipul · Jun 17, 2024 · 36d6f97 · 36d6f97
1 parent 236412f
commit 36d6f97
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',
+];