Mini Cart Contents: Support link and text colors (https://github.com/woocommerce/woocommerce-blocks/pull/5566)

plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/editor.scss

@@ -1,4 +1,4 @@
-.editor-styles-wrapper a.wc-block-components-product-name {
+.editor-styles-wrapper .wc-block-components-product-title a.wc-block-components-product-name {
 	color: inherit;
 }
 

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/editor.scss

@@ -1,35 +1,44 @@
-.wp-block-woocommerce-mini-cart-contents {
+.editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents {
 	max-width: 480px;
 	/* We need to override the margin top here to simulate the layout of
 	the mini cart contents on the front end. */
 	margin: 0 auto !important;
-}
 
-.wp-block-woocommerce-filled-mini-cart-contents-block > .block-editor-inner-blocks > .block-editor-block-list__layout {
+	.wp-block-woocommerce-filled-mini-cart-contents-block > .block-editor-inner-blocks > .block-editor-block-list__layout {
-	display: flex;
-	flex-direction: column;
-	min-height: 100vh;
-}
-
-.wp-block-woocommerce-mini-cart-items-block {
-	display: grid;
-	flex-grow: 1;
-	margin-bottom: $gap;
-	padding: 0 $gap;
-
-	> .block-editor-inner-blocks > .block-editor-block-list__layout {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		min-height: 100vh;
+	}
+
+	.wp-block-woocommerce-mini-cart-items-block {
+		display: grid;
+		flex-grow: 1;
+		margin-bottom: $gap;
+		padding: 0 $gap;
+
+		> .block-editor-inner-blocks > .block-editor-block-list__layout {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+		}
+	}
+
+	.wp-block-woocommerce-mini-cart-products-table-block {
+		margin-bottom: auto;
+		margin-top: $gap;
+	}
+
+	h2.wc-block-mini-cart__title {
+		@include font-size(larger);
+		margin: $gap-largest $gap 0;
+	}
+
+	table.wc-block-cart-items {
+		color: inherit;
+	}
+
+	.block-editor-button-block-appender {
+		box-shadow: inset 0 0 0 1px;
+		color: inherit;
 	}
 }
-
-.wp-block-woocommerce-mini-cart-products-table-block {
-	margin-bottom: auto;
-	margin-top: $gap;
-}
-
-.editor-styles-wrapper h2.wc-block-mini-cart__title {
-	@include font-size(larger);
-	margin: $gap-largest $gap 0;
-}

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/index.tsx

@@ -36,7 +36,7 @@ const settings = {
 		reusable: false,
 		inserter: false,
 		color: {
-			text: false,
+			link: true,
 		},
 	},
 	attributes: {

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx

@@ -24,7 +24,12 @@ const PaymentMethodIconsElement = (): JSX.Element => {
 	);
 };
 
-const Block = (): JSX.Element => {
+interface Props {
+	color?: string;
+	backgroundColor?: string;
+}
+
+const Block = ( { color, backgroundColor }: Props ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
 	const subTotal = getSetting( 'displayCartPricesIncludingTax', false )
 		? parseInt( cartTotals.total_items, 10 ) +
@@ -47,6 +52,10 @@ const Block = (): JSX.Element => {
 					<Button
 						className="wc-block-mini-cart__footer-cart"
 						href={ CART_URL }
+						style={ {
+							color,
+							borderColor: color,
+						} }
 					>
 						{ __( 'View my cart', 'woo-gutenberg-products-block' ) }
 					</Button>
@@ -55,6 +64,11 @@ const Block = (): JSX.Element => {
 					<Button
 						className="wc-block-mini-cart__footer-checkout"
 						href={ CHECKOUT_URL }
+						style={ {
+							color: backgroundColor,
+							borderColor: color,
+							backgroundColor: color,
+						} }
 					>
 						{ __(
 							'Go to checkout',

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx

@@ -3,19 +3,40 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Block from './block';
+import { blockName as miniCartContentsBlockName } from '../../attributes';
+import { useColorProps } from '../../../../../hooks/style-attributes';
 
-export const Edit = (): JSX.Element => {
+export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps();
 
+	const parentAttributes = useSelect( ( select ) => {
+		const { getBlockAttributes, getBlockParentsByBlockName } = select(
+			'core/block-editor'
+		);
+		const parentBlockIds = getBlockParentsByBlockName(
+			clientId,
+			miniCartContentsBlockName
+		);
+
+		if ( parentBlockIds.length !== 1 ) {
+			return {};
+		}
+
+		return getBlockAttributes( parentBlockIds[ 0 ] );
+	} );
+
+	const parentColorProps = useColorProps( parentAttributes );
+
 	return (
 		<div { ...blockProps }>
 			<Noninteractive>
-				<Block />
+				<Block { ...parentColorProps.style } />
 			</Noninteractive>
 		</div>
 	);

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss

@@ -62,24 +62,13 @@
 		position: absolute;
 		top: $gap-largest;
 		right: $gap;
-	}
 
-	.wc-block-mini-cart__items {
+		button {
-		display: flex;
+			color: inherit;
-		flex-direction: column;
+		}
-		flex-grow: 1;
-		overflow-y: hidden;
-		padding: 0 $gap;
-	}
 
-	.wc-block-mini-cart__products-table {
+		svg {
-		margin-bottom: auto;
+			fill: currentColor;
-		margin-right: -$gap;
-		overflow-y: auto;
-		padding-right: $gap;
-
-		.wc-block-cart-items__row:last-child::after {
-			content: none;
 		}
 	}
 }
@@ -100,50 +89,69 @@ h2.wc-block-mini-cart__title {
 	margin: $gap-largest $gap 0;
 }
 
+.wc-block-mini-cart__items {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-y: hidden;
+	padding: 0 $gap;
+
+	.wc-block-mini-cart__products-table {
+		margin-bottom: auto;
+		margin-right: -$gap;
+		overflow-y: auto;
+		padding-right: $gap;
+
+		.wc-block-cart-items__row:last-child::after {
+			content: none;
+		}
+	}
+}
+
 .wc-block-mini-cart__footer {
 	border-top: 1px solid $gray-300;
 	padding: $gap-large $gap;
-}
 
-.wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
+	.wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
-	font-weight: 600;
-	margin-bottom: $gap;
-
-	.wc-block-components-totals-item__description {
-		display: none;
-		font-size: 0.75em;
-		font-weight: 400;
-
-		@media only screen and (min-width: 480px) {
-			display: unset;
-		}
-	}
-}
-
-.wc-block-mini-cart__footer-actions {
-	display: flex;
-	gap: $gap;
-
-	.wc-block-mini-cart__footer-cart.wc-block-components-button {
-		background-color: transparent;
-		border: 1px solid $gray-900;
-		color: $gray-900;
-		display: none;
-		flex-grow: 1;
 		font-weight: 600;
+		margin-bottom: $gap;
 
-		@media only screen and (min-width: 480px) {
+		.wc-block-components-totals-item__description {
-			display: inline-flex;
+			display: none;
+			font-size: 0.75em;
+			font-weight: 400;
+
+			@media only screen and (min-width: 480px) {
+				display: unset;
+			}
 		}
 	}
 
-	.wc-block-mini-cart__footer-checkout {
+	.wc-block-mini-cart__footer-actions {
-		border: 1px solid $gray-900;
+		display: flex;
-		flex-grow: 1;
+		gap: $gap;
-		font-weight: 600;
+
+		.wc-block-mini-cart__footer-cart.wc-block-components-button {
+			background-color: transparent;
+			border: 1px solid $gray-900;
+			color: $gray-900;
+			display: none;
+			flex-grow: 1;
+			font-weight: 600;
+
+			@media only screen and (min-width: 480px) {
+				display: inline-flex;
+			}
+		}
+
+		.wc-block-mini-cart__footer-checkout {
+			border: 1px solid $gray-900;
+			flex-grow: 1;
+			font-weight: 600;
+		}
+	}
+
+	.wc-block-components-payment-method-icons {
+		margin-top: $gap;
 	}
 }
-
-.wc-block-mini-cart__footer .wc-block-components-payment-method-icons {
-	margin-top: $gap;
-}

plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php

@@ -5,6 +5,7 @@ use Automattic\WooCommerce\Blocks\Package;
 use Automattic\WooCommerce\Blocks\Assets;
 use Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry;
 use Automattic\WooCommerce\Blocks\StoreApi\Utilities\CartController;
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
 
 /**
  * Mini Cart class.
@@ -65,4 +66,81 @@ class MiniCartContents extends AbstractBlock {
 
 		return $content;
 	}
+
+	/**
+	 * Enqueue frontend assets for this block, just in time for rendering.
+	 *
+	 * @param array $attributes  Any attributes that currently are available from the block.
+	 */
+	protected function enqueue_assets( array $attributes ) {
+		parent::enqueue_assets( $attributes );
+		$text_color = StyleAttributesUtils::get_text_color_class_and_style( $attributes );
+		$bg_color   = StyleAttributesUtils::get_background_color_class_and_style( $attributes );
+
+		$styles = array(
+			array(
+				'selector'   => '.wc-block-mini-cart__drawer .components-modal__header',
+				'properties' => array(
+					array(
+						'property' => 'color',
+						'value'    => $text_color ? $text_color['value'] : false,
+					),
+				),
+			),
+			array(
+				'selector'   => '.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button',
+				'properties' => array(
+					array(
+						'property' => 'color',
+						'value'    => $text_color ? $text_color['value'] : false,
+					),
+					array(
+						'property' => 'border-color',
+						'value'    => $text_color ? $text_color['value'] : false,
+					),
+				),
+			),
+			array(
+				'selector'   => '.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout',
+				'properties' => array(
+					array(
+						'property' => 'color',
+						'value'    => $bg_color ? $bg_color['value'] : false,
+					),
+					array(
+						'property' => 'border-color',
+						'value'    => $text_color ? $text_color['value'] : false,
+					),
+					array(
+						'property' => 'background-color',
+						'value'    => $text_color ? $text_color['value'] : false,
+					),
+				),
+			),
+		);
+
+		$parsed_style = '';
+
+		foreach ( $styles as $style ) {
+			$properties = array_filter(
+				$style['properties'],
+				function( $property ) {
+					return $property['value'];
+				}
+			);
+
+			if ( ! empty( $properties ) ) {
+				$parsed_style .= $style['selector'] . '{' . PHP_EOL;
+				foreach ( $properties as $property ) {
+					$parsed_style .= $property['property'] . ':' . $property['value'] . ';' . PHP_EOL;
+				}
+				$parsed_style .= '}' . PHP_EOL;
+			}
+		}
+
+		wp_add_inline_style(
+			'wc-blocks-style',
+			$parsed_style
+		);
+	}
 }

plugins/woocommerce-blocks/src/Utils/StyleAttributesUtils.php

@@ -58,11 +58,13 @@ class StyleAttributesUtils {
 			return array(
 				'class' => sprintf( 'has-text-color has-%s-color', $text_color ),
 				'style' => null,
+				'value' => self::get_preset_value( $text_color ),
 			);
 		} elseif ( $custom_text_color ) {
 			return array(
 				'class' => null,
 				'style' => sprintf( 'color: %s;', $custom_text_color ),
+				'value' => $custom_text_color,
 			);
 		}
 		return null;
@@ -92,12 +94,14 @@ class StyleAttributesUtils {
 			$parsed_named_link_color = substr( $link_color, $index_named_link_color + 1 );
 			return array(
 				'class' => null,
-				'style' => sprintf( 'color: %s;', $parsed_named_link_color ),
+				'style' => sprintf( 'color: %s;', self::get_preset_value( $parsed_named_link_color ) ),
+				'value' => self::get_preset_value( $parsed_named_link_color ),
 			);
 		} else {
 			return array(
 				'class' => null,
 				'style' => sprintf( 'color: %s;', $link_color ),
+				'value' => $link_color,
 			);
 		}
 	}
@@ -144,11 +148,13 @@ class StyleAttributesUtils {
 			return array(
 				'class' => sprintf( 'has-background has-%s-background-color', $background_color ),
 				'style' => null,
+				'value' => self::get_preset_value( $background_color ),
 			);
 		} elseif ( '' !== $custom_background_color ) {
 			return array(
 				'class' => null,
 				'style' => sprintf( 'background-color: %s;', $custom_background_color ),
+				'value' => $custom_background_color,
 			);
 		}
 		return null;
@@ -284,4 +290,15 @@ class StyleAttributesUtils {
 
 		return $classes_and_styles['styles'];
 	}
+
+	/**
+	 * Get CSS value for color preset.
+	 *
+	 * @param string $preset_name Preset name.
+	 *
+	 * @return string CSS value for color preset.
+	 */
+	public static function get_preset_value( $preset_name ) {
+		return "var(--wp--preset--color--$preset_name)";
+	}
 }