From a720882803419b5c97717ad2a987cada2a27695c Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 24 Nov 2022 10:01:49 +1300
Subject: [PATCH] Pass the is-synced classname into the BlockCard instead of
 the isSynced prop

---
 packages/block-editor/src/components/block-card/index.js  | 8 ++------
 .../block-editor/src/components/block-inspector/index.js  | 6 +++++-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index afda93d5ece7af..c85fd3ff21dd37 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -22,7 +22,7 @@ function BlockCard( {
 	blockType,
 	parentBlockClientId,
 	handleBackButton,
-	isSynced,
+	className,
 } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
@@ -36,11 +36,7 @@ function BlockCard( {
 		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 
 	return (
-		<div
-			className={ classnames( 'block-editor-block-card', {
-				'is-synced': isSynced,
-			} ) }
-		>
+		<div className={ classnames( 'block-editor-block-card', className ) }>
 			{ isOffCanvasNavigationEditorEnabled && parentBlockClientId && (
 				<Button
 					onClick={ handleBackButton }
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index c8ed85f2fd51bc..9b1acab2bba79a 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -106,7 +106,10 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentBlocks = useContentBlocks( blockTypes, block );
 	return (
 		<div className="block-editor-block-inspector">
-			<BlockCard { ...blockInformation } />
+			<BlockCard
+				{ ...blockInformation }
+				className={ blockInformation.isSynced && 'is-synced' }
+			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<VStack
 				spacing={ 1 }
@@ -264,6 +267,7 @@ const BlockInspectorSingleBlock = ( {
 		<div className="block-editor-block-inspector">
 			<BlockCard
 				{ ...blockInformation }
+				className={ blockInformation.isSynced && 'is-synced' }
 				parentBlockClientId={ parentBlockClientId }
 				handleBackButton={ () => {
 					selectBlock( parentBlockClientId );