From 615513144de537c8d502422630cbbbfde0ab86de Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Fri, 5 Jul 2024 14:41:27 +0200 Subject: [PATCH] CYS: Fix color button (#49181) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: github-actions --- .../assembler-hub/block-editor-container.tsx | 17 ++++---- .../use-is-active-new-neutral-variation.ts | 31 ++++++++++++++ .../color-palette-variations/constants.ts | 6 +++ .../pattern-screen/sidebar-pattern-screen.tsx | 41 ++++++++++++++++++- .../sidebar-navigation-screen-homepage.tsx | 15 +------ .../changelog/49181-fix-color-button-pattern | 4 ++ 6 files changed, 91 insertions(+), 23 deletions(-) create mode 100644 plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-is-active-new-neutral-variation.ts create mode 100644 plugins/woocommerce/changelog/49181-fix-color-button-pattern diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor-container.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor-container.tsx index b174475ad01..3a21a8b2eed 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor-container.tsx +++ b/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 ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-is-active-new-neutral-variation.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-is-active-new-neutral-variation.ts new file mode 100644 index 00000000000..6bc02a30c68 --- /dev/null +++ b/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 ] + ); +}; diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts index b7ae4c23f36..14bbef45abf 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/color-palette-variations/constants.ts +++ b/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', + }, ], }, }, diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx index 8d2cc93a674..ceac2724d0f 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/pattern-screen/sidebar-pattern-screen.tsx +++ b/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 ); diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage.tsx index ca057ff5f6a..18c0fa1400b 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk/sidebar-navigation-screen-homepage.tsx +++ b/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( diff --git a/plugins/woocommerce/changelog/49181-fix-color-button-pattern b/plugins/woocommerce/changelog/49181-fix-color-button-pattern new file mode 100644 index 00000000000..b6c73c059e7 --- /dev/null +++ b/plugins/woocommerce/changelog/49181-fix-color-button-pattern @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +CYS - Fix dark patterns buttons color. \ No newline at end of file