Release: 10.8.3 (https://github.com/woocommerce/woocommerce-blocks/pull/10547)

* Create wc-all-block-styles chunk with all the styles for classic themes (https://github.com/woocommerce/woocommerce-blocks/pull/10543)

* add testing instructions and changelog

* bump version to 10.8.3

* Empty commit for release pull request

* add zip link

* Fix the `on sale` badge for product blocks (https://github.com/woocommerce/woocommerce-blocks/pull/10550)

* Fix the `on sale` badge for product blocks

* Fix in the editor

* Update changelog and testing instructions

* update zip link

* fix testing instructions

---------

Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>

plugins/woocommerce-blocks/assets/css/editor.scss

@@ -8,6 +8,10 @@
 
 			.wc-block-grid__product {
 				margin: 0 0 $gap-large 0;
+
+				.wc-block-grid__product-onsale {
+					position: absolute;
+				}
 			}
 		}
 

plugins/woocommerce-blocks/assets/css/style.scss

@@ -139,7 +139,7 @@
 		}
 	}
 }
-.wc-block-grid__product-onsale {
+.wc-block-grid .wc-block-grid__product-onsale {
 	@include font-size(small);
 	padding: em($gap-smallest) em($gap-small);
 	display: inline-block;

plugins/woocommerce-blocks/bin/webpack-configs.js

@@ -733,7 +733,7 @@ const getSiteEditorConfig = ( options = {} ) => {
  * @param {Object} options Build options.
  */
 const getStylingConfig = ( options = {} ) => {
-	let { fileSuffix } = options;
+	let { fileSuffix, isClassicThemeConfig } = options;
 	const { alias, resolvePlugins = [] } = options;
 	fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
 	const resolve = alias
@@ -775,11 +775,58 @@ const getStylingConfig = ( options = {} ) => {
 						chunks: 'all',
 						priority: 10,
 					},
+					...( isClassicThemeConfig && {
+						vendorsStyle: {
+							test: /[\/\\]node_modules[\/\\].*?style\.s?css$/,
+							name: 'wc-blocks-vendors-style',
+							chunks: 'all',
+							priority: 7,
+						},
+						blocksStyle: {
+							// Capture all stylesheets with name `style` or name that starts with underscore (abstracts).
+							test: /(style|_.*)\.scss$/,
+							name: 'wc-all-blocks-style',
+							chunks: 'all',
+							priority: 5,
+						},
+					} ),
 				},
 			},
 		},
 		module: {
 			rules: [
+				{
+					test: /[\/\\]node_modules[\/\\].*?style\.s?css$/,
+					use: [
+						MiniCssExtractPlugin.loader,
+						{ loader: 'css-loader', options: { importLoaders: 1 } },
+						'postcss-loader',
+						{
+							loader: 'sass-loader',
+							options: {
+								sassOptions: {
+									includePaths: [ 'node_modules' ],
+								},
+								additionalData: ( content ) => {
+									const styleImports = [
+										'colors',
+										'breakpoints',
+										'variables',
+										'mixins',
+										'animations',
+										'z-index',
+									]
+										.map(
+											( imported ) =>
+												`@import "~@wordpress/base-styles/${ imported }";`
+										)
+										.join( ' ' );
+									return styleImports + content;
+								},
+							},
+						},
+					],
+				},
 				{
 					test: /\.(j|t)sx?$/,
 					use: {
@@ -800,6 +847,7 @@ const getStylingConfig = ( options = {} ) => {
 				},
 				{
 					test: /\.s?css$/,
+					exclude: /node_modules/,
 					use: [
 						MiniCssExtractPlugin.loader,
 						'css-loader',

plugins/woocommerce-blocks/bin/webpack-entries.js

@@ -114,6 +114,16 @@ const getBlockEntries = ( relativePath ) => {
 
 const entries = {
 	styling: {
+		// @wordpress/components styles
+		'custom-select-control-style':
+			'./node_modules/wordpress-components/src/custom-select-control/style.scss',
+		'snackbar-notice-style':
+			'./node_modules/wordpress-components/src/snackbar/style.scss',
+		'combobox-control-style':
+			'./node_modules/wordpress-components/src/combobox-control/style.scss',
+		'form-token-field-style':
+			'./node_modules/wordpress-components/src/form-token-field/style.scss',
+
 		// Packages styles
 		'packages-style': glob.sync( './packages/**/index.js' ),
 

plugins/woocommerce-blocks/composer.json

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

plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1083.md

@@ -0,0 +1,24 @@
+# Testing notes and ZIP for release 10.8.3
+
+Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12322309/woocommerce-gutenberg-products-block.zip)
+
+## WooCommerce Core
+
+### Create wc-all-block-styles chunk with all blocks stylesheet for classic themes. [#10543](https://github.com/woocommerce/woocommerce-blocks/pull/10543)
+
+⚠️: Following these testing instruction for a classic theme (Storefront) and a block theme (TT3)
+
+#### For classic theme ensure that is loaded only `wc-all-blocks-style.css` and `wc-blocks-vendors-style.css` stylesheets
+
+#### For block theme sure that is loaded only the stylesheets of blocks visible in the page
+
+1. Create a post or page and add the All Products block. Verify styles are loaded correctly.
+2. Visit the page in the frontend and verify styles are loaded correctly in the frontend as well.
+3. Repeat steps 1 and 2 with all blocks listed on [this page](https://wordpress.org/plugins/woo-gutenberg-products-block/). Make sure to test each block individually. So, when possible, try with only one block on the page (in some cases, that's not possible, ie: filter blocks, in that case, try with as few blocks as possible on the page). The reason is that we want to make sure each block includes the style dependencies that it needs, so they need to be tested in isolation, otherwise styles from other blocks might leak into other blocks and "help fix issues".
+
+### Fix the "On Sale" badge position. [#10550](https://github.com/woocommerce/woocommerce-blocks/pull/10550)
+
+1. Enable the `Storefront` theme.
+2. Create a new page or post.
+3. Add the `Products by Attribute`, `Products by Tag`, `Products by Category`, `Handpicked products` and `All products` blocks.
+4. Check the `Sale` back shows on the top-right corner of the image on all of them, in the editor and in the frontend.

plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md

@@ -164,6 +164,7 @@ Every release includes specific testing instructions for new features and bug fi
 -   [10.8.0](./1080.md)
     -   [10.8.1](./1081.md)
     -   [10.8.2](./1082.md)
+    -   [10.8.3](./1083.md)
 
 
 <!-- FEEDBACK -->

plugins/woocommerce-blocks/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@woocommerce/block-library",
-	"version": "10.8.2",
+	"version": "10.8.3",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@woocommerce/block-library",
-			"version": "10.8.2",
+			"version": "10.8.3",
 			"hasInstallScript": true,
 			"license": "GPL-3.0+",
 			"dependencies": {

plugins/woocommerce-blocks/package.json

@@ -2,7 +2,7 @@
 	"name": "@woocommerce/block-library",
 	"title": "WooCommerce Blocks",
 	"author": "Automattic",
-	"version": "10.8.2",
+	"version": "10.8.3",
 	"description": "WooCommerce blocks for the Gutenberg editor.",
 	"homepage": "https://github.com/woocommerce/woocommerce-gutenberg-products-block/",
 	"keywords": [

plugins/woocommerce-blocks/readme.txt

@@ -4,7 +4,7 @@ Tags: gutenberg, woocommerce, woo commerce, products, blocks, woocommerce blocks
 Requires at least: 6.2
 Tested up to: 6.2
 Requires PHP: 7.3
-Stable tag: 10.8.2
+Stable tag: 10.8.3
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -81,6 +81,13 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/
 
 == Changelog ==
 
+= 10.8.3 - 2023-08-11 =
+
+#### Bug Fixes
+
+- Create wc-all-block-styles chunk with all blocks stylesheet for classic themes. ([10543](https://github.com/woocommerce/woocommerce-blocks/pull/10543))
+- Fix the "On Sale" badge position. ([10550](https://github.com/woocommerce/woocommerce-blocks/pull/10550))
+
 = 10.8.2 - 2023-08-09 =
 
 #### Bug Fixes

plugins/woocommerce-blocks/src/AssetsController.php

@@ -46,10 +46,17 @@ final class AssetsController {
 	 * Register block scripts & styles.
 	 */
 	public function register_assets() {
-		$this->register_style( 'wc-blocks-packages-style', plugins_url( $this->api->get_block_asset_build_path( 'packages-style', 'css' ), __DIR__ ), [], 'all', true );
-		$this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks', 'css' ), __DIR__ ), [], 'all', true );
 		$this->register_style( 'wc-blocks-editor-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-editor-style', 'css' ), __DIR__ ), [ 'wp-edit-blocks' ], 'all', true );
 
+		if ( wc_current_theme_is_fse_theme() ) {
+			$this->register_style( 'wc-blocks-packages-style', plugins_url( $this->api->get_block_asset_build_path( 'packages-style', 'css' ), __DIR__ ), [], 'all', true );
+			$this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks', 'css' ), __DIR__ ), [], 'all', true );
+		} else {
+
+			$this->register_style( 'wc-blocks-vendors-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-vendors-style', 'css' ), __DIR__ ) );
+			$this->register_style( 'wc-all-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-all-blocks-style', 'css' ), __DIR__ ), [ 'wc-blocks-vendors-style' ], 'all', true );
+		}
+
 		$this->api->register_script( 'wc-blocks-middleware', 'build/wc-blocks-middleware.js', [], false );
 		$this->api->register_script( 'wc-blocks-data-store', 'build/wc-blocks-data.js', [ 'wc-blocks-middleware' ] );
 		$this->api->register_script( 'wc-blocks-vendors', $this->api->get_block_asset_build_path( 'wc-blocks-vendors' ), [], false );

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

@@ -303,9 +303,12 @@ abstract class AbstractBlock {
 	 * @return string[]|null
 	 */
 	protected function get_block_type_style() {
-		$this->asset_api->register_style( 'wc-blocks-style-' . $this->block_name, $this->asset_api->get_block_asset_build_path( $this->block_name, 'css' ), [], 'all', true );
+		if ( wc_current_theme_is_fse_theme() ) {
+			$this->asset_api->register_style( 'wc-blocks-style-' . $this->block_name, $this->asset_api->get_block_asset_build_path( $this->block_name, 'css' ), [], 'all', true );
+			return [ 'wc-blocks-style', 'wc-blocks-style-' . $this->block_name ];
+		}
 
-		return [ 'wc-blocks-style', 'wc-blocks-style-' . $this->block_name ];
+		return [ 'wc-all-blocks-style' ];
 	}
 
 	/**

plugins/woocommerce-blocks/src/Package.php

@@ -109,7 +109,7 @@ class Package {
 				NewPackage::class,
 				function ( $container ) {
 					// leave for automated version bumping.
-					$version = '10.8.2';
+					$version = '10.8.3';
 					return new NewPackage(
 						$version,
 						dirname( __DIR__ ),

plugins/woocommerce-blocks/webpack.config.js

@@ -75,7 +75,12 @@ const PaymentsConfig = {
  */
 const StylingConfig = {
 	...sharedConfig,
-	...getStylingConfig( { alias: getAlias() } ),
+	...getStylingConfig( { alias: getAlias(), isClassicThemeConfig: false } ),
+};
+
+const StylingClassicThemeConfig = {
+	...sharedConfig,
+	...getStylingConfig( { alias: getAlias(), isClassicThemeConfig: true } ),
 };
 
 /**
@@ -103,4 +108,5 @@ module.exports = [
 	SiteEditorConfig,
 	StylingConfig,
 	InteractivityConfig,
+	StylingClassicThemeConfig,
 ];

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: 10.8.2
+ * Version: 10.8.3
  * Author: Automattic
  * Author URI: https://woocommerce.com
  * Text Domain:  woo-gutenberg-products-block