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

# Testing notes and ZIP for release 11.3.0

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


## WooCommerce Core

### Condensed Address Form Implementation [11167](https://github.com/woocommerce/woocommerce-blocks/pull/11167)

#### As a logged out guest customer

1. Add something to cart and then go to checkout
2. Notice the address form is shown
3. Fill out address. Wait for totals to update.
4. Refresh the page. Condensed address component should be visible.

#### As a logged in user who has checked out before (has an address)

1. Repeat above tests. Condensed address component should be visible upon entry to checkout.
2. Click "edit" on the condensed shipping address. Form should be shown instead.
3. Uncheck "use shipping for billing". Billing address form should be shown.
4. Change some item of billing address data.
5. Refresh the page.
6. Condensed billing address should be shown.

![Screenshot 2023-10-06 at 17 15 21](https://github.com/woocommerce/woocommerce-blocks/assets/90977/06621207-9ab6-4e75-8b04-e2c8e532971e)

### Store Customization > Update aspect ratio, icons and default text for the Social: Follow us on social media pattern [11161](https://github.com/woocommerce/woocommerce-blocks/pull/11161)

1. Create a new post
2. Insert the **Social: Follow us on social media** pattern
3. Make sure it is correctly rendered both on the editor side and on the front end. The images should all be with a square format.
4. Make sure the icons have the color set as primary.

| Before | After |
| ------ | ----- |
|  <img width="1163" alt="Screenshot 2023-10-06 at 10 39 06" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4d8c4dfc-9ade-4070-89cd-1bf8bbd2f538"> | <img width="1158" alt="Screenshot 2023-10-06 at 10 50 19" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/5361b577-9c5c-4bff-9273-b564a039dc31">  |

### Add horizontal padding to the Featured Category Triple pattern [11160](https://github.com/woocommerce/woocommerce-blocks/pull/11160)

1. Create a new page or post.
2. Insert the `Featured Category Triple` pattern.
3. Check if there's a padding left and right of the pattern, both in the editor and the front end.

### Remove placeholder and pagination [11145](https://github.com/woocommerce/woocommerce-blocks/pull/11145)

1. Create a new page or post.
2. Insert the `Product Collection 3 Columns`, `Product Collection 4 Columns`, `Product Collection 5 Columns`, and `Product Gallery` patterns.
3. Check they don't have the pagination or the no results blocks.
4. Check the image's aspect ratio is portrait (height > width).

| Before | After |
| ------ | ----- |
| <img width="1175" alt="before" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/cc9daafe-52ee-4f23-a852-ca33c46173b1"> | <img width="1168" alt="after" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/58956139-c68b-4fa2-974e-9e59ed9e5696"> |

### Store Customization > Homepage Template 1: Review layout and spacing in between patterns [11144](https://github.com/woocommerce/woocommerce-blocks/pull/11144)

1. Create a new page or post and insert all the patterns shown in the screenshot below 👇
- `Minimal 5-column products row` corresponds to `Product Collection 5 Columns`
2. Make sure the design is the same and the spacing between patterns matches.

<img width="524" alt="Screenshot 2023-10-02 at 17 39 07" src="https://user-images.githubusercontent.com/15730971/272015191-e07193cc-07e2-4a3e-b88e-29f4654850db.png">

### Store Customization > Replace patterns based on the Products (Beta) block with an equivalent based on the Product Collection block [11134](https://github.com/woocommerce/woocommerce-blocks/pull/11134)

| Old Pattern | Replacement |
| ------ | ----- |
|  3-Column Product Row <img width="686" alt="Screenshot 2023-10-04 at 17 12 47" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/2c18c4ba-d75a-43b2-aa8d-7e7734363655"> |  Product Collection 3 Columns  <img width="1227" alt="Screenshot 2023-10-04 at 17 13 37" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/6e842ad8-b163-4c02-9900-c6400a039960"> |
| 1:1 Image 4-Column Product Row <img width="685" alt="Screenshot 2023-10-04 at 17 14 25" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/120b128d-b31d-42df-a7de-db128840a9ae"> |  Product Collection 4 Columns <img width="1233" alt="Screenshot 2023-10-04 at 17 14 59" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/5c95339e-0acb-451d-95f5-966b0c22506a"> |
| Minimal 5-Column Product Row <img width="688" alt="Screenshot 2023-10-04 at 17 15 54" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4b405ace-ef43-4c70-aa0e-0ce9ed268e4e"> |  Product Collection 5 Columns <img width="1229" alt="Screenshot 2023-10-04 at 17 16 32" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/cbfce4ca-cdf6-440d-86e2-f3f44a18e373">  |
|  Featured Products 5-Item Grid  <img width="1215" alt="Screenshot 2023-10-04 at 17 17 40" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/127ccbf4-bbf8-4939-96d4-a97dc9125d26"> |  Product Collection: Featured Products 5 Columns  <img width="1220" alt="Screenshot 2023-10-04 at 17 18 14" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4703a9df-6ab6-4970-9dbb-f2f35414499f"> |

1. Create a new post
2. Insert the following patterns: Product Collection 3 Columns, Product Collection 4 Columns, Product Collection 5 Columns, Product Collection: Featured Products 5 Columns
3. Make sure all of them are using the Product Collection block for rendering in the editor:

<img width="1995" alt="Screenshot 2023-10-04 at 17 23 05" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/9d63321a-fad2-41de-835b-2490ce7f9d27">

4. Save and head over to the front end: make sure things are working as expected and the designs match the ones displayed on the screenshots in this PR.

### Store Customization > Homepage Template 3: Review layout and spacing in between patterns [11131](https://github.com/woocommerce/woocommerce-blocks/pull/11131)

1. Create a new page or post and insert all the patterns shown in the screenshot below 👇 (`Featured Products 5-Item Grid` corresponds to `Product Collection: Featured Products 5 Columns`)
2. Make sure the design is the same and the spacing between patterns matches.

<img width="524" alt="Screenshot 2023-10-02 at 17 39 07" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/b72469a2-5b03-4193-b0fb-e1c0eb0e3e24">

### Store Customization > Add default image to Just Arrived pattern [11130](https://github.com/woocommerce/woocommerce-blocks/pull/11130)

1. Create a new post and add the pattern "Just Arrived Full Hero"
2. Check that it looks like the below screenshots on both desktop and mobile viewports both in the editor and on the frontend.

| Desktop | Mobile |
| ------ | ----- |
| ![Screenshot 2023-10-04 at 14 21 14](https://github.com/woocommerce/woocommerce-blocks/assets/8639742/321440db-4be3-4691-af48-427edbe60488) | ![Screenshot 2023-10-04 at 14 21 28](https://github.com/woocommerce/woocommerce-blocks/assets/8639742/90b55b88-e7da-4555-b25e-480ad4474a22) |

### Store Customization > Homepage Template 2: Review layout and spacing in between patterns [11129](https://github.com/woocommerce/woocommerce-blocks/pull/11129)

1. Create a new page or post and insert all the patterns shown in the screenshot below 👇
- `1:1 image 4-column products row` corresponds to `Product Collection 4 Columns`.
- `Minimal 5-column products row` corresponds to `Product Collection 5 Columns`.
2. Make sure the design is the same and the spacing between patterns matches.

<img width="449" alt="Screenshot 2023-10-02 at 17 36 50" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/56232ac8-8917-4a7f-96f0-058d88aa11e5">

### Add data-price button attribute containing product price [11117](https://github.com/woocommerce/woocommerce-blocks/pull/11117)

1. Add a page with a Products (Beta), Product by Category or Products by Attribute block on it.
2. Install Pinterest Tag Helper extension into your browser (I use Chrome for that matter).
3. Navigate to the page with the added block and click Add to Cart button.
4. See an AddToCart event inside Pinterest Tag Helper has no value attribute value (it has it set to null, instead of a product price).

![240404349-7dbb2c93-2fd4-4820-ac59-87e3cee11075](https://github.com/woocommerce/woocommerce-blocks/assets/9010963/f42032c7-a971-4f52-a6ff-d3336e9e1182)

Expected value is not `null`

<img width="1335" alt="All_Products_–_WordPress_Pinterest" src="https://github.com/woocommerce/woocommerce-blocks/assets/9010963/1d023231-3807-4bdc-b641-9d51ae4830cd">

### Store Customization > Wireframe and adjust width for the Just Arrived Full Hero pattern [11115](https://github.com/woocommerce/woocommerce-blocks/pull/11115)

1. Create a new post
2. Insert the **Just Arrived Full Hero** pattern
3. Add an image to it and save
4. Make sure the styles match what is on the screenshots of this PR
5. Save the post and check the front end: make sure things are working as expected as well

| Desktop | Mobile |
| ------ | ----- |
| <img width="1214" alt="Screenshot 2023-10-03 at 17 58 13" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/c928007f-ede0-419d-b528-e24ad50d228a"> |  <img width="385" alt="Screenshot 2023-10-03 at 18 00 10" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/2883b7d8-8b60-4c07-9baa-8c69ec5430fa"> |

### Remove opinionated styles from the Hero Product 3 Split pattern [11110](https://github.com/woocommerce/woocommerce-blocks/pull/11110)

1. Insert the `Hero Product 3 Split` pattern into your page.
2. Go to Site Editor > Styles and select various color palettes.
3. Ensure the patterns style changes color based on the selected preferences.
4. Test in various block themes to ensure it works as expected.

| Before | After |
| ------ | ----- |
| <img width="1199" alt="Screenshot 2023-10-03 at 15 29 20" src="https://github.com/woocommerce/woocommerce-blocks/assets/8639742/7e0596c6-9873-4ac5-af98-14e014722008"> | <img width="1217" alt="Screenshot 2023-10-03 at 15 27 59" src="https://github.com/woocommerce/woocommerce-blocks/assets/8639742/960ac65f-468f-42f3-99be-1da28b9a20a5"> |

### Store Customization > Add the Featured Category Cover Image pattern [11109](https://github.com/woocommerce/woocommerce-blocks/pull/11109)

1. Create a new post
2. Insert the **Featured Category Cover Image** pattern
3. Make sure the styles match what is on the screenshots of this PR
4. Save the post and check the front end: make sure things are working as expected as well

| Desktop | Mobile |
| ------ | ----- |
| <img width="1214" alt="Screenshot 2023-10-03 at 15 39 56" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/cc1a509b-0e4f-448a-8483-0844d9d0068d"> | <img width="377" alt="Screenshot 2023-10-03 at 15 39 45" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/68317e43-211c-464e-a511-7a3368a5cbab"> |

### Add fee ID/key to parent cart and checkout block [11054](https://github.com/woocommerce/woocommerce-blocks/pull/11054)

#### Testing notes for the development team

1. add a fee to you cart, for example by using this code in your functions.php
```
add_action( 'woocommerce_cart_calculate_fees', function( $cart ) {
	$cart->add_fee( 'Fee 0', 5, true );
	$cart->add_fee( 'Fee 2', 10, true );
	$cart->add_fee( 'Fee 3', 50, true );
});
```
2. go to your cart or checkout block
3. check the CSS classes of the fee elements with your browser developer tool

![screen](https://github.com/woocommerce/woocommerce-blocks/assets/2648926/e89c27de-6306-4dcf-84cc-ab0a7a297988)

### Update the sidebar notice we show for incompatible extensions [10877](https://github.com/woocommerce/woocommerce-blocks/pull/10877)

#### Testing notes for the development team

##### Test updated text

1. Install and activate the [Coinbase Commerce extension](https://wordpress.org/plugins/coinbase-commerce/).
2. Install and activate the [Paystack WooCommerce Payment Gateway extension](https://wordpress.org/plugins/woo-paystack/). You should check `Enable Paystack` in its settings.
3. Create a test page and add the Checkout block to it.
4. Open the settings sidebar, if not already open.
5. Verify that the incompatibility notice lists the `Coinbase` and `Paystack` extensions:
<img width="280" alt="Screenshot 2023-09-22 at 19 57 49" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/f2779b98-0283-48fb-a1e5-fd43aa82bb46">

> **Note**
> If the compatibility notice does not appear, then open the inspector, go to `Application » Local Storage`, select your local site, remove the entry `wc-wc-blocks_dismissed_incompatible_payment_gateways_notices`, and refresh the page:
<img width="1279" alt="Screenshot 2023-09-22 at 19 58 40" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/0d34d3c9-9330-42cd-8242-1bb95a08ba1e">

##### Test display of incompatible extensions

1. Install and activate the following three helper plugins:
    - [helper-plugin-1.zip](https://github.com/woocommerce/woocommerce-blocks/files/12701036/helper-plugin-1.zip)
    - [helper-plugin-2.zip](https://github.com/woocommerce/woocommerce-blocks/files/12701039/helper-plugin-2.zip)
    - [helper-plugin-3.zip](https://github.com/woocommerce/woocommerce-blocks/files/12701041/helper-plugin-3.zip)
2. Create a test page and add the Checkout block to it.
4. Open the settings sidebar, if not already open.
5. Verify that the incompatibility notice lists the `A → Incompatible Extension`, `Coinbase`, `N → Incompatible Extension
`, `Paystack` and `Z → Incompatible Extension` extensions:
<img width="277" alt="Screenshot 2023-09-22 at 20 12 20" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/f86e5ce1-6a1b-4ffa-8c24-a8b88fabfe7a">

##### Test closing of sidebar notice

1. Ensure that you executed the previous test case.
2. Dismiss the incompatibility sidebar notice by clicking on the X in the upper-right corner.
3. Refresh the page and verify that the incompatibility sidebar notice remains hidden.

<table>
<tr>
<td valign="top">Before:
<br><br>
<img width="279" alt="Screenshot 2023-09-22 at 20 23 22" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/c8be0e82-fddc-46f2-a8f7-eabda60e3d31">
</td>
<td valign="top">After:
<br><br>
<img width="277" alt="Screenshot 2023-09-22 at 20 12 20" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/f86e5ce1-6a1b-4ffa-8c24-a8b88fabfe7a">
</td>
</tr>
</table>

### Fix: Store Notices block breaks page editors [11165](https://github.com/woocommerce/woocommerce-blocks/pull/11165)

1. Edit a page.
2. Add the Store Notices Block.
3. Try Saving the page.
4. See no error. The page is saved successfully.

| Before | After |
| ------ | ----- |
|    <img width="957" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5423135/c2a23518-5ccc-4aee-969c-311c58aa2eaf">    |   <img width="953" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5423135/7c380762-7ca1-466d-a03a-8e6c2a3682f1">    |

### Store Customization > Ensure the Just Arrived Full Hero pattern can have an AI selected image assigned to it [11159](https://github.com/woocommerce/woocommerce-blocks/pull/11159)

1. Access the JN install with the credentials provided here > p1696409554974299-slack-C053716F2H2
2. Create a new post
3. Insert the **Just Arrived Full Hero** pattern
4. Make sure it is correctly rendered both on the editor side and on the front end.

PS: the background image doesn't necessarily have to match what is displayed in the screenshot below; those are dynamically changed depending on the business description.

| Before | After |
| ------ | ----- |
| <img width="1207" alt="Screenshot 2023-10-06 at 09 55 46" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/a79aa838-1df2-470a-a00b-00776146e87a"> | <img width="1208" alt="Screenshot 2023-10-06 at 09 55 12" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/94170c78-463b-4eb9-be32-33dea06f1261"> |

### Store Customization > Fix the Testimonials 3 Columns pattern [11158](https://github.com/woocommerce/woocommerce-blocks/pull/11158)

#### Testing notes for the development team

1. Create a new post
2. Insert the Testimonials 3 Columns pattern
3. Make sure it works 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 this pattern in particular.

| Before | After |
| ------ | ----- |
|  <img width="1278" alt="Screenshot 2023-10-06 at 08 45 52" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/ce3eadb2-9109-4649-b4df-0980bbdb4497"> |  <img width="1253" alt="Screenshot 2023-10-06 at 08 46 02" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/53db772f-653e-4fc8-b5bb-d6515b2dc8cf"> |

### Pattern: fetch product id on the JS side [11138](https://github.com/woocommerce/woocommerce-blocks/pull/11138)

1. Open the post editor.
2. Add the `Product hero` and `Product details listing` patterns.
3. Ensure that a product is visible.

### Force 100% width for combobox in checkout block [11133](https://github.com/woocommerce/woocommerce-blocks/pull/11133)

1. Install and activate the Twenty Twenty-Three theme.
2. Install and activate the Gutenberg plugin.
3. Create a test page and add the Checkout block.
4. Edit the page and verify that the Country/Region and State fields are full width.

![Screenshot 2023-10-04 at 15 14 24](https://github.com/woocommerce/woocommerce-blocks/assets/90977/f42f91c8-d235-40ba-8571-1d0714958ae4)

### Icon should use current color on checkout error [11127](https://github.com/woocommerce/woocommerce-blocks/pull/11127)

1. With TT3 go to Appearance > Editor, edit one template and open the styles sidebar. Select a dark style variation, like Pilgrimage.
2. In the frontend, add a product to your cart and go to the Checkout page with the Checkout block.
3. In the admin, mark that product as out of stock.
4. Reload the Checkout page.
5. Icon color should match text.

| Before | After |
| ------ | ----- |
|  ![Screenshot 2023-10-04 at 12 31 18](https://github.com/woocommerce/woocommerce-blocks/assets/90977/63fd3b2d-31c3-4666-aa2b-c5620204ca6f) |  ![Screenshot 2023-10-04 at 12 36 12](https://github.com/woocommerce/woocommerce-blocks/assets/90977/874a66cc-4ab7-4434-8884-b96ea041784d) |

### Single Product block: Redirect to the cart page after successful addition setting isn't respected [11151](https://github.com/woocommerce/woocommerce-blocks/pull/11151)

#### Test 1: Redirect shopper to the cart page after successful addition when setting is enabled
1. Enable redirects to the cart page with the setting under WooCommerce > Settings > Products > General > Add to cart behaviour > Check - Redirect to the cart page after successful addition
2. Create a product and a page with an FSE theme.
3. Add the product to the page with the Single Product block.
4. View the page and click "Add to cart". Make sure the shopper is redirected to the Cart page and the product was correctly added to the cart

#### Test 2: Keep shopper at the same page when setting is disabled
1. Enable redirects to the cart page with the setting under WooCommerce > Settings > Products > General > Add to cart behaviour > Check - Redirect to the cart page after successful addition
2. Create a product and a page with an FSE theme.
3. Add the product to the page with the Single Product block.
4. View the page and click "Add to cart". Make sure the shopper is NOT redirected to the Cart page;
5. Visit the Cart page and make sure the product was correctly added to the cart.