76 lines
4.9 KiB
Markdown
76 lines
4.9 KiB
Markdown
|
# 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
|
||
|
<!-- wp:columns -->
|
||
|
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
|
||
|
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:woocommerce/price-filter -->
|
||
|
<div class="wp-block-woocommerce-price-filter is-loading" data-showinputfields="true" data-showfilterbutton="false" data-heading="Filter by price" data-heading-level="3"><span aria-hidden="true" class="wc-block-product-categories__placeholder"></span></div>
|
||
|
<!-- /wp:woocommerce/price-filter -->
|
||
|
|
||
|
<!-- wp:woocommerce/attribute-filter {"attributeId":1,"displayStyle":"dropdown","heading":"Filter by Color"} -->
|
||
|
<div class="wp-block-woocommerce-attribute-filter is-loading" data-attribute-id="1" data-show-counts="true" data-query-type="or" data-heading="Filter by Color" data-heading-level="3" data-display-style="dropdown"><span aria-hidden="true" class="wc-block-product-attribute-filter__placeholder"></span></div>
|
||
|
<!-- /wp:woocommerce/attribute-filter -->
|
||
|
|
||
|
<!-- wp:woocommerce/attribute-filter {"attributeId":2,"heading":"Filter by Size"} -->
|
||
|
<div class="wp-block-woocommerce-attribute-filter is-loading" data-attribute-id="2" data-show-counts="true" data-query-type="or" data-heading="Filter by Size" data-heading-level="3"><span aria-hidden="true" class="wc-block-product-attribute-filter__placeholder"></span></div>
|
||
|
<!-- /wp:woocommerce/attribute-filter -->
|
||
|
|
||
|
<!-- wp:woocommerce/active-filters -->
|
||
|
<div class="wp-block-woocommerce-active-filters is-loading" data-display-style="list" data-heading="Active filters" data-heading-level="3"><span aria-hidden="true" class="wc-block-active-product-filters__placeholder"></span></div>
|
||
|
<!-- /wp:woocommerce/active-filters -->
|
||
|
|
||
|
<!-- wp:woocommerce/stock-filter -->
|
||
|
<div class="wp-block-woocommerce-stock-filter is-loading" data-show-counts="true" data-heading="Filter by stock status" data-heading-level="3"><span aria-hidden="true" class="wc-block-product-stock-filter__placeholder"></span></div>
|
||
|
<!-- /wp:woocommerce/stock-filter --></div>
|
||
|
<!-- /wp:column -->
|
||
|
|
||
|
<!-- wp:column {"width":"66.66%"} -->
|
||
|
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:woocommerce/all-products {"columns":3,"rows":3,"alignButtons":false,"contentVisibility":{"orderBy":true},"orderby":"date","layoutConfig":[["woocommerce/product-image"],["woocommerce/product-title"],["woocommerce/product-price"],["woocommerce/product-rating"],["woocommerce/product-button"]]} -->
|
||
|
<div class="wp-block-woocommerce-all-products wc-block-all-products" data-attributes="{"alignButtons":false,"columns":3,"contentVisibility":{"orderBy":true},"isPreview":false,"layoutConfig":[["woocommerce/product-image"],["woocommerce/product-title"],["woocommerce/product-price"],["woocommerce/product-rating"],["woocommerce/product-button"]],"orderby":"date","rows":3}"></div>
|
||
|
<!-- /wp:woocommerce/all-products --></div>
|
||
|
<!-- /wp:column --></div>
|
||
|
<!-- /wp:columns -->
|
||
|
```
|
||
|
|
||
|
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)
|