diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/color-utils.ts b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/color-utils.ts new file mode 100644 index 00000000000..326c05afd41 --- /dev/null +++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/color-utils.ts @@ -0,0 +1,94 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { paramCase as kebabCase } from 'change-case'; +import { isObject } from '@woocommerce/types'; +import { getCSSRules } from '@wordpress/style-engine'; + +/** + * Returns the inline styles to add depending on the style object + * + * @param {Object} styles Styles configuration. + * @return {Object} Flattened CSS variables declaration. + */ +function getInlineStyles( styles = {} ) { + const output = {} as Record< string, unknown >; + + getCSSRules( styles, { selector: '' } ).forEach( ( rule ) => { + output[ rule.key ] = rule.value; + } ); + + return output; +} + +/** + * Get the classname for a given color. + */ +function getColorClassName( + colorContextName: string | undefined, + colorSlug: string | undefined +): string { + if ( ! colorContextName || ! colorSlug ) { + return ''; + } + return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`; +} +function getGradientClassName( gradientSlug: string | undefined ) { + if ( ! gradientSlug ) { + return undefined; + } + return `has-${ gradientSlug }-gradient-background`; +} + +/** + * Provides the CSS class names and inline styles for a block's color support + * attributes. + * + * @param {Object} attributes Block attributes. + * + * @return {Object} Color block support derived CSS classes & styles. + */ +export function getColorClassesAndStyles( + attributes: WithStyle & { + backgroundColor?: string | undefined; + textColor?: string | undefined; + gradient?: string | undefined; + } +) { + const { backgroundColor, textColor, gradient, style } = attributes; + + // Collect color CSS classes. + const backgroundClass = getColorClassName( + 'background-color', + backgroundColor + ); + const textClass = getColorClassName( 'color', textColor ); + + const gradientClass = getGradientClassName( gradient ); + const hasGradient = gradientClass || style?.color?.gradient; + + // Determine color CSS class name list. + const className = classnames( textClass, gradientClass, { + // Don't apply the background class if there's a gradient. + [ backgroundClass ]: ! hasGradient && !! backgroundClass, + 'has-text-color': textColor || style?.color?.text, + 'has-background': + backgroundColor || + style?.color?.background || + gradient || + style?.color?.gradient, + 'has-link-color': isObject( style?.elements?.link ) + ? style?.elements?.link?.color + : undefined, + } ); + + // Collect inline styles for colors. + const colorStyles = style?.color || {}; + const styleProp = getInlineStyles( { color: colorStyles } ); + + return { + className: className || undefined, + style: styleProp, + }; +} diff --git a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx index 0a2fd3e2fdc..88cd21ac859 100644 --- a/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx +++ b/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx @@ -4,13 +4,13 @@ import { CART_URL } from '@woocommerce/block-settings'; import Button from '@woocommerce/base-components/button'; import classNames from 'classnames'; -import { useColorProps } from '@woocommerce/base-hooks'; /** * Internal dependencies */ import { defaultCartButtonLabel } from './constants'; import { getVariant } from '../utils'; +import { getColorClassesAndStyles } from '../color-utils'; type MiniCartCartButtonBlockProps = { cartButtonLabel?: string; @@ -23,12 +23,12 @@ const Block = ( { cartButtonLabel, style, }: MiniCartCartButtonBlockProps ): JSX.Element | null => { - const colorProps = useColorProps( { style } ); - if ( ! CART_URL ) { return null; } + const colorProps = getColorClassesAndStyles( { style } ); + return (