Use theme's body background color as the mini cart contents default b…

…ackground color (#7510)

Co-authored-by: Albert Juhé Lluveras <[email protected]>

assets/js/blocks/mini-cart/frontend.ts

@@ -152,4 +152,25 @@ window.addEventListener( 'load', () => {
 			);
 		}
 	} );
+
+	/**
+	 * Get the background color of the body then set it as the background color
+	 * of the Mini Cart Contents block. We use :where here to make customized
+	 * background color alway have higher priority.
+	 *
+	 * We only set the background color, instead of the whole background. As
+	 * we only provide the option to customize the background color.
+	 */
+	const style = document.createElement( 'style' );
+	const backgroundColor = getComputedStyle( document.body ).backgroundColor;
+
+	style.appendChild(
+		document.createTextNode(
+			`:where(.wp-block-woocommerce-mini-cart-contents) {
+				background-color: ${ backgroundColor };
+			}`
+		)
+	);
+
+	document.head.appendChild( style );
 } );

assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx

@@ -13,6 +13,7 @@ import { filledCart, removeCart } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 import { EditorProvider } from '@woocommerce/base-context';
 import type { TemplateArray } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,6 +74,59 @@ const Edit = ( { clientId }: Props ): ReactElement => {
 		defaultTemplate,
 	} );
 
+	/**
+	 * This is a workaround for the Site Editor to set the correct
+	 * background color of the Mini Cart Contents block base on
+	 * the main background color set by the theme.
+	 */
+	useEffect( () => {
+		const canvasEl = document.querySelector(
+			'.edit-site-visual-editor__editor-canvas'
+		);
+		if ( ! ( canvasEl instanceof HTMLIFrameElement ) ) {
+			return;
+		}
+		const canvas =
+			canvasEl.contentDocument || canvasEl.contentWindow?.document;
+		if ( ! canvas ) {
+			return;
+		}
+		if ( canvas.getElementById( 'mini-cart-contents-background-color' ) ) {
+			return;
+		}
+		const styles = canvas.querySelectorAll( 'style' );
+		const [ cssRule ] = Array.from( styles )
+			.map( ( style ) => Array.from( style.sheet?.cssRules || [] ) )
+			.flatMap( ( style ) => style )
+			.filter( Boolean )
+			.filter(
+				( rule ) =>
+					rule.selectorText === '.editor-styles-wrapper' &&
+					rule.style.backgroundColor
+			);
+		if ( ! cssRule ) {
+			return;
+		}
+		const backgroundColor = cssRule.style.backgroundColor;
+		if ( ! backgroundColor ) {
+			return;
+		}
+		const style = document.createElement( 'style' );
+		style.id = 'mini-cart-contents-background-color';
+		style.appendChild(
+			document.createTextNode(
+				`:where(.wp-block-woocommerce-mini-cart-contents) {
+				background-color: ${ backgroundColor };
+			}`
+			)
+		);
+		const body = canvas.querySelector( '.editor-styles-wrapper' );
+		if ( ! body ) {
+			return;
+		}
+		body.appendChild( style );
+	}, [] );
+
 	return (
 		<div { ...blockProps }>
 			<EditorProvider currentView={ currentView }>

assets/js/blocks/mini-cart/style.scss

@@ -64,12 +64,14 @@
 }
 
 .wp-block-woocommerce-mini-cart-contents {
-	background: #fff;
 	box-sizing: border-box;
 	height: 100vh;
 	padding: 0;
 	justify-content: center;
 }
+:where(.wp-block-woocommerce-mini-cart-contents) {
+	background: #fff;
+}
 
 .wp-block-woocommerce-empty-mini-cart-contents-block,
 .wp-block-woocommerce-filled-mini-cart-contents-block {