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>
This commit is contained in:
parent
2d6448d9b4
commit
615513144d
|
@ -24,18 +24,17 @@ import { store as editSiteStore } from '@wordpress/edit-site/build-module/store'
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { isEqual } from 'lodash';
|
|
||||||
import { CustomizeStoreContext } from './';
|
import { CustomizeStoreContext } from './';
|
||||||
import { BlockEditor } from './block-editor';
|
import { BlockEditor } from './block-editor';
|
||||||
import { HighlightedBlockContext } from './context/highlighted-block-context';
|
import { HighlightedBlockContext } from './context/highlighted-block-context';
|
||||||
import { useAddNoBlocksPlaceholder } from './hooks/block-placeholder/use-add-no-blocks-placeholder';
|
import { useAddNoBlocksPlaceholder } from './hooks/block-placeholder/use-add-no-blocks-placeholder';
|
||||||
import { useEditorBlocks } from './hooks/use-editor-blocks';
|
import { useEditorBlocks } from './hooks/use-editor-blocks';
|
||||||
import { useScrollOpacity } from './hooks/use-scroll-opacity';
|
import { useScrollOpacity } from './hooks/use-scroll-opacity';
|
||||||
import { COLOR_PALETTES } from './sidebar/global-styles/color-palette-variations/constants';
|
|
||||||
import {
|
import {
|
||||||
PRODUCT_HERO_PATTERN_BUTTON_STYLE,
|
PRODUCT_HERO_PATTERN_BUTTON_STYLE,
|
||||||
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
|
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
|
||||||
} from './utils/hero-pattern';
|
} from './utils/hero-pattern';
|
||||||
|
import { useIsActiveNewNeutralVariation } from './hooks/use-is-active-new-neutral-variation';
|
||||||
|
|
||||||
const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
|
const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
|
||||||
|
|
||||||
|
@ -101,12 +100,9 @@ export const BlockEditorContainer = () => {
|
||||||
// @ts-expect-error No types for this exist yet.
|
// @ts-expect-error No types for this exist yet.
|
||||||
const { user } = useContext( GlobalStylesContext );
|
const { user } = useContext( GlobalStylesContext );
|
||||||
|
|
||||||
useEffect( () => {
|
const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
|
||||||
const isActiveNewNeutralVariation = isEqual(
|
|
||||||
COLOR_PALETTES[ 0 ].settings.color,
|
|
||||||
user.settings.color
|
|
||||||
);
|
|
||||||
|
|
||||||
|
useEffect( () => {
|
||||||
if ( ! isActiveNewNeutralVariation ) {
|
if ( ! isActiveNewNeutralVariation ) {
|
||||||
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
|
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
|
||||||
blocks,
|
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.
|
// @ts-expect-error No types for this exist yet.
|
||||||
const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
|
const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
|
||||||
|
|
|
@ -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 ]
|
||||||
|
);
|
||||||
|
};
|
|
@ -32,6 +32,12 @@ export const COLOR_PALETTES = [
|
||||||
name: 'Tertiary',
|
name: 'Tertiary',
|
||||||
slug: 'tertiary',
|
slug: 'tertiary',
|
||||||
},
|
},
|
||||||
|
{ color: '#FFFFFF', name: 'Color 1', slug: 'theme-1' },
|
||||||
|
{
|
||||||
|
color: '#1a0c00',
|
||||||
|
name: 'Color 5',
|
||||||
|
slug: 'theme-5',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -44,6 +44,11 @@ import { useEditorBlocks } from '../../hooks/use-editor-blocks';
|
||||||
import { PATTERN_CATEGORIES } from './categories';
|
import { PATTERN_CATEGORIES } from './categories';
|
||||||
import { THEME_SLUG } from '~/customize-store/data/constants';
|
import { THEME_SLUG } from '~/customize-store/data/constants';
|
||||||
import { Pattern } from '~/customize-store/types/pattern';
|
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
|
* Sorts patterns by category. For 'intro' and 'about' categories
|
||||||
|
@ -95,6 +100,7 @@ const sortPatternsByCategory = (
|
||||||
export const SidebarPatternScreen = ( { category }: { category: string } ) => {
|
export const SidebarPatternScreen = ( { category }: { category: string } ) => {
|
||||||
const { patterns, isLoading } = usePatternsByCategory( category );
|
const { patterns, isLoading } = usePatternsByCategory( category );
|
||||||
|
|
||||||
|
const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
|
||||||
const sortedPatterns = useMemo( () => {
|
const sortedPatterns = useMemo( () => {
|
||||||
const patternsWithoutThemePatterns = patterns.filter(
|
const patternsWithoutThemePatterns = patterns.filter(
|
||||||
( pattern ) =>
|
( pattern ) =>
|
||||||
|
@ -103,11 +109,42 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
|
||||||
pattern.source !== 'pattern-directory/core'
|
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(
|
return sortPatternsByCategory(
|
||||||
patternsWithoutThemePatterns,
|
patternWithPatchedProductHeroPattern,
|
||||||
category as keyof typeof PATTERN_CATEGORIES
|
category as keyof typeof PATTERN_CATEGORIES
|
||||||
);
|
);
|
||||||
}, [ category, patterns ] );
|
}, [ category, isActiveNewNeutralVariation, patterns ] );
|
||||||
|
|
||||||
const asyncSortedPatterns = useAsyncList( sortedPatterns );
|
const asyncSortedPatterns = useAsyncList( sortedPatterns );
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,6 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
|
||||||
// @ts-expect-error No types for this exist yet.
|
// @ts-expect-error No types for this exist yet.
|
||||||
import { store as coreStore } from '@wordpress/core-data';
|
import { store as coreStore } from '@wordpress/core-data';
|
||||||
import {
|
import {
|
||||||
privateApis as blockEditorPrivateApis,
|
|
||||||
__experimentalBlockPatternsList as BlockPatternList,
|
__experimentalBlockPatternsList as BlockPatternList,
|
||||||
store as blockEditorStore,
|
store as blockEditorStore,
|
||||||
// @ts-expect-error No types for this exist yet.
|
// @ts-expect-error No types for this exist yet.
|
||||||
|
@ -47,14 +46,11 @@ import {
|
||||||
PRODUCT_HERO_PATTERN_BUTTON_STYLE,
|
PRODUCT_HERO_PATTERN_BUTTON_STYLE,
|
||||||
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
|
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
|
||||||
} from '../../utils/hero-pattern';
|
} 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 { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
|
||||||
import { isIframe, sendMessageToParent } from '~/customize-store/utils';
|
import { isIframe, sendMessageToParent } from '~/customize-store/utils';
|
||||||
import { isTrackingAllowed } from '../../utils/is-tracking-allowed';
|
import { isTrackingAllowed } from '../../utils/is-tracking-allowed';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
import { useIsActiveNewNeutralVariation } from '../../hooks/use-is-active-new-neutral-variation';
|
||||||
const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
|
|
||||||
|
|
||||||
export const SidebarNavigationScreenHomepage = ( {
|
export const SidebarNavigationScreenHomepage = ( {
|
||||||
onNavigateBackClick,
|
onNavigateBackClick,
|
||||||
|
@ -98,14 +94,7 @@ export const SidebarNavigationScreenHomepage = ( {
|
||||||
|
|
||||||
const isEditorLoading = useIsSiteEditorLoading();
|
const isEditorLoading = useIsSiteEditorLoading();
|
||||||
|
|
||||||
// @ts-expect-error No types for this exist yet.
|
const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
|
||||||
const { user } = useContext( GlobalStylesContext );
|
|
||||||
|
|
||||||
const isActiveNewNeutralVariation = useMemo(
|
|
||||||
() =>
|
|
||||||
isEqual( COLOR_PALETTES[ 0 ].settings.color, user.settings.color ),
|
|
||||||
[ user ]
|
|
||||||
);
|
|
||||||
|
|
||||||
const homePatterns = useMemo( () => {
|
const homePatterns = useMemo( () => {
|
||||||
return Object.entries( homeTemplates ).map(
|
return Object.entries( homeTemplates ).map(
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
CYS - Fix dark patterns buttons color.
|
Loading…
Reference in New Issue