CYS: Fix color button (#49181)

* CYS: Fix color button

* Add colors to the just arrived full hero button

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

* fix just arrived full hero on sidebar

* improving name

* reorganize code

* Fix lint errors

---------

Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
Co-authored-by: github-actions <github-actions@github.com>

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

@@ -24,18 +24,17 @@ import { store as editSiteStore } from '@wordpress/edit-site/build-module/store'
 /**
  * Internal dependencies
  */
-import { isEqual } from 'lodash';
 import { CustomizeStoreContext } from './';
 import { BlockEditor } from './block-editor';
 import { HighlightedBlockContext } from './context/highlighted-block-context';
 import { useAddNoBlocksPlaceholder } from './hooks/block-placeholder/use-add-no-blocks-placeholder';
 import { useEditorBlocks } from './hooks/use-editor-blocks';
 import { useScrollOpacity } from './hooks/use-scroll-opacity';
-import { COLOR_PALETTES } from './sidebar/global-styles/color-palette-variations/constants';
 import {
 	PRODUCT_HERO_PATTERN_BUTTON_STYLE,
 	findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
 } from './utils/hero-pattern';
+import { useIsActiveNewNeutralVariation } from './hooks/use-is-active-new-neutral-variation';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
@@ -101,12 +100,9 @@ export const BlockEditorContainer = () => {
 	// @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
-		);
+	const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
 
+	useEffect( () => {
 		if ( ! isActiveNewNeutralVariation ) {
 			findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
 				blocks,
@@ -128,7 +124,12 @@ export const BlockEditorContainer = () => {
 				} );
 			}
 		);
-	}, [ blocks, updateBlockAttributes, user.settings.color ] );
+	}, [
+		blocks,
+		isActiveNewNeutralVariation,
+		updateBlockAttributes,
+		user.settings.color,
+	] );
 
 	// @ts-expect-error No types for this exist yet.
 	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );

plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-is-active-new-neutral-variation.ts

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { useContext, useMemo } from '@wordpress/element';
+import { isEqual } from 'lodash';
+import {
+	privateApis as blockEditorPrivateApis,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/block-editor';
+// eslint-disable-next-line @woocommerce/dependency-group
+import {
+	unlock,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/edit-site/build-module/lock-unlock';
+
+/**
+ * Internal dependencies
+ */
+import { COLOR_PALETTES } from '../sidebar/global-styles/color-palette-variations/constants';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+export const useIsActiveNewNeutralVariation = () => {
+	// @ts-expect-error No types for this exist yet.
+	const { user } = useContext( GlobalStylesContext );
+	return useMemo(
+		() =>
+			isEqual( COLOR_PALETTES[ 0 ].settings.color, user.settings.color ),
+		[ user ]
+	);
+};

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts

@@ -32,6 +32,12 @@ export const COLOR_PALETTES = [
 							name: 'Tertiary',
 							slug: 'tertiary',
 						},
+						{ color: '#FFFFFF', name: 'Color 1', slug: 'theme-1' },
+						{
+							color: '#1a0c00',
+							name: 'Color 5',
+							slug: 'theme-5',
+						},
 					],
 				},
 			},

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

@@ -44,6 +44,11 @@ import { useEditorBlocks } from '../../hooks/use-editor-blocks';
 import { PATTERN_CATEGORIES } from './categories';
 import { THEME_SLUG } from '~/customize-store/data/constants';
 import { Pattern } from '~/customize-store/types/pattern';
+import {
+	findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
+	PRODUCT_HERO_PATTERN_BUTTON_STYLE,
+} from '../../utils/hero-pattern';
+import { useIsActiveNewNeutralVariation } from '../../hooks/use-is-active-new-neutral-variation';
 
 /**
  * Sorts patterns by category. For 'intro' and 'about' categories
@@ -95,6 +100,7 @@ const sortPatternsByCategory = (
 export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 	const { patterns, isLoading } = usePatternsByCategory( category );
 
+	const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
 	const sortedPatterns = useMemo( () => {
 		const patternsWithoutThemePatterns = patterns.filter(
 			( pattern ) =>
@@ -103,11 +109,42 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
 				pattern.source !== 'pattern-directory/core'
 		);
 
+		const patternWithPatchedProductHeroPattern =
+			patternsWithoutThemePatterns.map( ( pattern ) => {
+				if (
+					pattern.name !== 'woocommerce-blocks/just-arrived-full-hero'
+				) {
+					return pattern;
+				}
+
+				if ( ! isActiveNewNeutralVariation ) {
+					const blocks =
+						findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
+							pattern.blocks,
+							( block: BlockInstance ) => {
+								block.attributes.style = {};
+							}
+						);
+					return { ...pattern, blocks };
+				}
+
+				const blocks =
+					findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
+						pattern.blocks,
+						( block: BlockInstance ) => {
+							block.attributes.style =
+								PRODUCT_HERO_PATTERN_BUTTON_STYLE;
+						}
+					);
+
+				return { ...pattern, blocks };
+			} );
+
 		return sortPatternsByCategory(
-			patternsWithoutThemePatterns,
+			patternWithPatchedProductHeroPattern,
 			category as keyof typeof PATTERN_CATEGORIES
 		);
-	}, [ category, patterns ] );
+	}, [ category, isActiveNewNeutralVariation, patterns ] );
 
 	const asyncSortedPatterns = useAsyncList( sortedPatterns );
 

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

@@ -19,7 +19,6 @@ 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';
 import {
-	privateApis as blockEditorPrivateApis,
 	__experimentalBlockPatternsList as BlockPatternList,
 	store as blockEditorStore,
 	// @ts-expect-error No types for this exist yet.
@@ -47,14 +46,11 @@ 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';
 import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
 import { isIframe, sendMessageToParent } from '~/customize-store/utils';
 import { isTrackingAllowed } from '../../utils/is-tracking-allowed';
 import './style.scss';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+import { useIsActiveNewNeutralVariation } from '../../hooks/use-is-active-new-neutral-variation';
 
 export const SidebarNavigationScreenHomepage = ( {
 	onNavigateBackClick,
@@ -98,14 +94,7 @@ 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 isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
 
 	const homePatterns = useMemo( () => {
 		return Object.entries( homeTemplates ).map(

plugins/woocommerce/changelog/49181-fix-color-button-pattern

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+CYS - Fix dark patterns buttons color.