1080.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

Testing notes and ZIP for release 10.8.0

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

WooCommerce Core

Use the Single Product block for the Product Details Product Listing pattern #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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Design	Implemented

Featured Items: Add selection button when id not found #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

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

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

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

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

1. In the post editor or the site editor, add the Hero Product 3 Split pattern.
2. Verify it looks like the After patterns in screenshot below (styles adapt to the theme) and it matches the design (see).

Desktop	Mobile

Add to Cart Form: Fix broken styles for the block when using inside the Single Product Block #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

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.
3. 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

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

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

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

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

☝️ this UI is displayed in the sidebar, under the Filter by Category panel.

Add missing page titles in Cart and Checkout templates #10281

» Verify that page titles are visible

1. Install a block-theme, e.g. Twenty Twenty-Three.
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

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

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

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

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

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.