CYS: Fix Header/Footer template parts disappear (#45735)

* CYS: Fix Header/Footer template parts disappear

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

* show pattern list only when the site editor is ready

---------

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

plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor-container.tsx

@@ -7,15 +7,20 @@
 import { store as blockEditorStore } from '@wordpress/block-editor';
 // @ts-expect-error No types for this exist yet.
 import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 // @ts-expect-error No types for this exist yet.
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 // @ts-expect-error No types for this exist yet.
 import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
 import { useQuery } from '@woocommerce/navigation';
 // @ts-expect-error No types for this exist yet.
 import useSiteEditorSettings from '@wordpress/edit-site/build-module/components/block-editor/use-site-editor-settings';
-import { useCallback, useContext, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+} from '@wordpress/element';
 // @ts-expect-error No types for this exist yet.
 import { store as editSiteStore } from '@wordpress/edit-site/build-module/store';
 
@@ -159,36 +164,51 @@ export const BlockEditorContainer = () => {
 
 	const opacityClass = 'preview-opacity';
 
-	const renderedBlocks = useMemo(
-		() =>
-			blocks.map( ( block ) => {
+	const clientIds = blocks.map( ( block ) => block.clientId );
+
+	// @ts-expect-error No types for this exist yet.
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		const { blockIdToHighlight, restOfBlockIds } = clientIds.reduce(
+			( acc, clientId ) => {
 				if (
 					! isHighlighting ||
-					block.clientId === highlightedBlockClientId
+					clientId === highlightedBlockClientId
 				) {
 					return {
-						...block,
-						attributes: {
-							...block.attributes,
-							className: block.attributes.className?.replace(
-								opacityClass,
-								''
-							),
-						},
+						blockIdToHighlight: clientId,
+						restOfBlockIds: acc.restOfBlockIds,
 					};
 				}
 
 				return {
-					...block,
-					attributes: {
-						...block.attributes,
-						className:
-							block.attributes.className + ` ${ opacityClass }`,
-					},
+					blockIdToHighlight: acc.blockIdToHighlight,
+					restOfBlockIds: [ ...acc.restOfBlockIds, clientId ],
 				};
-			} ),
-		[ blocks, highlightedBlockClientId, isHighlighting ]
-	);
+			},
+			{
+				blockIdToHighlight: null,
+				restOfBlockIds: [],
+			} as {
+				blockIdToHighlight: string | null;
+				restOfBlockIds: string[];
+			}
+		);
+
+		updateBlockAttributes( blockIdToHighlight, {
+			className: '',
+		} );
+
+		updateBlockAttributes( restOfBlockIds, {
+			className: ` ${ opacityClass }`,
+		} );
+	}, [
+		clientIds,
+		highlightedBlockClientId,
+		isHighlighting,
+		updateBlockAttributes,
+	] );
 
 	const isScrollable = useMemo(
 		() =>
@@ -202,7 +222,7 @@ export const BlockEditorContainer = () => {
 
 	return (
 		<BlockEditor
-			renderedBlocks={ renderedBlocks }
+			renderedBlocks={ blocks }
 			isScrollable={ isScrollable }
 			onChange={ onChange }
 			settings={ settings }

plugins/woocommerce-admin/client/customize-store/assembler-hub/block-preview.tsx

@@ -7,7 +7,7 @@
  */
 // @ts-ignore No types for this exist yet.
 import { BlockEditorProvider } from '@wordpress/block-editor';
-import { memo, useMemo } from '@wordpress/element';
+import { memo } from '@wordpress/element';
 import { BlockInstance } from '@wordpress/blocks';
 /**
  * Internal dependencies
@@ -30,10 +30,7 @@ export const BlockPreview = ( {
 	onChange?: ChangeHandler | undefined;
 	useSubRegistry?: boolean;
 } & Omit< ScaledBlockPreviewProps, 'containerWidth' > ) => {
-	const renderedBlocks = useMemo( () => {
-		const _blocks = Array.isArray( blocks ) ? blocks : [ blocks ];
-		return _blocks;
-	}, [ blocks ] );
+	const renderedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
 
 	return (
 		<BlockEditorProvider

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage.tsx

@@ -18,6 +18,8 @@ import { store as coreStore } from '@wordpress/core-data';
 // @ts-expect-error Missing type in core-data.
 import { __experimentalBlockPatternsList as BlockPatternList } from '@wordpress/block-editor';
 import { recordEvent } from '@woocommerce/tracks';
+// @ts-expect-error Missing type in core-data.
+import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
 
 /**
  * Internal dependencies
@@ -55,16 +57,21 @@ export const SidebarNavigationScreenHomepage = () => {
 	);
 	const onClickPattern = useCallback(
 		( pattern, selectedBlocks ) => {
+			if ( pattern === selectedPattern ) {
+				return;
+			}
 			setSelectedPattern( pattern );
 			onChange(
 				[ blocks[ 0 ], ...selectedBlocks, blocks[ blocks.length - 1 ] ],
 				{ selection: {} }
 			);
 			scroll();
 		},
-		[ blocks, onChange, setSelectedPattern, scroll ]
+		[ selectedPattern, setSelectedPattern, onChange, blocks, scroll ]
 	);
 
+	const isEditorLoading = useIsSiteEditorLoading();
+
 	const homePatterns = useMemo( () => {
 		return Object.entries( homeTemplates ).map(
 			( [ templateName, patterns ] ) => {
@@ -154,7 +161,11 @@ export const SidebarNavigationScreenHomepage = () => {
 			content={
 				<div className="woocommerce-customize-store__sidebar-homepage-content">
 					<div className="edit-site-sidebar-navigation-screen-patterns__group-homepage">
-						{ isLoading ? (
+						{ /* This is necessary to fix this issue: https://github.com/woocommerce/woocommerce/issues/45711
+						  If the user switch the homepage while the editor is loading, header and footer could disappear.
+						  For more details check: https://github.com/woocommerce/woocommerce/pull/45735
+						  */ }
+						{ isLoading || isEditorLoading ? (
 							<span className="components-placeholder__preview">
 								<Spinner />
 							</span>

plugins/woocommerce/changelog/45735-45711-cys-header-and-footer-disappear

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS: Fix Header/Footer template parts disappear