56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
/**
|
|
* This is a workaround to style inner blocks using the color
|
|
* settings of the Mini Cart Contents block. It's possible to get
|
|
* the Mini Cart Contents block's attributes inside the inner blocks
|
|
* components, but we have 4 out of 7 inner blocks that inherit
|
|
* style from the Mini Cart Contents block, so we need to apply the
|
|
* styles here to avoid duplication.
|
|
*
|
|
* We only use this hack for the Site Editor. On the frontend, we
|
|
* manipulate the style using block attributes and inject the CSS
|
|
* via `wp_add_inline_style()` function.
|
|
*/
|
|
export const MiniCartInnerBlocksStyle = ( {
|
|
style,
|
|
}: {
|
|
style: Record< string, unknown >;
|
|
} ): JSX.Element => {
|
|
const innerStyles = [
|
|
{
|
|
selector:
|
|
'.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout',
|
|
properties: [
|
|
{
|
|
property: 'color',
|
|
value: style.backgroundColor,
|
|
},
|
|
{
|
|
property: 'background-color',
|
|
value: style.color,
|
|
},
|
|
{
|
|
property: 'border-color',
|
|
value: style.color,
|
|
},
|
|
],
|
|
},
|
|
]
|
|
.map( ( { selector, properties } ) => {
|
|
const rules = properties
|
|
.filter( ( { value } ) => value )
|
|
.map( ( { property, value } ) => `${ property }: ${ value };` )
|
|
.join( '' );
|
|
|
|
if ( rules ) return `${ selector } { ${ rules } }`;
|
|
return '';
|
|
} )
|
|
.join( '' )
|
|
.trim();
|
|
|
|
if ( ! innerStyles ) {
|
|
return <></>;
|
|
}
|
|
|
|
return <style>{ innerStyles } </style>;
|
|
};
|