CYS: show logo when the header is updated (#49681)

* CYS: show logo when the header is updated

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/auto-block-preview-event-listener.ts

@@ -338,16 +338,14 @@ export const useAddAutoBlockPreviewEventListenersAndObservers = (
 
 		setStyle( documentElement );
 
-		if ( logoBlockIds.length === 0 ) {
+		const logoObserver = findAndSetLogoBlock(
-			const logoObserver = findAndSetLogoBlock(
+			{ autoScale, documentElement },
-				{ autoScale, documentElement },
+			{
-				{
+				setLogoBlockIds,
-					setLogoBlockIds,
+			}
-				}
+		);
-			);
 
-			observers.push( logoObserver );
+		observers.push( logoObserver );
-		}
 
 		if (
 			isFullComposabilityFeatureAndAPIAvailable() &&

plugins/woocommerce/changelog/49681-49668-infinite-loading-for-the-logo-in-cys-when-switching-header-and-attempting-to-change-added-logo

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS: show logo when the header is updated.

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.page.js

@@ -49,6 +49,10 @@ export class LogoPickerPage {
 			.click();
 	}
 
+	getPlaceholderPreview( assemblerLocator ) {
+		return assemblerLocator.locator( '.components-placeholder__preview' );
+	}
+
 	async resetLogo( baseURL ) {
 		const apiContext = await this.request.newContext( {
 			baseURL,

plugins/woocommerce/tests/e2e-pw/tests/customize-store/assembler/logo-picker/logo-picker.spec.js

@@ -187,6 +187,38 @@ test.describe( 'Assembler -> Logo Picker', { tag: '@gutenberg' }, () => {
 		await expect( assembler.getByText( 'Media Library' ) ).toBeVisible();
 	} );
 
+	// This test checks this regression: https://github.com/woocommerce/woocommerce/issues/49668
+	test( 'Logo should be visible after header update', async ( {
+		assemblerPageObject,
+		logoPickerPageObject,
+	} ) => {
+		const assembler = await assemblerPageObject.getAssembler();
+		const emptyLogoPicker =
+			logoPickerPageObject.getEmptyLogoPickerLocator( assembler );
+		await emptyLogoPicker.click();
+		await logoPickerPageObject.pickImage( assembler );
+
+		await assembler.getByLabel( 'Back' ).click();
+
+		await assembler.getByText( 'Choose your header' ).click();
+
+		const header = assembler
+			.locator( '.block-editor-block-patterns-list__list-item' )
+			.nth( 1 )
+			.frameLocator( 'iframe' )
+			.locator( '.wc-blocks-header-pattern' );
+
+		await header.click();
+
+		await assembler.getByLabel( 'Back' ).click();
+
+		await assembler.getByText( 'Add your logo' ).click();
+		const emptyLogoLocator =
+			logoPickerPageObject.getPlaceholderPreview( assembler );
+
+		await expect( emptyLogoLocator ).toBeHidden();
+	} );
+
 	test( 'Enabling the "use as site icon" option should set the image as the site icon', async ( {
 		page,
 		assemblerPageObject,