diff --git a/assets/css/editor.scss b/assets/css/editor.scss index 8ed065aded1..b721f90811c 100644 --- a/assets/css/editor.scss +++ b/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; + } } } diff --git a/assets/css/style.scss b/assets/css/style.scss index c1f78af42f6..a4810fb9c9e 100644 --- a/assets/css/style.scss +++ b/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; diff --git a/bin/webpack-configs.js b/bin/webpack-configs.js index 3dd7a25347d..84de696091a 100644 --- a/bin/webpack-configs.js +++ b/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', diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js index 887f5501e8e..d92dcd12b3a 100644 --- a/bin/webpack-entries.js +++ b/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' ), diff --git a/composer.json b/composer.json index 6f01a7ff7a2..4f79e31a4fb 100644 --- a/composer.json +++ b/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", diff --git a/docs/internal-developers/testing/releases/1083.md b/docs/internal-developers/testing/releases/1083.md new file mode 100644 index 00000000000..6f7a226df45 --- /dev/null +++ b/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. diff --git a/docs/internal-developers/testing/releases/README.md b/docs/internal-developers/testing/releases/README.md index f3a73ecff32..7d7e7e29be1 100644 --- a/docs/internal-developers/testing/releases/README.md +++ b/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) diff --git a/package-lock.json b/package-lock.json index a22bf86110b..a9359d780ed 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index 62a034897fb..6b92b425f85 100644 --- a/package.json +++ b/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": [ diff --git a/readme.txt b/readme.txt index 02679f35acf..2e6324281d0 100644 --- a/readme.txt +++ b/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 diff --git a/src/AssetsController.php b/src/AssetsController.php index 4b62c9e59cd..ea6e4f12293 100644 --- a/src/AssetsController.php +++ b/src/AssetsController.php @@ -46,10 +46,17 @@ protected function init() { * 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 ); diff --git a/src/BlockTypes/AbstractBlock.php b/src/BlockTypes/AbstractBlock.php index ba0c35a249b..be212f9ac13 100644 --- a/src/BlockTypes/AbstractBlock.php +++ b/src/BlockTypes/AbstractBlock.php @@ -303,9 +303,12 @@ protected function get_block_type_script( $key = null ) { * @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' ]; } /** diff --git a/src/Package.php b/src/Package.php index b1cc793b1f4..b37f4d7eead 100644 --- a/src/Package.php +++ b/src/Package.php @@ -109,7 +109,7 @@ public static function container( $reset = false ) { NewPackage::class, function ( $container ) { // leave for automated version bumping. - $version = '10.8.2'; + $version = '10.8.3'; return new NewPackage( $version, dirname( __DIR__ ), diff --git a/webpack.config.js b/webpack.config.js index ddb7942d125..8ba5746c343 100644 --- a/webpack.config.js +++ b/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, ]; diff --git a/woocommerce-gutenberg-products-block.php b/woocommerce-gutenberg-products-block.php index 954d6853e5f..40f3ed5cd3e 100644 --- a/woocommerce-gutenberg-products-block.php +++ b/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