From d87f043a5c5c6bef7161e1df48fe1c940762a41e Mon Sep 17 00:00:00 2001 From: github-actions Date: Wed, 14 Dec 2022 12:29:35 +0000 Subject: [PATCH 01/35] Empty commit for release pull request From c05d4a81cfab65c6c76c2ad96737136d77b42cd7 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Wed, 14 Dec 2022 13:49:08 +0100 Subject: [PATCH 02/35] Update the readme file with 9.1.1 release changes --- readme.txt | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/readme.txt b/readme.txt index 71158b33b1b..13a0cbb2967 100644 --- a/readme.txt +++ b/readme.txt @@ -79,6 +79,25 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ == Changelog == += 9.1.1 - 2022-12-14 = + +#### Enhancements + +- Products block: Add patterns. ([7857](https://github.com/woocommerce/woocommerce-blocks/pull/7857)) +- Filter by Stock: Add dropdown version. +> Filter by Stock: Add option to choose multiple or single option. ([7831](https://github.com/woocommerce/woocommerce-blocks/pull/7831)) +- Filter by Rating: Add dropdown version. +> Filter by Rating: Add option to choose multiple or single option. +> Filters: Fix the little gaps on the border corners in the filters Dropdown version. ([7771](https://github.com/woocommerce/woocommerce-blocks/pull/7771)) +- Product Query - Enable "Inherit Query from template" option. ([7641](https://github.com/woocommerce/woocommerce-blocks/pull/7641)) + +#### Bug Fixes + +- Classic Products Template and Products: Improve the layout of the Rating. ([7932](https://github.com/woocommerce/woocommerce-blocks/pull/7932)) +- Product Elements: Fix misc block settings for Product Button, Price and Rating. ([7914](https://github.com/woocommerce/woocommerce-blocks/pull/7914)) +- Fix Padding, Margin, Border Width, and Radius settings for all relevant blocks. ([7909](https://github.com/woocommerce/woocommerce-blocks/pull/7909)) +- Fix wrong Mini Cart amount displayed when displaying prices including taxes. ([7832](https://github.com/woocommerce/woocommerce-blocks/pull/7832)) + = 9.1.0 - 2022-12-06 = #### Enhancements From 9ccb1bccd9590c92de8e83185864b76b6110375c Mon Sep 17 00:00:00 2001 From: Tung Du Date: Wed, 14 Dec 2022 19:50:09 +0700 Subject: [PATCH 03/35] Product Query: Add `Sorted by title` preset. (#7949) * Add `Sort by title` preset. * sorted, thanks @nerrad --- .../product-query/inspector-controls/popular-presets.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/js/blocks/product-query/inspector-controls/popular-presets.tsx b/assets/js/blocks/product-query/inspector-controls/popular-presets.tsx index d4af544f022..cb7e6c575e3 100644 --- a/assets/js/blocks/product-query/inspector-controls/popular-presets.tsx +++ b/assets/js/blocks/product-query/inspector-controls/popular-presets.tsx @@ -11,6 +11,10 @@ import { ProductQueryBlock, ProductQueryBlockQuery } from '../types'; import { setQueryAttribute } from '../utils'; const PRESETS = [ + { + key: 'title/asc', + name: __( 'Sorted by title', 'woo-gutenberg-products-block' ), + }, { key: 'date/desc', name: __( 'Newest', 'woo-gutenberg-products-block' ) }, { key: 'popularity/desc', From 19ebde09c6d6d533abf244f0ca555b251c07e709 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Wed, 14 Dec 2022 14:00:52 +0100 Subject: [PATCH 04/35] Update the readme file with #7949 changes --- readme.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.txt b/readme.txt index 13a0cbb2967..b7b816341ae 100644 --- a/readme.txt +++ b/readme.txt @@ -97,6 +97,7 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ - Product Elements: Fix misc block settings for Product Button, Price and Rating. ([7914](https://github.com/woocommerce/woocommerce-blocks/pull/7914)) - Fix Padding, Margin, Border Width, and Radius settings for all relevant blocks. ([7909](https://github.com/woocommerce/woocommerce-blocks/pull/7909)) - Fix wrong Mini Cart amount displayed when displaying prices including taxes. ([7832](https://github.com/woocommerce/woocommerce-blocks/pull/7832)) +- Product Query: Add Sorted by title preset to Popular Filters. ([7949])(https://github.com/woocommerce/woocommerce-blocks/pull/7949)) = 9.1.0 - 2022-12-06 = From 251578226a3f95cdd4cdd4c82e881c47ec339200 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Wed, 14 Dec 2022 15:53:16 +0100 Subject: [PATCH 05/35] 9.1.1 Release: Add testing docs --- .../testing/releases/911.md | 262 ++++++++++++++++++ .../testing/releases/README.md | 1 + readme.txt | 6 +- 3 files changed, 266 insertions(+), 3 deletions(-) create mode 100644 docs/internal-developers/testing/releases/911.md diff --git a/docs/internal-developers/testing/releases/911.md b/docs/internal-developers/testing/releases/911.md new file mode 100644 index 00000000000..19485f8b7db --- /dev/null +++ b/docs/internal-developers/testing/releases/911.md @@ -0,0 +1,262 @@ +# Testing notes and ZIP for release 9.1.1 + +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/10228344/woocommerce-gutenberg-products-block.zip) + +## Feature plugin and package inclusion in WooCommerce + +### Product Query: Add patterns ([7857](https://github.com/woocommerce/woocommerce-blocks/pull/7857)) + +1. Create a new page. +2. Add each pattern and make sure it displays correctly in the editor and frontend. + +#### 1. Product gallery + +| Figma | Pattern | +|------ | ----- | +|![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205912301-76889c39-587f-4a6f-abb4-218331f830b2.jpg)|![All_Products_–_ratings-11](https://user-images.githubusercontent.com/905781/207278550-fd3db86e-4e3e-444d-b954-f6034c354c4c.jpg)| + +#### 2. 4-Column Product Row + +| Figma | Pattern | +|------ | ----- | +| ![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205916369-36bf1371-1bec-41dd-92d7-e5937f684f81.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207304273-e0dcf9c8-dcee-4851-b93c-d54eec8b1296.jpg)| + +#### 3. 3-Column Product Row + +| Figma | Pattern | +|------ | ----- | +|![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205942766-8114ecec-de8c-4e07-8444-7ce7b7cb3b33.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207304719-c2ecc137-755c-4384-aa12-3079948ac736.jpg)| + +#### 4. Large Image Product Gallery + +| Figma | Pattern | +|------ | ----- | +|![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205917674-c20a4f27-a4b8-450b-80ba-165097f65001.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207305076-9398bec0-38ac-49b5-bff7-9f5769de0f7c.jpg)| + +#### 5. Minimal 5-Column Products Row + +| Figma | Pattern | +|------ | ----- | +|![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205918960-7ea10d36-52ea-40a7-88aa-e88c0ac3053a.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207305645-187e1723-1d1e-48a5-8234-83c3b10a191f.jpg)| + +#### 6. 1:1 Image 4-Column Products Row + +| Figma | Pattern | +|------ | ----- | +|![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205920113-b5f876db-7b0c-491c-81f9-134bcebaa0eb.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207306960-fd7f045f-959d-4af2-828d-0107ea6d90eb.jpg)| + +#### 7. Product list with full product description + +| Figma | Pattern | +|------ | ----- | +|![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205921050-29eb55e3-af19-46ee-9724-e9e2065b7c4b.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207307754-ba8f2b7e-4a20-4eea-986c-5cfe4626d67d.jpg)| + + +#### 8. Product list with 1:1 images + +| Figma | Pattern | +|------ | ----- | +|![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205921683-bf32633b-6fcf-4b57-acd2-e95a4effc4f5.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207308331-cef4941a-8b02-49ff-b953-e85f21a64fd1.jpg)| + +#### 9. Minimal product list + +| Figma | Pattern | +|------ | ----- | +|![πŸ”Ž_Product_Query_Block_–_Figma](https://user-images.githubusercontent.com/905781/205922240-73d254af-13a6-4598-acea-dc02253ff139.jpg)|![Products_–_ratings](https://user-images.githubusercontent.com/905781/207308703-567df6aa-3d08-4a7b-b7cb-fa8dc56c0da9.jpg)| + +### Add dropdown version of Filter by Stock Status ([7831](https://github.com/woocommerce/woocommerce-blocks/pull/7831)) + +Check out [the video above]( +https://user-images.githubusercontent.com/20098064/206128900-2cdb4bfe-c131-48d1-b395-8fa3fc07dafc.mov) which will help you go through the testing instructions + +Prerequisites: + +1. Have at least few products with different stock status: in stock, out of stock, on backorder +2. Go to Editor +3. Add Filters pattern +4. Add All Products + +#### Dropdown component - single + +1. Change settings of Filter by Stock to: single / dropdown +2. Open dropdown + +- **Expected**: dropdown has stock status options to choose from + +3. Choose one option + +- **Expected**: page refreshes, filter is applied: visible in Active Filters and Products are filtered out + +4. Choose other option + +- **Expected**: previous filter is replaced by the new one, page refreshes, filter is applied: visible in Active Filters and Products are filtered out + +##### Dropdown component - multiple + +1. Change settings of Filter by Stock to: multiple / dropdown +2. Open dropdown + +- **Expected**: dropdown has stock status options to choose from + +3. Choose one option + +- **Expected**: page refreshes, filter is applied: visible in Active Filters and Products are filtered out + +4. Choose other option + +- **Expected**: new filter is added to the new one, page refreshes, both filters ("or") is applied: visible in Active Filters and Products are filtered out + +##### List component + +1. Change settings of Filter by Stock to: list +2. Repeat the above for both: single and multiple + +##### Apply button + +1. In the Editor choose multiple Dropdown again and enable "Show 'Apply filters' button" option +2. In the frontend choose stock filters + +- **Expected**: filters are not applied until "Apply" button is clicked. Once clicked page refreshes and filters are applied + +##### Other scenarios + +Try to break it! πŸ˜‰ + +### Add dropdown version of Filter by Rating ([7771](https://github.com/woocommerce/woocommerce-blocks/pull/7771)) + +Check out [the video above](https://user-images.githubusercontent.com/20098064/205309205-b0b69334-541a-42bd-881e-455db517b70e.mov) which will help you go through the testing instructions + +Prerequisites: + +1. Have at least few products with some ratings +2. Go to Editor +3. Add Filters pattern +4. Add All Products + +#### Dropdown component - single + +1. Change settings of Filter by Rating to: single / dropdown +2. Open dropdown + +- **Expected**: dropdown has rating options to choose from + +3. Choose one option + +- **Expected**: page refreshes, filter is applied: visible in Active Filters and Products are filtered out + +4. Choose other option + +- **Expected**: previous filter is replaced by the new one, page refreshes, filter is applied: visible in Active Filters and Products are filtered out + +#### Dropdown component - multiple + +1. Change settings of Filter by Rating to: multiple / dropdown +2. Open dropdown + +- **Expected**: dropdown has rating options to choose from + +3. Choose one option + +- **Expected**: page refreshes, filter is applied: visible in Active Filters and Products are filtered out + +4. Choose other option + +- **Expected**: new filter is added to the new one, page refreshes, both filters ("or") is applied: visible in Active Filters and Products are filtered out + +#### List component + +1. Change settings of Filter by Rating to: list +2. Repeat the above for both: single and multiple + +#### Apply button + +1. In the Editor choose multiple Dropdown again and enable "Show 'Apply filters' button" option +2. In the frontend choose rating filters + +- **Expected**: filters are not applied until "Apply" button is clicked. Once clicked page refreshes and filters are applied + +#### Other scenarios + +Try to break it! πŸ˜‰ + +### Product Query - Enable "Inherit Query from template" option ([7641](https://github.com/woocommerce/woocommerce-blocks/pull/7641)) + +#### Site Editor + +1. Add the Product Query in a template (eg: Product Catalog) +2. Check that the `Inherit Query from template` option is visible. +3. Enable it. +4. Be sure that all the settings that customize the query are hidden. +5. Save. +6. Be sure that the result generated by the Product Query is the same as the classic FSE template (there are E2E tests that check this ). +7. Edit the Product Catalog and disable the `Inherit Query from template` option. +8. Ensure all the settings that customize the query are visible. + +#### Post/Page Editor + +1. Add the Product Query in a template (eg: Product Catalog) +2. Check that the `Inherit Query from template` option isn't visible. + +### Fix the incorrect layout of Rating and Price in Classic Template and Products block ([7932](https://github.com/woocommerce/woocommerce-blocks/pull/7932)) + +Prerequisites: + +- make sure you have at least one product _with_ rating + +Steps: + +1. Go to Editor and add blocks: + +- Filter by Rating +- All Products, +- Products +- Classic Template + +2. In the frontend check the above blocks + +**Expected:** + +- The layout of product in Products and Classic Template is as on the screenshots above +- The layout of the Filter by Rating and All Products doesn't change + +### Product Elements: Fix block settings ([7914](https://github.com/woocommerce/woocommerce-blocks/pull/7914)) + +1. Create a page and add the **Products (Beta)** block. +2. Add **Button**, **Price** and **Rating** product elements. +3. Customize via block settings: + +- **Product Price**: `background color` and `appearance`. +- **Product Button**: `font-weight` and `padding`. +- **Product Rating**: `font-size`, `margin`, `color`. + +4. Ensure all customizations display correctly both in the editor and the page (frontend). + +### StyleAttributesUtils: Fix PHP notices and invalid CSS output ([7909](https://github.com/woocommerce/woocommerce-blocks/pull/7909)) + +1. Create a page and add the **Products (Beta)** block. +2. Add the **Product Image** and **On-Sale Badge** blocks. +3. Try setting different combinations of the following block settings: + +- Border Radius +- Border Width (test also in conjunction with different Border Radius settings ) +- Margin +- Padding + +Make sure to test in both 'Linked' and 'Unlinked' modes ( one value for all 4 sides, custom values for each side, some sides not set etc. ). + +Make sure for any of the scenarios no PHP errors and notices are being generated and the options display correct visual results on the page (frontend). + +### Update MiniCart.php to fix price total amount on page load prices are including tax ([7832](https://github.com/woocommerce/woocommerce-blocks/pull/7832)) + +1. Go to WooCommerce > Settings and set _Display prices during cart and checkout_ to _Including tax_. +![Settings screenshot](https://user-images.githubusercontent.com/3616980/206694476-39bda20b-c653-4703-978d-3d7f746c2bf5.png) +2. Create a post or page and add the Mini Cart block. +3. In the frontend, hover the Mini Cart block with the mouse and notice the price doesn't update ([before](https://user-images.githubusercontent.com/3616980/206694129-c16fcea4-8ac4-4bd7-a72a-221946c3ef08.webm) and [after](https://user-images.githubusercontent.com/3616980/206694060-eee1cccf-1ebd-435d-995d-23caca715918.webm)). + +### Product Query: Add `Sorted by title` preset. ([7949](https://github.com/woocommerce/woocommerce-blocks/pull/7949)) + +1. Add a new page. +2. Add the Products (Beta) block to the page. +3. See products are ordered by title. +4. Open the sidebar setting. +5. See the Popular Filters setting is expanded by default and the `Sorted by title` is selected. diff --git a/docs/internal-developers/testing/releases/README.md b/docs/internal-developers/testing/releases/README.md index 69f0dc7f56c..4e1f07ae01e 100644 --- a/docs/internal-developers/testing/releases/README.md +++ b/docs/internal-developers/testing/releases/README.md @@ -107,6 +107,7 @@ Every release includes specific testing instructions for new features and bug fi - [8.9.2](./892.md) - [9.0.0](./900.md) - [9.1.0](./910.md) +- [9.1.1](./911.md) diff --git a/readme.txt b/readme.txt index b7b816341ae..f292d92fe7e 100644 --- a/readme.txt +++ b/readme.txt @@ -85,10 +85,10 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/ - Products block: Add patterns. ([7857](https://github.com/woocommerce/woocommerce-blocks/pull/7857)) - Filter by Stock: Add dropdown version. -> Filter by Stock: Add option to choose multiple or single option. ([7831](https://github.com/woocommerce/woocommerce-blocks/pull/7831)) +- Filter by Stock: Add option to choose multiple or single option. ([7831](https://github.com/woocommerce/woocommerce-blocks/pull/7831)) - Filter by Rating: Add dropdown version. -> Filter by Rating: Add option to choose multiple or single option. -> Filters: Fix the little gaps on the border corners in the filters Dropdown version. ([7771](https://github.com/woocommerce/woocommerce-blocks/pull/7771)) +- Filter by Rating: Add option to choose multiple or single option. +- Filters: Fix the little gaps on the border corners in the filters Dropdown version. ([7771](https://github.com/woocommerce/woocommerce-blocks/pull/7771)) - Product Query - Enable "Inherit Query from template" option. ([7641](https://github.com/woocommerce/woocommerce-blocks/pull/7641)) #### Bug Fixes From a9447669583ad589ae82e01bffcca8ba90b6b8c7 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 14 Dec 2022 13:26:06 +0100 Subject: [PATCH 06/35] Atomic Block: fix ancestor definition (#7947) --- assets/js/atomic/blocks/product-elements/button/index.js | 4 ++-- assets/js/atomic/blocks/product-elements/image/index.ts | 4 ++-- assets/js/atomic/blocks/product-elements/price/index.js | 4 ++-- assets/js/atomic/blocks/product-elements/rating/index.ts | 4 ++-- assets/js/atomic/blocks/product-elements/sale-badge/index.ts | 4 ++-- assets/js/atomic/blocks/product-elements/shared/config.tsx | 2 +- assets/js/atomic/blocks/product-elements/sku/index.ts | 4 ++-- .../atomic/blocks/product-elements/stock-indicator/index.ts | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/button/index.js b/assets/js/atomic/blocks/product-elements/button/index.js index 0a1970199f8..f265b4072ac 100644 --- a/assets/js/atomic/blocks/product-elements/button/index.js +++ b/assets/js/atomic/blocks/product-elements/button/index.js @@ -21,8 +21,8 @@ const blockConfig = { title, description, ancestor: [ - '@woocommerce/all-products', - '@woocommerce/single-product', + 'woocommerce/all-products', + 'woocommerce/single-product', 'core/post-template', ], usesContext: [ 'query', 'queryId', 'postId' ], diff --git a/assets/js/atomic/blocks/product-elements/image/index.ts b/assets/js/atomic/blocks/product-elements/image/index.ts index 05cc47bfda0..f29909ca9ef 100644 --- a/assets/js/atomic/blocks/product-elements/image/index.ts +++ b/assets/js/atomic/blocks/product-elements/image/index.ts @@ -32,8 +32,8 @@ const blockConfig: CustomBlockConfiguration = { description, usesContext: [ 'query', 'queryId', 'postId' ], ancestor: [ - '@woocommerce/all-products', - '@woocommerce/single-product', + 'woocommerce/all-products', + 'woocommerce/single-product', 'core/post-template', ], textdomain: 'woo-gutenberg-products-block', diff --git a/assets/js/atomic/blocks/product-elements/price/index.js b/assets/js/atomic/blocks/product-elements/price/index.js index 8972e727109..b4fc14bbf7d 100644 --- a/assets/js/atomic/blocks/product-elements/price/index.js +++ b/assets/js/atomic/blocks/product-elements/price/index.js @@ -22,8 +22,8 @@ const blockConfig = { title, description, ancestor: [ - '@woocommerce/all-products', - '@woocommerce/single-product', + 'woocommerce/all-products', + 'woocommerce/single-product', 'core/post-template', ], usesContext: [ 'query', 'queryId', 'postId' ], diff --git a/assets/js/atomic/blocks/product-elements/rating/index.ts b/assets/js/atomic/blocks/product-elements/rating/index.ts index 9026417241c..4643a913955 100644 --- a/assets/js/atomic/blocks/product-elements/rating/index.ts +++ b/assets/js/atomic/blocks/product-elements/rating/index.ts @@ -23,8 +23,8 @@ const blockConfig: BlockConfiguration = { description, usesContext: [ 'query', 'queryId', 'postId' ], ancestor: [ - '@woocommerce/all-products', - '@woocommerce/single-product', + 'woocommerce/all-products', + 'woocommerce/single-product', 'core/post-template', ], icon: { src: icon }, diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/index.ts b/assets/js/atomic/blocks/product-elements/sale-badge/index.ts index 318b44047de..f44222cf0df 100644 --- a/assets/js/atomic/blocks/product-elements/sale-badge/index.ts +++ b/assets/js/atomic/blocks/product-elements/sale-badge/index.ts @@ -28,8 +28,8 @@ const blockConfig: BlockConfiguration = { edit, usesContext: [ 'query', 'queryId', 'postId' ], ancestor: [ - '@woocommerce/all-products', - '@woocommerce/single-product', + 'woocommerce/all-products', + 'woocommerce/single-product', 'core/post-template', ], }; diff --git a/assets/js/atomic/blocks/product-elements/shared/config.tsx b/assets/js/atomic/blocks/product-elements/shared/config.tsx index c82a9567930..86d07aedecb 100644 --- a/assets/js/atomic/blocks/product-elements/shared/config.tsx +++ b/assets/js/atomic/blocks/product-elements/shared/config.tsx @@ -28,7 +28,7 @@ const sharedConfig: Omit< BlockConfiguration, 'attributes' | 'title' > = { supports: { html: false, }, - ancestor: [ '@woocommerce/all-products', '@woocommerce/single-product' ], + ancestor: [ 'woocommerce/all-products', 'woocommerce/single-product' ], save, deprecated: [ { diff --git a/assets/js/atomic/blocks/product-elements/sku/index.ts b/assets/js/atomic/blocks/product-elements/sku/index.ts index 049cab09eb0..db0adaadc2c 100644 --- a/assets/js/atomic/blocks/product-elements/sku/index.ts +++ b/assets/js/atomic/blocks/product-elements/sku/index.ts @@ -23,8 +23,8 @@ const blockConfig: BlockConfiguration = { icon: { src: icon }, usesContext: [ 'query', 'queryId', 'postId' ], ancestor: [ - '@woocommerce/all-products', - '@woocommerce/single-product', + 'woocommerce/all-products', + 'woocommerce/single-product', 'core/post-template', ], attributes, diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/index.ts b/assets/js/atomic/blocks/product-elements/stock-indicator/index.ts index 920250feeea..32ea7206470 100644 --- a/assets/js/atomic/blocks/product-elements/stock-indicator/index.ts +++ b/assets/js/atomic/blocks/product-elements/stock-indicator/index.ts @@ -29,8 +29,8 @@ const blockConfig: BlockConfiguration = { edit, usesContext: [ 'query', 'queryId', 'postId' ], ancestor: [ - '@woocommerce/all-products', - '@woocommerce/single-product', + 'woocommerce/all-products', + 'woocommerce/single-product', 'core/post-template', ], }; From 6b6cb1d6f7141ed80c255cda68fb9cdf2f448297 Mon Sep 17 00:00:00 2001 From: kmanijak Date: Wed, 14 Dec 2022 08:17:19 +0100 Subject: [PATCH 07/35] Fix the incorrect layout of Rating and Price in Classic Template and Products block (#7932) * Fix the incorrect layout of Rating and Price in Classic Template There were styles required in Rating Filter that were added globally and influenced the layout of Rating in Products block as well as Classic template. The styles were moved to the Rating Filter block --- .../base/components/product-rating/index.tsx | 1 - .../base/components/product-rating/style.scss | 7 -- assets/js/blocks/rating-filter/style.scss | 116 ++++++++++++++++++ 3 files changed, 116 insertions(+), 8 deletions(-) delete mode 100644 assets/js/base/components/product-rating/style.scss diff --git a/assets/js/base/components/product-rating/index.tsx b/assets/js/base/components/product-rating/index.tsx index 8a495e70fe7..c4bc4139080 100644 --- a/assets/js/base/components/product-rating/index.tsx +++ b/assets/js/base/components/product-rating/index.tsx @@ -7,7 +7,6 @@ import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ -import './style.scss'; const Rating = ( { className, diff --git a/assets/js/base/components/product-rating/style.scss b/assets/js/base/components/product-rating/style.scss deleted file mode 100644 index 6827532c30d..00000000000 --- a/assets/js/base/components/product-rating/style.scss +++ /dev/null @@ -1,7 +0,0 @@ -.wc-block-components-product-rating { - &__stars { - display: inline-block; - line-height: 1; - height: 1em; - } -} diff --git a/assets/js/blocks/rating-filter/style.scss b/assets/js/blocks/rating-filter/style.scss index 823cead8c43..0b131d3ab01 100644 --- a/assets/js/blocks/rating-filter/style.scss +++ b/assets/js/blocks/rating-filter/style.scss @@ -5,6 +5,122 @@ box-shadow: none; border-radius: 0; } + + &.style-dropdown { + @include includeFormTokenFieldFix(); + position: relative; + display: flex; + gap: $gap; + align-items: flex-start; + + .wc-block-components-filter-submit-button { + height: 36px; + line-height: 1; + } + + > svg { + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + } + } + + .wc-block-components-product-rating__stars { + display: inline-block; + line-height: 1; + height: 1em; + } + + .wc-blocks-components-form-token-field-wrapper { + flex-grow: 1; + max-width: unset; + width: 0; + height: max-content; + + &:not(.is-loading) { + border: 1px solid $gray-700 !important; + border-radius: 4px; + } + + &.is-loading { + border-radius: em(4px); + } + + .components-form-token-field { + border-radius: inherit; + } + } + + .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container { + @include reset-typography(); + border: 0; + padding: $gap-smaller; + border-radius: inherit; + + .components-form-token-field__input { + @include font-size(small); + + &::placeholder { + color: $black; + } + } + + .components-form-token-field__suggestions-list { + border: 1px solid $gray-700; + border-radius: 4px; + margin-top: $gap-smaller; + max-height: 21em; + + .components-form-token-field__suggestion { + color: $black; + border: 1px solid $gray-400; + border-radius: 4px; + margin: $gap-small; + padding: $gap-small; + } + } + + .components-form-token-field__token, + .components-form-token-field__suggestion { + @include font-size(small); + } + } + + .wc-block-components-product-rating { + margin-bottom: 0; + } +} + +.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container { + padding: $gap-smallest 30px $gap-smallest $gap-smaller; + + .components-form-token-field__token-text { + background-color: $white; + border: 1px solid; + border-right: 0; + border-radius: 25px 0 0 25px; + padding: em($gap-smallest) em($gap-smaller) em($gap-smallest) em($gap-small); + line-height: 22px; + } + + > .components-form-token-field__input { + margin: em($gap-smallest) 0; + } + + .components-button.components-form-token-field__remove-token { + background-color: $white; + border: 1px solid; + border-left: 0; + border-radius: 0 25px 25px 0; + padding: 1px em($gap-smallest) 0 0; + + &.has-icon svg { + background-color: $gray-200; + border-radius: 25px; + } + } } .wp-block-woocommerce-rating-filter { From 9dc23ee4a25221001135cf6448bca12241bcbf47 Mon Sep 17 00:00:00 2001 From: kmanijak Date: Wed, 14 Dec 2022 08:16:37 +0100 Subject: [PATCH 08/35] Add dropdown version of Filter by Stock Status (#7831) * Extend Filter by Stock Editor options with dropdown and single/multiple choice * Add dropdown implementation for Filter by Stock Status * Adjust font-sizes to the rest of the filters * Add tests to Filter by Stock: dropdown and list variants * Change test file extension from .js to .tsx, so it handles types as well * Add E2E test to Filter by Stock checking if display style can be toggled * When typing in Filter by Stock dropdown, handle the space so it highlights the suggestions * Change the name of the filter blocks in the test files * Remove unnecessary waiting step in E2E test for Filter by Stock toMatchElement waits for an element for 30s by itself, hence waitForSelector usage was removed * Improve the STOCK_STATUS_OPTIONS type handling * Extract onDropdownChange function instead of inline arrow function * Fix overlaping dropdown content with the wrapper when Filter by Stock was set to single --- .../js/blocks/attribute-filter/test/block.tsx | 2 +- assets/js/blocks/stock-filter/block.json | 8 + assets/js/blocks/stock-filter/block.tsx | 164 +++++- assets/js/blocks/stock-filter/edit.tsx | 84 ++- assets/js/blocks/stock-filter/preview.tsx | 5 +- assets/js/blocks/stock-filter/style.scss | 112 ++++ .../{block.js.snap => block.tsx.snap} | 15 +- assets/js/blocks/stock-filter/test/block.js | 87 --- assets/js/blocks/stock-filter/test/block.tsx | 552 ++++++++++++++++++ assets/js/blocks/stock-filter/types.ts | 8 + assets/js/blocks/stock-filter/utils.ts | 18 + tests/e2e/specs/backend/stock-filter.test.js | 17 + 12 files changed, 944 insertions(+), 128 deletions(-) rename assets/js/blocks/stock-filter/test/__snapshots__/{block.js.snap => block.tsx.snap} (96%) delete mode 100644 assets/js/blocks/stock-filter/test/block.js create mode 100644 assets/js/blocks/stock-filter/test/block.tsx diff --git a/assets/js/blocks/attribute-filter/test/block.tsx b/assets/js/blocks/attribute-filter/test/block.tsx index 5a928bd6d29..77ed1f89adc 100644 --- a/assets/js/blocks/attribute-filter/test/block.tsx +++ b/assets/js/blocks/attribute-filter/test/block.tsx @@ -16,7 +16,7 @@ jest.mock( '@woocommerce/base-context/hooks', () => ( { ...jest.requireActual( '@woocommerce/base-context/hooks' ), } ) ); -const setWindowUrl = ( { url }: SetWindowUrlParams ) => { +const setWindowUrl = ( { url }: { url: string } ) => { global.window = Object.create( window ); Object.defineProperty( window, 'location', { value: { diff --git a/assets/js/blocks/stock-filter/block.json b/assets/js/blocks/stock-filter/block.json index 885cb64d44f..228874fd7ec 100644 --- a/assets/js/blocks/stock-filter/block.json +++ b/assets/js/blocks/stock-filter/block.json @@ -39,6 +39,14 @@ "type": "boolean", "default": false }, + "displayStyle": { + "type": "string", + "default": "list" + }, + "selectType": { + "type": "string", + "default": "multiple" + }, "isPreview": { "type": "boolean", "default": false diff --git a/assets/js/blocks/stock-filter/block.tsx b/assets/js/blocks/stock-filter/block.tsx index 936b1280856..9fa783b2253 100644 --- a/assets/js/blocks/stock-filter/block.tsx +++ b/assets/js/blocks/stock-filter/block.tsx @@ -3,7 +3,12 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; -import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks'; +import { Icon, chevronDown } from '@wordpress/icons'; +import { + usePrevious, + useShallowEqual, + useBorderProps, +} from '@woocommerce/base-hooks'; import { useQueryStateByKey, useQueryStateByContext, @@ -22,11 +27,13 @@ import FilterSubmitButton from '@woocommerce/base-components/filter-submit-butto import FilterResetButton from '@woocommerce/base-components/filter-reset-button'; import FilterTitlePlaceholder from '@woocommerce/base-components/filter-placeholder'; import Label from '@woocommerce/base-components/filter-element-label'; +import FormTokenField from '@woocommerce/base-components/form-token-field'; import isShallowEqual from '@wordpress/is-shallow-equal'; import { decodeEntities } from '@wordpress/html-entities'; import { isBoolean, objectHasProp } from '@woocommerce/types'; import { addQueryArgs, removeQueryArgs } from '@wordpress/url'; import { changeUrl, PREFIX_QUERY_ARG_FILTER_TYPE } from '@woocommerce/utils'; +import { difference } from 'lodash'; import classnames from 'classnames'; /** @@ -34,8 +41,8 @@ import classnames from 'classnames'; */ import { previewOptions } from './preview'; import './style.scss'; -import { getActiveFilters } from './utils'; -import { Attributes, DisplayOption } from './types'; +import { formatSlug, getActiveFilters, generateUniqueId } from './utils'; +import { Attributes, DisplayOption, Current } from './types'; import { useSetWraperVisibility } from '../filter-wrapper/context'; export const QUERY_PARAM_KEY = PREFIX_QUERY_ARG_FILTER_TYPE + 'stock_status'; @@ -74,7 +81,7 @@ const StockStatusFilterBlock = ( { ? [] : getSettingWithCoercion( 'product_ids', [], Array.isArray ); - const STOCK_STATUS_OPTIONS = useRef( + const STOCK_STATUS_OPTIONS: { current: Current } = useRef( getSetting( 'hideOutOfStockItems', false ) ? otherStockStatusOptions : { outofstock, ...otherStockStatusOptions } @@ -127,6 +134,15 @@ const StockStatusFilterBlock = ( { [ filteredCounts ] ); + /* + FormTokenField forces the dropdown to reopen on reset, so we create a unique ID to use as the components key. + This will force the component to remount on reset when we change this value. + More info: https://github.com/woocommerce/woocommerce-blocks/pull/6920#issuecomment-1222402482 + */ + const [ remountKey, setRemountKey ] = useState( generateUniqueId() ); + + const borderProps = useBorderProps( blockAttributes ); + /** * Compare intersection of all stock statuses and filtered counts to get a list of options to display. */ @@ -173,11 +189,15 @@ const StockStatusFilterBlock = ( { count={ blockAttributes.showCounts ? count : null } /> ), + textLabel: blockAttributes.showCounts + ? `${ decodeEntities( status.name ) } (${ count })` + : decodeEntities( status.name ), }; } ) .filter( ( option ): option is DisplayOption => !! option ); setDisplayedOptions( newOptions ); + setRemountKey( generateUniqueId() ); }, [ blockAttributes.showCounts, blockAttributes.isPreview, @@ -221,6 +241,8 @@ const StockStatusFilterBlock = ( { changeUrl( newUrl ); }; + const allowsMultipleOptions = blockAttributes.selectType !== 'single'; + const onSubmit = useCallback( ( checkedOptions ) => { if ( isEditor ) { @@ -327,23 +349,59 @@ const StockStatusFilterBlock = ( { const previouslyChecked = checked.includes( checkedValue ); - const newChecked = checked.filter( - ( value ) => value !== checkedValue - ); + if ( ! allowsMultipleOptions ) { + const newChecked = previouslyChecked ? [] : [ checkedValue ]; + announceFilterChange( + previouslyChecked + ? { filterRemoved: checkedValue } + : { filterAdded: checkedValue } + ); + setChecked( newChecked ); + return; + } + + if ( previouslyChecked ) { + const newChecked = checked.filter( + ( value ) => value !== checkedValue + ); - if ( ! previouslyChecked ) { - newChecked.push( checkedValue ); - newChecked.sort(); - announceFilterChange( { filterAdded: checkedValue } ); - } else { announceFilterChange( { filterRemoved: checkedValue } ); + setChecked( newChecked ); + return; } + const newChecked = [ ...checked, checkedValue ].sort(); + announceFilterChange( { filterAdded: checkedValue } ); setChecked( newChecked ); }, - [ checked, displayedOptions ] + [ checked, allowsMultipleOptions, displayedOptions ] ); + const onDropdownChange = ( tokens: string[] ) => { + if ( ! allowsMultipleOptions && tokens.length > 1 ) { + tokens = tokens.slice( -1 ); + } + + tokens = tokens.map( ( token ) => { + const displayOption = displayedOptions.find( + ( option ) => option.value === token + ); + + return displayOption ? displayOption.value : token; + } ); + + const added = difference( tokens, checked ); + + if ( added.length === 1 ) { + return onChange( added[ 0 ] ); + } + + const removed = difference( checked, tokens ); + if ( removed.length === 1 ) { + onChange( removed[ 0 ] ); + } + }; + if ( ! filteredCountsLoading && displayedOptions.length === 0 ) { setWrapperVisibility( false ); return null; @@ -385,18 +443,76 @@ const StockStatusFilterBlock = ( { <> { ! isEditor && blockAttributes.heading && filterHeading }
- + { blockAttributes.displayStyle === 'dropdown' ? ( + <> + + ! checked.includes( option.value ) + ) + .map( ( option ) => option.value ) } + disabled={ isLoading } + placeholder={ __( + 'Select stock status', + 'woo-gutenberg-products-block' + ) } + onChange={ onDropdownChange } + value={ checked } + displayTransform={ ( value: string ) => { + const result = displayedOptions.find( + ( option ) => option.value === value + ); + return result ? result.textLabel : value; + } } + saveTransform={ formatSlug } + messages={ { + added: __( + 'Stock filter added.', + 'woo-gutenberg-products-block' + ), + removed: __( + 'Stock filter removed.', + 'woo-gutenberg-products-block' + ), + remove: __( + 'Remove stock filter.', + 'woo-gutenberg-products-block' + ), + __experimentalInvalid: __( + 'Invalid stock filter.', + 'woo-gutenberg-products-block' + ), + } } + /> + { allowsMultipleOptions && ( + + ) } + + ) : ( + + ) }
{
diff --git a/assets/js/blocks/stock-filter/edit.tsx b/assets/js/blocks/stock-filter/edit.tsx index 5c7fddf33ad..7117159c9d5 100644 --- a/assets/js/blocks/stock-filter/edit.tsx +++ b/assets/js/blocks/stock-filter/edit.tsx @@ -4,14 +4,18 @@ import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; +import BlockTitle from '@woocommerce/editor-components/block-title'; +import type { BlockEditProps } from '@wordpress/blocks'; import { Disabled, PanelBody, ToggleControl, withSpokenMessages, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalToggleGroupControl as ToggleGroupControl, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components'; -import BlockTitle from '@woocommerce/editor-components/block-title'; -import type { BlockEditProps } from '@wordpress/blocks'; /** * Internal dependencies @@ -26,8 +30,15 @@ const Edit = ( { attributes, setAttributes, }: BlockEditProps< Attributes > ) => { - const { className, heading, headingLevel, showCounts, showFilterButton } = - attributes; + const { + className, + heading, + headingLevel, + showCounts, + showFilterButton, + selectType, + displayStyle, + } = attributes; const blockProps = useBlockProps( { className: classnames( 'wc-block-stock-filter', className ), @@ -37,7 +48,10 @@ const Edit = ( { return ( - - + + setAttributes( { + selectType: value, + } ) + } + className="wc-block-attribute-filter__multiple-toggle" + > + + + + + setAttributes( { + displayStyle: value, + } ) + } + className="wc-block-attribute-filter__display-toggle" + > + + + , + textLabel: 'In Stock (3)', }, { value: 'preview-2', - name: 'Out of sotck', + name: 'Out of stock', label: