From ee8cfdc3041ccd1fa30ee512b5767280e286f941 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 23 Jun 2023 15:30:05 -0300 Subject: [PATCH 1/2] Release: 10.4.4 (https://github.com/woocommerce/woocommerce-blocks/pull/9973) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Empty commit for release pull request * Add back filter blocks frontend scripts (https://github.com/woocommerce/woocommerce-blocks/pull/9954) * Update changelog and bump version to 10.4.4 * Add testing notes for 10.4.4 release * Update testing notes for release 10.4.4 * Replace Automated tests badge with Unit and E2E tests badge * Wait for cart to be removed when emptied (https://github.com/woocommerce/woocommerce-blocks/pull/9829) * Temporarily skip PHP Unit Tests for PHP 8.1 and 8.2 (https://github.com/woocommerce/woocommerce-blocks/pull/9859) * Allow failure of the PHP Unit Tests * Limit the PHP versions to 7.4 and 8.0 to run unit tests * Don't allow failing fast * Add a comment explaining the skipped part * Cancel jobs later * Cancel all the steps in workflow based on the same condition --------- Co-authored-by: github-actions Co-authored-by: Albert Juhé Lluveras Co-authored-by: Alexandre Lara Co-authored-by: Mike Jolley Co-authored-by: Karol Manijak --- .../.github/workflows/unit-tests.yml | 18 +++++ plugins/woocommerce-blocks/README.md | 3 +- .../js/blocks/attribute-filter/frontend.ts | 23 ++++++ .../assets/js/blocks/price-filter/frontend.ts | 23 ++++++ .../assets/js/blocks/stock-filter/frontend.ts | 23 ++++++ plugins/woocommerce-blocks/composer.json | 2 +- .../testing/releases/1044.md | 75 +++++++++++++++++++ .../testing/releases/README.md | 1 + plugins/woocommerce-blocks/package-lock.json | 4 +- plugins/woocommerce-blocks/package.json | 2 +- plugins/woocommerce-blocks/readme.txt | 8 +- .../src/BlockTypes/AttributeFilter.php | 9 --- .../src/BlockTypes/PriceFilter.php | 9 --- .../src/BlockTypes/StockFilter.php | 9 --- plugins/woocommerce-blocks/src/Package.php | 2 +- .../woocommerce-blocks/tests/utils/shopper.js | 9 +-- .../woocommerce-gutenberg-products-block.php | 2 +- 17 files changed, 182 insertions(+), 40 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/frontend.ts create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/price-filter/frontend.ts create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/stock-filter/frontend.ts create mode 100644 plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1044.md diff --git a/plugins/woocommerce-blocks/.github/workflows/unit-tests.yml b/plugins/woocommerce-blocks/.github/workflows/unit-tests.yml index a48eaf1bb66..f7725db5615 100644 --- a/plugins/woocommerce-blocks/.github/workflows/unit-tests.yml +++ b/plugins/woocommerce-blocks/.github/workflows/unit-tests.yml @@ -80,6 +80,8 @@ jobs: ## - name: Set up PHP uses: shivammathur/setup-php@v2 + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} with: php-version: '${{ matrix.php }}' ini-file: development @@ -87,21 +89,29 @@ jobs: # Ensure that Composer installs the correct versions of packages. - name: Override PHP version in composer.json + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} run: | composer config platform.php ${{ matrix.php }} composer update - name: Install npm dependencies + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} run: | npm ci npm run build - name: Docker debug information + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} run: | docker -v docker-compose -v - name: General debug information + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} run: | npm --version node --version @@ -111,12 +121,18 @@ jobs: locale -a - name: Start Docker environment + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} run: npm run wp-env start --update - name: Log running Docker containers + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} run: docker ps -a - name: Docker container debug information + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} run: | npm run wp-env run tests-mysql mysql -- --version npm run wp-env run tests-wordpress "php --version" @@ -125,4 +141,6 @@ jobs: npm run wp-env run tests-wordpress "locale -a" - name: Run PHPUnit tests + # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running + if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }} run: npm run test:php diff --git a/plugins/woocommerce-blocks/README.md b/plugins/woocommerce-blocks/README.md index 31a96f220c8..b0f317dd0ae 100644 --- a/plugins/woocommerce-blocks/README.md +++ b/plugins/woocommerce-blocks/README.md @@ -4,7 +4,8 @@ [![View](https://img.shields.io/badge/Project%20Components-brightgreen.svg?style=flat)](https://woocommerce.github.io/woocommerce-blocks/) ![JavaScript and CSS Linting](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/JavaScript%20and%20CSS%20Linting/badge.svg?branch=trunk) ![PHP Coding Standards](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/PHP%20Coding%20Standards/badge.svg?branch=trunk) -![Automated tests](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/Automated%20tests/badge.svg?branch=trunk) +![Unit Tests](https://github.com/woocommerce/woocommerce-blocks/workflows/E2E%20tests/badge.svg?branch=trunk) +![E2E Tests](https://github.com/woocommerce/woocommerce-blocks/workflows/Unit%20Tests/badge.svg?branch=trunk) This is the feature plugin for WooCommerce + Gutenberg. This plugin serves as a space to iterate and explore new Blocks and updates to existing blocks for WooCommerce, and how WooCommerce might work with the block editor. diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/frontend.ts b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/frontend.ts new file mode 100644 index 00000000000..2096e86c964 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/frontend.ts @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { renderFrontend } from '@woocommerce/base-utils'; + +/** + * Internal dependencies + */ +import Block from './block'; +import { parseAttributes } from './utils'; + +const getProps = ( el: HTMLElement ) => { + return { + isEditor: false, + attributes: parseAttributes( el.dataset ), + }; +}; + +renderFrontend( { + selector: '.wp-block-woocommerce-attribute-filter', + Block, + getProps, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/frontend.ts b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/frontend.ts new file mode 100644 index 00000000000..0f46f225b93 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/frontend.ts @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { renderFrontend } from '@woocommerce/base-utils'; + +/** + * Internal dependencies + */ +import Block from './block'; +import { parseAttributes } from './utils'; + +const getProps = ( el: HTMLElement ) => { + return { + attributes: parseAttributes( el.dataset ), + isEditor: false, + }; +}; + +renderFrontend( { + selector: '.wp-block-woocommerce-price-filter', + Block, + getProps, +} ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/frontend.ts b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/frontend.ts new file mode 100644 index 00000000000..40a7331075d --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/frontend.ts @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { renderFrontend } from '@woocommerce/base-utils'; + +/** + * Internal dependencies + */ +import Block from './block'; +import { parseAttributes } from './utils'; + +const getProps = ( el: HTMLElement ) => { + return { + attributes: parseAttributes( el.dataset ), + isEditor: false, + }; +}; + +renderFrontend( { + selector: '.wp-block-woocommerce-stock-filter', + Block, + getProps, +} ); diff --git a/plugins/woocommerce-blocks/composer.json b/plugins/woocommerce-blocks/composer.json index 24db222009a..543c7247cbb 100644 --- a/plugins/woocommerce-blocks/composer.json +++ b/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.4.3", + "version": "10.4.4", "keywords": [ "gutenberg", "woocommerce", diff --git a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1044.md b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1044.md new file mode 100644 index 00000000000..ca92db400e0 --- /dev/null +++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1044.md @@ -0,0 +1,75 @@ +# Testing notes and ZIP for release 10.4.4 + +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11840529/woocommerce-gutenberg-products-block.zip) + +## WooCommerce Core + +### Add back filter blocks frontend scripts ([9954](https://github.com/woocommerce/woocommerce-blocks/pull/9954)) + +#### Test that the old markup of filter blocks still works + +```text +Important: test needs to be conducted using WooCommerce 7.8 +``` + +1. Add a new page, click on three dots on the right top corner and select "Code Editor" +![image](https://github.com/woocommerce/woocommerce-blocks/assets/11503784/dc294e6a-d924-49b0-8ce5-51f0df829390) + +2. Paste the following code and exit the code editor + +```HTML + +
+
+
+ + + +
+ + + +
+ + + +
+ + + +
+
+ + + +
+
+
+
+ +``` + +2. Publish the page. +3. Go to the frontend. +4. Verify filter blocks are rendered correctly. Interact with them and verify they work properly. + +Before | After +--- | --- +![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/534ddab8-9bd2-4dde-a41c-7655ab88f265) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/67992042-c508-48c7-884a-2dfdb75fdc3b) + + + +##### Test that filter blocks translations are loaded correctly + +```text +Important: test needs to be conducted using WooCommerce 7.7 +``` + +1. Change your store language to a locale that has translations (ie: Spanish). +2. Add the Filter by Attribute, Filter by Price, Filter by Stock and Filter by Rating blocks to a post or page, alongside the Active Filters and Products (beta) blocks. +3. In the frontend, interact with the filter blocks and verify they all work properly. +4. Verify translations are loaded correctly. Ie: Filter by Attribute shows "Seleccionar" instead of "Select" in the input field. + +Before | After +--- | --- +![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/db3c0465-bbb9-4098-8338-3a7418de0284) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/aec0a8d7-0af2-4166-b0a1-68f1f2d62e01) 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 b4801314dc1..a246cfba3c5 100644 --- a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md +++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md @@ -152,6 +152,7 @@ Every release includes specific testing instructions for new features and bug fi - [10.4.0](./1040.md) - [10.4.2](./1042.md) - [10.4.3](./1043.md) + - [10.4.4](./1044.md) diff --git a/plugins/woocommerce-blocks/package-lock.json b/plugins/woocommerce-blocks/package-lock.json index 709c08117cc..4140c4569b1 100644 --- a/plugins/woocommerce-blocks/package-lock.json +++ b/plugins/woocommerce-blocks/package-lock.json @@ -1,12 +1,12 @@ { "name": "@woocommerce/block-library", - "version": "10.4.3", + "version": "10.4.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@woocommerce/block-library", - "version": "10.4.3", + "version": "10.4.4", "hasInstallScript": true, "license": "GPL-3.0+", "dependencies": { diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json index f8f02495a2d..aec40974859 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": "10.4.3", + "version": "10.4.4", "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 9d9ac41301b..168a62d35be 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.2 Tested up to: 6.2 Requires PHP: 7.3 -Stable tag: 10.4.3 +Stable tag: 10.4.4 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html @@ -81,6 +81,12 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ == Changelog == += 10.4.4 - 2023-06-22 = + +#### Bug Fixes + +- Fix filter blocks using the old markup not rendering and fix missing translations in those blocks. ([9954](https://github.com/woocommerce/woocommerce-blocks/pull/9954)) + = 10.4.3 - 2023-06-20 = #### Bug Fixes diff --git a/plugins/woocommerce-blocks/src/BlockTypes/AttributeFilter.php b/plugins/woocommerce-blocks/src/BlockTypes/AttributeFilter.php index 7d302625adf..0979f6d2353 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/AttributeFilter.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/AttributeFilter.php @@ -25,13 +25,4 @@ class AttributeFilter extends AbstractBlock { parent::enqueue_data( $attributes ); $this->asset_data_registry->add( 'attributes', array_values( wc_get_attribute_taxonomies() ), true ); } - - /** - * Get the frontend script handle for this block type. - * - * @param string $key Data to get, or default to everything. - */ - protected function get_block_type_script( $key = null ) { - return null; - } } diff --git a/plugins/woocommerce-blocks/src/BlockTypes/PriceFilter.php b/plugins/woocommerce-blocks/src/BlockTypes/PriceFilter.php index 97f1109bfa6..bdbdcd2a889 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/PriceFilter.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/PriceFilter.php @@ -14,13 +14,4 @@ class PriceFilter extends AbstractBlock { protected $block_name = 'price-filter'; const MIN_PRICE_QUERY_VAR = 'min_price'; const MAX_PRICE_QUERY_VAR = 'max_price'; - - /** - * Get the frontend script handle for this block type. - * - * @param string $key Data to get, or default to everything. - */ - protected function get_block_type_script( $key = null ) { - return null; - } } diff --git a/plugins/woocommerce-blocks/src/BlockTypes/StockFilter.php b/plugins/woocommerce-blocks/src/BlockTypes/StockFilter.php index 6b140e8a4f6..3f0784d80e3 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/StockFilter.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/StockFilter.php @@ -33,13 +33,4 @@ class StockFilter extends AbstractBlock { public static function get_stock_status_query_var_values() { return array_keys( wc_get_product_stock_status_options() ); } - - /** - * Get the frontend script handle for this block type. - * - * @param string $key Data to get, or default to everything. - */ - protected function get_block_type_script( $key = null ) { - return null; - } } diff --git a/plugins/woocommerce-blocks/src/Package.php b/plugins/woocommerce-blocks/src/Package.php index 40f58f983b1..95730b13bb7 100644 --- a/plugins/woocommerce-blocks/src/Package.php +++ b/plugins/woocommerce-blocks/src/Package.php @@ -109,7 +109,7 @@ class Package { NewPackage::class, function ( $container ) { // leave for automated version bumping. - $version = '10.4.3'; + $version = '10.4.4'; return new NewPackage( $version, dirname( __DIR__ ), diff --git a/plugins/woocommerce-blocks/tests/utils/shopper.js b/plugins/woocommerce-blocks/tests/utils/shopper.js index 8d2bb35514a..863023bdf75 100644 --- a/plugins/woocommerce-blocks/tests/utils/shopper.js +++ b/plugins/woocommerce-blocks/tests/utils/shopper.js @@ -171,11 +171,10 @@ export const shopper = { await uiUnblocked(); } - await page.waitForSelector( '.woocommerce-info' ); - // eslint-disable-next-line jest/no-standalone-expect - await expect( page ).toMatchElement( - '.woocommerce-info.cart-empty' - ); + // Wait for form to be hidden. + await page.waitForSelector( '.woocommerce-cart-form', { + hidden: true, + } ); }, placeOrder: async () => { diff --git a/plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php b/plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php index 197cc0d2a9e..19f3461aaba 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: 10.4.3 + * Version: 10.4.4 * Author: Automattic * Author URI: https://woocommerce.com * Text Domain: woo-gutenberg-products-block From 80fabe49914ab3b4f16ab1a6c27874ee448be387 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 30 Jun 2023 14:53:38 +0200 Subject: [PATCH 2/2] Release: 10.4.5 (https://github.com/woocommerce/woocommerce-blocks/pull/10038) * Product Rating block > Ensure the customer reviews text is linked to the relevant reviews (https://github.com/woocommerce/woocommerce-blocks/pull/9998) * Fix reviews count not showing on Single Product page * Fix css style * Product Rating block: Ensure the Customer reviews text is linked to the relevant reviews when used within the Single Product Template. When used within the Single Product Block, the link directs the user to the product template. Additionally, clear out\ PHPCS warnings. * remove unnecessary call to wc_get_star_rating_html --------- Co-authored-by: Alexandre Lara * Product Rating block: Fix reviews count not showing on Single Product page (https://github.com/woocommerce/woocommerce-blocks/pull/9995) * Fix reviews count not showing on Single Product page * Fix css style * Single Product: Fix Product SKU not loading for different variations (https://github.com/woocommerce/woocommerce-blocks/pull/9990) * Single Product: Fix incorrect add to cart form markup (https://github.com/woocommerce/woocommerce-blocks/pull/9986) * Product Image Gallery block: Fix overflow when multiple images are used (https://github.com/woocommerce/woocommerce-blocks/pull/10013) * Fix Product Image Gallery block overflow when multiple images are used * Increase css specificity for the Product Image Gallery images * Fix whitespace * Fix style issue when using smaller images in the product image gallery * Empty commit for release pull request * update version * add testing instructions * update zip link * Product Rating: append #reviews on the Single Product Block (https://github.com/woocommerce/woocommerce-blocks/pull/10040) * Product Rating: append #reviews on the Single Product Block * refactor after feedback * fix version * update zip link * Single Product Block: avoid to register incompatibility blocks with the Single Product Block on the post/page editor (https://github.com/woocommerce/woocommerce-blocks/pull/10044) * update testing instructions * update zip link --------- Co-authored-by: Patricia Hillebrandt Co-authored-by: Alexandre Lara Co-authored-by: Daniel Dudzic Co-authored-by: github-actions Co-authored-by: Luigi --- .../add-to-cart-form/index.tsx | 1 + .../product-details/index.tsx | 2 +- .../product-image-gallery/index.ts | 2 +- .../product-image-gallery/style.scss | 4 +- .../product-elements/product-meta/index.tsx | 1 + .../product-reviews/index.tsx | 2 +- .../blocks/product-elements/rating/index.ts | 1 + .../blocks/product-elements/rating/style.scss | 37 ++++---- .../related-products/index.tsx | 2 +- .../register-block-single-product-template.ts | 4 +- .../blocks/classic-template/single-product.ts | 1 + plugins/woocommerce-blocks/composer.json | 2 +- .../testing/releases/1045.md | 91 +++++++++++++++++++ .../testing/releases/README.md | 2 + plugins/woocommerce-blocks/package-lock.json | 4 +- plugins/woocommerce-blocks/package.json | 2 +- plugins/woocommerce-blocks/readme.txt | 12 ++- .../src/BlockTypes/AddToCartForm.php | 2 +- .../src/BlockTypes/ProductRating.php | 36 ++++---- .../src/BlockTypes/ProductSKU.php | 4 +- plugins/woocommerce-blocks/src/Package.php | 2 +- .../templates/blockified/single-product.html | 4 +- .../woocommerce-gutenberg-products-block.php | 2 +- 23 files changed, 166 insertions(+), 54 deletions(-) create mode 100644 plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1045.md diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx index 4443eae87c3..a6db044b4b1 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx @@ -30,4 +30,5 @@ registerBlockSingleProductTemplate( { blockName: metadata.name, blockMetadata: metadata, blockSettings, + isAvailableOnPostEditor: true, } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx index 9be38da808f..0c3e05a1747 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx @@ -25,6 +25,6 @@ registerBlockSingleProductTemplate( { ), }, edit, - ancestor: [ 'woocommerce/single-product' ], }, + isAvailableOnPostEditor: false, } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts index 7c7d4c13dc0..9b7cb2ab19e 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts @@ -19,6 +19,6 @@ registerBlockSingleProductTemplate( { icon, // @ts-expect-error `edit` can be extended to include other attributes edit, - ancestor: [ 'woocommerce/single-product' ], }, + isAvailableOnPostEditor: false, } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss index 38d83a43ef8..e936b10f555 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss @@ -2,6 +2,7 @@ position: relative; // This is necessary to calculate the correct width of the gallery. https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/#:~:text=Solution%20%232%3A%20Float%20Parent%20Container clear: both; + max-width: 512px; span.onsale { right: unset; @@ -19,6 +20,5 @@ .woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images { - width: auto; + width: 100%; } - diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/index.tsx index 10051a603cf..f7d5ffff681 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-meta/index.tsx @@ -29,4 +29,5 @@ registerBlockSingleProductTemplate( { }, ancestor: [ 'woocommerce/single-product' ], }, + isAvailableOnPostEditor: true, } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx index 7dfa8e97bd4..20cbbe7ecd1 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-reviews/index.tsx @@ -15,6 +15,6 @@ registerBlockSingleProductTemplate( { blockMetadata: metadata, blockSettings: { edit, - ancestor: [ 'woocommerce/single-product' ], }, + isAvailableOnPostEditor: false, } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/index.ts b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/index.ts index cb70ac847b9..0d06baac8f2 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/index.ts +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/index.ts @@ -30,4 +30,5 @@ registerBlockSingleProductTemplate( { blockName: 'woocommerce/product-rating', blockMetadata: metadata, blockSettings: blockConfig, + isAvailableOnPostEditor: true, } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss index 85456ea84e5..40b6adfdfbe 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss @@ -14,6 +14,10 @@ font-family: star; font-weight: 400; + &.wc-block-grid__product-rating__stars { + margin: 0; + } + &::before { content: "\53\53\53\53\53"; top: 0; @@ -44,19 +48,17 @@ } } - &__link { - display: inline-block; - height: 1.618em; - width: 100%; - text-align: inherit; - @include font-size(small); - } - .wc-block-all-products & { margin-top: 0; margin-bottom: $gap-small; } + &__container { + display: flex; + align-items: center; + column-gap: $gap-smaller; + } + &__norating-container { display: inline-flex; flex-direction: row; @@ -89,17 +91,6 @@ } } -.wp-block-woocommerce-single-product { - .wc-block-components-product-rating__stars { - margin: 0; - } - .wc-block-components-product-rating__container { - display: flex; - align-items: center; - column-gap: $gap-smaller; - } -} - .wc-block-all-products, .wp-block-query { .is-loading { @@ -108,4 +99,12 @@ width: 7em; } } + + .wc-block-components-product-rating__container { + display: block; + } + + .wc-block-components-product-rating__stars.wc-block-grid__product-rating__stars { + margin: inherit; + } } diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/related-products/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/related-products/index.tsx index 192e4f7f661..3db32a5277b 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/related-products/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/related-products/index.tsx @@ -19,6 +19,6 @@ registerBlockSingleProductTemplate( { icon, edit, save, - ancestor: [ 'woocommerce/single-product' ], }, + isAvailableOnPostEditor: false, } ); diff --git a/plugins/woocommerce-blocks/assets/js/atomic/utils/register-block-single-product-template.ts b/plugins/woocommerce-blocks/assets/js/atomic/utils/register-block-single-product-template.ts index 9d4df9ba2e4..d1e853acbe9 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/utils/register-block-single-product-template.ts +++ b/plugins/woocommerce-blocks/assets/js/atomic/utils/register-block-single-product-template.ts @@ -26,10 +26,12 @@ export const registerBlockSingleProductTemplate = ( { blockSettings, isVariationBlock = false, variationName, + isAvailableOnPostEditor, }: { blockName: string; blockMetadata: Partial< BlockConfiguration >; blockSettings: Partial< BlockConfiguration >; + isAvailableOnPostEditor: boolean; isVariationBlock?: boolean; variationName?: string; } ) => { @@ -97,7 +99,7 @@ export const registerBlockSingleProductTemplate = ( { // This subscribe callback could be invoked with the core/blocks store // which would cause infinite registration loops because of the `registerBlockType` call. // This local cache helps prevent that. - if ( ! isBlockRegistered ) { + if ( ! isBlockRegistered && isAvailableOnPostEditor ) { if ( isVariationBlock ) { blocksRegistered.add( variationName ); registerBlockVariation( diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts index 95ed17dbe84..16373b39fbe 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/single-product.ts @@ -27,6 +27,7 @@ const getBlockifiedTemplate = () => { type: 'constrained', justifyContent: 'right', + width: '512px', }, [ createBlock( 'woocommerce/product-image-gallery' ) ] ), diff --git a/plugins/woocommerce-blocks/composer.json b/plugins/woocommerce-blocks/composer.json index 543c7247cbb..52439f50d89 100644 --- a/plugins/woocommerce-blocks/composer.json +++ b/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.4.4", + "version": "10.4.5", "keywords": [ "gutenberg", "woocommerce", diff --git a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1045.md b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1045.md new file mode 100644 index 00000000000..87a05dc54ef --- /dev/null +++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1045.md @@ -0,0 +1,91 @@ +# Testing notes and ZIP for release 10.4.5 + +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11916133/woocommerce-gutenberg-products-block.zip) + +## WooCommerce Core + +### Product Rating block > Ensure the customer reviews text links to the relevant user reviews within the Single Product block and Single Product template. ([9998](https://github.com/woocommerce/woocommerce-blocks/pull/9998)) + +1. Create a new post +2. Add the Single Product block to the post (with a product with reviews) and save. +3. Notice how the "(X customer reviews)" text links to the relevant single product template. +4. Now head over to Edit site > Templates > Single Product and make you are using the blockified version of the Single Product Template with the Product Rating block in place. Edit and save the template if you made any changes to ensure this criteria. +5. Now access any Single Product on the front end and make sure the **"X customer review(s)"** text is linked to the relevant section. + +| Before | After | +| ------ | ----- | +| Screenshot 2023-06-26 at 21 48 03 | Screenshot 2023-06-26 at 21 47 26 | + +### Fix reviews count not showing for the Product Rating block when inside the Single Product page. ([9995](https://github.com/woocommerce/woocommerce-blocks/pull/9995)) + +1. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc. +2. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor. +3. On the left-hand side menu, click on Templates. This will open the list of available templates. +4. Find and select the 'Single Product' template from the list. +5. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before. +6. On the top-right side, click on the Save button. +7. Visit a product with at least 1 review and check that the Reviews count is being shown. + +| Before | After | +| ------ | ----- | +| ![image](https://github.com/woocommerce/woocommerce-blocks/assets/20469356/ca8e63b4-3fbe-40fd-91f2-4e9e057327ae) | image | + +### Single Product template: Fix variation SKU switching in the blockified template. ([9990](https://github.com/woocommerce/woocommerce-blocks/pull/9990)) + +1. Select **Appearance > Editor > Templates > Single Product**. Blockify the Single Product template. +2. Make sure you have a least one variation product, with variations having the **SKU** set. +3. Go to the frontend view of the variation product, and verify that selecting different variations causes the SKU to reflect the variation's SKU. + +| Before | After | +| ------ | ----- | +|![9g2q1nejKx](https://github.com/woocommerce/woocommerce-blocks/assets/905781/12f56dea-5193-48b4-822a-e52ee5307208)|![3LvebPhtER](https://github.com/woocommerce/woocommerce-blocks/assets/905781/812b188b-644a-497c-b5ac-6fef5350b7c6)| + +### Single Product template: Fix variation gallery image switching in the blockified template. ([9986](https://github.com/woocommerce/woocommerce-blocks/pull/9986)) + +1. Select **Appearance > Editor > Templates > Single Product**. Blockify the Single Product template. +2. Make sure you have a least one variation product, with variations having the **Featured Image** set. +3. Go to the frontend view of the variation product, and verify that selecting different variations causes the product image gallery to reflect the selected variation Featured Image. + +| Before | After | +| ------ | ----- | +|![fgTu9hA2tz](https://github.com/woocommerce/woocommerce-blocks/assets/905781/3bfd4fc1-8010-47bc-a7d6-b35ed83f1fd0)|![qtltdJ500B](https://github.com/woocommerce/woocommerce-blocks/assets/905781/c3b384dd-359e-4844-86bd-67006b546955)| + +### Product Image Gallery block: Fix overflow when multiple images are used. ([10013](https://github.com/woocommerce/woocommerce-blocks/pull/10013)) + +1. Navigate to the "Products" tab in the left-hand sidebar and click on "All Products." +2. Locate and select the product you want to edit from the list of existing products. +3. Scroll down to the "Product Image" section. If the product already has a primary image, you can replace it by clicking on the "Set product image" link. If there is no existing image, you will see an "Add product image" button instead. +4. You'll be presented with options to upload an image. `Select an image with size 512 x 640 pixels`. Click on the "Set product image" button to confirm. +5. To add additional images to the product gallery, scroll down further to the "Product Gallery" section. Click on the "Add product gallery images" link. +6. Follow Step 5 to upload or select the additional images for the product. You can use the same image used in step 5. +7. Click on the "Update" button to save your changes. +8. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc. +9. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor. +10. On the left-hand side menu, click on Templates. This will open the list of available templates. +11. Find and select the 'Single Product' template from the list. +12. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before. +13. On the top-right side, click on the Save button. +14. Visit the product that you edited the image and check that the Product Image Gallery block is being displayed correctly and without any overflow. + +| Before | After | +| ------ | ----- | +| image | image | + + +### Single Product Block: avoid to register incompatibility blocks with the Single Product Block on the post/page editor. ([10044](https://github.com/woocommerce/woocommerce-blocks/pull/10044)) + +1. Open the Single Product Template and ensure you have the blockified version. +2. Ensure that all the blocks are visible. +3. Open the post editor and add the Single Product Block. +4. Follow the table below and ensure that only the blocks with the 🟢 are available as ancestor the Single Product Block + + +| Block Name | Available as the ancestor of the Single Product Block | +|--------|--------| +| Add to Cart with Options | 🟢 | +| Product Details | 🔴 | +| Product Image Gallery | 🔴 | +| Product Meta | 🟢 | +| Product Reviews | 🔴 | +| Product Rating | 🟢 | +| Related Products | 🔴 | 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 a246cfba3c5..c18384d0c80 100644 --- a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md +++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md @@ -153,6 +153,8 @@ Every release includes specific testing instructions for new features and bug fi - [10.4.2](./1042.md) - [10.4.3](./1043.md) - [10.4.4](./1044.md) + - [10.4.5](./1045.md) + diff --git a/plugins/woocommerce-blocks/package-lock.json b/plugins/woocommerce-blocks/package-lock.json index 4140c4569b1..e931ddf165f 100644 --- a/plugins/woocommerce-blocks/package-lock.json +++ b/plugins/woocommerce-blocks/package-lock.json @@ -1,12 +1,12 @@ { "name": "@woocommerce/block-library", - "version": "10.4.4", + "version": "10.4.5", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@woocommerce/block-library", - "version": "10.4.4", + "version": "10.4.5", "hasInstallScript": true, "license": "GPL-3.0+", "dependencies": { diff --git a/plugins/woocommerce-blocks/package.json b/plugins/woocommerce-blocks/package.json index aec40974859..f812c1cbdf2 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": "10.4.4", + "version": "10.4.5", "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 168a62d35be..fe185634596 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.2 Tested up to: 6.2 Requires PHP: 7.3 -Stable tag: 10.4.4 +Stable tag: 10.4.5 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html @@ -81,6 +81,16 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ == Changelog == += 10.4.5 - 2023-06-29 = + +#### Bug Fixes + +- Product Rating block > Ensure the customer reviews text links to the relevant user reviews within the Single Product block and Single Product template. ([9998](https://github.com/woocommerce/woocommerce-blocks/pull/9998)) +- Fix reviews count not showing for the Product Rating block when inside the Single Product page. ([9995](https://github.com/woocommerce/woocommerce-blocks/pull/9995)) +- Single Product template: Fix variation SKU switching in the blockified template. ([9990](https://github.com/woocommerce/woocommerce-blocks/pull/9990)) +- Single Product template: Fix variation gallery image switching in the blockified template. ([9986](https://github.com/woocommerce/woocommerce-blocks/pull/9986)) +- Single Product Block: avoid to register incompatibility blocks with the Single Product Block on the post/page editor. ([10044](https://github.com/woocommerce/woocommerce-blocks/pull/10044)) + = 10.4.4 - 2023-06-22 = #### Bug Fixes diff --git a/plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php b/plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php index 97a145360fc..08876b90360 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php @@ -98,7 +98,7 @@ class AddToCartForm extends AbstractBlock { $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); $form = sprintf( - '
%4$s
', + '
%4$s
', esc_attr( $classes_and_styles['classes'] ), esc_attr( $classname ), esc_attr( $classes_and_styles['styles'] ), diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php b/plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php index ec9da968a0f..2f87212cfc4 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/ProductRating.php @@ -60,10 +60,11 @@ class ProductRating extends AbstractBlock { private function parse_attributes( $attributes ) { // These should match what's set in JS `registerBlockType`. $defaults = array( - 'productId' => 0, - 'isDescendentOfQueryLoop' => false, - 'textAlign' => '', - 'isDescendentOfSingleProductBlock' => false, + 'productId' => 0, + 'isDescendentOfQueryLoop' => false, + 'textAlign' => '', + 'isDescendentOfSingleProductBlock' => false, + 'isDescendentOfSingleProductTemplate' => false, ); return wp_parse_args( $attributes, $defaults ); @@ -105,10 +106,11 @@ class ProductRating extends AbstractBlock { $product = wc_get_product( $post_id ); if ( $product ) { - $product_reviews_count = $product->get_review_count(); - $product_rating = $product->get_average_rating(); - $parsed_attributes = $this->parse_attributes( $attributes ); - $is_descendent_of_single_product_block = $parsed_attributes['isDescendentOfSingleProductBlock']; + $product_reviews_count = $product->get_review_count(); + $product_rating = $product->get_average_rating(); + $parsed_attributes = $this->parse_attributes( $attributes ); + $is_descendent_of_single_product_block = $parsed_attributes['isDescendentOfSingleProductBlock']; + $is_descendent_of_single_product_template = $parsed_attributes['isDescendentOfSingleProductTemplate']; $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes ); $text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes ); @@ -121,7 +123,7 @@ class ProductRating extends AbstractBlock { * @param int $count Total number of ratings. * @return string */ - $filter_rating_html = function( $html, $rating, $count ) use ( $product_rating, $product_reviews_count, $is_descendent_of_single_product_block ) { + $filter_rating_html = function( $html, $rating, $count ) use ( $product_rating, $product_reviews_count, $is_descendent_of_single_product_block, $is_descendent_of_single_product_template ) { $product_permalink = get_permalink(); $reviews_count = $count; $average_rating = $rating; @@ -147,12 +149,14 @@ class ProductRating extends AbstractBlock { ), esc_html( $reviews_count ) ); - $reviews_count_html = sprintf( - ' - %1$s - ', - $customer_reviews_count - ); + + if ( $is_descendent_of_single_product_block ) { + $customer_reviews_count = '' . $customer_reviews_count . ''; + } elseif ( $is_descendent_of_single_product_template ) { + $customer_reviews_count = '' . $customer_reviews_count . ''; + } + + $reviews_count_html = sprintf( '%1$s', $customer_reviews_count ); $html = sprintf( '