Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11972116/woocommerce-gutenberg-products-block.zip)
1. On a new WooCommerce installation take note of the contents for Cart and Checkout pages
2. Enable a blocks theme eg. Twenty Twenty Three
3. Go to Appearance > Editor > Template Parts and verify the existence of Checkout Header template part
4. Verify that you can edit, save, and changes persist
5. Go to Appearance > Editor > Templates and verify the existence of Cart, Checkout and Order Confirmation templates
6. Verify for Cart and Checkout templates that the content matches the one noted in step 1.
7. Go to Appearance > Editor > Templates > Manage all templates and verify the Cart and Checkout show "Customized"
8. Edit said templates, save, and verify that changes persist.
9. Make a test purchase. Verify that the views for Cart, Checkout and Order Confirmation contain the new templates
10. Clear the "Customized" state for Checkout and make a new test order. Verify that no footer is present, and the header is the Checkout Header template part
11. Go to WooCommerce > Settings > Advanced and verify that for Cart and Checkout we have a freeform endpoint textbox, as opposed to the old page selection dropdown
12. Edit and save them, and verify that a new checkout flow displays Cart and Checkout on the newly chosen endpoints
1. Before checking out this branch add post/page and test the following blocks `Filter by Attributes`, `Filter by Stock` and `Filter by Rating` along with `Products (beta)` block. Just leave all default settings and publish post/page.
2. Now checkout this PR and load the post/page you created in step 1 and ensure there are no block validation errors in the console.
3. Add the 3 blocks again. Check that in each of the blocks, `Display product count` option is set to false/off.
4. Ensure you can toggle `Display product count` and it will hide/show the product counts in editor and frontend.
### Banner pattern: improve spacing and centering in responsive designs [#9877](https://github.com/woocommerce/woocommerce-blocks/pull/9877)
1. Create a new page or post.
2. Insert the `Banner` pattern and save.
3. Go to the front end and check the pattern looks like the screenshots below in all the different screen sizes.
<imgwidth="700"alt="Screenshot 2023-06-19 at 12 23 41"src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/08d0043b-c856-497c-86c2-cd5f5b4cadf2">
<imgwidth="1209"alt="Screenshot 2023-06-19 at 12 23 49"src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/a4d74096-0b3b-48c2-a60a-5d13a6f7e53f">
### Hero Split pattern: add shop link to the button [#9879](https://github.com/woocommerce/woocommerce-blocks/pull/9879)
1. Create a new page or post.
2. Insert the `Hero Product - Split` pattern and save.
3. Go to the front end and check the `Shop now` button links to the shop.
### Make use of product search [#9890](https://github.com/woocommerce/woocommerce-blocks/pull/9890)
1. Add the following patterns to a post/page `WooCommerce Essential Header | Dark`, `WooCommerce Essential Header`, `WooCommerce Large Header | Dark` and `WooCommerce Large Header`.
2. Ensure you see a search bar that searches products.
3. Check this on the frontend as well.
### Update Hero Product 3 Split pattern with opinionated button styling and margin adjustments [#9893](https://github.com/woocommerce/woocommerce-blocks/pull/9893)
1. Add `Hero Product 3 Split` pattern to a post/page.
2. Check that the `Shop Now` button has a specific background/text color. Test with a block theme like TT3 and make sure the button is white and text is black.
3. Check in the front end and reduce the browser viewport to smallest possible and ensure the block of text in the area of the black background that there are margins all around so it is not bumping up to the edges.
### Add new `Small discount banner with image` pattern [#9947](https://github.com/woocommerce/woocommerce-blocks/pull/9947)
1. Create a new post or page.
2. Insert the `Small discount banner with image` pattern and save.
3. In the front end, check the pattern looks like the image below and the links go to the shop page (the image is different because I used one of the images already included in the plugin).
<imgwidth="499"alt="Screenshot 2023-06-22 at 09 32 04"src="https://user-images.githubusercontent.com/186112/247504271-9afc1f70-7060-4ece-9f61-2ffb31ea72c1.png">
### Add new `Discount banner` pattern [#9936](https://github.com/woocommerce/woocommerce-blocks/pull/9936)
1. Create a new post or page.
2. Insert the `Discount banner` pattern and save.
3. In the front end, check the pattern looks like the image below and the `Shop now` button links to the shop page.
<imgwidth="481"alt="Screenshot 2023-06-21 at 15 31 03"src="https://user-images.githubusercontent.com/186112/247502460-9ff3235a-7770-4ff4-ac58-ef533737731e.png">
### Remove attributes data from save function for active filters [#10047](https://github.com/woocommerce/woocommerce-blocks/pull/10047)
1. Log in to your WordPress dashboard.
2. Create a new post / page.
3. Click on the "+" button in the top left corner of the editor to add a new block. Search and add the following blocks to the editor: `Products (beta)`, `Active Filters` and some filter block like the `Filter by attributes`.
4. On the top-right side, click on the Save button.
5. Visit the post/page that you just created and check that Active Filters block is working correctly when choosing different options from the Filter by Attributes block
### Remove attributes data from save function for filter by price [#10039](https://github.com/woocommerce/woocommerce-blocks/pull/10039)
1. Log in to your WordPress dashboard.
2. Create a new post / page.
3. Click on the "+" button in the top left corner of the editor to add a new block. Search and add the following blocks to the editor: `Products (beta)` and `Filter by Price`.
4. On the top-right side, click on the Save button.
5. Visit the post/page that you just created and check that filter by price is working correctly and changes made to it is reflected on the Products (beta) block.
### Add size settings to the `Product Image` block [#10034](https://github.com/woocommerce/woocommerce-blocks/pull/10034)
#### Product Image settings
1. Create a new page or post.
2. Insert the `Single Product` block.
3. Click on the `Product Image` block and open the settings sidebar.
4. Check the `Image size` settings are shown in the sidebar.
5. Change the settings and check the changes are properly reflected on the editor and in the front end, after saving.
#### Product Hero pattern
1. Insert the `Product Hero` pattern.
2. Click the image and check the block used is the `Product Image`.
3. Save and check in the front end that the patterns renders fine.
### Add to Cart with options block > Remove opinionated style for the price list in grouped products. [#9988](https://github.com/woocommerce/woocommerce-blocks/pull/9988)
1. Make sure you have a block theme enabled, such as Twenty-twenty three.
2. Head over to Edit Site > Templates > Single Product
3. Make sure you have the blockyified version of this template up and running: if you don't, click on the "Transform into blocks" button and save.
4. Now on your site's FE, access any grouped product (such as Logo Collection)
5. Ensure the prices in the list are displayed with a smaller font size as demonstrated on the screenshot.
| Before | After |
| ------ | ----- |
| <imgwidth="1107"alt="Screenshot 2023-06-26 at 12 33 18"src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/2a42ad75-bdf1-4229-a2a1-bc1495a5d8b6"> | <imgwidth="1029"alt="Screenshot 2023-06-26 at 12 32 15"src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/07959a5c-808b-44bf-aa50-a66513ebb533"> |
### Fix notice banner links for Legacy notices [#9996](https://github.com/woocommerce/woocommerce-blocks/pull/9996)
1. Install Back in Stock Notifications plugin.
2. Visit an out-of-stock product.
3. Click the “Notify me” button.
4. Confirm the notice banner link is displayed correctly.
3. Click on the "+" button in the top left corner of the editor to add a new pattern. Search and add the following patterns to the editor:
- Featured Products 5-Item Grid
- Product Filters
- Large Footer Dark
- Large Footer
- Simple Footer Dark
- Simple Footer
- Footer with 2 Menus Dark
- Footer with 2 Menus
- Footer with 3 Menus
- Centered Header Menu with Search
- Essential Header Dark
- Essential Header
- Large Header Dark
- Large Header
- Hero Product Split
- Just Arrived Full Hero
- Product Collections Featured Collection
- Product Collections Featured Collections
- Product Collections Newest Arrivals
- Product Details Product Listing
- Product Hero 2 Column 2 Row
- 1:1 Image 4-Column Product Row
- 3-Column Product Row
- 4-Column Product Row
- Large Image Product Gallery
- Minimal 5-Column Product Row
- Minimal Product List
- Product Gallery
- Product List with 1:1 Images
- Product List with Full Product Description
- Alternating Image and Text
4. On the top-left side, click to open the List View
5. Make sure the blocks are named correctly (as in the list above) and the word "WooCommerce" does not appear in front of the blocks title.
### Remove the word ‘beta’ from the compatibility notice [#10019](https://github.com/woocommerce/woocommerce-blocks/pull/10019)
1. Create a fresh site.
2. Create a test page and add the Cart block to it.
3. Select the Cart block and verify that the notice reads:
> _"The Cart & Checkout Blocks are a feature to optimize for faster checkout. To make sure this feature is right for your store, [review the list of compatible extensions](https://woocommerce.com/document/cart-checkout-blocks-support-status/#section-3)."_
4. Create a test page and add the Checkout block to it.
5. Select the Checkout block and verify that the notice reads:
> _"The Cart & Checkout Blocks are a feature to optimize for faster checkout. To make sure this feature is right for your store, [review the list of compatible extensions](https://woocommerce.com/document/cart-checkout-blocks-support-status/#section-3)."_
---
> **Note**
> When testing this on an existing testing site:
>
> - Make sure that there's no incompatible payment gateway is installed, as the incompatible payment gateway notice prevents the compatibility notice from appearing.
> - Make sure that there's no key called `wc-blocks_dismissed_sidebar_compatibility_notices` stored in local storage, as this also prevents the compatibility notice from appearing.
### Hide "collection from" text when a location has an incomplete address. [#9808](https://github.com/woocommerce/woocommerce-blocks/pull/9808)
1. Go to WooCommerce > Settings > Shipping > Local Pickup. Create 2 pickup locations—one should have a full address/pickup location, and one should have no address like so:
2. Add items to your cart and go to checkout.
3. Select Local Pickup
4. Select the pickup location with an address. it should show "collection from" like so:
5. Select the pickup location with no address. It should not show the collection from section:
6. Place the order and check the confirmation displays correctly without an address also:
### Cleanup code to lazy-load wc-settings in the Mini-Cart block [#10042](https://github.com/woocommerce/woocommerce-blocks/pull/10042)
This PR doesn't add any new feature, so testing mostly refers to smoke testing that there are no regressions.
1. Add the Mini Cart block to the header of your store.
2. In the frontend, verify you can open it, interact with its inner blocks (ie: change the quantity of a product, remove a product, etc.).
11. Verify Mini-Cart values are always correct and at no moment they render incorrect data.
### Make filter by rating preview consistent with default settings [#10007](https://github.com/woocommerce/woocommerce-blocks/pull/10007)
1. Ensure you don't have any product reviews on your store.
2. Add a new post and add the `Filter by Rating` block.
3. Because you don't have any reviews, it will show a preview of what the ratings filter would look like.
4. Ensure you don't see any product counts because by default, the `Display Product count` setting is disabled.
### Mini Cart: Add Price, Icon and Product Count color settings [#9647](https://github.com/woocommerce/woocommerce-blocks/pull/9647)
1. Add the Mini Cart block.
2. Select the "Styles" tab
3. Set custom colors for the Icon, Price, and Product count.
4. Make sure the changes are visible in the editor and the page.
### Avoid usage of __experimentalUseFocusOutside [#10017](https://github.com/woocommerce/woocommerce-blocks/pull/10017)
1. Add the Mini Cart block to the header of your site via (Appearance > Editor).
2. In the frontend and with the Cart empty, open the Mini Cart drawer, verify you can open and close the drawer without problems. Test closing the drawer by clicking on the overlay that appears above the rest of the page.
3. Add some products to your cart and open the Mini Cart drawer again. Verify you can open and close it, you can change the products' quantity, etc.
4. Now repeat steps 1-3 with another browser. Ideally test Chrome, Firefox and a Webkit-based browser (like Safari or GNOME Web).
### Single Product Template: fix compatibility layer logic when the blocks aren't wrapped in a group block [#9982](https://github.com/woocommerce/woocommerce-blocks/pull/9982)
1. Edit the Single Product Template.
2. Remove all the blocks.
3. Add three paragraph blocks.
4. Save it.
5. Visit a product.
6. Ensure that all three paragraph blocks are visible.
### Product Image: use WC Core function to render image [#9984](https://github.com/woocommerce/woocommerce-blocks/pull/9984)
1. Add a Products (Beta) block to a page.
2. Save and check the page on the front end.
3. See `<img>` elements have `loading`, `srcset`, `size` attributes.
### Single Product Block > Ensure the Product Summary and Title are always rendered with the correct context independent of their position [#9968](https://github.com/woocommerce/woocommerce-blocks/pull/9968)
0. Make sure you have the Gutenberg plugin disabled
1. Create a new post
2. Add the Single Product block and move the Product Summary block to the last position, as demonstrated in the screenshot below:
<imgwidth="1319"alt="Screenshot 2023-06-22 at 18 37 47"src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/2774edbe-cc8c-473c-8bae-e590327e0390">
4. Save the post and ensure the content is displayed as expected on the front end and matches the product summary (from the Single Product block) rather than the post's excerpt where it was inserted.
5. Now move the Product Title to the last position in the editor and save the post.
6. Ensure the title is displayed as expected on the front end it and matches the product title (from the Single Product block) rather than the title of the post where it was inserted.
### Allow customer account block to center align [#9750](https://github.com/woocommerce/woocommerce-blocks/pull/9750)
1. Add a post/page and insert the `Customer account` block.
2. With the toolbar, change the width alignment to `center`. Update/Publish.
3. Ensure you see the icon and text centered on the page.
4. Go to the frontend and check that it is also centered on the page.
### Remove unnecessary white space from Testimonials 3 Columns pattern [#9786](https://github.com/woocommerce/woocommerce-blocks/pull/9786)
1. Create a post or page.
2. Add the _Testimonials 3 Columns_ pattern.
3. Verify there is no white space at the beginning of each paragraph.
### Fix cart and checkout conditionals when using a block based theme and templates [#10098](https://github.com/woocommerce/woocommerce-blocks/pull/10098)
1. Active a non-blocks theme e.g. 2019
2. Go to Settings > Advanced and set the cart and checkout pages to pages that **do not contain blocks.** For example, set them to pages using the cart and checkout shortcodes
3. Save settings. Then switch to a block based theme, e.g. TT3
4. Go to the store and view a product page.
5. Add to cart. Check that the notice styling is using the new design:
