Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CYS: Fix button background on Featured Category Cover image (#49659) 

* CYS: Fix button background on Featured Category Cover image

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

* improve logic to handle multiple patterns

* improve implementation

* fix color on WordPress 6.5

* remove not used import£

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio 2024-07-19 12:15:10 +02:00 committed by GitHub
parent 800cf7e9ed
commit 86ec35c599
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 206 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@
* External dependencies
*/
import {
privateApis as blockEditorPrivateApis,
store as blockEditorStore,
// @ts-expect-error No types for this exist yet.
} from '@wordpress/block-editor';
@ -32,12 +31,10 @@ import { useEditorBlocks } from './hooks/use-editor-blocks';
import { useScrollOpacity } from './hooks/use-scroll-opacity';
import {
PRODUCT_HERO_PATTERN_BUTTON_STYLE,
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
} from './utils/hero-pattern';
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate,
} from './utils/black-background-pattern-update-button';
import { useIsActiveNewNeutralVariation } from './hooks/use-is-active-new-neutral-variation';
const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
export const BlockEditorContainer = () => {
const settings = useSiteEditorSettings();
@ -97,39 +94,42 @@ 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 );
const isActiveNewNeutralVariation = useIsActiveNewNeutralVariation();
useEffect( () => {
if ( ! isActiveNewNeutralVariation ) {
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
blocks,
( block: BlockInstance ) => {
updateBlockAttributes( block.clientId, {
( buttonBlocks: BlockInstance[] ) => {
const buttonBlockClientIds = buttonBlocks.map(
( { clientId } ) => clientId
);
updateBlockAttributes( buttonBlockClientIds, {
style: {},
} );
}
);
return;
}
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
blocks,
( block: BlockInstance ) => {
updateBlockAttributes( block.clientId, {
( buttonBlocks: BlockInstance[] ) => {
const buttonBlockClientIds = buttonBlocks.map(
( { clientId } ) => clientId
);
updateBlockAttributes( buttonBlockClientIds, {
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,
isActiveNewNeutralVariation,
updateBlockAttributes,
user.settings.color,
] );
// Blocks are not part of the dependencies because we don't want to trigger this effect when the blocks change. This would cause an infinite loop.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ isActiveNewNeutralVariation, updateBlockAttributes ] );
// @ts-expect-error No types for this exist yet.
const { insertBlock, removeBlock } = useDispatch( blockEditorStore );

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

@ -44,9 +44,9 @@ import { useEditorBlocks } from '../../hooks/use-editor-blocks';
import { PATTERN_CATEGORIES } from './categories';
import { THEME_SLUG } from '~/customize-store/data/constants';
import {
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate,
PRODUCT_HERO_PATTERN_BUTTON_STYLE,
} from '../../utils/hero-pattern';
} from '../../utils/black-background-pattern-update-button';
import { useIsActiveNewNeutralVariation } from '../../hooks/use-is-active-new-neutral-variation';
import {
sortPatternsByCategory,
@ -69,28 +69,37 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
const patternWithPatchedProductHeroPattern =
patternsWithoutThemePatterns.map( ( pattern ) => {
if (
pattern.name !== 'woocommerce-blocks/just-arrived-full-hero'
pattern.name !==
'woocommerce-blocks/just-arrived-full-hero' &&
pattern.name !==
'woocommerce-blocks/featured-category-cover-image'
) {
return pattern;
}
if ( ! isActiveNewNeutralVariation ) {
const blocks =
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
pattern.blocks,
( block: BlockInstance ) => {
block.attributes.style = {};
( patternBlocks: BlockInstance[] ) => {
patternBlocks.forEach(
( block: BlockInstance ) =>
( block.attributes.style = {} )
);
}
);
return { ...pattern, blocks };
}
const blocks =
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
pattern.blocks,
( block: BlockInstance ) => {
block.attributes.style =
PRODUCT_HERO_PATTERN_BUTTON_STYLE;
( patternBlocks: BlockInstance[] ) => {
patternBlocks.forEach(
( block ) =>
( block.attributes.style =
PRODUCT_HERO_PATTERN_BUTTON_STYLE )
);
}
);
@ -210,16 +219,52 @@ export const SidebarPatternScreen = ( { category }: { category: string } ) => {
( blockInstance: BlockInstance ) => cloneBlock( blockInstance )
);
insertBlocks( cloneBlocks, insertableIndex, undefined, false );
if ( ! isActiveNewNeutralVariation ) {
const updatedBlocks =
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
cloneBlocks,
( patternBlocks: BlockInstance[] ) => {
patternBlocks.forEach(
( block: BlockInstance ) =>
( block.attributes.style = {} )
);
}
);
blockToScroll.current = cloneBlocks[ 0 ].clientId;
insertBlocks(
updatedBlocks,
insertableIndex,
undefined,
false
);
blockToScroll.current = updatedBlocks[ 0 ].clientId;
} else {
const updatedBlocks =
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
cloneBlocks,
( patternBlocks: BlockInstance[] ) => {
patternBlocks.forEach(
( block ) =>
( block.attributes.style =
PRODUCT_HERO_PATTERN_BUTTON_STYLE )
);
}
);
insertBlocks(
updatedBlocks,
insertableIndex,
undefined,
false
);
blockToScroll.current = updatedBlocks[ 0 ].clientId;
}
trackEvent(
'customize_your_store_assembler_pattern_sidebar_click',
{ pattern: pattern.name }
);
},
[ insertBlocks, insertableIndex ]
[ insertBlocks, insertableIndex, isActiveNewNeutralVariation ]
);
return (

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

@ -44,8 +44,8 @@ import { select, useSelect } from '@wordpress/data';
import { trackEvent } from '~/customize-store/tracking';
import {
PRODUCT_HERO_PATTERN_BUTTON_STYLE,
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate,
} from '../utils/hero-pattern';
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate,
} from '../utils/black-background-pattern-update-button';
import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
import { isIframe, sendMessageToParent } from '~/customize-store/utils';
import { isTrackingAllowed } from '../utils/is-tracking-allowed';
@ -115,14 +115,33 @@ export const SidebarNavigationScreenHomepage = ( {
}
if ( ! isActiveNewNeutralVariation ) {
return [ ...acc, ...parsedPattern.blocks ];
const updatedBlocks =
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
parsedPattern.blocks,
(
buttonBlocks: BlockInstance[]
) => {
buttonBlocks.forEach(
( buttonBlock ) => {
buttonBlock.attributes.style =
{};
}
);
}
);
return [ ...acc, ...updatedBlocks ];
}
const updatedBlocks =
findButtonBlockInsideCoverBlockProductHeroPatternAndUpdate(
findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate(
parsedPattern.blocks,
( buttonBlock: BlockInstance ) => {
buttonBlock.attributes.style =
PRODUCT_HERO_PATTERN_BUTTON_STYLE;
( buttonBlocks: BlockInstance[] ) => {
buttonBlocks.forEach(
( buttonBlock ) => {
buttonBlock.attributes.style =
PRODUCT_HERO_PATTERN_BUTTON_STYLE;
}
);
}
);

97
plugins/woocommerce-admin/client/customize-store/assembler-hub/utils/black-background-pattern-update-button.ts Normal file
View File

@ -0,0 +1,97 @@
/**
* External dependencies
*/
import { BlockInstance } from '@wordpress/blocks';
const updateFeaturedCategoryCoverImagePattern = (
featuredCategoryCoverImagePatternParentBlocks: BlockInstance[],
callback: ( buttonBlocks: BlockInstance[] ) => void
) => {
const coverBlocks = featuredCategoryCoverImagePatternParentBlocks.map(
( featuredCategoryCoverImagePatternParentBlock ) =>
featuredCategoryCoverImagePatternParentBlock.innerBlocks.find(
( block ) => block.name === 'core/cover'
)
);
const parentButtonBlocks = coverBlocks.map( ( coverBlock ) =>
coverBlock?.innerBlocks.find(
( block ) => block.name === 'core/buttons'
)
);
const buttonBlocks = parentButtonBlocks.map(
( parentButtonBlock ) => parentButtonBlock?.innerBlocks[ 0 ]
);
callback( buttonBlocks as BlockInstance[] );
};
const updateJustArrivedFullHeroPattern = (
justArrivedFullHeroPatterns: BlockInstance[],
callback: ( buttonBlocks: BlockInstance[] ) => void
) => {
const parentButtonBlocks = justArrivedFullHeroPatterns.map(
( justArrivedFullHeroPattern ) =>
justArrivedFullHeroPattern?.innerBlocks[ 0 ].innerBlocks.find(
( block ) => block.name === 'core/buttons'
)
);
const buttonBlocks = parentButtonBlocks
.map( ( parentButtonBlock ) => parentButtonBlock?.innerBlocks[ 0 ] )
.filter( Boolean );
if ( ! buttonBlocks ) {
return;
}
callback( buttonBlocks as BlockInstance[] );
};
export const isJustArrivedFullHeroPattern = ( block: BlockInstance ) =>
block.name === 'core/cover' &&
block.attributes.url.includes(
'music-black-and-white-white-photography.jpg'
);
export const isFeaturedCategoryCoverImagePattern = ( block: BlockInstance ) =>
block.attributes?.metadata?.name === 'Featured Category Cover Image';
/**
* 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 findButtonBlockInsideCoverBlockWithBlackBackgroundPatternAndUpdate =
(
blocks: BlockInstance[],
callback: ( buttonBlocks: BlockInstance[] ) => void
) => {
const justArrivedFullHeroPatterns = blocks.filter(
isJustArrivedFullHeroPattern
);
if ( justArrivedFullHeroPatterns ) {
updateJustArrivedFullHeroPattern(
justArrivedFullHeroPatterns,
callback
);
}
const featuredCategoryCoverImagePatterns = blocks.filter(
isFeaturedCategoryCoverImagePattern
);
if ( featuredCategoryCoverImagePatterns ) {
updateFeaturedCategoryCoverImagePattern(
featuredCategoryCoverImagePatterns,
callback
);
}
return blocks;
};
export const PRODUCT_HERO_PATTERN_BUTTON_STYLE = {
color: { background: '#ffffff', text: '#000000' },
};

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

@ -1,39 +0,0 @@
/**
* 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 coverBlock = blocks.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 blocks;
}
callback( buttonBlock );
return blocks;
};
export const PRODUCT_HERO_PATTERN_BUTTON_STYLE = {
color: { background: '#ffffff', text: '#000000' },
};

4
plugins/woocommerce/changelog/49659-fix-update-background-button Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
CYS: Fix button background on Featured Category Cover image

2
plugins/woocommerce/patterns/featured-category-cover-image.php
View File

@ -14,7 +14,7 @@ $description = $content['descriptions'][0]['default'] ?? '';
$button = $content['buttons'][0]['default'] ?? '';
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))","bottom":"calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))","left":"var(--wp--style--root--padding-left, var(--wp--custom--gap--horizontal))","right":"var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal))"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained","justifyContent":"center"}} -->
<!-- wp:group {"metadata":{"name":"Featured Category Cover Image"}, "align":"full","style":{"spacing":{"padding":{"top":"calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))","bottom":"calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))","left":"var(--wp--style--root--padding-left, var(--wp--custom--gap--horizontal))","right":"var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal))"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained","justifyContent":"center"}} -->
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)));padding-right:var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal));padding-bottom:calc( 0.5 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)));padding-left:var(--wp--style--root--padding-left, var(--wp--custom--gap--horizontal))">
<!-- wp:spacer {"height":"calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))"} -->
<div style="height:calc( 0.25 * var(--wp--style--root--padding-right, var(--wp--custom--gap--horizontal)))" aria-hidden="true" class="wp-block-spacer"></div>