# Testing notes and ZIP for release 10.8.0
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12249010/woocommerce-gutenberg-products-block.zip)
## WooCommerce Core
### Use the `Single Product` block for the `Product Details Product Listing` pattern [#9978](https://github.com/woocommerce/woocommerce-blocks/pull/9978)
1. Create a new page or post.
2. Insert the `Product Details Product Listing` pattern and save.
3. Check that the pattern is using the `Single Product` block and has a default product selected.
4. In the front end, check the pattern looks like the image above if the product has reviews.
5. Check nothing shows in the front end, if the product does not have reviews.
#### Screenshots
### Store Customization > Centered Header Menu with Search - Update the pattern to become wireframed [#10226](https://github.com/woocommerce/woocommerce-blocks/pull/10226)
1. Create a new post
2. Insert the Centered Header Menu with Search pattern and save
3. Make sure it works as expected and is properly rendered on the front-end
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Store Customization > Minimal Header - Update the pattern to become wireframed [#10227](https://github.com/woocommerce/woocommerce-blocks/pull/10227)
1. Create a new post
2. Insert the Minimal Header pattern and save
3. Make sure it works as expected and is properly rendered on the front-end
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Remove styles from `Newest arrivals` pattern [#10256](https://github.com/woocommerce/woocommerce-blocks/pull/10256)
1. In the post editor or the site editor, add the `Product Collections Newest Arrivals` pattern.
2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the `After` screenshot above.
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Remove styles from the `Testimonials 3 cols` pattern [#10258](https://github.com/woocommerce/woocommerce-blocks/pull/10258)
1. In the post editor or the site editor, add the `Testimonials 3 columns` pattern.
2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the `After` screenshot above.
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Store Customization > Hero Product Split pattern - Update the pattern to become wireframed [#10270](https://github.com/woocommerce/woocommerce-blocks/pull/10270)
1. Create a new post
2. Insert the Hero Product Split pattern and save
3. Make sure it works as expected and is correctly rendered on the front end: the design should match the one demonstrated on the screenshots of this PR.
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Update the `Testimonials Single` pattern to have no opinionated styles [#10275](https://github.com/woocommerce/woocommerce-blocks/pull/10275)
1. In the post editor or the site editor, add the `Testimonials Single` pattern.
2. Verify the text does not have opinionated styles (borders, colors, fonts, etc) and that the pattern looks like the screenshot above.
#### Screenshots
### Update the `Footer with 3 menus` pattern to have no opinionated styles [#10294](https://github.com/woocommerce/woocommerce-blocks/pull/10294)
1. In the post editor or the site editor, add the `Footer with 3 menus` pattern.
2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the After screenshot above.
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Move sale badge to top right of product image [#10297](https://github.com/woocommerce/woocommerce-blocks/pull/10297)
1. Add the following blocks to a post/page. `Hand-picked Products`, `Best Selling Products`, `Products by Category`, `Newest Products`, `On Sale Products`, `Products by Attribute`, `Products by Tag`, `Top Rated Products`.
2. For each of these blocks, ensure the `Sale` badge is on the top right of the product image as seen in the `After` screenshot above.
3. Save the post/page and ensure it shows the same in the frontend.
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Update the `Footer with Simple Menu and Cart` pattern to have no opinionated styles [#10306](https://github.com/woocommerce/woocommerce-blocks/pull/10306)
1. In the post editor or the site editor, add the `Footer with Simple Menu and Cart` pattern.
2. Verify there are no opinionated styles (borders, colors, fonts, etc) - except the margin on the separator - and the pattern looks like the After screenshot above.
#### Screenshots
| Before | After |
| ------ | ----- |
| ||
### Store Customization > Large Footer pattern - Update the pattern to become wireframed [#10323](https://github.com/woocommerce/woocommerce-blocks/pull/10323)
1. Create a new post
2. Insert both the Large Footer and Large Footer Dark patterns.
3. Make sure they work as expected and are visible both in the editor and on the front-end
4. Make sure the styles match the screenshot added on this PR description
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Store Customization > Introduce the new Featured Products: Fresh & Tasty pattern [#10339](https://github.com/woocommerce/woocommerce-blocks/pull/10339)
1. Create a new post
2. Add the Featured Products: Fresh & Tasty pattern
3. Make sure the preview is properly rendered without any problems
4. Save the post and visualize it on the front-end: make sure the layout displayed matches the screenshots on this PR
#### Screenshots
Desktop view:
Mobile view:
### Store Customization > Featured Category Triple pattern - Update the pattern to become wireframed [#10343](https://github.com/woocommerce/woocommerce-blocks/pull/10343)
1. Create a new post and insert the Featured Category Triple pattern
2. Ensure the pattern is rendered correctly in the editor
3. Save the post and go to the frontend
4. Ensure the pattern is rendered correctly without any errors and the styles match the screenshot on this PR.
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Remove styles from `Product Details Product Listing` pattern [#10362](https://github.com/woocommerce/woocommerce-blocks/pull/10362)
1. Create a page or post.
2. Insert the `Product Details Product Listing`.
3. Click on the product title and in the styles tab check it has no colors.
4. Click on the product button and in the styles tab check it has no colors or other styles.
### Store Customization > Introduce the new Social: Follow us in social media pattern [#10368](https://github.com/woocommerce/woocommerce-blocks/pull/10368)
1. Create a new post
2. Insert the **Social: Follow us in social media** pattern
3. Make sure you can preview the pattern without any problems in the editor and save.
4. On the front-end, make sure the pattern is properly rendered.
#### Screenshots
| Desingn | Implemented |
| ------ | ----- |
| | |
### Featured Items: Add selection button when id not found [#10387](https://github.com/woocommerce/woocommerce-blocks/pull/10387)
1. Add the `Featured Category` block to a page.
2. Select an existing ID and click `Done`.
3. Go into `Code editor` mode and replace the `categoryId` to some random number that does not exists.
4. Click on `Exit code editor`.
5. You should now see an error `Sorry, an error occurred`.
6. Ensure you see the `Select a category` button and click it.
7. Ensure now you can select an existing category.
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Store Customization > Featured Products 5-Item Grid pattern - Update the pattern to become wireframed [#10401](https://github.com/woocommerce/woocommerce-blocks/pull/10401)
1. Create a new post
2. Insert the Featured Products 5-Item Grid pattern
3. Ensure you can see everything working as expected in the editor
4. Save the post and head over to the front end: ensure everything works as expected and the style rendered matches the one displayed on this PR.
#### Screenshots
| Before | After |
| ------ | ----- |
| | |
### Update express checkout title, description, icon [#10237](https://github.com/woocommerce/woocommerce-blocks/pull/10237)
1. Open up the Checkout page in the block editor
2. Verify the visual elements in the screenshots are correct
3. On the front end, add some products to your basket and go to Checkout
4. Verify that the title of the Express Checkout block has a capital "C" for the word "Checkout".
#### Screenshots
Note the capital C in _Checkout_ in the block title, and the description and icon in the settings bar on the right
**Before:**
**After:**
### Add class specificity to fix indent [#10245](https://github.com/woocommerce/woocommerce-blocks/pull/10245)
1. Switch to Storefront theme.
2. Create a post.
3. Add the following blocks to the page. `Filter by Attributes`, `Featured Category`, `Featured Product`, `Hand-picked Products`, `Reviews by Product`, `Reviews by Category`.
4. Ensure in each of these blocks that default shown search list is not indented to the right as shown in the `after` screenshot. Another words there should be no indentation.
#### Screenshots
Before:
After:
### Remove Featured Category Cover Image pattern [#10252](https://github.com/woocommerce/woocommerce-blocks/pull/10252)
1. In the post editor or the site editor, open the inserter and search for the Featured Category Cover Image pattern.
2. Verify it doesn't exist.
### Remove opinionated styles from Hero Product 3 Split pattern [#10260](https://github.com/woocommerce/woocommerce-blocks/pull/10260)
1. In the post editor or the site editor, add the Hero Product 3 Split pattern.
3. Verify it looks like the _After_ patterns in screenshot below (styles adapt to the theme) and it matches the design ([see](https://github.com/woocommerce/woocommerce-blocks/issues/10217)).
Desktop | Mobile
--- | ---
 | 
### Add to Cart Form: Fix broken styles for the block when using inside the Single Product Block [#10282](https://github.com/woocommerce/woocommerce-blocks/pull/10282)
1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
3. On the left-hand side menu, click on Pages > Add New.
4. Inside the Page editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
5. In the block library that pops up, search for the 'Single Product' block. Click on it to add the block to the template.
6. On the top-right side, click on the Save button.
7. Visit a product and check if the Single Product block is shown and the Add to Cart Form block is correctly being displayed
| Before | After |
| ------ | ----- |
| | |
### Unify links to WordPress and WooCommerce websites in patterns [#10380](https://github.com/woocommerce/woocommerce-blocks/pull/10380)
1. Create a new page and add the following patterns: Large Footer, Large Footer Dark, Simple Footer, Simple Footer Dark, Footer with Simple Menu and Cart, Footer with 2 Menus, Footer with 2 Menus Dark and Footer with 3 Menus.
2. Publish the page and visit it from the frontend.
4. Click on the links to the WordPress and/or WooCommerce templates which appear at the bottom of the patterns and verify all of them look ok and open in a new tab.
### Fix Classic Template block in Single Product custom templates [#10342](https://github.com/woocommerce/woocommerce-blocks/pull/10342)
1. Go to Appearance > Editor > Templates and create a Product template:
3. Choose one of the products and create a custom template for it.
4. Remove all blocks from the template (except header and footer) and, as a replacement, add the WooCommerce Classic Template block.
6. Visit the page of that product in the frontend.
7. Verify it renders the product details properly.
Before | After
--- | ---
 | 
### Change custom toolbar item to use toolbar button [#10246](https://github.com/woocommerce/woocommerce-blocks/pull/10246)
1. Create a post and add `Featured Category` and `Featured Product` block to the page and have your developer console opened.
2. Click on each of the block so that you can see the toolbar popup for each block.
3. In your developer console, ensure you don't see the warning `Using custom components as toolbar controls is deprecated since version 5.6. Please use ToolbarItem, ToolbarButton or ToolbarDropdownMenu components instead.`.
4. Ensure each of the toolbar items are still functioning as expected.
### Remove opinionated styles from Alternating Image and Text pattern [#10292](https://github.com/woocommerce/woocommerce-blocks/pull/10292)
1. In the post editor or the site editor, add the Alternating Image and Text pattern.
2. Click on the image placeholders and add images to the pattern.
3. Visit the frontend of your site.
4. Verify the patterns looks like the _After_ patterns in screenshots below.
Desktop:
Before | After
--- | ---
 | 
### Fix SearchListControl styles (II) [#10308](https://github.com/woocommerce/woocommerce-blocks/pull/10308)
1. Create a new post or page and add the Single Product, Products by Category and Newest Products blocks.
2. In all of them, check that the list control UI looks correct; that's the UI that lets you choose the product/category:
Single Product (no change):
Before | After
--- | ---
 | 
Products by Category (slight margin change):
Before | After
--- | ---
 | 
Newest Products (broken UI fixed):
Before | After
--- | ---
|
:point_up: this UI is displayed in the sidebar, under the Filter by Category panel.
### Add missing page titles in Cart and Checkout templates [#10281](https://github.com/woocommerce/woocommerce-blocks/pull/10281)
» Verify that page titles are visible
1. Install a block-theme, e.g. [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/).
2. Go to WP Admin » Appearance » Editor » Templates.
3. Open the Cart template and verify that it has the page title `Cart`.
4. Open the Checkout template and verify that it has the page title `Checkout`.
5. Go to the frontend and add a product to the cart.
6. Go to the Cart page and verify that it has the page title `Cart`.
7. Go to the Checkout page and verify that it has the page title `Checkout`.
#### Screenshots
Cart template (EN) - before:
Cart template (EN) - after:
Cart template (NL) - after:
Checkout template (EN) - before:
Checkout template (EN) - after:
Checkout template (NL) - after:
### Add Color Panel [#10062](https://github.com/woocommerce/woocommerce-blocks/pull/10062)
This testing is utilizing the implementation in the Mini-Cart block to verify functionality
1. Ensure you are running WP 6.3 and/or the latest Gutenberg installed
2. Insert the Mini-Cart Block into a template.
3. Select the block, in the settings panel for the block, turn on the "Display total price" toggle so you're able to see the color changes.
4. Select the "Styles" panel.
5. Set custom colors for the Icon, Price, and Product count color options. Verify they are changed in the Mini-Cart block.
6. Save the template and then view on the frontend. Verify the Mini-Cart block has retained the custom colors.
### Create Mini-Cart template part area [#10203](https://github.com/woocommerce/woocommerce-blocks/pull/10203)
1. With WP 6.3 and a block theme, go to Appearance > Editor > Patterns.
2. Verify there is a Mini-Cart template part area containing the Mini-Cart template part.
Before | After
--- | ---
 | 
### Newest Products: fix Stock Status filter [#10201](https://github.com/woocommerce/woocommerce-blocks/pull/10201)
1. Go to Editor
2. Add Newest Products block
3. Focus on block
4. Try to open "Filter by stock status" and change the switches
5. Expected: Block doesn't crash and reacts to changes
6. Save and check that block renders on the frontend
#### Screenshots
Result after clicking "Filter by stock status":
| Before | After |
| ------ | ----- |
| | |
### Fix Misplacement of Shipping Radio Buttons [#10150](https://github.com/woocommerce/woocommerce-blocks/pull/10150)
Instructions
1. Create any test site.
2. Install and activate all the required plugins
3. Add sample products.
4. Add some Shipping methods.
5. Create new test page.
6. Add Cart block.
7. Change two-column grid to stacked column using align option.
8. Observe that "Shipping" radio buttons are not misaligned.
#### Screenshots
| Before | After |
| ------ | ----- |
|  | |
## Feature plugin
### Remove border control for filter by attribute block [#10277](https://github.com/woocommerce/woocommerce-blocks/pull/10277)
1. Add a post and insert `Filter by Attribute` block.
2. Check that the `border controls` are no longer available in the `Styles` section of the `Inspector controls`.