From 1d71da716293445fdd51777f498aa2ad94a94e97 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 31 Oct 2022 16:10:27 +0100
Subject: [PATCH] Release: 8.5.2
 (https://github.com/woocommerce/woocommerce-blocks/pull/7535)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use full link for WordPress resources (https://github.com/woocommerce/woocommerce-blocks/pull/7211)

Co-authored-by: Niels Lange <info@nielslange.de>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

* Empty commit for release pull request

* Update styles of the Filter by Attribute dropdown so it looks good in TT3 (https://github.com/woocommerce/woocommerce-blocks/pull/7506)

* Use theme's body background color as the mini cart contents default background color (https://github.com/woocommerce/woocommerce-blocks/pull/7510)

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Price Slider: use `currentColor` for the slider (https://github.com/woocommerce/woocommerce-blocks/pull/7527)

* Fixed Price Slider Issue

Located where the price slider was hard coded and replaced it.

* fix CSS lint

* use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce/woocommerce-blocks#7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce/woocommerce-blocks#7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* remove background-color

Co-authored-by: EmptySet-Exe <46509186+EmptySet-Exe@users.noreply.github.com>
Co-authored-by: Niels Lange <info@nielslange.de>

* Make price slider 'inactive' range half transparent so it looks better in dark themes (https://github.com/woocommerce/woocommerce-blocks/pull/7525)

* Fix inconsistent button styling with TT3 (https://github.com/woocommerce/woocommerce-blocks/pull/7516)

* fix inconsistent button styling with TT3

* use wc_wp_theme_get_element_class_name

* add check to be sure that wc_wp_theme_get_element_class_name function exists

* Fix Mini Cart Block global styles woocommerce/woocommerce-blocks#7379 (https://github.com/woocommerce/woocommerce-blocks/pull/7515)

* Fix Mini Cart Block global styles woocommerce/woocommerce-blocks#7379

Fix Mini Cart Block global styles

* add font_size

* Empty commit for release pull request

* add changelog and testing instructions

* add zip link for testing

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: EmptySet-Exe <46509186+EmptySet-Exe@users.noreply.github.com>
---
 .../blocks/product-elements/button/block.js   |  2 +
 .../components/form-token-field/style.scss    |  3 +
 .../base/components/price-slider/style.scss   | 80 +++++-------------
 .../assets/js/blocks/mini-cart/block.tsx      |  8 +-
 .../assets/js/blocks/mini-cart/edit.tsx       |  8 +-
 .../assets/js/blocks/mini-cart/frontend.ts    | 21 +++++
 .../assets/js/blocks/mini-cart/index.tsx      |  1 -
 .../mini-cart/mini-cart-contents/edit.tsx     | 54 +++++++++++++
 .../assets/js/blocks/mini-cart/style.scss     |  9 ++-
 .../testing/releases/852.md                   | 81 +++++++++++++++++++
 .../testing/releases/README.md                |  1 +
 plugins/woocommerce-blocks/package.json       |  2 +-
 plugins/woocommerce-blocks/readme.txt         | 13 ++-
 .../src/BlockTypes/AbstractProductGrid.php    |  2 +-
 .../src/BlockTypes/MiniCart.php               |  6 +-
 plugins/woocommerce-blocks/src/Package.php    |  2 +-
 .../woocommerce-gutenberg-products-block.php  |  2 +-
 17 files changed, 210 insertions(+), 85 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/docs/internal-developers/testing/releases/852.md

diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.js b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.js
index 4283ae68c7d..7bfe716d3e4 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.js
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.js
@@ -162,6 +162,7 @@ const AddToCartButton = ( {
 			aria-label={ buttonAriaLabel }
 			className={ classnames(
 				'wp-block-button__link',
+				'wp-element-button',
 				'add_to_cart_button',
 				'wc-block-components-product-button__button',
 				colorStyles.className,
@@ -206,6 +207,7 @@ const AddToCartButtonPlaceholder = ( {
 		<button
 			className={ classnames(
 				'wp-block-button__link',
+				'wp-element-button',
 				'add_to_cart_button',
 				'wc-block-components-product-button__button',
 				'wc-block-components-product-button__button--placeholder',
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/style.scss
index 99039401dfb..c7cc77fce68 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/form-token-field/style.scss
@@ -16,8 +16,10 @@
 	}
 
 	.components-form-token-field__input-container {
+		background-color: #fff;
 		border-radius: 0;
 		box-shadow: none;
+		color: #000;
 		position: relative;
 
 		input[type="text"].components-form-token-field__input {
@@ -64,6 +66,7 @@
 			margin-right: 0;
 			position: relative;
 			width: 100%;
+			z-index: 1;
 		}
 
 		.components-form-token-field__remove-token.components-button,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
index ef82faa621c..4a19905df88 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
@@ -1,6 +1,6 @@
-/* stylelint-disable */
+
 @mixin thumb {
-	background-color: transparent;
+	background: $white;
 	background-position: 0 0;
 	box-sizing: content-box;
 	width: 12px;
@@ -13,12 +13,10 @@
 	cursor: pointer;
 	z-index: 20;
 	pointer-events: auto;
-	background: $white;
-	transition: transform .2s ease-in-out;
+	transition: transform 0.2s ease-in-out;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
-
 	&:hover {
 		@include thumbFocus;
 	}
@@ -26,12 +24,14 @@
 
 @mixin thumbFocus {
 	background: $gray-900;
+	border-color: $white;
 }
 
-/* stylelint-enable */
+
 @mixin track {
 	cursor: default;
-	height: 1px; /* Required for Samsung internet based browsers */
+	height: 1px;
+	/* Required for Samsung internet based browsers */
 	outline: 0;
 	-webkit-appearance: none;
 	-moz-appearance: none;
@@ -54,7 +54,6 @@
 
 .wc-block-components-price-slider {
 	margin-bottom: $gap-large;
-
 	&.is-loading.is-disabled {
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-filter-reset-button,
@@ -62,12 +61,10 @@
 			@include placeholder();
 			box-shadow: none;
 		}
-
 		.wc-block-components-price-slider__amount {
 			display: none;
 		}
 	}
-
 	&.is-disabled:not(.is-loading) {
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-price-slider__amount,
@@ -79,7 +76,7 @@
 
 .wc-block-components-price-slider__range-input-wrapper {
 	@include reset;
-	background: $gray-300;
+	background: transparent;
 	border-radius: 4px;
 	clear: both;
 	flex-grow: 1;
@@ -87,6 +84,17 @@
 	margin: 15px 0;
 	position: relative;
 
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		background: currentColor;
+		opacity: 0.2;
+	}
+
 	&.is-loading {
 		@include placeholder();
 		height: em(9px);
@@ -101,7 +109,7 @@
 	top: 0;
 	width: 100%;
 	--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
-	--range-color: #{$gray-900};
+	--range-color: currentColor;
 	/*rtl:ignore*/
 	background: var(--track-background);
 }
@@ -112,7 +120,6 @@
 	gap: $gap-smaller;
 	justify-content: space-between;
 	margin: $gap 0;
-
 	.wc-block-components-price-slider__amount {
 		margin: 0;
 		border-radius: 4px;
@@ -121,11 +128,9 @@
 		max-width: 80px;
 		min-width: 0;
 		padding: $gap-smaller;
-
 		.wc-block-components-price-slider--is-input-inline & {
 			max-width: 60px;
 		}
-
 		&.is-loading {
 			@include placeholder();
 			border-radius: 0 !important;
@@ -146,7 +151,6 @@
 	display: flex;
 	gap: $gap;
 	justify-content: flex-end;
-
 	// The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop.
 	button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button {
 		margin-top: 0;
@@ -165,85 +169,66 @@
 	position: absolute;
 	left: 0;
 	top: 0;
-
 	&::-webkit-slider-runnable-track {
 		@include track;
 	}
-
 	&::-webkit-slider-thumb {
 		@include thumb;
 		margin: -5px 0 0 0;
 	}
-
 	&::-webkit-slider-progress {
 		@include reset;
 	}
-
 	&::-moz-focus-outer {
 		border: 0;
 	}
-
 	&::-moz-range-track {
 		@include track;
 	}
-
 	&::-moz-range-progress {
 		@include reset;
 	}
-
 	&::-moz-range-thumb {
 		@include thumb;
 	}
-
 	&::-ms-thumb {
 		@include thumb;
 	}
-
 	&:focus {
 		&::-webkit-slider-thumb {
 			@include thumbFocus;
 		}
-
 		&::-moz-range-thumb {
 			@include thumbFocus;
 		}
-
 		&::-ms-thumb {
 			@include thumbFocus;
 		}
 	}
-
 	&.wc-block-components-price-slider__range-input--min {
 		z-index: 21;
-
 		&::-webkit-slider-thumb {
 			margin-left: -2px;
 			background-position-x: left;
 		}
-
 		&::-moz-range-thumb {
 			background-position-x: left;
 			transform: translate(-2px, 2px);
 		}
-
 		&::-ms-thumb {
 			background-position-x: left;
 		}
 	}
-
 	&.wc-block-components-price-slider__range-input--max {
 		z-index: 20;
-
 		&::-webkit-slider-thumb {
 			background-position-x: right;
 			margin-left: 2px;
 		}
-
 		&::-moz-range-thumb {
 			background-position-x: right;
 			transform: translate(2px, 2px);
 		}
-
 		&::-ms-thumb {
 			background-position-x: right;
 		}
@@ -272,32 +257,25 @@
 	.wc-block-components-price-slider__range-input {
 		height: 24px;
 		pointer-events: auto;
-
 		&::-ms-track {
 			/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
 			background: transparent;
-
 			/*leave room for the larger thumb to overflow with a transparent border */
 			border-color: transparent;
 			border-width: 7px 0;
-
 			/*remove default tick marks*/
 			color: transparent;
 		}
-
 		&::-ms-fill-lower {
 			background: #e1e1e1;
 			box-shadow: 0 0 0 1px inset #b8b8b8;
 		}
-
 		&::-ms-fill-upper {
 			background: transparent;
 		}
-
 		&::-ms-tooltip {
 			display: none;
 		}
-
 		&::-ms-thumb {
 			transform: translate(1px, 0);
 			pointer-events: auto;
@@ -308,12 +286,10 @@
 			background: #e1e1e1;
 			box-shadow: 0 0 0 1px inset #b8b8b8;
 		}
-
 		&::-ms-fill-lower {
 			background: transparent;
 		}
 	}
-
 	.wc-block-components-price-slider {
 		&.is-loading.is-disabled {
 			.wc-block-components-price-slider__range-input-wrapper {
@@ -321,7 +297,6 @@
 				box-shadow: none;
 			}
 		}
-
 		&.is-disabled:not(.is-loading) {
 			.wc-block-components-price-slider__range-input-wrapper {
 				animation: none;
@@ -330,7 +305,9 @@
 	}
 }
 
+
 /* IE 11 will not support multi-range slider due to poor pointer-events support on the thumb. Reverts to 2 sliders. */
+
 @include ie11() {
 	@include ie-fixes();
 }
@@ -342,55 +319,44 @@
 
 .theme-twentytwentyone {
 	$border-width: 3px;
-
 	.wc-block-components-price-slider__range-input-wrapper {
 		background: transparent;
 		border: $border-width solid currentColor;
 		box-sizing: border-box;
 	}
-
 	.wc-block-components-price-slider__range-input-progress {
 		--range-color: currentColor;
 		margin: -$border-width;
 	}
-
 	.wc-block-price-filter__range-input {
 		background: transparent;
 		margin: -$border-width;
 		width: calc(100% + #{$border-width * 2});
-
 		&:hover,
 		&:focus {
 			&::-webkit-slider-thumb {
 				filter: none;
 			}
-
 			&::-moz-range-thumb {
 				filter: none;
 			}
-
 			&::-ms-thumb {
 				filter: none;
 			}
 		}
-
 		&::-webkit-slider-thumb {
 			margin-top: -9px;
 		}
-
 		&.wc-block-components-price-slider__range-input--max::-moz-range-thumb {
 			transform: translate(2px, 1px);
 		}
-
 		&.wc-block-components-price-slider__range-input--min::-moz-range-thumb {
 			transform: translate(-2px, 1px);
 		}
-
 		&::-ms-track {
 			border-color: transparent !important;
 		}
 	}
-
 	@include ie11() {
 		.wc-block-components-price-slider__range-input-wrapper {
 			border: 0;
@@ -398,11 +364,9 @@
 			position: relative;
 			height: 50px;
 		}
-
 		.wc-block-components-price-slider__range-input-progress {
 			display: none;
 		}
-
 		.wc-block-price-filter__range-input {
 			height: 100%;
 			margin: 0;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx
index 122b1bef62d..f007347fcfd 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/block.tsx
@@ -4,7 +4,6 @@
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 import Drawer from '@woocommerce/base-components/drawer';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { useTypographyProps } from '@woocommerce/base-hooks';
 import { translateJQueryEventToNative } from '@woocommerce/base-utils';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
 import {
@@ -205,8 +204,6 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 		color: style?.color?.text,
 	};
 
-	const typographyProps = useTypographyProps( attributes );
-
 	return (
 		<>
 			<button
@@ -221,10 +218,7 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 				aria-label={ ariaLabel }
 			>
 				{ ! hasHiddenPrice && (
-					<span
-						className="wc-block-mini-cart__amount"
-						style={ typographyProps.style }
-					>
+					<span className="wc-block-mini-cart__amount">
 						{ formatPrice(
 							subTotal,
 							getCurrencyFromPriceResponse( cartTotals )
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/edit.tsx
index b8b51e42b21..c0017b2858e 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/edit.tsx
@@ -13,7 +13,6 @@ import {
 import { getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
-import { useTypographyProps } from '@woocommerce/base-hooks';
 
 /**
  * Internal dependencies
@@ -44,8 +43,6 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 	const productCount = 0;
 	const productTotal = 0;
 
-	const typographyProps = useTypographyProps( attributes );
-
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
@@ -127,10 +124,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 			<Noninteractive>
 				<button className="wc-block-mini-cart__button">
 					{ ! hasHiddenPrice && (
-						<span
-							className="wc-block-mini-cart__amount"
-							style={ typographyProps.style }
-						>
+						<span className="wc-block-mini-cart__amount">
 							{ formatPrice( productTotal ) }
 						</span>
 					) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/frontend.ts b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/frontend.ts
index f2be8c8f6ca..ccc68cdbf3a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/frontend.ts
+++ b/plugins/woocommerce-blocks/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 );
 } );
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/index.tsx
index 61bc0f7d96c..cde426f6b3f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/index.tsx
@@ -39,7 +39,6 @@ const settings: BlockConfiguration = {
 			...( isFeaturePluginBuild() && {
 				__experimentalFontFamily: true,
 				__experimentalFontWeight: true,
-				__experimentalSkipSerialization: true,
 			} ),
 		},
 	},
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
index d6350ac23f7..c1d57e09590 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
+++ b/plugins/woocommerce-blocks/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 }>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss
index a9887467521..0ba8320a1fc 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss
@@ -10,7 +10,7 @@
 	display: flex;
 	font-size: inherit;
 	font-family: inherit;
-	font-weight: 400;
+	font-weight: inherit;
 	padding: em($gap-small) em($gap-smaller);
 
 	&:hover:not([disabled]) {
@@ -29,7 +29,8 @@
 @media screen and (min-width: 768px) {
 	.wc-block-mini-cart__amount {
 		display: initial;
-		font-weight: 600;
+		font-size: inherit;
+		font-weight: inherit;
 		margin-right: $gap-smaller;
 	}
 }
@@ -64,12 +65,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 {
diff --git a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/852.md b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/852.md
new file mode 100644
index 00000000000..64d442e6fc6
--- /dev/null
+++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/852.md
@@ -0,0 +1,81 @@
+# Testing notes and ZIP for release 8.5.2
+
+Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/9901527/woocommerce-gutenberg-products-block.zip)
+
+## Feature plugin and package inclusion in WooCommerce
+
+### Fix Mini Cart Global Styles. [7515](https://github.com/woocommerce/woocommerce-blocks/pull/7515)
+
+
+1. Enable TT3 theme.
+2. Go to Appearance > Site Editor and replace the header with `WooCommerce Essential Header | Light` pattern.
+3. Save and visit the frontend.
+4. Hover over the Mini Cart and be sure that the font size doesn't change.
+5. Edit some settings related to the Mini Cart Global Styles.
+6. Be sure that the settings are reflected correctly on the editor and frontend side.
+
+### Fix inconsistent button styling with TT3. ([7516](https://github.com/woocommerce/woocommerce-blocks/pull/7516))
+
+
+| Before | After |
+| ------ | ----- |
+|![image](https://user-images.githubusercontent.com/4463174/198559087-b24ceeb2-61ba-488f-84a0-f87d6b2bc965.png)|![image](https://user-images.githubusercontent.com/4463174/198559394-b3e377d5-3e6e-4f3e-9ea4-282fd02fe923.png)|
+
+1. Enable TT3.
+2. Create a new post/page and add the `All Product` block and the `Product Categories` block.
+3. Save.
+4. Visit the post/page via incognito mode and be sure that all the buttons have the same style.
+
+### Make the Filter by Price block range color dependent of the theme color. [7525](https://github.com/woocommerce/woocommerce-blocks/pull/7525)
+
+| Theme | Before | After |
+| --- | ------ | ----- |
+| Storefront | ![imatge](https://user-images.githubusercontent.com/3616980/198656336-463dd2fe-4329-4d5e-8305-43f8375a0077.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198666606-aa3c443b-0e21-4474-b6d2-084280ec557b.png) |
+| TT2 (dark) | ![imatge](https://user-images.githubusercontent.com/3616980/198658810-b429e817-7685-4a4c-afbc-eb57b2a72543.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198666776-7dfb3663-ace5-40ff-91e5-87571b6767a0.png) |
+| Bricksy | ![imatge](https://user-images.githubusercontent.com/3616980/198661164-3d84c0e5-c27b-40b8-82df-d8db319d4c50.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198667122-05c29bf8-534f-4409-8577-572b44d782f5.png) |
+| TT3 (default) | ![imatge](https://user-images.githubusercontent.com/3616980/198665415-584ac7eb-3c20-4d35-a1a6-6501cc932bad.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198666131-2e641add-3918-4447-8260-dc8c9eefc684.png) |
+| TT3 (Pilgrimage) | ![imatge](https://user-images.githubusercontent.com/3616980/198665030-cba725ec-a420-4184-98bf-3ace4e639e6f.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198667488-b03bb985-8304-4f7c-86b9-5a6bb3f073f9.png) |
+
+1. Add the Filter by Price and the All Products blocks in the same page.
+2. Visit the page in the frontend and move the price slider thumbs.
+3. Verify there is enough contrast between the "active" part of the slider and the "inactive" one (see screenshots above).
+
+
+### Filter by Price block: fix price slider visibility on dark themes. [7527](https://github.com/woocommerce/woocommerce-blocks/pull/7527)
+
+|                | With dark background | With light background |
+|----------------|----------------------|-----------------------|
+| Before this PR |![Screen Capture on 2022-10-28 at 17-10-01](https://user-images.githubusercontent.com/4463174/198670636-61618ba7-7160-4674-be03-d8245a1a8209.gif)|![Screen Capture on 2022-10-28 at 17-11-48](https://user-images.githubusercontent.com/4463174/198671568-57fa5e44-4eb1-4ad1-82b8-51e2d4a7e0f8.gif)|
+| With this PR   |![Screen Capture on 2022-10-28 at 17-08-35](https://user-images.githubusercontent.com/4463174/198669729-a206b68d-0d01-41a3-8117-1a8015aed0a5.gif)|![Screen Capture on 2022-10-28 at 17-02-05](https://user-images.githubusercontent.com/4463174/198665985-3ae65415-e997-4c9c-a146-e07947f5fc68.gif)|
+
+
+1. Enable TT2.
+2. Add the Filter by Price and All Products blocks inside a Columns block into a post or page.
+3. Change the background color of the Filter by Price column to a dark color. Change the text color to a light color.
+4. Notice the price slider is visible.
+
+### Update the Mini Cart block drawer to honor the theme's background. [7510](https://github.com/woocommerce/woocommerce-blocks/pull/7510)
+
+1. Download and activate [TT3](https://github.com/WordPress/twentytwentythree) select the Pilgrimage style variation (see screenshot below).
+2. Add the Mini Cart block to a post or page.
+3. In the frontend, click on the Mini Cart button to open the drawer.
+4. Verify the background is dark and text can be read properly.
+5. Back in the editor, select the Mini Cart block and press on `Edit Mini Cart template part` in the sidebar. That will open the template editor.
+6. Verify text is legible there as well:
+![imatge](https://user-images.githubusercontent.com/3616980/198266198-9a607821-cb5b-47e5-90ec-b0cd64ca34e3.png)
+7. Try with all other TT3 theme variations and verify text can be properly read in all of them.
+8. Repeat all steps above with TT2.
+
+### Add white background to Filter by Attribute block dropdown so text is legible in dark backgrounds. [7506](https://github.com/woocommerce/woocommerce-blocks/pull/7506)
+
+| Before | After |
+| ------ | ----- |
+| ![imatge](https://user-images.githubusercontent.com/3616980/198288809-7f575c00-72f1-41e7-8a19-1cf2c9e2b3b7.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198288636-225716da-6a6d-4db2-ad03-5dd404ea61d7.png) |
+| ![imatge](https://user-images.githubusercontent.com/3616980/198288969-c5619a4b-a16f-4d39-815d-a6ebd336cc40.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198289132-6066cb6d-03c6-4f5b-a791-69da2e1db95c.png) |
+
+
+1. Download and activate [TT3](https://github.com/WordPress/twentytwentythree).
+2. Add the All Products block with the Filter by Attribute block next to it in a post or page.
+2. Visit the post or page and interact with the Filter by Attribute block.
+3. Verify the background of the input has white background, so text is legible.
+
diff --git a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md
index 8c1592785f3..0242db44518 100644
--- a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md
+++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md
@@ -90,6 +90,7 @@ Every release includes specific testing instructions for new features and bug fi
 -   [8.4.0](./840.md)
 -   [8.5.0](./850.md)
     -   [8.5.1](./851.md)
+    -   [8.5.2](./852.md)
 
 <!-- FEEDBACK -->
 
diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json
index 44a58587895..1e9fe49640e 100644
--- a/plugins/woocommerce-blocks/package.json
+++ b/plugins/woocommerce-blocks/package.json
@@ -2,7 +2,7 @@
 	"name": "@woocommerce/block-library",
 	"title": "WooCommerce Blocks",
 	"author": "Automattic",
-	"version": "8.5.1",
+	"version": "8.5.2",
 	"description": "WooCommerce blocks for the Gutenberg editor.",
 	"homepage": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/",
 	"keywords": [
diff --git a/plugins/woocommerce-blocks/readme.txt b/plugins/woocommerce-blocks/readme.txt
index 671bfaebc5f..4bd05123e7f 100644
--- a/plugins/woocommerce-blocks/readme.txt
+++ b/plugins/woocommerce-blocks/readme.txt
@@ -4,7 +4,7 @@ Tags: gutenberg, woocommerce, woo commerce, products, blocks, woocommerce blocks
 Requires at least: 6.0
 Tested up to: 6.0
 Requires PHP: 7.0
-Stable tag: 8.5.1
+Stable tag: 8.5.2
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -86,6 +86,17 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/
 
 == Changelog ==
 
+= 8.5.2 - 2022-10-31 =
+
+#### Enhancements
+
+- Fix Mini Cart Global Styles. [7515](https://github.com/woocommerce/woocommerce-blocks/pull/7515)
+- Fix inconsistent button styling with TT3. ([7516](https://github.com/woocommerce/woocommerce-blocks/pull/7516))
+- Make the Filter by Price block range color dependent of the theme color. [7525](https://github.com/woocommerce/woocommerce-blocks/pull/7525)
+- Filter by Price block: fix price slider visibility on dark themes. [7527](https://github.com/woocommerce/woocommerce-blocks/pull/7527)
+- Update the Mini Cart block drawer to honor the theme's background. [7510](https://github.com/woocommerce/woocommerce-blocks/pull/7510)
+- Add white background to Filter by Attribute block dropdown so text is legible in dark backgrounds. [7506](https://github.com/woocommerce/woocommerce-blocks/pull/7506)
+
 = 8.5.1 - 2022-09-23 =
 
 #### Bug Fixes
diff --git a/plugins/woocommerce-blocks/src/BlockTypes/AbstractProductGrid.php b/plugins/woocommerce-blocks/src/BlockTypes/AbstractProductGrid.php
index 451b0ad8075..caa51c0713b 100644
--- a/plugins/woocommerce-blocks/src/BlockTypes/AbstractProductGrid.php
+++ b/plugins/woocommerce-blocks/src/BlockTypes/AbstractProductGrid.php
@@ -647,7 +647,7 @@ abstract class AbstractProductGrid extends AbstractDynamicBlock {
 			'data-product_id'  => $product->get_id(),
 			'data-product_sku' => $product->get_sku(),
 			'rel'              => 'nofollow',
-			'class'            => 'wp-block-button__link add_to_cart_button',
+			'class'            => 'wp-block-button__link ' . ( function_exists( 'wc_wp_theme_get_element_class_name' ) ? wc_wp_theme_get_element_class_name( 'button' ) : '' ) . ' add_to_cart_button',
 		);
 
 		if (
diff --git a/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php b/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php
index c18329a3b11..7de272f5684 100644
--- a/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php
+++ b/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php
@@ -303,9 +303,7 @@ class MiniCart extends AbstractBlock {
 		$cart_controller     = $this->get_cart_controller();
 		$cart                = $cart_controller->get_cart_instance();
 		$cart_contents_total = $cart->get_subtotal();
-		$typography_styles   = isset( StyleAttributesUtils::get_font_weight_class_and_style( $attributes )['style'] ) ? StyleAttributesUtils::get_font_weight_class_and_style( $attributes )['style'] : null;
-
-		return '<span class="wc-block-mini-cart__amount" style="' . esc_attr( $typography_styles ) . '">' . esc_html( wp_strip_all_tags( wc_price( $cart_contents_total ) ) ) . '</span>
+		return '<span class="wc-block-mini-cart__amount">' . esc_html( wp_strip_all_tags( wc_price( $cart_contents_total ) ) ) . '</span>
 		' . $this->get_include_tax_label_markup();
 	}
 
@@ -358,7 +356,7 @@ class MiniCart extends AbstractBlock {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
-		$classes_styles  = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'text_color', 'background_color', 'font_size', 'font_family' ) );
+		$classes_styles  = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'text_color', 'background_color', 'font_size', 'font_weight', 'font_family' ) );
 		$wrapper_classes = sprintf( 'wc-block-mini-cart wp-block-woocommerce-mini-cart %s', $classes_styles['classes'] );
 		if ( ! empty( $attributes['className'] ) ) {
 			$wrapper_classes .= ' ' . $attributes['className'];
diff --git a/plugins/woocommerce-blocks/src/Package.php b/plugins/woocommerce-blocks/src/Package.php
index 2b195c25643..31131fcdfcb 100644
--- a/plugins/woocommerce-blocks/src/Package.php
+++ b/plugins/woocommerce-blocks/src/Package.php
@@ -115,7 +115,7 @@ class Package {
 				NewPackage::class,
 				function ( $container ) {
 					// leave for automated version bumping.
-					$version = '8.5.1';
+					$version = '8.5.2';
 					return new NewPackage(
 						$version,
 						dirname( __DIR__ ),
diff --git a/plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php b/plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php
index 70ba3836a7f..eecfa8222a5 100644
--- a/plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php
+++ b/plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php
@@ -3,7 +3,7 @@
  * Plugin Name: WooCommerce Blocks
  * Plugin URI: https://github.com/woocommerce/woocommerce-gutenberg-products-block
  * Description: WooCommerce blocks for the Gutenberg editor.
- * Version: 8.5.1
+ * Version: 8.5.2
  * Author: Automattic
  * Author URI: https://woocommerce.com
  * Text Domain:  woo-gutenberg-products-block