Release: 10.0.6 (#9651)

* Empty commit for release pull request

* Empty commit for release pull request

* Add 10.0.6 changelog

* Update versions to 10.0.6

* Fix Mini-Cart block check to see whether a script has already been enqueued (#9649)

* Add 10.0.6 testing steps

* Partially uplift #9251 to 10.0.x (#9654)

* Update testing ZIP

---------

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

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/color-utils.ts

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { paramCase as kebabCase } from 'change-case';
+import { isObject } from '@woocommerce/types';
+import { getCSSRules } from '@wordpress/style-engine';
+import { parseStyle } from '@woocommerce/base-utils';
+
+interface WithStyle {
+	style: Record< string, unknown >;
+}
+
+/**
+ * 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,
+	};
+}
+
+export const useColorProps = ( props ) => {
+	const propsObject = isObject( props )
+		? props
+		: {
+				style: {},
+		  };
+
+	const style = parseStyle( propsObject.style );
+
+	return getColorClassesAndStyles( {
+		...propsObject,
+		style,
+	} as WithStyle );
+};

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 { useColorProps } from '../color-utils';
 
 type MiniCartCartButtonBlockProps = {
 	cartButtonLabel?: string;

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx

@@ -4,13 +4,13 @@
 import { CHECKOUT_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 { defaultCheckoutButtonLabel } from './constants';
 import { getVariant } from '../utils';
+import { useColorProps } from '../color-utils';
 
 type MiniCartCheckoutButtonBlockProps = {
 	checkoutButtonLabel?: string;

composer.json

@@ -3,7 +3,7 @@
 	"description": "WooCommerce blocks for the Gutenberg editor.",
 	"homepage": "https://woocommerce.com/",
 	"type": "wordpress-plugin",
-	"version": "10.0.5",
+	"version": "10.0.6",
 	"keywords": [
 		"gutenberg",
 		"woocommerce",

docs/internal-developers/testing/releases/1006.md

@@ -0,0 +1,24 @@
+# Testing notes and ZIP for release 10.0.6
+
+Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11604483/woocommerce-gutenberg-products-block.zip)
+
+## WooCommerce Core
+
+### Fix Mini-Cart block check to see whether a script has already been enqueued. [(9649)](https://github.com/woocommerce/woocommerce-blocks/pull/9649)
+
+0. Make sure you have WC core 7.7.1.
+1. Enable a block theme.
+2. Add the Mini-Cart block to the header of your store.
+3. Go to the frontend and open the Mini-Cart drawer. Verify it opens.
+4. Install the Page Optimize and Product Bundles plugins (no need to change anything in their configuration).
+5. Go to a page in the frontend that doesn't have any blocks besides the Mini-Cart you added to the header.
+6. Open the Mini-Cart drawer and verify it opens without JS errors.
+
+### Partially uplift #9251 to 10.0.x. [(9652)](https://github.com/woocommerce/woocommerce-blocks/pull/9652)
+
+1. Enable a block theme.
+2. Add the Mini-Cart block to the header of your store.
+3. Go to Appearance > Editor > Template Parts > Mini-Cart.
+4. Modify the text and background colors of _Mini Cart View Cart Button_ and _Mini Cart Proceed to Checkout Button_.
+5. Save the template part and reload the page. Verify the colors persisted.
+6. Go to the frontend, open the Mini-Cart drawer and verify the colors are applied correctly there too.

docs/internal-developers/testing/releases/README.md

@@ -142,6 +142,7 @@ Every release includes specific testing instructions for new features and bug fi
     -   [10.0.3](./1003.md)
     -   [10.0.4](./1004.md)
     -   [10.0.5](./1005.md)
+    -   [10.0.6](./1006.md)
 
 
 <!-- FEEDBACK -->