From a8a28c9ba72abb7b384cb6a421504421b3adc087 Mon Sep 17 00:00:00 2001
From: Staci Cooper <staci.cooper@automattic.com>
Date: Fri, 17 Dec 2021 11:23:35 -0800
Subject: [PATCH] Force syncing on initial selection

---
 packages/block-library/src/site-logo/edit.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index d35866ed5e4ec1..188ea7724300d4 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -438,8 +438,10 @@ export default function LogoEdit( {
 		};
 	}, [] );
 
-	const setLogo = ( newValue ) => {
-		if ( shouldSyncIcon ) {
+	const setLogo = ( newValue, shouldForceSync = false ) => {
+		// `shouldForceSync` is used to force syncing when the attribute
+		// may not have updated yet.
+		if ( shouldSyncIcon || shouldForceSync ) {
 			setIcon( newValue );
 		}
 
@@ -465,12 +467,19 @@ export default function LogoEdit( {
 		// Initialize the syncSiteIcon toggle. If we currently have no Site logo and no
 		// site icon, automatically sync the logo to the icon.
 		if ( shouldSyncIcon === undefined ) {
-			setAttributes( { shouldSyncIcon: ! siteIconId } );
+			const shouldForceSync = ! siteIconId;
+			setAttributes( { shouldSyncIcon: shouldForceSync } );
+
+			// Because we cannot rely on the `shouldSyncIcon` attribute to have updated by
+			// the time `setLogo` is called, pass an argument to force the syncing.
+			onSelectLogo( media, shouldForceSync );
+			return;
 		}
+
 		onSelectLogo( media );
 	};
 
-	const onSelectLogo = ( media ) => {
+	const onSelectLogo = ( media, shouldForceSync = false ) => {
 		if ( ! media ) {
 			return;
 		}
@@ -482,7 +491,7 @@ export default function LogoEdit( {
 			return;
 		}
 
-		setLogo( media.id );
+		setLogo( media.id, shouldForceSync );
 	};
 
 	const onRemoveLogo = () => {