Testing notes and ZIP for release 9.1.0

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

Feature plugin and package inclusion in WooCommerce

Add "Store Info Alternating Image and Text" commerce adjacent pattern (7827)

1. Create a new page and edit it.
2. Browse to the WooCommerce category for Block patterns and look for the "WooCommerce Alternating Image and Text" pattern in the "Explore All Patterns" dialog. Click to insert.
3. Verify the pattern inserted on the page. It may look different depending on the theme being used with testing.

Add to Cart Button: Add support for the alignment setting. (7816)

1. Add the Product (Beta) block to a page.
2. Add the Add to Cart Button block.
3. Make sure that you can set the alignment to left, center and right.
4. Make sure all options work both in the editor and on the page.

Products block: Make the block available to the users of the feature plugin. (7815)

1. Open the inserter in the editor.
2. Make sure the block appears as “Products (Beta)“ instead of “Product Query” and has a “Stacks” icon instead of “Sparkles” icon. Icon should still be purple.
3. Add the block and select it.
4. Make sure the description says: “A block that displays a selection of products in your store.”
5. Make sure there is a Feedback prompt at the bottom of the inspector with a link going here.
6. Make sure the default inner blocks are as follows:

• Product Image
• Post Title
• Product Price
• Add to Cart Button

Add "Product Hero 2 Column 2 Row" commerce adjacent pattern. (7814)

1. Create a new page and edit it.
2. Browse to the WooCommerce category for Block patterns and look for the "WooCommerce Product Hero 2 Column 2 Row" pattern in the "Explore All Patterns" dialog. Click to insert.
3. Verify the pattern inserted on the page. It may look different depending on the theme being used with testing.

Add "Just Arrived Full Hero" commerce adjacent pattern. (7812)

1. Create a new page and edit it.

2. Browse to the WooCommerce category for Block patterns and look for the WooCommerce Just Arrived Full Hero pattern in the "Explore All Patterns" dialog. Click to insert.

3. Verify the pattern inserted on the page. It may look different depending on the theme

Product Rating: Add support for the alignment setting. (7790)

1. Add the Products (Beta) block to a page.
2. Add the Product Rating block.
3. Make sure that you can set the alignment to left, center and right.
4. Make sure all options work both in the editor and on the page.

Rename Active Product Filters block to Active Filters. (7753)

1. Create a post or page and open the block inserter.
2. Search for active.
3. Verify there is a block named Active Filters (and there isn't one named Active Product Filters).

Product Query: Add support for filtering by attributes within the block. (7743)

1. Go to the editor and add a “Product (Beta) block.
2. Ensure a new “Product Attributes” input is accessible via the “Advanced Filters” panel in the inspector controls.
3. Ensure that the input autocompletes with all the available terms for your store in the format ${Taxonomy}: ${Term}.
4. Ensure that when selecting the attributes, the products filter in the editor.
5. Ensure that when you remove an attribute, the editor preview also gets updated.
6. Save the post.
7. Ensure that the block displays correctly in the front-end.

Align the font-sizes in filters. (7707)

1. Enter Site Editor
2. Insert WooCommerce Product Filters pattern
3. Check the font-sizes in both, Editor and the Frontend, of the following elements in following combinations

• Active filters: list and chips
• Active filters: "Clear All" button
• Filter by Price: editable and text
• Filter by Attribute: list and dropdown (check placeholder, dropdown options and chips)
• Filter by Rating
• Filter by Stock
• For each of the above enable "Apply" button - check it too

4. On the frontend:

• Check "Apply" button
• Provide any change to filters without applying - check "Reset" button

Expected: All of the above have the same font-size:

• Twenty Twenty-Two: 15.75px
• Twenty Twenty-Three: 14 - 15.75px (depends on the screen width, narrower the screen, smaller the font)

Note: headings are not expected to change!

Check at least briefly other blocks of a WooCommerce that could be influenced by the changes (there may be something I might've missed).

Mini Cart block: Load wc-blocks-registry package at the page's load instead of lazy load it. (7813)

1. Install Page Optimize and Product Bundles.
2. Enable a block theme.
3. Customize the block theme and add the Mini Cart block in the header via Site Editor.
4. Save the changes.
5. In the frontend, lick on the Mini Cart. The drawer should open and show the "empty cart" message.
6. Go to the shop page and add a product to your cart.
7. Click on the Mini Cart. The drawer should open and show the product you just added.

Hide the shipping address form from Checkout Block in Editor and rename the Billing Address label when "Force shipping to the customer billing address" is enabled. (7800)

1. Go to wp-admin/admin.php?page=wc-settings&tab=shipping&section=options page.
2. Enable the Force shipping to the customer billing address option and save the changes.
3. Go to Checkout block Editor, and confirm Shipping Address form is not visible.
4. Confirm Billing Address form label is Billing and shipping address and the description is Enter the billing and shipping address that matches your payment method.
5. Go to the Checkout block front-end, and confirm Shipping Address form is not visible.
6. Confirm Billing Address form label is Billing and shipping address and the description is Enter the billing and shipping address that matches your payment method.
7. Change the billing address, confirm the shipping address in the order summary gets changed, and shipping methods are updated.
8. Disable the Force shipping to the customer billing address option and save the changes.
9. Confirm Shipping Address form is visible in both the frontend and Editor.
10. Please test around this issue with multiple use cases.

Product Price: Fix the alignment setting. (7795)

1. Add the Product (Beta) block to a page.
2. Add the Product Price block.
3. Make sure that you can set the alignment to left, center and right.
4. Make sure all options work both in the editor and on the page.

Fix: Show tax label in Cart and Checkout block. (7785)

Multiple tax names / Itemized

1. Go to wp-admin/admin.php?page=wc-settings&tab=tax.
2. Ensure the additional tax class Reduced exists.
3. Ensure that Display prices during cart and checkout is set to Including tax.
4. Ensure that Display tax totals is set to Itemized.
5. Go to wp-admin/admin.php?page=wc-settings&tab=tax&section=standard and add the following tax rate:
   • Rate %: 10.000
   • Tax name: 10% Vat
6. Go to wp-admin/admin.php?page=wc-settings&tab=tax&section=reduced and add the following tax rate:
   • Rate %: 5.000
   • Tax name: 5% Vat
7. Create two test products and assign the test products to the tax classes Standard and Reduced.
8. Add the test products to the cart.
9. Go to the cart and verify that the tax labels are visible in the order summary, e.g. Including € 2.80 10% VAT, € 0.80 5% VAT.
10. Go to the checkout and verify that the same tax labels are visible.

<table> <tr> <td>Cart - before:

</td> <td>Cart - after:

</td> </tr> <tr> <td>Checkout - before:

</td> <td>Checkout - after:

</td> </tr> </table>

Single tax name / Itemized

1. Go back to wp-admin/admin.php?page=wc-settings&tab=tax&section=reduced and change the tax rate as follows:
   • Rate %: 5.000 → 10.000
   • Tax name: 5% Vat → 10% Vat
2. Go to the cart and verify that only one tax label is visible in the order summary, e.g. Including € 4.40 10% VAT.
3. Go to the checkout and verify that the same tax label is visible.

<table> <tr> <td>Cart - before:

</td> <td>Cart - after:

</td> </tr> <tr> <td>Checkout - before:

</td> <td>Checkout - after:

</td> </tr> </table>

Single total

ℹ I added this test case to check the backwards compatibility.

1. Go to wp-admin/admin.php?page=wc-settings&tab=tax.
2. Ensure that Display tax totals is set to As a single total.
3. Go to the cart and verify that the generic tax label is visible in the order summary, e.g. Including € 4.40 in taxes.
4. Go to the checkout and verify that the same tax information is visible.

<table> <tr> <td valign="top">Cart - before and after:

</td> <td valign="top">Checkout - before and after:

</td> </tr> </table>

Make Footer and Header patterns available in pattern chooser. (7699)

Header patterns

1. Go to Site Editor. You can choose any template.

2. Choose Header Block

3. Use "Replace" option:

4. Type "woocommerce" in a search bar Expected: There's 6 WooCommerce patterns available

5. Choose one of them Expected: Pattern is applied correctly

Footer patterns

Repeat the above steps, but for Footer Block

Fix: Product (Beta) editor preview with Stock Status setting. (7682)

1. Add the Product (Beta) block to a new page.
2. Change the stock status setting.
3. See the editor preview updates on changing the stock status setting.
4. Add the Sale status filter, see the editor preview updates on changing on sale setting as well.
5. See if the block still shows the correct products on the front end as before.

Clean up unused CSS code. (7751)

1. Add all WC Blocks to a post or page (you can use this gist and paste it with Ctrl + V).
2. Verify there are no visual regressions in the editor. Publish the page and verify there are no visual regressions in the frontend.
3. In the editor, add one of the blocks that display the SearchListControl component (ie: Filter by Attribute) and verify it's displayed correctly: