1024.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

Testing notes and ZIP for release 10.2.4

Zip file for testing: woocommerce-gutenberg-products-block.zip

WooCommerce Core

Add back filter blocks frontend scripts (9954)

Test that the old markup of filter blocks still works

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"

2. Paste the following code and exit the code editor

<!-- 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="{&quot;alignButtons&quot;:false,&quot;columns&quot;:3,&quot;contentVisibility&quot;:{&quot;orderBy&quot;:true},&quot;isPreview&quot;:false,&quot;layoutConfig&quot;:[[&quot;woocommerce/product-image&quot;],[&quot;woocommerce/product-title&quot;],[&quot;woocommerce/product-price&quot;],[&quot;woocommerce/product-rating&quot;],[&quot;woocommerce/product-button&quot;]],&quot;orderby&quot;:&quot;date&quot;,&quot;rows&quot;: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

Test that filter blocks translations are loaded correctly

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