CYS - Core: Invert the color of the button block inside the cover block when the active style variation is New - Neutral (#47220)

* CYS - Core: fix cover button

* fix type

* fix build

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

* update color in the homepage preview

* move comment

* fix switch style variation

* add comment

---------

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

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

@@ -3,8 +3,11 @@
 /**
  * External dependencies
  */
-// @ts-expect-error No types for this exist yet.
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/block-editor';
 // @ts-expect-error No types for this exist yet.
 import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -32,6 +35,13 @@ import { BlockEditor } from './block-editor';
 import { HighlightedBlockContext } from './context/highlighted-block-context';
 import { useEditorBlocks } from './hooks/use-editor-blocks';
 import { useScrollOpacity } from './hooks/use-scroll-opacity';
+import { isEqual } from 'lodash';
+import { COLOR_PALETTES } from './sidebar/global-styles/color-palette-variations/constants';
+import { BlockInstance } from '@wordpress/blocks';
+import {
+	PRODUCT_HERO_PATTERN_BUTTON_STYLE,
+	findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
+} from './utils/hero-pattern';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -70,6 +80,8 @@ const findPageIdByBlockClientId = ( event: MouseEvent ) => {
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
 export const BlockEditorContainer = () => {
 	const history = useHistory();
 	const settings = useSiteEditorSettings();
@@ -169,6 +181,38 @@ export const BlockEditorContainer = () => {
 	// @ts-expect-error No types for this exist yet.
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
+	// @ts-expect-error No types for this exist yet.
+	const { user } = useContext( GlobalStylesContext );
+
+	useEffect( () => {
+		const isActiveNewNeutralVariation = isEqual(
+			COLOR_PALETTES[ 0 ].settings.color,
+			user.settings.color
+		);
+
+		if ( ! isActiveNewNeutralVariation ) {
+			findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
+				blocks,
+				( block: BlockInstance ) => {
+					updateBlockAttributes( block.clientId, {
+						style: {},
+					} );
+				}
+			);
+			return;
+		}
+		findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
+			blocks,
+			( block: BlockInstance ) => {
+				updateBlockAttributes( block.clientId, {
+					style: PRODUCT_HERO_PATTERN_BUTTON_STYLE,
+					// This is necessary; otherwise, the style won't be applied on the frontend during the style variation change.
+					className: '',
+				} );
+			}
+		);
+	}, [ blocks, updateBlockAttributes, user.settings.color ] );
+
 	useEffect( () => {
 		const { blockIdToHighlight, restOfBlockIds } = clientIds.reduce(
 			( acc, clientId ) => {

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

@@ -13,10 +13,15 @@ import {
 } from '@wordpress/element';
 import { Link } from '@woocommerce/components';
 import { Spinner } from '@wordpress/components';
+// @ts-expect-error Missing type.
+import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
 // @ts-expect-error No types for this exist yet.
 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 {
+	privateApis as blockEditorPrivateApis,
+	__experimentalBlockPatternsList as BlockPatternList,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/block-editor';
 // @ts-expect-error Missing type in core-data.
 import { useIsSiteEditorLoading } from '@wordpress/edit-site/build-module/components/layout/hooks';
 
@@ -33,7 +38,16 @@ import { useEditorScroll } from '../hooks/use-editor-scroll';
 import { FlowType } from '~/customize-store/types';
 import { CustomizeStoreContext } from '~/customize-store/assembler-hub';
 import { useSelect } from '@wordpress/data';
+
 import { trackEvent } from '~/customize-store/tracking';
+import {
+	PRODUCT_HERO_PATTERN_BUTTON_STYLE,
+	findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
+} from '../utils/hero-pattern';
+import { isEqual } from 'lodash';
+import { COLOR_PALETTES } from './global-styles/color-palette-variations/constants';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 export const SidebarNavigationScreenHomepage = () => {
 	const { scroll } = useEditorScroll( {
@@ -72,9 +86,47 @@ export const SidebarNavigationScreenHomepage = () => {
 
 	const isEditorLoading = useIsSiteEditorLoading();
 
+	// @ts-expect-error No types for this exist yet.
+	const { user } = useContext( GlobalStylesContext );
+
+	const isActiveNewNeutralVariation = useMemo(
+		() =>
+			isEqual( COLOR_PALETTES[ 0 ].settings.color, user.settings.color ),
+		[ user ]
+	);
+
 	const homePatterns = useMemo( () => {
 		return Object.entries( homeTemplates ).map(
 			( [ templateName, patterns ] ) => {
+				if ( templateName === 'template1' ) {
+					return {
+						name: templateName,
+						title: templateName,
+						blocks: patterns.reduce(
+							( acc: BlockInstance[], pattern ) => {
+								if ( ! isActiveNewNeutralVariation ) {
+									return [ ...acc, ...pattern.blocks ];
+								}
+								const updatedBlocks =
+									findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
+										pattern.blocks,
+										( buttonBlock: BlockInstance ) => {
+											buttonBlock.attributes.style =
+												PRODUCT_HERO_PATTERN_BUTTON_STYLE;
+										}
+									);
+
+								return [ ...acc, ...updatedBlocks ];
+							},
+							[]
+						),
+						blockTypes: [ '' ],
+						categories: [ '' ],
+						content: '',
+						source: '',
+					};
+				}
+
 				return {
 					name: templateName,
 					title: templateName,
@@ -92,7 +144,7 @@ export const SidebarNavigationScreenHomepage = () => {
 				};
 			}
 		);
-	}, [ homeTemplates ] );
+	}, [ homeTemplates, isActiveNewNeutralVariation ] );
 
 	useEffect( () => {
 		if (

plugins/woocommerce-admin/client/customize-store/assembler-hub/utils/hero-pattern.ts

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { BlockInstance } from '@wordpress/blocks';
+
+/**
+ * This is temporary solution to change the button color on the cover block when the color palette is New - Neutral.
+ * The real fix should be done on Gutenberg side: https://github.com/WordPress/gutenberg/issues/58004
+ *
+ */
+export const findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate = (
+	blocks: BlockInstance[],
+	callback: ( buttonBlock: BlockInstance ) => void
+) => {
+	const clonedBlocks = structuredClone( blocks );
+	const coverBlock = clonedBlocks.find(
+		( block ) =>
+			block.name === 'core/cover' &&
+			block.attributes.url.includes(
+				'music-black-and-white-white-photography.jpg'
+			)
+	);
+
+	const buttonsBlock = coverBlock?.innerBlocks[ 0 ].innerBlocks.find(
+		( block ) => block.name === 'core/buttons'
+	);
+
+	const buttonBlock = buttonsBlock?.innerBlocks[ 0 ];
+
+	if ( ! buttonBlock ) {
+		return clonedBlocks;
+	}
+
+	callback( buttonBlock );
+	return clonedBlocks;
+};
+
+export const PRODUCT_HERO_PATTERN_BUTTON_STYLE = {
+	color: { background: '#ffffff', text: '#000000' },
+};

plugins/woocommerce/changelog/47220-fix-cover-button-white

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+Comment: CYS - Core: Invert the color of the button block inside the cover block when the active style variation is New - Neutral.
+