# Testing notes and ZIP for release 9.5.0

Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/10557868/woocommerce-gutenberg-products-block.zip)

## WooCommerce Core

### Style Book: Fix Featured Product and Featured Category Blocks preview ([8313](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/8313))

1. With Gutenberg installed and a block theme like [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/) 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:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/4463174/215080944-efc48225-8308-4654-a97f-aaa7066e03a7.png">
</td>
<td valign="top">After:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/4463174/215081020-49dac42a-0dca-4d21-9e65-1a3aabb05cad.png">
</td>
</tr>
</table>

### Style Book: Hide Filter blocks and Product Search block ([8309](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/8309))

1. With Gutenberg installed and a block theme like [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/) 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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/8243))

1. With Gutenberg installed and a block theme like [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/) 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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/2132595/214867504-ad63ecff-6038-494b-a58e-156fb60af000.png">
</td>
<td valign="top">After:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/2132595/214867656-29a61d71-bec3-4b6c-a7ab-26b555d56113.png">
</td>
</tr>
</table>

### Fix for wrong shipping schema in checkout ([8291](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/8289))

1. Select a dark theme, e.g. the [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/) 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:
<br><br>

<img width="660" alt="Screenshot 2023-01-25 at 17 30 32" src="https://user-images.githubusercontent.com/3323310/214540423-65a7739f-b1de-41a4-998a-e8d74758484a.png">
</td>
<td>After LTR:
<br><br>

<img width="658" alt="Screenshot 2023-01-25 at 17 29 52" src="https://user-images.githubusercontent.com/3323310/214540285-e6fc8dae-b7c0-4c3f-88f0-661d6ee82372.png">
</td>
</tr>
</table>

<table>
<tr>
<td>Before RTL:
<br><br>

<img width="661" alt="Screenshot 2023-01-25 at 17 32 44" src="https://user-images.githubusercontent.com/3323310/214540903-65065644-8bc0-4e4f-bebb-d466a80e9f0a.png">
</td>
<td>After RTL:
<br><br>

<img width="651" alt="Screenshot 2023-01-25 at 17 12 12" src="https://user-images.githubusercontent.com/3323310/214536494-07fe6428-15d8-4204-804f-82aef60a742e.png">
</td>
</tr>
</table>

### Add reset button in the editor for product attributer filter ([8285](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/2132595/214326853-0b82a71e-d40b-47b7-ba6d-63800c871523.png">
</td>
<td valign="top">After:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/2132595/214326983-e22dfa0f-6008-4159-886e-d790afed36fe.png">
</td>
</tr>
</table>

### Make `Notice` component legible in dark themes ([8278](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/186112/214251529-7d6d0dad-7073-4c22-9682-b4ae2accc042.png">
</td>
<td valign="top">After:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/186112/214251537-bb0557c3-5d60-43c0-86ab-a106b562396a.png">
</td>
</tr>
</table>

### Fix Catalog Sorting colors in dark themes ([8270](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/8270))

1. Install a theme with a dark background (ie: theme TT3 with Auberginie style or theme Zaino).
2. Go to `Appearance » Editor` and edit the Product Catalog template.
3. Add the `Catalog Sorting` blocks.
4. Make sure it's legible.

### Set inherit setting to true when is inserted in the archive product template ([8251](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/8247))

1. Make sure a product has an average rating of 4 or less.
2. With the [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/) 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><img alt="image" src="https://user-images.githubusercontent.com/3616980/213691713-5649be46-1c3c-4e2b-a54b-be501bc1c787.png" />
</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:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/3616980/213691993-b96360a0-4afb-4e0d-b8be-46f9f9bbf710.png">
</td>
<td valign="top">After:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/3616980/213691932-cac4ccb7-c272-4909-abf1-93fbf89e8ce9.png">
</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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/8241))

1. Enable the [Multiple Packages for WooCommerce](https://wordpress.org/plugins/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":
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/90977/213485625-01b04533-be8d-412c-880d-f8c9fde395a0.png">
</td>
<td valign="top">Existing logic preserved for pickup with prices:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/90977/213485629-2094404f-22af-4699-ac33-4027ec92b28b.png">
</td>
</tr>
</table>

### Product Price: Transition from using CSS margin to Global Styles ([8269](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/15730971/214267725-92fbeba9-8891-43a1-ae41-e12b88228045.png">
</td>
<td valign="top">FrontEnd:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/15730971/214267814-d5c337d8-cf92-475f-a65d-95315baf4285.png">
</td>
</tr>
</table>

<table>
<tr>
<td valign="top">Editor sidebar:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/15730971/214271492-d9f2e592-524c-4a5b-a327-eab8b4c74658.png">
</td>
<td valign="top">Block inserter:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/15730971/214271883-b09bb1e0-b91a-4aeb-8340-19d3ab31dd32.png">
</td>
</tr>
</table>

### Add Catalog Sorting filter block ([8122](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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>
<img alt="image" src="https://user-images.githubusercontent.com/186112/211323401-90ded17c-7ae2-48c3-b8e7-7c2eae58c0e9.png">
</td>
</tr>
</table>

### Add Results Count block ([8078](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/20098064/212304507-38dfbbf3-01a0-4233-b677-d25e28695db6.png">
</td>
<td valign="top">Block inserter:
<br><br>
<img alt="image" src="https://user-images.githubusercontent.com/20098064/212304592-710a57dc-2025-43fd-9220-712b5bae5cc8.png">
</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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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>
<img alt="image" src="https://user-images.githubusercontent.com/90977/213454433-74ef8b9f-6d92-46e6-a8eb-130d75c32f9e.png">
</td>
</tr>
</table>

## Feature plugin

n/a

## Experimental

n/a