Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11325682/woocommerce-gutenberg-products-block.zip)
3. Insert in and make sure it shows as expected on the design.
### [Patterns] Add new Testimonials: 3 columns pattern ([#9159](https://github.com/woocommerce/woocommerce-blocks/pull/9159))
1. Create a new page or post
2. Make sure the `Testimonials 3 columns` pattern appears under the WooCommerce category dropdown.
3. Insert in and make sure it shows as expected on the design.
### Reinstate "Hide shipping costs until an address is entered" but disable it when using local pickup ([#8964](https://github.com/woocommerce/woocommerce-blocks/pull/8964))
1. Ensure you have some shipping rates set up in your store.
2. Disable WC Blocks local pickup (WooCommerce -> Shipping -> Local pickup).
3. Go to WooCommerce -> Shipping -> Shipping options, ensure you see the option "Hide shipping costs until an address is entered" with no additional text.
4. Check this box.
5. In an incognito window, add an item to your cart.
6. Go to the Cart block. Ensure you don't see any shipping rates shown.
7. Go to the Checkout block, ensure the shipping rate selector says "Shipping options will be displayed here after entering your full shipping address."
8. Enable WC Blocks local pickup and add a location (WooCommerce -> Shipping -> Local pickup)
9. Go to WooCommerce -> Shipping -> Shipping options, ensure you see the option "Hide shipping costs until an address is entered (Not available when using WooCommerce Blocks Local Pickup)" exactly as written.
10. Enter your address and ensure shipping rates show up.
11. Ensure this option is disabled, and turned off, ensure you cannot activate it by clicking the checkbox.
12. Close the incognito window from earlier and open a new one. Add an item to your cart.
13. Go to the Cart block. Ensure rates show up in the sidebar.
14. Go to the Checkout block, ensure the method selector (Shipping / Local Pickup) shows.
15. Ensure shipping rates show up when the "Shipping" method has been selected, even when no address is entered.
16. Place two orders, one using local pickup, the other using regular shipping.
17. Ensure these both appear correctly in the confirmation email and in the orders dashboard.
### Add theme-level global styles to Cart and Checkout block ([#8809](https://github.com/woocommerce/woocommerce-blocks/pull/8809))
1. Install and activate a block theme, e.g. [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/).
2. Create a test page with the Checkout block.
3. Create a test page with the Cart block.
4. Go to `WP Admin` » `Apperance` » `Editor.`
5. Open the Styles sidebar.
6. Adjust all `Typography ` and `Color` settings.
7. Go to the Checkout block page editor.
8. Confirm Global styles are applied successfully.
9. Go to the Cart block page editor.
10. Confirm Global styles are applied successfully.
11. Navigate to Cart and Checkout block page on the front-end.
12. Confirm Global styles are applied successfully.
### Fix filter by stock status dropdown ordering ([#9127](https://github.com/woocommerce/woocommerce-blocks/pull/9127))
1. Make sure you have at least one product with the stock status: "In stock", "Out of Stock" and/or "On backorder"
2. In the Editor add:
* Filter by Stock block - set it to Dropdown and Multiple
* Products block
3. In the frontend apply stock status filters: "In stock", "Out of Stock" and/or "On backorder"
### fix/8129: remove rounding the caused issue with UI ([#9118](https://github.com/woocommerce/woocommerce-blocks/pull/9118))
1. Use a wide screen (min. 1500px wide). Issue occurs on a smaller screens as well, but the position difference is smaller than the thumb radius, hence the glitch is "covered" by the thumb.
### add cursor:pointer to checkbox and radio fields ([#9102](https://github.com/woocommerce/woocommerce-blocks/pull/9102))
1. Add multiple shipping methods and enable multiple payment methods so that multiple radio input fields are shown on the Checkout page.
2. Add the Checkout block to the checkout page.
3. In the fix branch, observe all the radio/checkbox input fields on the Checkout page, hover over them and their associated labels and observe that the mouse cursor shows as a pointer.
4. Observe in the trunk branch, the cursor was shown as a mouse pointer instead.
### fix/8651: Use body background color as the Cart block sticky footer background color ([#9103](https://github.com/woocommerce/woocommerce-blocks/pull/9103))
1. Set your theme to a dark style (ie TT3 with Pilgrimage styling).
### decodeEntities for display in checkout TextInput ([#9117](https://github.com/woocommerce/woocommerce-blocks/pull/9117))
1. Add a product to the cart.
2. Go to the checkout.
3. Place the order with the following address:
```text
Address : Stationsplein 151
Country/Region : Nederland
Postal code : 5211 BP
City : 's-Hertogenbosch
```
4. Place another order.
5. Verify that the prefilled city name appears with the entities decoded as in the after picture.
### fix/8946: replace ToggleGroupControl with ToggleControl ([#9098](https://github.com/woocommerce/woocommerce-blocks/pull/9098))
1. Go to widgets > add the Mini cart block and enable "Open cart in drawer".
2. Add any product to cart from the shop page.
3. Observe and verify that the drawer opens up.
4. Now disable "Open cart in drawer", repeat step (2) and verify that the drawer doesn't open up.
5. Verify this behaviour is consistent between trunk and the fix branch.
| Before | After |
| ------ | ----- |
| <imgwidth="281"alt="Screenshot 2023-04-19 at 4 03 59 PM"src="https://user-images.githubusercontent.com/17757960/233048887-2a5e2f17-c36a-43f3-b1c4-f4913a685ede.png">|<imgwidth="281"alt="Screenshot 2023-04-19 at 4 03 27 PM"src="https://user-images.githubusercontent.com/17757960/233048778-e74b9550-4672-4113-9042-e6e6d394cd09.png">|
### fix/8363: Match editor "Place Order" button UI with frontend ([#9094](https://github.com/woocommerce/woocommerce-blocks/pull/9094))
1. Create a page or post;
2. Add the Checkout block to it;
3. On the editor, edit the Checkout block and make sure the "Place Order" UI match with the front-end Place Order button UI.
### Fix - "Order received" page does not display the payment method information. ([#9092](https://github.com/woocommerce/woocommerce-blocks/pull/9092))
1. Install the WooCommerce Block plugin on a WordPress site.
2. Create a product and add it to the site's shopping cart.
3. Proceed to checkout using the "Checkout" Block, which can be added to a page using the "WooCommerce" block category.
4. Complete the checkout process and confirm the order.
5. On the "Order received" page, observe that the payment method information is available.
6. Also check payment method on New Order Email, Order Listing page in wp-admin
### Get product by ID if there's more products returned from useStoreProducts ([#9079](https://github.com/woocommerce/woocommerce-blocks/pull/9079))
1. Go to Editor
2. Add All Products and Products blocks
3. Smoke test them, so that they display a correct data in the Editor and Frontend
4. During testing disable the "Inherit query from template" option for Products block and when disabled change the Advanced filters and make sure products are still loaded properly
### Product SKU: fix product SKU when added in the product meta block ([#8966](https://github.com/woocommerce/woocommerce-blocks/pull/8966))
1. Go to Appearance > Editor > Template > Single Product.
2. Remove the Product SKU block inside the Product Meta block.
3. Add the Product SKU block again.
4. Be sure that it is visible on the editor
5. On the frontend, visit a product with a defined SKU and ensure the block is visible.
### Pass proper data to On Sale badge when used in the scope of Product Image ([#9021](https://github.com/woocommerce/woocommerce-blocks/pull/9021))
1. Go to Editor
2. Add a Products block
3. Add "On Sale badge" block to the Products
4.**Expected:** There's no regression, so "Sale" badge appears in both places: Product Image and On Sale Badge
5. Save and go to frontend
6. Confirm they appear on the frontend as well
### Product Stock indicator: Add support for background color, margin, padding & various typography controls ([#8954](https://github.com/woocommerce/woocommerce-blocks/pull/8954))
#### Test using blocks sidebar
1. Create a new page or post
2. Add the "Products" block to your post.
3. Add Product Stock Indicator block as an inner block if not included already
4. Select the Product Stock Indicator block and open the block settings in the right sidebar.
5. Customize the block using the new styling options available:
5.1. Change the text color, background color, font family, font size, font appearance, line height, letter spacing, text decoration, letter case, margin, and padding under the appropriate settings sections.
6. Verify that the styling changes are immediately visible and correctly applied within the editor.
7. Save the post, then view it on the front end to ensure the styling changes are visible and applied correctly.
#### Test using Global Styles
1. Open the Global Styles sidebar by clicking the "Styles" button at the top right corner of the editor.
2. In the Global Styles sidebar, locate the "Product Stock Indicator" block.
3. Customize the block using the new styling options available under the "Product Stock Indicator" block in the Global Styles sidebar:
3.1. Change the text color, background color, font family, font size, font appearance, line height, letter spacing, text decoration, letter case, margin, and padding under the appropriate settings sections.
4. Verify that these applied correctly within editor & on frontend:
4.1. Create a new post
4.2. Add Products block
4.3. Add Product Stock Indicator block as an inner block if not included already
4.4. Check the Product Stock Indicator block in both the editor and on the front-end to ensure that the changes made through the Global styles UI are accurately applied:
4.4.1. In the editor, inspect Product Stock Indicator block & ensure it matches the values set in the Global styles UI.
4.4.2. Save the post & publish it. On frontend, inspect Product Stock Indicator block & ensure it matches the values set in the Global styles UI.
> Also, verify the changes in All Products block, which also uses Product Stock Indicator block.
### Use consistent and semantically correct HTML elements in the Cart and Checkout blocks ([#9065](https://github.com/woocommerce/woocommerce-blocks/pull/9065))
2. Within the post editor, verify that the `CART TOTALS` element, with the CSS class `.wc-block-cart__totals-title`, is using a `<span>` instead of an `<h2>`.
4. Within the post editor, verify that the `Order summary` element, with the CSS class `.wc-block-components-order-summary`, is using a `<div>` instead of an `<h2>`.
6. On the page with the Cart block, verify that the `CART TOTALS` element, with the CSS class `.wc-block-cart__totals-title`, is using a `<span>` instead of an `<h2>`.
7. On the page with the Checkout block, verify that the `Order summary` element, with the CSS class `.wc-block-components-order-summary`, is using a `<div>` instead of an `<h2>`.
### Mini Cart template part: give user customized template priority over theme template ([#9005](https://github.com/woocommerce/woocommerce-blocks/pull/9005))
0. With [TT3](https://github.com/WordPress/twentytwentythree/), add the Mini Cart block to your store header via Appearance > Editor.
1. Also in Appearance > Editor, make some edits to the Mini Cart template part and save it.
2. Verify the edits are visible in the frontend when you open the Mini Cart drawer.
3. Now, let's imagine TT3 releases an update which introduces a custom Mini Cart template part. To do so, install this ZIP as a theme (it's TT3 with a `parts/mini-cart.html` file): [twentytwentythree.zip](https://github.com/woocommerce/woocommerce-blocks/files/11200877/twentytwentythree.zip).
4. Verify that going to Appearance > Editor > Template Parts > Mini Cart shows the template you modified in step 1 (instead of the theme template).
5. Verify that in the frontend the Mini Cart drawer shows the template you modified in step 1 (instead of the theme template).
In other words, given that you created a custom template in step 1, you should never see the template from the theme.
### [Mini cart] Make the title customizable ([#8905](https://github.com/woocommerce/woocommerce-blocks/pull/8905))
_**Use Case 1**_
1. With the previous version of the plugin (or `trunk` branch), go to the Site Editor and clear the customizations (if any) on the `Mini Cart` template.
3. Add any customization (for example, change the colors of any button).
4. Update the plugin to this PR version (or go to this branch `6259/customize-mini-cart-title`).
5. Go to the frontend, open the `Mini Cart`, and check the title is still visible.
6. Go to the editor and make some customizations to the title. Save.
7. Check the customizations are applied in the editor and in the frontend.
_**Use Case 2**_
1. Go to the Site Editor and clear the customizations (if any) on the `Mini Cart` template.
2. Enter the `Mini Cart` template (wp-admin/site-editor.php?postId=woocommerce%2Fwoocommerce%2F%2Fmini-cart&postType=wp_template_part&canvas=edit).
3. Click on the `Mini Cart` title and make sure the `Mini Cart Title` block has two inner blocks: `Mini Cart Title Label` and `Mini Cart Title Items Counter`.
<imgwidth="335"alt="Screenshot 2023-03-30 at 09 27 07"src="https://user-images.githubusercontent.com/186112/228761302-f3970777-effc-483f-addf-dbb9c917acf9.png">
5. Select the `Mini Cart Title Label` and add some customizations on the settings sidebar (colors, typography).
6. Select the `Mini Cart Title Items Counter` and add some customizations on the settings sidebar (colors, typography).
7. Check the customizations are applied in the editor and in the frontend.
### Customer Account block: Fix padding for the block in the Editor ([#9009](https://github.com/woocommerce/woocommerce-blocks/pull/9009))
1. Log in to your WordPress dashboard;
2. Go to Appearance > Themes, and select a block theme (for example: Twenty-twenty three);
3. Go to Appearance > Site Editor;
4. Click the Edit button;
5. Click on the "+" icon to add a new block and search for "Customer Account" block in the search bar;
6. Click on the "Customer Account" block to add it to your page or post;
7. On the right side, click on the dropdown menu inside the Icon Options section;
8. Select the "Icon-only" option;
9. Check that the Customer Account block is displayed as an Icon and that it has some spacing around the icon
### Mini Cart block: fix slide in animation ([#9195](https://github.com/woocommerce/woocommerce-blocks/pull/9195))
1. Add Mini Cart to the Header.
2. Go to the frontend.
3. Add some products to cart.
4. Open Mini Cart.
5. Verify the Mini Cart slides in and animation finishes when the Mini Cart covers viewport.
6. Repeat steps 4 and 5 with a narrow view simulating mobile (<kbd>F12</kbd> and then <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd> in Firefox & Chrome).
7. (Only do this step if you are testing WC Blocks feature plugin) Go to Appearance > Editor > Template parts > Mini Cart and select the Mini Cart Contents block. Set it to a different width than its default and repeat steps 4-6.
