Testing notes and ZIP for release 9.5.0

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

WooCommerce Core

Style Book: Fix Featured Product and Featured Category Blocks preview (8313)

1. With Gutenberg installed and a block theme like Twenty Twenty-Three enabled.
2. Go to Appearance » Editor and edit a template.
3. In the toolbar, select Styles (black and white circle) and then, Open Style Book (eye icon).
4. Go to the WooCommerce tab.
5. Be sure that the Featured Product and Featured Category are displayed like the image below.

<table> <tr> <td valign="top">Before: </td> <td valign="top">After: </td> </tr> </table>

Style Book: Hide Filter blocks and Product Search block (8309)

1. With Gutenberg installed and a block theme like Twenty Twenty-Three enabled.
2. Go to Appearance » Editor and edit a template.
3. In the toolbar, select Styles (black and white circle) and then, Open Style Book (eye icon).
4. Go to the WooCommerce tab.
5. Be sure that the Attribute Filter, Stock Filter, Price Filter, Rating filter, and Product Search blocks aren't visible.

Style Book: Fix useForcedLayout to prevent breaking style book (8243)

1. With Gutenberg installed and a block theme like Twenty Twenty-Three enabled.
2. Go to Appearance » Editor and edit a template.
3. In the toolbar, select Styles (black and white circle) and then, Open Style Book (eye icon).
4. Go to the WooCommerce tab.
5. Ensure the Mini Cart block load correctly.

Add border attributes to featured items block to show border styles in editor (8304)

1. Go to wp-admin dashboard and to your shop page.
2. Add a Featured Product block to the page.
3. Try adding a border color and border width to the product.
4. Ensure you're seeing the preview of the border styles while editing.
5. Repeat steps 2-4 for the Featured Category block.

<table> <tr> <td valign="top">Before: </td> <td valign="top">After: </td> </tr> </table>

Fix for wrong shipping schema in checkout (8291)

1. Create and place an order with shipping address different from billing.
2. Verify on checkout that both display correctly.

Adjust return to cart arrow (8289)

1. Select a dark theme, e.g. the Twenty Twenty-Three and use a dark style.
2. Add a product to the cart and go to the checkout page.
3. Verify that the arrow of the Return to Cart button as the same color as the text.
4. Go to https://store.test/wp-admin/options-general.php and switch to an RTL-language.
5. Go to the checkout page again and verify that the arrow of the Return to Cart button points in the other direction.

<table> <tr> <td>Before LTR: </td> <td>After LTR: </td> </tr> </table> <table> <tr> <td>Before RTL: </td> <td>After RTL: </td> </tr> </table>

Add reset button in the editor for product attributer filter (8285)

1. Go to your wp-admin dashboard and Shop page.
2. Add the Filter by Attribute Product block.
3. Choose an attribute which has a product linked to it.
4. Ensure you see the Reset button at the bottom right.
5. Go to your Shop page and select an attribute.
6. Ensure you see the Reset button and clicking on it works as expected.
7. Back in the wp-admin Shop page. Edit the block and now try choosing an attribute which has no products link to it.
8. Ensure you no longer see the Reset button at the bottom right.

<table> <tr> <td valign="top">Before: </td> <td valign="top">After: </td> </tr> </table>

Make Notice component legible in dark themes (8278)

1. Install a theme with a dark background (ie: theme TT3 with Aubergine style or theme Zaino).
2. Go to Appearance » Editor and edit the Product Catalog template.
3. Add the Store Notices block.
4. Make sure the notice text is black and legible.

<table> <tr> <td valign="top">Before: </td> <td valign="top">After: </td> </tr> </table>

Set inherit setting to true when is inserted in the archive product template (8251)

1. Make sure you are using a block theme.
2. Go to the Product Catalog template on the Site Editor (wp-admin/site-editor.php?postType=wp_template&postId=woocommerce%2Fwoocommerce%2F%2Farchive-product).
3. Insert the Products (Beta) block.
4. Make sure the Inherit query from template is enabled by default.

Avoid changing the markup of all ratings when the Product Rating block is present in the page (8247)

1. Make sure a product has an average rating of 4 or less.
2. With the Twenty Twenty-Three theme installed, go to Appearance » Editor.
3. Edit the Product Catalog template, adding the Products block above the WooCommerce Product Grid Block:

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

4. You might want to add a title above each of those blocks to help you distinguish them in the frontend.
5. Go to the frontend and verify the rating markup of the WooCommerce Product Grid block is not filtered. To verify it, scroll down to the WooCommerce Product Grid block and check that the "empty" star in the rating is outlined instead of dimmed:

<table> <tr> <td valign="top">Before: </td> <td valign="top">After: </td> </tr> </table>

Note: The Products block is expected to have dimmed stars instead of outlined ones. This testing steps refers to the WooCommerce Product Grid block.

Update Local Pickup price display when price is 0 and multiple packages are used (8241)

1. Enable the Multiple Packages for WooCommerce extension and set a price for local pickup.
2. Add multiple products to cart. Confirm you have multiple shipping packages and the price x quantity is shown when choosing local pickup.
3. Go to settings and make local pickup free.
4. Go back to checkout and confirm prices for pickup is shown as "FREE".

<table> <tr> <td valign="top">Show as "Free" instead of "0 x 3 packages": </td> <td valign="top">Existing logic preserved for pickup with prices: </td> </tr> </table>

Product Price: Transition from using CSS margin to Global Styles (8269)

1. Add a Products block on a new page.
2. Ensure the Product Price margin is displaying correctly (and is present in the Dimensions » Margin setting).
3. Now add an All Products block on another page.
4. Click on the pencil icon to edit the layout and change the Product Price block margin.
5. Verify the margin is applied in the editor. Save the layout, save the page and check the changes in the frontend, verify the margin is applied there as well.

Product Button: Transition from using CSS margin to Global Styles (8239)

1. Add a Products block on a new page.
2. Ensure the Product Button margin is displaying correctly (and is present in the Dimensions » Margin setting).
3. Iterate over each Products block pattern (which includes the Product Button block). Make sure the margin is correct.

Product Rating: Transition from using CSS margin to Global Styles (8202)

1. Add a Products block on a new page and add the Product Rating block inside of it.
2. Ensure the Product Rating margin is displaying correctly (and is present in the Dimensions » Margin setting).
3. Iterate over each Products block pattern (which includes the Rating block). Make sure the margin is correct.
4. Make sure the alignment setting works (for Product Rating) correctly in the editor and frontend.

Add Store Breadcrumbs block (8222)

1. Make sure you are using a block theme.
2. Edit any template on the Site Editor e.g. the Single Product Template (wp-admin/site-editor.php?postType=wp_template&postId=woocommerce%2Fwoocommerce%2F%2Fsingle-product&canvas=edit&sidebar=%2Ftemplates).
3. Insert the new Store Breadcrumbs block.
4. Style the breadcrumbs (update the colors for the link and text and typography) and ensure the changes are also visible on the FrontEnd.

<table> <tr> <td valign="top">Editor Preview: </td> <td valign="top">FrontEnd: </td> </tr> </table> <table> <tr> <td valign="top">Editor sidebar: </td> <td valign="top">Block inserter: </td> </tr> </table>

Add Catalog Sorting filter block (8122)

1. Enable a blocks theme and go to the Site Editor » Browse all templates and open the Product Catalog template.
2. Insert the Catalog Sorting block.
3. Insert the Products (Beta) block and enable the Inherit query from template.
4. Check the Catalog Sorting block renders on the editor.
5. Save and go to the shop on the front end, make sure it renders the Products (Beta) block with the Catalog Sorting dropdown.
6. Change the dropdown value and make sure the products are ordered in the expected order.

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

Add Results Count block (8078)

1. Create new post/page
2. Try to add "Product Results Count"
   Expected: Product Results Count block is not available there

---

1. Edit Product Catalog template
2. Add "Product Results Count"
   Expected: It displays "Showing 1-X of X results".
3. Remove Classic Template and add Products block
4. Make sure Products block has Inherit query from template setting enabled (!)
5. Save the template and go to Frontend
   Expected: It displays "Showing 1-16 of 17 results". - depends on number of products your store has, numbers may differ, but it displays correct number of product that shows up in Products block
6. Go to the next page of Products
   Expected: It displays "Showing 17-17 of 17 results". - depends on number of products your store has, numbers may differ, but it displays correct number of product that shows up in Products block

<table> <tr> <td valign="top">Editor sidebar: </td> <td valign="top">Block inserter: </td> </tr> </table>

---

1. Change global styles and make sure styles are applied to the block (in frontend as well)
2. Change the color/font styles to the block and make sure styles are applied to the block (in frontend as well)

Add coupon link instead of dropdown in Cart and Checkout blocks (7993)

1. Go to the Edit Cart page, remove the Cart block and add it again.
2. Go to the Edit Checkout page, remove the Checkout block and add it again.
3. Visit your site front-end and add items to cart
4. Go to the Cart page, and confirm the Apply a coupon code link is visible.
5. Enter the coupon code, and confirm the coupon is getting applied.
6. Go to the Checkout page, and confirm the Apply a coupon code link is visible.
7. Enter the coupon code, and confirm the coupon is getting applied.
8. Test around this issue.

Checkout/Store API: Push valid changes selectively (8030)

1. Go to the checkout page as a logged in user who has checked out before.
2. Edit a single address field - it has to be one of the address fields that require a push: city, state, country, postcode, or email.
3. Wait a few seconds for the request to finish.
4. Refresh the checkout page.
5. Confirm the change you made was persisted.

Refresh the cart when using the browser back button (8236)

For the Checkout block

1. Add items to your cart.
2. Go to the checkout block page.
3. Place an order.
4. Press the browser back button.
5. After a short delay you'll see the empty cart notice.

For the Mini Cart block

1. Add mini cart to the theme header.
2. Add something to your cart.
3. Visit a page - note the total in mini cart.
4. Visit the shop page and add another item to the cart. Note the new mini cart total.
5. Press the browser back button. Without mousing over the mini cart block, confirm the total updates.

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

Feature plugin

n/a

Experimental

n/a