Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/13439996/woocommerce-gutenberg-products-block.zip)
## Testing Notes
### Make "Use same address for billing" visible by default [#11804](https://github.com/woocommerce/woocommerce-blocks/pull/11804)
1. Open an incognito/guest session
2. Add some to your cart
3. Go to checkout
4. Confirm that on entry, the "Use same address for billing" checkbox is visible.
This registers 2 additional schemas on the checkout route.
2. Try to place an order. You will get an error notice: `extensions > my-extension-test is not of type object.`
3. Open console and run this: `wp.data.dispatch( 'wc/store/checkout' ).__internalSetExtensionData( 'my-extension-test', { 'my_field': 'test' } );` This adds data for the first schema.
4. Place order again. **This time you'll see `extensions > my-extension-test-2 is not of type object.`**. This is what was fixed.
5. Open console and run this: `wp.data.dispatch( 'wc/store/checkout' ).__internalSetExtensionData( 'my-extension-test-2', { 'my_field': 'test' } );` This adds data for the second schema.
6. Place order again. It should go through successfully.
### Product Collection - New 'No Results' block with default UI [#11783](https://github.com/woocommerce/woocommerce-blocks/pull/11783)
#### Case 1: Normal
1. Create a new post & add Product Collection block
2. Verify that there is "No results" block, which UI should look like this:
3. Save the post & verify on Frontend that "No results" blocks work as expected:
- **Note:** This block will be only visible if there are no products to show on the frontend. You can achieve this by changing the filters in Inspector control such that there are no products to show for those filters. For example, try setting "Stock Status" filter to only "On backorder".
4. There are two links on frontend:
- **store's home:** Verify that "store's home" link takes you to the home page of the store.
- **clearing any filters:** This functionality is tested in Case 2.
#### Case 2: Testing `clearing any filters` link
1. Create a new post.
2. Add filters blocks, i.e. Filter by Price, Filter by Stock, Filter by Attribute, Filter by Rating, etc. You can use a pattern called "Product Filters" which contains all the filters.
3. Add Product Collection block & publish the post
4. Go to frontend:
- Change all filter block values so that there are no products for selected filters and no results block becomes visible. URL will look something like this: `http://store.local/162-2/?filter_stock_status=instock&filter_color=blue%2Cgray&query_type_color=or&min_price=29&max_price=32`
- Click on "clearing any filters" link & verify that it clears all filter values.
- *TO BE TESTED BY DEVELOPERS*
- You can also add some random query variables to URL, for example `&random=value`& URL will look something like this: `http://store.local/162-2/?filter_stock_status=instock&filter_color=blue%2Cgray&query_type_color=or&min_price=29&max_price=32&random=value`
- Verify that clicking on `clearing any filters` only removes query variables that are related to filters & doesn't remove this random query variable we added.
#### Case 3: Adding styles to "No results" block
1. Create a new post & add Product Collection block.
2. Select "No results" block & change styles using Inspector control, i.e.:
- Text, Background & Link color
- Typography: Font family, appearance, line height, decoration etc.
3. Verify the changes made to these styles are visible on Editor.
4. Publish the post & verify that changes are visible on Frontend as well.
#### Case 4: Adding/removing blocks
1. Create a new post & add Product Collection block.
2. In “No results” block:
1. Verify that you can remove existing blocks.
2. Verify that you can add new blocks to it.
3. Verify that the above changes are reflected correctly on the frontend.
Here is a [quick demo](https://github.com/woocommerce/woocommerce-blocks/assets/16707866/a5907a6f-8131-45f9-9c18-6f693cd02b5c)
### Move all totals components into components package [#11773](https://github.com/woocommerce/woocommerce-blocks/pull/11773)
1. Install [Extra Fees Plugin for WooCommerce](https://wordpress.org/plugins/woo-conditional-product-fees-for-checkout/)
2. Set it up like so and save your changes: (Please choose a product in your store if you don't have "Belt")
3. Set up taxes in your store and ensure some items are taxed.
4. Add these items, and the item with a fee from step 2 to your cart.
5. Go to the Cart block and see your "Extra fee" line.
6. Ensure all the other totals elements appear, e.g. Taxes, Subtotal, Shipping, and Total.
7. Go to the Checkout block and check the same elements appear correctly.
### Increase CSS specificity for local pickup address [#11772](https://github.com/woocommerce/woocommerce-blocks/pull/11772)
1. Go to `/wp-admin/admin.php?page=wc-settings&tab=shipping§ion=pickup_location`.
2. Enable local pickup option.
3. Add a pickup location.
4. Create a test page and add the Checkout block to it.
5. Go to the frontend and add a product to the cart.
6. Go to the test page with the Checkout block.
7. Select the shipping method `Local Pickup`.
8. Verify that the local pickup address is left aligned.
<table>
<tr>
<tdvalign="top">Before:
<br><br>
<imgwidth="688"alt="Screenshot 2023-11-15 at 00 14 00"src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/9bd1992d-c9b0-4e87-91fa-9a0cba038336">
</td>
<tdvalign="top">After:
<br><br>
<imgwidth="685"alt="Screenshot 2023-11-15 at 00 04 48"src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/0d7b497f-3139-4d5b-92be-31bffea9fbaf">
</td>
</tr>
</table>
### Fix strings in classic-checkout modal window [#11771](https://github.com/woocommerce/woocommerce-blocks/pull/11771)
1. Install and activate an incompatible extension e.g. [helper-plugin-1.zip](https://github.com/woocommerce/woocommerce-blocks/files/12701036/helper-plugin-1.zip)
2. Edit the checkout page. Ensure its using blocks, if its not, insert the checkout block and refresh
3. In the inspector you should see an incompatible extension notice. Click "Switch to classic checkout"
4. In the modal window, verify the next reads "If you continue, the checkout block will be replaced with the classic experience powered by shortcodes. This means that you may lose:"
### Fix hardcoded shop link in "Hero Product 3 Split" pattern [#11767](https://github.com/woocommerce/woocommerce-blocks/pull/11767)
1. Create a new page or post and insert the "Hero Product 3 Split" pattern.
2. Save, go to the front end and make sure the `Shop now` button takes you to the correct Shop page of your site.
### Move Button, StoreNotice and StoreNoticesContainer components into the components package [#11766](https://github.com/woocommerce/woocommerce-blocks/pull/11766)
1. Install the [WooCommerce Stripe Payment Gateway](https://wordpress.org/plugins/woocommerce-gateway-stripe/)
2. Add something to your cart.
3. Visit the Cart & Checkout and make sure all the buttons appear and function as expected.
5. Try to make a payment with a random stripe card (or an known invalid one).
6. You should see a notice appear in the payment section of the checkout.
### Refactor default editing state for customer address fields [#11765](https://github.com/woocommerce/woocommerce-blocks/pull/11765)
1. Go to admin and edit the checkout page
4. Switch between "Local Pickup" and "Shipping" in the preview. Ensure fields for shipping address/billing address remain visible.
5. Go to the frontend checkout as a guest user. Fields should start open.
6. Fill out the address fields and refresh the checkout. Fields should condense.
7. Toggle the "Use same address for billing" checkbox. Fields should be open.
8. Fill out the billing address using different data to shipping address then refresh the page. Address should be condensed.
### Move Panel to components package [#11698](https://github.com/woocommerce/woocommerce-blocks/pull/11698)
1. Install [Multiple Packages for WooCommerce](https://wordpress.org/plugins/multiple-packages-for-woocommerce/) and go to the settings for it (WooCommerce -> Settings) set the grouping option to Individual.
2. Ensure you have a few different shipping methods set up.
3. Add multiple items to your cart.
4. Go to the Cart block, ensure there are panels in the sidebar that can collapse/expand to show shipping options for each product.
### Remove author, sticky, parents attributes from the Product Collection block in patterns [#11673](https://github.com/woocommerce/woocommerce-blocks/pull/11673)
1. Go to Editor
2. Add following patterns
- Product Collection 3 Columns
- Product Collection 4 Columns
- Product Collection 5 Columns
- Product Collection: Featured Products 5 Columns
- Product Collection Full Grid
- Product Collection Grid
- Product Collection Rows
- Product Collection Simple Grid
- Product Gallery
3. Make sure they are rendered correctly and there's no errors/warnings
4. Save and go to frontend
5. Make sure they are rendered correctly and there's no errors/warnings
### Move TextInput, ValidatedTextInput and ValidationInputError to the @woocommerce/blocks-components package. [#11654](https://github.com/woocommerce/woocommerce-blocks/pull/11654)
1. Ensure your site has coupons enabled and one is added.
2. Add items to your cart and go to the Cart block.
3. Add a coupon to your cart using the "Add a coupon" link in the sidebar. Ensure the textbox to enter the coupon in works OK.
5. Remove the coupon and add another one. This time use an invalid coupon. The textbox should go into an error state with an error message beneath.
6. Do the same on the Checkout block.
7. On the Checkout block, ensure you can enter your address in the text inputs.
8. Ensure the country select works. Choose United States.
9. Ensure the state select works. Choose any state.
### Move phone to default fields section instead of being handled inline [#11651](https://github.com/woocommerce/woocommerce-blocks/pull/11651)
1. In the editor, disable the phone number. Make sure it's no longer visible in Checkout and you can place an order without it.
2. Make the phone optional, make sure it's visible but with an optional label, and that you can place an order without filling it.
3. Make the phone required. Make sure the field is visible without the optional label. Make sure you can't place an order without filling that field, and that errors are visible.
4. In the inspector, make sure the field type is tel and not text.
5. When you fill the phone field, and uncheck the "use shipping as billing" checkbox, you should see the same value in the billing one.
### Add to Cart with Options block: fix inconsistency between editor and frontend [#11614](https://github.com/woocommerce/woocommerce-blocks/pull/11614)
0. Make sure you are using a block theme.
1. In the editor, go to Appearance > Editor > Templates > Single Product. On the frontend, open the page of any simple product.
2. Verify the Add to Cart form looks the same in both views.
3. Test with WP 6.3 & Gutenberg disabled and WP 6.4 & Gutenberg enabled (you can use [this plugin](https://wordpress.org/plugins/wordpress-beta-tester/) to update to WP 6.4 before it's released).
4. Test with different block themes.
Theme | Before | After |
| --- | ------ | ----- |
Twenty-Twenty Four | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/adfe0986-b0fc-4bbb-a3ef-bf63c1dd8f1e) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/572d0c9f-8423-472c-889a-77152f806f75) |
Twenty-Twenty Three | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/f5809a80-e5bf-49a5-8fa3-ab95bc44a1dc) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/dddefa92-4d69-47d9-ba74-a7b852e9703b)
Twenty-Twenty Two | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/09fd26a9-9cca-4c5d-80b3-17be89b3fb8a) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/98165656-21c9-4fea-8c3d-8fe83e07544a)
### Migration of Product Collection and Product Button blocks to the new store() API [#11558](https://github.com/woocommerce/woocommerce-blocks/pull/11558)
1. Load a template that contains with Product Button blocks
2. Test that it keeps working as exactly as it is working on `trunk`
3. Thanks page should show without errors. Should see `Hello, this is order X`
### Validate coupon usage against customer id AND emails [#11860](https://github.com/woocommerce/woocommerce-blocks/pull/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.
4. Logged out, use the coupon with an email you remember, that email should belong to an existing user.
5. You should be able to place the order fine.
6. Logged in with the user that own that email.
7. Go to checkout, add the coupon, using the same email, try to place the order.
8. You should get a top level error.
9. Change your billing email to something else, add the coupon again.
10. 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.
@ -81,6 +81,40 @@ Release and roadmap notes available on the [WooCommerce Developers Blog](https:/
== Changelog ==
= 11.6.0 - 2023-11-20 =
#### Enhancements
- Product Collection - New 'No Results' block with default UI. [#11783](https://github.com/woocommerce/woocommerce-blocks/pull/11783)
- WWe have moved the TotalsItem, TotalsFees, Subtotal, Banner, StoreNotice, StoreNotices, Panel, TextInput, ValidatedTextInput and ValidationInputError components to the @woocommerce/blocks-components package. Previously these were available in @woocommerce/blocks-checkout . Your code will continue to work as we have added aliases to the new location. Despite this, it is recommended that you change your code to import this component from @woocommerce/blocks-components as the import from the checkout package will be deprecated in the future. [#11766](https://github.com/woocommerce/woocommerce-blocks/pull/11766) [#11698](https://github.com/woocommerce/woocommerce-blocks/pull/11698) [#11654](https://github.com/woocommerce/woocommerce-blocks/pull/11654) [#11773](https://github.com/woocommerce/woocommerce-blocks/pull/11773)
- Improve performance in patterns registration. [#11733](https://github.com/woocommerce/woocommerce-blocks/pull/11733)
- Patterns: remove unused author, sticky, and parents attributes from the Product Collection block in patterns. [#11673](https://github.com/woocommerce/woocommerce-blocks/pull/11673)
- Semantic enhancement to the position of a phone field in Checkout. [#11651](https://github.com/woocommerce/woocommerce-blocks/pull/11651)
- Migrate the Product Button to the new store() API of the Interactivity API.. [#11558](https://github.com/woocommerce/woocommerce-blocks/pull/11558)
- Product Collection: Add support for filtering products by featured status. [#11522](https://github.com/woocommerce/woocommerce-blocks/pull/11522)
#### Bug Fixes
- Make "Use same address for billing" visible by default. [#11804](https://github.com/woocommerce/woocommerce-blocks/pull/11804)
- Fix the order endpoint tax line items format. [#11796](https://github.com/woocommerce/woocommerce-blocks/pull/11796)
- Store API/Blocks Extensibility: Fix recursive extension schema validation. [#11792](https://github.com/woocommerce/woocommerce-blocks/pull/11792)
- Fix: Left align local pickup address. [#11772](https://github.com/woocommerce/woocommerce-blocks/pull/11772)
- Fix typo in classic checkout modal. [#11771](https://github.com/woocommerce/woocommerce-blocks/pull/11771)
- Fix hardcoded shop link in "Hero Product 3 Split" pattern. [#11767](https://github.com/woocommerce/woocommerce-blocks/pull/11767)
- Fix billing address condensed address state in the editor and in Firefox. [#11765](https://github.com/woocommerce/woocommerce-blocks/pull/11765)
- Related Products: Make the heading translated when in blockified Single Product template. [#11693](https://github.com/woocommerce/woocommerce-blocks/pull/11693)
- Add to Cart with Options block: fix inconsistency between editor and frontend styles. [#11614](https://github.com/woocommerce/woocommerce-blocks/pull/11614)
- Product Button: Improve the width and padding. [#11537](https://github.com/woocommerce/woocommerce-blocks/pull/11537)
- Fix the Layout for Shipping and Billing Address Forms in the Checkout Block [#11486](https://github.com/woocommerce/woocommerce-blocks/pull/11486)
- Minor fixes for PHP 8. [#11473](https://github.com/woocommerce/woocommerce-blocks/pull/11473)
- Product Button: always enqueue the store. [#11858](https://github.com/woocommerce/woocommerce-blocks/pull/11858)
- Fixed params passed to woocommerce_before_thankyou for block checkout. This should be an order ID, not an order object. [#11862](https://github.com/woocommerce/woocommerce-blocks/pull/11862)
- Enhanced validation for limited use coupons and guest users. [#11860](https://github.com/woocommerce/woocommerce-blocks/pull/11860)
#### Documentation
- Updated documentation for the onProcessingSetup observer. [#11751](https://github.com/woocommerce/woocommerce-blocks/pull/11751)