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

WooCommerce Core

Condensed Address Form Implementation 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.

Store Customization > Update aspect ratio, icons and default text for the Social: Follow us on social media pattern 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

Add horizontal padding to the Featured Category Triple pattern 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

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

Store Customization > Homepage Template 1: Review layout and spacing in between patterns 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.

Store Customization > Replace patterns based on the Products (Beta) block with an equivalent based on the Product Collection block 11134

Old Pattern	Replacement
3-Column Product Row	Product Collection 3 Columns
1:1 Image 4-Column Product Row	Product Collection 4 Columns
Minimal 5-Column Product Row	Product Collection 5 Columns
Featured Products 5-Item Grid	Product Collection: Featured Products 5 Columns

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:

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

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.

Store Customization > Add default image to Just Arrived pattern 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

Store Customization > Homepage Template 2: Review layout and spacing in between patterns 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.

Add data-price button attribute containing product price 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).

Expected value is not null

Store Customization > Wireframe and adjust width for the Just Arrived Full Hero pattern 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

Remove opinionated styles from the Hero Product 3 Split pattern 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

Store Customization > Add the Featured Category Cover Image pattern 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

Add fee ID/key to parent cart and checkout block 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

Update the sidebar notice we show for incompatible extensions 10877

Testing notes for the development team

Test updated text

1. Install and activate the Coinbase Commerce extension.
2. Install and activate the Paystack WooCommerce Payment Gateway extension. 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:

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:

Test display of incompatible extensions

1. Install and activate the following three helper plugins:
   • helper-plugin-1.zip
   • helper-plugin-2.zip
   • helper-plugin-3.zip
2. Create a test page and add the Checkout block to it.
3. Open the settings sidebar, if not already open.
4. Verify that the incompatibility notice lists the A → Incompatible Extension, Coinbase, N → Incompatible Extension , Paystack and Z → Incompatible Extension extensions:

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.

Before:

After:

Fix: Store Notices block breaks page editors 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

Store Customization > Ensure the Just Arrived Full Hero pattern can have an AI selected image assigned to it 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

Store Customization > Fix the Testimonials 3 Columns pattern 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

Pattern: fetch product id on the JS side 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

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.

Icon should use current color on checkout error 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

Single Product block: Redirect to the cart page after successful addition setting isn't respected 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.