1170.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 11.7.0

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

Testing Notes

[Store Customization] Update the "Footer with 3 Menus" pattern to remove the last 2 menus #11980

1. Create a new page or post.
2. Insert the "Footer with Menus".
3. Check it only has one menu.

Before	After

[Store Customization] Update the default content in patterns #11997

1. Insert all the patterns from the next list:

• Intro patterns
  • Featured category cover image
  • Hero product split
  • Just arrived full hero
• Featured selling patterns:
  • Product Collection 4 Columns
  • Product Collection 5 Columns
  • Product Collection 3 Columns
  • Product Collection: Featured Products 5 Columns
  • Featured category triple
  • Large image product gallery
  • Product gallery
  • Hero product 3-split
  • Hero product chessboard
  • Featured category focus
  • Banner
• About patterns
  • Alternating image and text
• Review patterns
  • Testimonials 3 Columns
  • Testimonials single
• Social media patterns
  • Social: Follow us on social media

2. Check the copy is the same expected in the designs (see screenshots here: #11875).

Update patterns design #12005

1. Create a new page or post.
2. Insert the "Just Arrived Full Hero" and check it matches the new design below FlPl7fHaGv9mpu8Nfl0joH-fi-158_32406 (the button colors may differ between themes because they are no hard-coded).

3. Insert the "Product Collection 3 Columns" and "Product Gallery" and check they don't have titles anymore.
4. Insert the "Hero Product Chessboard" and check the bottom-left square has the following copy:

Quality Materials
We use only the highest-quality materials in our products, ensuring that they look great and last for years to come.

Unique Design
From bold prints and colors to intricate details and textures, our products are a perfect combination of style and function.

Hook woocommerce_single_product_summary action to core/post-excerpt block #11953

1. Ensure that you are using a block theme.
2. Install Code Snippets, that will allow us to insert some PHP code into our store.
3. Go to Snippets > Add New. Set the code snippet title to Product summary and add this PHP code:

add_action('woocommerce_single_product_summary', function() {
	echo 'woocommerce_single_product_summary';
});

4. In the frontend, go to a Single product page and ensure that the string woocommerce_single_product_summary is visible before the Product Summary.

Before	After

Remove isExperimental flag from product-query module which is not experimental #10531

1. Go to Editor
2. Insert Products (Beta) block in some template
3. Smoke test in Editor
4. Save and go to frontend - verify it works normal
5. Repeat the above in new post

[Product Collection] Fix: HTML entity decoding for product names in Hand-Picked Products #11927

1. Add a hyphen – to the name of any product, like Hoodie - Black.
2. Insert a Product Collection block into a new post.
3. Apply the “Hand-picked Products” filter in Inspector Controls.
4. Search for the product with the hyphen and confirm it displays correctly, as shown below:

5. Feel free to test other HTML entities too.

Verifying Label Update:

• Ensure the text reads “HAND-PICKED PRODUCTS” instead of “PICK SOME PRODUCTS”, as depicted in the image below:

Fix: Product Collection show products with correct stock statuses #11708

1. Set some product to be out of stock.
2. Add Product Collection block to a page.
3. Set the stock status filter to all options except outofstock.
4. See the out of stock products not show up in the editor preview.
5. Save and see the same on the front end. Out of stock products don't show up.

Migration of Product Collection and Product Button blocks to the new store() API #11558

1. Load a template that contains the Product Button blocks: ie, the /shop page.
2. Do some smoke testing and make sure there are no regressions and products can be added to the cart without issues.

Preserve shrinkColumns value when switching the layout type of Product Collection #11905

1. Go to Editor
2. Add Product Collection block
3. Enable "Responsive" option
4. Switch view from Grid to Stack and back to Grid - try both Inspector Controls and Toolbar option (red rectangles on the screenshot).
5. When switching back to Grid view, "Responsive" should be still ENABLED
6. Repeat with the option DISABLED

Enable shrink columns option in Product Collection by default #11821

Case 1: Default Product Collection

1. Go to Editor
2. Add Product Collection block
3. Expected: it has "Responsive" enabled by default

Case 2: Patterns

1. Go to Editor
2. Insert patterns:

• Product Collection Grid
• Product Collection Full Grid
• Product Collection Simple Grid
• Product Gallery

3. Make sure each of them has "Responsive" option enabled by default
4. Insert pattern Product Collection Rows - it has Stack view enabled by default and then "Responsive" is not available. Change the view from Stack to Grid
5. Make sure it has "Responsive" option enabled by default

Testing notes for the development team

1. While on trunk, add Product Collection block
2. It has "Responsive" option disabled by default
3. Enter "Code editor" and
4. Find and remove "shrinkColumns":false" - this step is to mimic the case when someone added the block before the option was even introduce
5. Save the post/template
6. Switch to this branch add/enable-shrink-column-in-product-collection-by-default
7. Refresh the Editor
8. Change number of columns - this step is to trigger setAttribute function
9. Expected: make sure this block still has the "Responsive" option DISABLED

Reorganise Columns controls and fix undefined problem in Product Collection settings #11937

1. Go to Editor
2. Add Product Collection block
3. Check Inspector Controls
4. "Columns" and "Responsive" look like in the AFTER image:

Before	After

6. Click three dots next to "Settings"
7. There's no undefined entry, but "Columns" and "Responsive" like in the AFTER image:

Before	After

[Product Collection] Fix: HTML Entity Decoding in Taxonomy Controls #11982

1. Create a new post & add Product Collection block to it.
2. From filters dropdown, Add “Taxonomies” filter. This will add “Product Categories” and “Product Tag” taxonomy filters to inspector control.
3. Inside “Product Categories” filter, search a category that contains an HTML Entity.
   1. If you don’t have any category with HTML entities, then you will need to either rename the existing category or create a new category with HTML entities. For example, “Electronics & Gadgets” or “Health & Wellness / Supplements”
   2. Verify that HTML entities show as expected.
4. Perform step 3 for “Product Tags” too.

Reviews by Product: fix reviews count not appearing in product selector #11976

1. Create a post or page.
2. Add the Reviews by Product block.
3. Verify the number of reviews next to the product names:

4. Using the browser Inspector (F12), select one of the checkboxes.
5. Verify the value of the aria-label shows the correct value (<product_name>, has <reviews_count> reviews). Ie: Hoodie with Logo, has 1 review.

Move CheckboxControl to components package and leave alias in checkout package #11662

1. Install WooCommerce Stripe Payment Gateway and set it up
2. Edit the Checkout page in the Site editor, select the "Terms and Conditions block" and set the "Require checkbox" option to true.
3. Ensure that order notes are enabled on the block. Ensure the checkboxes for these blocks all appear and the block as a whole renders OK.
4. As a logged-in user, add an item to your cart and go to the Checkout block in the front-end.
5. Ensure the "Use same address for billing" checkbox is available and works as intended.
6. Scroll down to the Terms and conditions, ensure the checkbox renders and works correctly.
7. Check the "Add a note to your order" box. Ensure it works and the textarea renders.
8. Check out using Stripe and ensure the "Save payment information to my account for future purchases." renders.
9. Check this box and check out, ensure checkout is successful.
10. Add an item to your cart again and go back to the Checkout block. Ensure your card was saved.
11. In the site editor, create a page and add the "All Products" and "Filter by Attribute" blocks.
12. On "Filter by Attribute" choose an attribute with multiple terms and ensure the checkboxes show up in the editor.
13. View this page on the front-end and ensure they render there, too.

Import CheckboxControl from a single place #12015

1. In Checkout, click the order note label.
2. It should not open Shipping as billing checkbox.

Update notice for default cart and checkout #11861

1. Create a test page and add the Cart block to it.
2. Open the settings sidebar.
3. Select the Cart block.
4. Verify that the notice "If you would like to use this block as your default cart, update your page settings." no longer appears as a warning (yellow border and background), but as info (blue border, white background).
5. Click the link "[update your page settings".
6. Verify that the notice "Page settings updated" becomes visible.
7. Repeat steps 1. until 6. with the Checkout block. In step 4., the message should say "... as your default checkout, ..." instead of "... as your default cart, ...".

Cart block

Before:

After:

Checkout block

Before:

After:

Validate coupon usage against customer id AND emails #11860

From logged in to logged out

1. Create a new coupon and limit its usage to 1 per customer.
2. Logged in, with an email you remember, place an order using that coupon, it should pass.
3. Logged out, using the same email, try placing an order with that coupon, you should get a top level error "coupon_name" was removed from the cart. Coupon usage limit has been reached.".

User email vs billing email

1. Create a new coupon and limit its usage to 1 per customer.
2. Logged in, with an user email you remember, place an order using that coupon, and a different billing email. It should pass.
3. Logged out, using the same user email (not the billing email), try placing an order with that coupon, you should get a top level error "coupon_name" was removed from the cart. Coupon usage limit has been reached.".

From logged out to logged in

1. Create a new coupon and limit its usage to 1 per customer.
2. Logged out, use the coupon with an email you remember, that email should belong to an existing user.
3. You should be able to place the order fine.
4. Logged in with the user that own that email.
5. Go to checkout, add the coupon, using the same email, try to place the order.
6. You should get a top level error.
7. Change your billing email to something else, add the coupon again.
8. Try to place the order, you should get an error.

General regression testing

1. Create a new coupon and limit its usage to 1 per customer.
2. Logged in, with an email you remember, place an order using that coupon, it should pass.
3. Logged in again, back to checkout, change your email, and try adding the coupon, you should get an inline error that you can't use the coupon.

fix: store notices always shows as an error type #11768 #11932

1. Go to the Cart block.
2. In the web dev console type: wp.data.dispatch('core/notices').createSuccessNotice( 'This is a success message, it should show in green!', { context: 'wc/cart' } )
3. See the "success" notice display in green.

Before	After

Switch to NoticeBanner component inside Store Notices Block placeholder #11920

1. Go to Appearance > Editor > Templates > Page: Cart.
2. Confirm the Store Notices Block has an informational notice appearance (blue banner).

Before	After

Improve readability of order note #11944

1. Add a product to your cart and go to the checkout.
2. Add an order note and place the order.
3. Verify that the order note is visible below the order detail table.
4. Verify that the order detail table has the same border radius as the order note section.

Before:

After:

Limit number of visible incompatible extensions in sidebar notice #11972

Note

Things to keey an eye on while testing:

• Number of visible extensions by default and within dropdown.
• String for exact 1 vs. more than 1 incompatible extension.
• Chevron changed direction based on opening/closing the dropdown.
• Link color is gray and link is underlined.
• The dropdown functionality works is cross-browser compatible.

Test with 2 extensions

1. Install and activate the following helper plugins:

• helper-plugin-01.zip
• helper-plugin-02.zip

2. Create a test page and add the Cart block.
3. Select the Cart block and open the sidebar.
4. Verify that the two incompatible extensions are visible.
5. Verify that no dropdown, to more extensions, is visible.
6. Repeat steps 2. until 5. using the Checkout block.

Test with 3 extensions

1. Install and activate the following helper plugins:

• helper-plugin-01.zip
• helper-plugin-02.zip
• helper-plugin-03.zip

2. Create a test page and add the Cart block.
3. Select the Cart block and open the sidebar.
4. Verify that the two incompatible extensions are visible by default.
5. Verify that the dropdown says 1 more incompatibility.
6. Click the dropdown link and verify that 1 incompatible extension is visible.
7. Repeat steps 2. until 6. using the Checkout block.

Closed:

Open:

Test with 10 extensions

1. Install and activate the following helper plugins:

• helper-plugin-01.zip
• helper-plugin-02.zip
• helper-plugin-03.zip
• helper-plugin-04.zip
• helper-plugin-05.zip
• helper-plugin-06.zip
• helper-plugin-07.zip
• helper-plugin-08.zip
• helper-plugin-09.zip
• helper-plugin-10.zip

2. Create a test page and add the Cart block.
3. Select the Cart block and open the sidebar.
4. Verify that the two incompatible extensions are visible by default.
5. Verify that the dropdown says 8 more incompatibilities.
6. Click the dropdown link and verify that 8 incompatible extension are visible.
7. Repeat steps 2. until 6. using the Checkout block.

Closed:

Open:

Decrease modal width #12003

1. Install and activate the following helper plugin: helper-plugin-01.zip
2. Create a test page and add the Cart block to it.
3. Select the Cart block and open the sidebar.
4. Click the button Switch to classic cart in the incompatible extension notice.
5. Verify that the model has a max-width of 480px.
6. Replace the Cart block with the Checkout block.
7. Select the Checkout block and open the sidebar.
8. Click the button Switch to classic checkout.
9. Verify that this model also has a max-width of 480px.

Before:

After:

Revert "Remove unused Add to Cart product element (#11948)" #12033

1. Add the Mini-Cart block and the All Products block to the same post or page.
2. View the post in the frontend.
3. Open the Mini-Cart.
4. Verify there is no JS error and the Mini-Cart contents (in case you have added a product to your cart) can be seen.

Implement the Block Hooks API to automatically inject the Mini-Cart block #11745

Currently, the application of this auto-injection only applies when Twenty Twenty-Four is active. In future iterations, we can expand the list of themes this supports as we test this out and/or eventually remove the restrictions once the Block Hooks API has more support.

General expectations for testing:

• The mini-cart block should only appear after the navigation block in header patterns or template parts.
• It should not appear in custom patterns or template parts.
• It should only be auto-injected when the Twenty Twenty-Four theme is active.
• You should never see two mini-cart blocks in a header pattern or template part (for example WooCommerce header patterns should be untouched).
• If the mini-cart block is moved or removed and the template part/pattern/template is saved, that should persist and not change on reload.
• The auto-injection should be reflected on the frontend.

With TT4 active

• First test without these changes and take note of header template parts and patterns that don't have the mini-cart block (via the site editor).
• With this work enabled, verify that header template parts and patterns have the mini-cart block injected (see GIFs below for expectations).

This is how things look before this PR's changes:

CleanShot.2023-11-10.at.16.00.38.mp4

And how things look after:

CleanShot.2023-11-10.at.16.03.19.mp4

• Validate the general expectations and verify they are true.