woocommerce/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1070.md

# Testing notes and ZIP for release 10.7.0

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

## WooCommerce Core

### Remove opinionated font sizes from Essential Header patterns [#10219](https://github.com/woocommerce/woocommerce-blocks/pull/10219)

1. In the post editor or the site editor, add the Essential Header pattern.
2. Verify it looks like the screenshot below (font-sizes adapt to the theme).
3. Repeat 1-2 with the Essential Header Dark pattern.

![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/d8502340-89c5-43d8-9231-0fafd9d6c9a4)

### Prevent Mini-Cart template part preview in Site Editor being too high [#10204](https://github.com/woocommerce/woocommerce-blocks/pull/10204)

1. With WP 6.3 and a block theme, go to Appearance > Editor > Patterns.
2. Open the General template part area.
3. Scroll down to see the Mini-Cart template part.
4. Verify its size doesn't occupy the entire window height.

Before | After
--- | ---
![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/ddb310f0-c33e-453f-881f-5bd146051d90) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/f2f73bff-9ad9-4919-9c14-ec5caed35a20)

5. Click on it and verify that, when opened, it does take the entire height as always.

![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/ab9b2b6f-07b6-4202-8a6b-a986bee1ddd4)

### Fix SearchListControl styles [#10192](https://github.com/woocommerce/woocommerce-blocks/pull/10192)

1. Create a category with an & in its name. Ie: Clothing & Accessories.
2. Create a new post or page and add the Products by Category block.
3. In the placeholder, make sure Clothing & Accessories is displayed, instead of Clothing `&` Accessories.
4. Also verify that as you select categories, the tags added to the "x categories selected" section have a gray background.
5. Expand a category with children categories and verify the checkboxes have the same size.

Before | After
--- | ---
![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/62efe190-c3e6-4aa5-8cf6-a6882e0188f9) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/ca5fb734-9b1d-4f35-bd8b-cc0283da4761)

### Mini Cart: Fix styling of the Start Shopping button in the drawer [#10169](https://github.com/woocommerce/woocommerce-blocks/pull/10169)

1. Activate Storefront.
2. Add the Mini-Cart block to a page.
3. Visit the page on the frontend and select the (empty) Mini-Cart to toggle the drawer.
4. Verify the button is displaying correctly.

| Before | After |
| ------ | ----- |
|<img width="883" alt="before-2" src="https://github.com/woocommerce/woocommerce-blocks/assets/905781/9d8ca8a5-1662-4ebd-8233-3a2948e70843">|<img width="898" alt="after-2" src="https://github.com/woocommerce/woocommerce-blocks/assets/905781/f7088abc-b17b-42fa-b329-57cd401fbe79">|

### Mini Cart block > Update block registration to rely on a metadata file. [#10168](https://github.com/woocommerce/woocommerce-blocks/pull/10168)

1. Create a new post
2. Make sure the mini-cart block is available for insertion
3. Insert the block, make changes to its settings and save
4. On the frontend, make sure everything works as expected: you can add/remove products from the cart and the style changes made in the editor are visible on the frontend.

### Enhance: Bring back user to 1st page when filters are changed [#9952](https://github.com/woocommerce/woocommerce-blocks/pull/9952)

Scenario 1

1. Create a new post.
2. Add all filter blocks (Filter by Attributes, Filter by Price, Filter by Stock Status, etc) and the 'Products (Beta)' block to it.
3. Save the post and navigate to the frontend.
4. Using the block pagination, navigate to the 2nd page of products 
5. Modify any filter and confirm that the page number resets to the 1st page upon filter alteration. 

Scenario 2

1. Make sure you have a block theme enabled, such as Twenty-twenty three.
2. Head over to Edit Site > Templates > Product Catalog.
3. Add all filter blocks (Filter by Attributes, Filter by Price, Filter by Stock Status, etc) and the 'Classic WooCommerce Product Grid Block' block to it.
4. Save the post and navigate to the Shop page.
5. Using the block pagination, navigate to the 2nd page of products 
6. Modify any filter and confirm that the page number resets to the 1st page upon filter alteration. 

### Adjust Banner padding to improve mobile experience [#10107](https://github.com/woocommerce/woocommerce-blocks/pull/10107)

1. Create a test page.
2. Add the Banner pattern to it.
3. Switch the preview to Mobile.
4. See that the text looks like the after screenshot above.

| Before | After |
| ------ | ----- |
| <img width="407" alt="Screenshot 2023-07-06 at 10 02 40" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/2eb84729-ecba-490c-99e2-9ce575b0b595"> | <img width="408" alt="Screenshot 2023-07-06 at 10 02 18" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/c935b846-3451-495a-94ee-27e2f2c7ae4a"> |

### Single Product Template > Ensure extensions can't trigger fatal errors on templates without any post content blocks [#10128](https://github.com/woocommerce/woocommerce-blocks/pull/10128)

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 blockified version of this template up and running: if you don't, click on the "Transform into blocks" button. Delete/remove both the Product Details and the Related Products blocks and save.
4. Access any Single Product on the front end and ensure everything works as expected: no Fatal Errors should be triggered.

### Adjust the image of the Discount banner with image pattern [#10108](https://github.com/woocommerce/woocommerce-blocks/pull/10108)

- Create a test page.
- Add the Discount banner with image pattern to it.
- Switch the preview to Mobile.
- See that the image is not overlapping in the page editor (like in the After image above).

| Before | After |
| ------ | ----- |
| <img width="423" alt="Screenshot 2023-07-06 at 10 17 54" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/72201971-d490-48eb-848a-59a8479968d1"> | <img width="399" alt="Screenshot 2023-07-06 at 10 18 16" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/9ca26ce5-ebb1-48bb-82c1-e11df87413c8"> |

### Load product-query stylesheet when rendering the Products block [#10109](https://github.com/woocommerce/woocommerce-blocks/pull/10109)

1. Add the Products (beta) block to a post or page.
2. Verify there is spacing between the price and the button:

Before | After
--- | ----
![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/bc3026d6-3544-44bf-aca0-9f4c410b6374) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/8085a64f-cb3b-4c9e-bd91-944fb31d2c4b)

3. Now, create another page with the Query Loop block, displaying posts.
4. In the frontend, open the _Network_ tab of your browser devtools (<kbd>F12</kbd>) and verify there is no `product-query.css` stylesheet being loaded unnecessarily.

### Per block stylesheets #9831

Testing this PR means making sure there are no styling regressions in existing blocks. I did test all of them, but it's possible that I might have missed something.

1. Create a post or page and add the All Products block. Verify styles are loaded correctly.
2. Visit the page in the frontend and verify styles are loaded correctly in the frontend as well.
3. Repeat steps 1 and 2 with all blocks listed on [this page](https://wordpress.org/plugins/woo-gutenberg-products-block/). Make sure to test each block individually. So, when possible, try with only one block on the page (in some cases, that's not possible, ie: filter blocks, in that case, try with as few blocks as possible on the page). The reason is that we want to make sure each block includes the style dependencies that it needs, so they need to be tested in isolation, otherwise styles from other blocks might leak into other blocks and "help fix issues".