woocommerce/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1140.md

# Testing notes and ZIP for release 11.4.0

Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/13127290/woocommerce-gutenberg-products-block.zip)

## WooCommerce Core

### Enhancements

#### Store Customization > Update the "Large Footer" pattern [11381](https://github.com/woocommerce/woocommerce-blocks/pull/11381)

1. Create a new page or post.
2. Insert the `Large Footer` pattern.
3. Check that it looks like the design.

| Before | After |
| ------ | ----- |
| <img width="1327" alt="Screenshot 2023-10-20 at 13 12 39" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/f5b3ed9c-3f42-4104-aab4-8b5a6de7fc96"> | <img width="1329" alt="Screenshot 2023-10-20 at 13 12 07" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/eb2da305-88c4-434d-8ef9-69166ddb3425"> |

#### [Store Customization] Update the Footer with 3 Menus pattern [11356](https://github.com/woocommerce/woocommerce-blocks/pull/11356)

1. Create a new page or post.
2. Insert the `Footer with 3 Menus` pattern.
3. Check the space between menu items is smaller than before.

| Before | After |
| ------ | ----- |
|<img width="1305" alt="Screenshot 2023-10-19 at 15 57 55" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/e911897d-764c-491a-8dae-8bd746342378">|<img width="1292" alt="Screenshot 2023-10-19 at 15 57 13" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/c4023cc8-9ee9-4cf8-a947-6358e0346bc6"> |

#### [Store Customization] Update the Social pattern [11355](https://github.com/woocommerce/woocommerce-blocks/pull/11355)

1. Create a new page or post.
2. Add the `Social: Follow us on social media` pattern.
3. Save and check that the social icons align to the left on a mobile screen size.

| Before | After |
| ------ | ----- |
| <img width="367" alt="Screenshot 2023-10-19 at 15 43 46" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/871bc990-30a7-4710-8f8e-93dc539b15a6"> |  <img width="378" alt="Screenshot 2023-10-19 at 15 42 34" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/59966839-9fa5-4c89-a97a-6e431e60e9a8"> |

#### [Store Customization] Re-enable the Product Hero 2 Column 2 Row pattern [11346](https://github.com/woocommerce/woocommerce-blocks/pull/11346)

1. Create a new page or post.
2. Insert the `Product Hero 2 Column 2 Row` pattern.
3. Check it has images and it renders correctly in the editor and the front end.

![CleanShot 2023-10-19 at 10 26 13@2x](https://github.com/woocommerce/woocommerce-blocks/assets/186112/186796fb-c05e-403b-91d0-aeb8e13fd466)

#### Product Collection - shrink columns to fit [11320](https://github.com/woocommerce/woocommerce-blocks/pull/11320)

1. Go to Editor
2. Add Product Collection block
3. "Shrink columns to fit" is disabled by default. Enable it
4. Label of columns control should change from "Columns" to "Max Columns"
5. Play with the "Max Columns" control and make sure it's respected in the Editor
6. Narrow down the screen width and make sure the number of columns decreases as the screen gets narrower
7. Save the Editor with couple of different "Max Columns" settings and go to frontend
8. Narrow down the screen width and make sure the number of columns decreases as the screen gets narrower
9. Verify frontend on major browsers

| Before | After |
| ------ | ----- |
|[before](https://github.com/woocommerce/woocommerce-blocks/assets/20098064/ae3e12e0-b894-46b8-9027-614da9a5fb51)|[after](https://github.com/woocommerce/woocommerce-blocks/assets/20098064/ecc7e75c-c787-486c-a000-8f951c52416e)|

#### [Store Customization] Adjust margins and paddings for the Featured Category Triple [11319](https://github.com/woocommerce/woocommerce-blocks/pull/11319)

1. Create a new page or post.
2. Add the `Featured Category Triple` pattern.
3. Check the margin and padding are right in the editor and the front end (check screenshots below).

| Before | After |
| ------ | ----- |
| <img width="1177" alt="Screenshot 2023-10-18 at 15 55 33" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/7092f04e-268e-4341-b87d-8577506c4c52"> | <img width="1214" alt="Screenshot 2023-10-18 at 15 51 15" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/90e78844-ad5b-4777-aa6c-91c5b95589cb"> |

#### Move Spinner to components package [11317](https://github.com/woocommerce/woocommerce-blocks/pull/11317)

1. Ensure you have two or more shipping zones set up on your site and each zone contains at least one method.
2. Add an item to your cart and go to the Checkout block.
3. Change country and observe the shipping options list.
4. Ensure the spinner shows while the shipping methods update.
5. Fill in your details and place the order.
6. On the "Place order" button ensure a spinner shows while it processes.

#### [Store Customization] Fix "Discount Banner" pattern [11315](https://github.com/woocommerce/woocommerce-blocks/pull/11315)

1. Create a new page or post.
2. Add the `Discount Banner` pattern.
3. Check that is centered on the page (like the "after" banner in the screenshot 👇).
4. Check it works well on mobile as well.

![CleanShot 2023-10-18 at 14 36 38@2x](https://github.com/woocommerce/woocommerce-blocks/assets/186112/00dfd99e-e997-49a3-b1c5-5397ccdd1b0f)

#### Move RadioControland RadioControlAccordion components to components package [11312](https://github.com/woocommerce/woocommerce-blocks/pull/11312)

1. Install [Multiple Packages for WooCommerce](https://wordpress.org/plugins/multiple-packages-for-woocommerce/) and go to WooCommerce > Settings > Multiple Packages. Set the "Group by" option to Product (individual).
2. Create at least 2 pickup locations (WooCommerce > Settings > Shipping > Local Pickup)
3. Add multiple products to your cart. Ensure you add one product more than once (so you have 2+ of a single item in the cart)
4. Visit the checkout
5. In the shipping options section, switch between different options and make sure the right option is selected and they are greyed out while the http request is in progress.
6. In the shipping method section, switch to Local Pickup
7. Select one of the other pickup locations and make sure the right option is selected.
8. Scroll down to the Payment Options section.
9. Change the payment method and make sure the right option is selected.
10. Fill in all the other details, place the order and make sure it goes through ok.

#### [Store Customization] Fix pattern spacing in homepage template 3 [11279](https://github.com/woocommerce/woocommerce-blocks/pull/11279)

1. Create a new page or post.
2. Add all the patterns mentioned above in order.
3. Check there is a margin of exactly 80px between all of them.

#### [Store Customization] Fix pattern spacing in homepage template 2 [11278](https://github.com/woocommerce/woocommerce-blocks/pull/11278)

1. Create a new page or post.
2. Add all the patterns mentioned above in order.
3. Check there is a margin of exactly `80px` between all of them.

#### [Store Customization] Fix pattern spacing in homepage template 1 [11268](https://github.com/woocommerce/woocommerce-blocks/pull/11268)

1. Create a new page or post.
2. Add all the patterns mentioned above in order.
3. Check there is a margin of exactly `80px` between all of them.

#### Add: menu-order orderby option for Product Attribute Terms route [11232](https://github.com/woocommerce/woocommerce-blocks/pull/11232)

1. Edit or create a new page contain Attribute Filter block.
2. See the attribute terms list sorted by custom order in the Editor.
3. Check the page on the front end, confirm the terms are also sorted by custom ordering.

#### Move FormattedMonetaryAmount to the components package [11230](https://github.com/woocommerce/woocommerce-blocks/pull/11230)

1. Set a product to be on sale in your store.
2. Install [Multiple Packages for WooCommerce](https://wordpress.org/plugins/multiple-packages-for-woocommerce/) and go to WooCommerce > Settings > Multiple Packages. Set the "Group by" option to Product (individual).
3. Set up local pickup (WooCommerce -> Settings -> Shipping -> Local Pickup) and add a couple of locations. Add a price to this.
4. Set up a couple of shipping options with a price.
5. Add the `Filter by Price` and `Products (Beta)` blocks to a page on your site.
6. Go to the page and ensure the Filter by Price block is displaying the correct range of product prices.
7. Check the product that you set to be on sale, it should be showing the correct sale price, and all other products should be showing the correct price too.
8. Add 2 products to your cart.
9. Go to the Cart block. Ensure all products listed in the order summary sidebar show the correct prices.
10. Ensure the shipping options shown in the Cart block show the correct prices.
11. Ensure all totals in the Cart block are show the correct price.
12. Go to the Checkout block.
13. Ensure the Local Pickup/Shipping selector shows the correct "From" price in the buttons
<img width="764" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/39906db8-9833-4a83-8275-11875a479ca1">

14. Select Shipping and scroll down to the shipping section. Ensure all shipping options show the correct price.
15. Change to Local Pickup and ensure the correct price is shown alongside the pickup location's name.
16. Ensure the totals are correct in the checkout sidebar.
17. Repeat steps 5, 6, 7 but with the `All Products block`.

#### Cart and Checkout block transforms for classic shortcodes [11228](https://github.com/woocommerce/woocommerce-blocks/pull/11228)

Prerequisite: Ensure you're already using cart and checkout blocks and you have an incompatible extension installed. You can use `WooCommerce Checkout Field Editor` as an example.

1. Go to WooCommece > Home. There should be a task list item "Review your shopper's checkout experience". Click it. You should be taken to the page editor.
2. Edit the cart page
    1. Edit the cart page
    2. Focus on the parent cart block and click its icon. You should be able to transform to "classic cart"
    3. Refresh the editor
    4. Focus on the cart block. See the incompatibility notice in the sidebar. Click the "switch to classic cart" button.
    5. Modal should open. Click switch. Block should be replaced.
    6. In the snackbar bottom left, click "undo". Should revert back to blocks.
3. Repeat above tests for **checkout block**. Pay attention to wording and ensure any references to "cart" are updated with "checkout" during the process.

#### Move Chip and RemovableChip to components package [11223](https://github.com/woocommerce/woocommerce-blocks/pull/11223)

1. Create a coupon
2. Add the Active Filters block to a page, add the Filter by Attribute block, the Filter by Stock block, and the Products (Beta) block too.
3. Visit the page, apply some filters, ensure the chips show up correctly in the Active Filters block. Remove the filters by pressing the `x` on the chip.
<img width="344" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/37a83029-e111-4115-b68e-8810e5ac2d57">

4. Visit the Cart block. Apply the coupon you created in step 1. Ensure the coupon shows correctly:
<img width="248" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/30638e26-b0ed-48e0-b8ed-21ff3e880b54">

5. Remove the coupon.
6. Proceed to the Checkout block and re-apply the coupon, ensure it shows correctly and ensure it can be removed.

#### Move CheckboxList and create new blocksComponents package [11214](https://github.com/woocommerce/woocommerce-blocks/pull/11214)

1. Add the `Filter by Rating`, `Filter by Attribute`, `Filter by Stock`, and `Products (Beta)` blocks to a page.
2. View the page and ensure all the checkboxes work correctly on each of the filter blocks.
3. View the Cart and then Checkout blocks. Ensure they render correctly.
4. Check out and ensure the Checkout form works correctly (Should not be affected by this PR but run this test anyway to make sure we didn't miss anything)

#### [Store Customization MVP] Add fallbacks to all the pattern titles, descriptions and buttons [11208](https://github.com/woocommerce/woocommerce-blocks/pull/11208)

1. Create a new page or post.
2. Insert all the patterns in the `dictionary.json` file.
3. Make sure they work as expected both on the editor side and on the front end.
4. Check your PHP error log and confirm you don't see any errors related to any pattern.

#### Make patterns full width and fix margin [11206](https://github.com/woocommerce/woocommerce-blocks/pull/11206)

##### Test the individual patterns

1. Create a new page or post.
2. Insert the blocks mentioned on the PR description.
3. Make sure they are `Full width` and look good on the editor and the front end.

**Test the homepage templates**
Compare the 3 templates show below to the designs: Mrk6SERPZ4KrFHSjM0a8TK-fi-5716_46688

| Homepage 1 | Homepage 2 | Homepage 3 |
|--------|--------|--------|
| ![homepage1](https://github.com/woocommerce/woocommerce-blocks/assets/186112/a0f6f306-1891-48ff-a219-44c55873cfc9)| ![homepage2](https://github.com/woocommerce/woocommerce-blocks/assets/186112/1221406c-95b6-4c8b-8f34-c2efc1d829f9)|![homepage3](https://github.com/woocommerce/woocommerce-blocks/assets/186112/6778ba76-1b20-4a84-a74f-c5ff0741f0bb)|

#### Product Collection 5 Columns pattern - Update title and price to be rows instead of columns [11205](https://github.com/woocommerce/woocommerce-blocks/pull/11205)

1. Create post or page.
2. Insert the `Product Collection 5 Columns` pattern and check that the title and price are stacked rather than side-by-side.
3. Ensure the spacing between the title and price is consistent with other Product Collection patterns. You can check by searching `Product Collection` under the patterns tab to find others.

| Before | After |
| ------ | ----- |
| ![Screenshot 2023-10-11 at 11 24 44](https://github.com/woocommerce/woocommerce-blocks/assets/8639742/704652b0-7fe4-4d0a-95a8-e06156444eb0) | ![Screenshot 2023-10-11 at 11 24 07](https://github.com/woocommerce/woocommerce-blocks/assets/8639742/a30a275b-ee03-4e72-9e97-d2164101de90) |

#### Product Collection: Featured Products 5 Columns - Remove no results block. [11198](https://github.com/woocommerce/woocommerce-blocks/pull/11198)

1. Create new page or post
2. add Product Collection: Featured Products 5 Columns pattern
3. Ensure the `wp:query-no-results` block isn't rendered and that the text `Add text or blocks that will display when a query returns no results.` isn't present.

| Before | After |
| ------ | ----- |
| ![Screenshot 2023-10-10 at 14 11 47](https://github.com/woocommerce/woocommerce-blocks/assets/8639742/fdd7f061-7411-4158-af11-6a226215ea45) | ![Screenshot 2023-10-10 at 14 09 50](https://github.com/woocommerce/woocommerce-blocks/assets/8639742/776f45a2-1cfc-431f-9df8-8b66175ca804) |

### Bug Fixes

#### Remove hardcoded queryIds from patterns that include Product Collection [11290](https://github.com/woocommerce/woocommerce-blocks/pull/11290)

1. Go to Editor
2. Add patterns:
    - Product Collection Full Grid
    - Product Collection Grid
    - Product Collection Rows
    - Product Collection Simple Grid
    - Product Gallery
3. Save and go to frontend
4. Change the pages of each Product Collection
5. Expected: Each Product Collection changes pages independently and layout of Product Collection doesn't change

#### Fix: Mini-Cart block shows wrong total if theres multiple installs on the same domain [11257](https://github.com/woocommerce/woocommerce-blocks/pull/11257)

1. Setup _Site B_ on domain.com/test and use USD as the currency
5. See the Site B Mini Cart works as expected.
1. Setup _Site A_ on domain.com, lets use EUR as the currency
3. Add something to the cart on _Site A_
4. Go to _Site B_ and **don't see** its mini-cart affected by site A.

#### Fix inconsistent border focus styles [11203](https://github.com/woocommerce/woocommerce-blocks/pull/11203)

1. Create a test page and add the Checkout block to it.
2. Go to the frontend and add a product to the cart.
3. Go to the checkout and select these fields: `Text input`, `Textarea`, `Radio input`, and `Checkbox input`.
4. Verify that the border focus styles of the `Text input` and `Textarea` are identical.
5. Verify that the border focus styles of the `Radio input` and `Checkbox input` are identical.


> **Important**
> Only the border focus styles of the `Radio input` and `Textarea` were adjusted in this PR, as the `Text input` and `Checkbox input` focus styles were already correct.

##### `Radio input`

<table>
<tr>
<td>Before:
<br><br>
<img width="808" alt="Screenshot 2023-10-11 at 15 58 06" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/11cdc9bc-e0b0-4934-ac3a-f52ee914ca8b">
</td>
<td>After:
<br><br>
<img width="823" alt="Screenshot 2023-10-11 at 15 54 25" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/536876ad-265e-40a4-bd29-301f3ece2936">
</td>
</tr>
</table>

##### `Textarea`

<table>
<tr>
<td>Before:
<br><br>
<img width="822" alt="Screenshot 2023-10-11 at 15 58 19" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/adf47ee7-1bc7-4516-8f05-e6034c327c6d">
</td>
<td>After:
<br><br>
<img width="826" alt="Screenshot 2023-10-11 at 15 54 43" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/08cf8a34-95fb-4235-8a29-27b74655164f">
</td>
</tr>
</table>

#### Product Gallery pattern: Use the Product Collection block [11194](https://github.com/woocommerce/woocommerce-blocks/pull/11194)

1. Create a page and add the `woocommerce-blocks/product-query-product-gallery` pattern.
2. Ensure that `Add "remove more" link text` doesn't appear in the editor above the price.
3. Ensure that it looks accurate on the frontend based on what you see in the editor.

#### Increase number of visible products when cart is empty [11182](https://github.com/woocommerce/woocommerce-blocks/pull/11182)

1. Create a testing site using [WordPress 6.4 Beta 2](https://wordpress.org/news/2023/10/wordpress-6-4-beta-2/).
2. Ensure that you are using the Twenty Twenty-Four theme.
3. Ensure that you have at least four products of which at least one of the most recent ones has a discounted price.
4. Create a test page and add the Cart block to it.
5. Switch the view from `Filled Cart` to `Empty Cart`.
6. Verify that four products are visible and that the sales badge is shown within the product image.
7. Go to the frontend.
8. Do not add a product to the cart and go directly to the test page with the cart block.
9. Verify that four products are visible and that the sales badge is shown within the product image.

<table>
<tr>
<td>Before:
<br><br>

<img width="1279" alt="Screenshot 2023-10-09 at 20 05 46" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/1c633575-b2ea-4389-9e87-fc98b014407a">

</td>
<td>After:
<br><br>

<img width="1280" alt="Screenshot 2023-10-09 at 20 00 50" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/58178674-6cfa-49e3-8172-95566bb192cc">

</td>
</tr>
</table>

> **Note**
> Depending on the screen size, the sales badge might overlap or be visible next to the product image.

#### Copy shipping phone to billing phone if sync is checked [10603](https://github.com/woocommerce/woocommerce-blocks/pull/10603)

1. In Checkout, make sure the "use shipping as billing" is filled.
2. Fill out the phone number.
3. Uncheck the checkbox, the value should be copied.
4. Update shipping, it shouldn't keep syncing.

#### Always show the Enable the shipping calculator on the cart page option in WC Admin [11421](https://github.com/woocommerce/woocommerce-blocks/pull/11421)

1. Go to `WooCommerce -> Settings -> Advanced` - set the Cart page to one containing the Cart Block. Save.
2. Go to `WooCommerce -> Settings -> Shipping -> Shipping Options` - confirm the `Enable the shipping calculator on the cart page` option is displayed.
3. Check the `Enable the shipping calculator on the cart page` option and save.
4. Add a product to the cart and go to the Cart page. Confirm the shipping calculator is displayed
5. Go to `WooCommerce -> Settings -> Shipping -> Shipping Options` - Uncheck the `Enable the shipping calculator on the cart page` option and save.
6. Go to the Cart page on the front-end. Confirm the shipping calculator is hidden.

| Before | After |
| ------ | ----- |
|     <img width="839" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/678f8311-d242-4b7c-a140-370db44a24a0">   |    <img width="686" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/14235870/b05b6ccc-6fc1-4909-8229-b777f289e2f9">   |

#### Add a safe guard that the variable is set before accessing it [11424](https://github.com/woocommerce/woocommerce-blocks/pull/11424)

1. Go to Editor
2. Add Product Collection block
3. Enter Code Editor mode
4. Find and remove `"shrinkColumns":false"` - it will mimic the case it's undefined

<img width="1050" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/d7d7af04-fd50-4d9d-abb7-d07e106d82af">

5. Save the page/template and go to frontend
6. Make sure there's no warning and Product Collection is rendered in non-responsive mode (when you narrow down the screen it will preserve the number of columns and finally collapse to single one for mobile view)

### Documentation

#### Add order and checkout order endpoint documentation [11157](https://github.com/woocommerce/woocommerce-blocks/pull/11157)

1. Check that the docs look complete

### Should be tested by the development team exclusively

#### Use the main tag in Cart and Checkout templates [11224](https://github.com/woocommerce/woocommerce-blocks/pull/11224)

1. Install and activate a blocks theme eg TT3/TT4
2. Go to `Appearance` > `Editor` > `Templates` > `Manage All Templates`
3. Ensure `Page: Cart` and `Page: Checkout` do not have customizations (or delete them if so), and enter edition mode for each one
4. On List View select `Group` after the `Header` (`Checkout Header` on `Page: Checkout` template), open `Block` > `Advanced` pane and ensure `HTML ELEMENT` is set to `<main>`
5. Do a test purchase, and on the cart and checkout pages verify the content is wrapped under a `<main> `tag

#### Update wording on checkout error message to try to prevent retries [10888](https://github.com/woocommerce/woocommerce-blocks/pull/10888)

1. Add a new snippet to your site:

```php
add_filter( 'wp_mail', function( $args ) {
  exit;
} );
```

2. Add an item to your cart and go to the Checkout block.
3. Place your order and verify the error shows with the correct wording.

| Before | After |
| ------ | ----- |
| <img width="774" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/3912039c-7453-4308-8cce-065db02c8b09"> | <img width="756" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5656702/f4ebf72b-eb0e-47f7-9b36-c3706099ab73"> |