Testing notes and ZIP for release 8.7.0

Zip file for testing: woocommerce-gutenberg-products-block.zip

Feature plugin and package inclusion in WooCommerce

Improve visual consistency between block links (7340)

Screenshots

User Facing Testing

1. Create a regular page (Pages > Add New) and add the All Product block to it;
2. Add the Active Filters block;
3. Add the Filter By Attribute block;
4. Select an attribute from the Filter By Attribute block and apply it;
5. When the page reloads, check if the "Clear All" button (in the Active Filters block) and the "Reset" button (in Filter By Attribute block) have the following properties:

Font size: 14px Font weight: normal Text decoration: underlined

6. Hover the mouse over the "Clear All" button and the "Reset" button and make sure the text decoration is changed to none (no underline) while the other properties remain the same:

Font size: 14px Font weight: normal Text decoration: none

Update the titles of some inner blocks of the Cart block and remove the lock of the Cross-Sells parent block (7232)

Screenshots

Testing

User Facing Testing

1. Create a test page.
2. Add the Cart block.
3. Open the List View.
4. Verify that the following titles are visible:
   • Cart Cross-Sells
   • Cart Items
   • Cart Cross-Sells Products
   • Proceed to Checkout
5. Verify that the Cross-Sells parent block does not show a lock.

Add filter for place order button label (7154)

User Facing Testing

Verify that label filter works

1. Create a test page and add the Checkout block to it.
2. Install and activate the Simple Custom CSS and JS plugin.
3. Head over to /wp-admin/edit.php?post_type=custom-css-js and add the following JS code snippet:

const label = () => 'Pay now';
const {__experimentalRegisterCheckoutFilters} = window.wc.blocksCheckout;
__experimentalRegisterCheckoutFilters('custom-place-order-button-label', {
    placeOrderButtonLabel: label,
});

4. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
5. Verify that the button label says Pay now.

Verify that payment method label still works

1. Make sure that the code snippet from the previous test is deactivated.
2. Install and activate the Code Snippets plugin.
3. Head over to /wp-admin/admin.php?page=snippets and add the following PHP code snippet:

add_filter( 'woocommerce_should_load_paypal_standard', '__return_true' );

4. Head over to /wp-admin/admin.php?page=wc-settings&tab=checkout&section=paypal and select the options Enable PayPal Standard and Enable PayPal sandbox.
5. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
6. Select the payment method PayPal.
7. Verify that the button label says Proceed to PayPal.

Verify that default label still works

1. Make sure that the code snippet from the first test is still deactivated.
2. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
3. Select a payment method apart from PayPal, e.g. Credit Card (Stripe).
4. Verify that the button label says Place Order.

Verify that i18n of the default label still works

1. Make sure that the code snippet from the first test is still deactivated.
2. Head over to /wp-admin/options-general.php and select German as the Site Language.
3. Head over to /wp-admin/update-core.php?force-check=1 and fetch translations.
4. Head over to the frontend, add a product to the cart and open the page with the Checkout block.
5. Select a payment method apart from PayPal, e.g. Credit Card (Stripe).
6. Verify that the button label says Kostenpflichtig bestellen.

Exposed data related to the checkout through wordpress/data stores (6612)

User Facing Testing

The full instructions for testing this PR can be found here . At a minimum, we will need to smoke test by trying the different stripe failure modes

Add simple, large & two menus footer patterns. (7306)

User Facing Testing

1. In a new page or a template, go to the patterns tab and make sure all 6 patterns appear under the WooCommerce category dropdown.
2. Insert each one of the footer patterns, save and make sure they all look as expected on the GH discussions.

Add minimal, large, and essential header patterns (7292)

User Facing Testing

1. In a new page or a template, go to the patterns tab and make sure all 6 patterns appear under the WooCommerce category dropdown.
2. Insert each one of the header patterns, save and make sure they all look as expected on the GH discussions.

Add showRemoveItemLink as a new checkout filter to allow extensions to toggle the visibility of the Remove item button under each cart line item. (7242)

User Facing Testing

1. Install this test plugin to your site and activate it. It contains a filter to prevent the Remove item button showing up for a product called Beanie
2. Add a product named Beanie to your cart.
3. Go to the Cart block.
4. Ensure you cannot see a button to remove it from your cart.
5. View the docs/third-party-developers/extensibility/checkout-block/available-filters.md file and ensure it is good, and the new text we added to describe the filter makes sense.

Add support for a GT tracking ID for Google Analytics (7213)

User Facing Testing

1. Install the Google Analytics Integration Extension

2. Set up the extension with a GT-X type ID from your Google Analytics account. Google Analytics account is required to test this. This can be retrieved by going to the analytics dashboard and going to a data stream > Configure Tag Settings, see full instructions here

3. Install Google Analytics Debugger browser extension. It needs to be installed, but do not click it (debug mode should be off).

4. Go to the store and trigger some events using the All Products Block and Cart block. For example an add to cart event.

5. Google Analytics Debugger should indicate that an event was fired.

6. Instead of the Google Analytics Debugger we can also check the Browser Dev Tools > Network and confirm we see requests being sent to a URL similar to: https://region1.google-analytics.com/g/collect (region could vary)

Separate filter titles and filter controls by converting filter blocks to use Inner Blocks (6978)

User Facing Testing

Insert new blocks

1. Check out this PR, built.
2. Add a new page, add All Products, Active Filters, Filter by Price, Filter by Attribute, and Filter by Stock blocks to the page.
3. Check the newly inserted filter blocks, for each block, a wrapper block containing the heading and filter control blocks were inserted.
4. Try changing block settings and style, and see if they're updated on the front end.
5. See filter blocks work as expected.

Upgrade existing blocks

1. Check out trunk.
2. Add a new page, add All Products, Active Filters, Filter by Price, Filter by Attribute, and Filter by Stock blocks to the page.
3. Try changing block settings and style.
4. Check out this PR and build.
5. Edit the page created in step 2nd above.
6. See the upgrade notices for filter blocks as shown in this comment.
7. Click the upgrade button, see:

• The block is replaced by a filter wrapper block contain the heading and the filter block control blocks.
• The modified title remains.

8. Save the page, see all filter blocks continue functioning as expected on the front end.

StoreApi requests will return a Cart-Token header that can be used to retrieve the cart from the corresponding session via GET /wc/store/v1/cart. (5953)

User Facing Testing

1. Using a REST API client
2. Disabling basic auth
3. Adding something to the cart via POST /wc/store/v1/cart/add-item. Note down the value of the Cart-Token header.
4. Deleting or disabling cookies before requesting GET /wc/store/v1/cart
5. No items
6. Repeat this request with a header called Cart-Token and the value you noted earlier.
7. Cart response has items!

Fixed HTML rendering in description of active payment integrations (7313)

Screenshots

User Facing Testing

1. Install the WooCommerce Stripe Payment Gateway.
2. Head over to /wp-admin/admin.php?page=wc-settings&tab=checkout.
3. Activate various Stripe payment methods, e.g. Stripe SEPA Direct Debit.
4. Head over to the Checkout block in the editor.
5. Click on the Payments Options inner block.
6. Verify that all descriptions of active payment integrations render HTML.

Hide the shipping address form from the Checkout when the "Force shipping to the customer billing address" is enabled (7268)

User Facing Testing

1. Go to wp-admin/admin.php?page=wc-settings&tab=shipping&section=options page.
2. Enable the Force shipping to the customer billing address option and save the changes.
3. Go Checkout block, and confirm shipping address form is not visible.
4. Change the billing address, confirm the shipping address in the order summary gets changed and shipping methods are updated.

Fixed an error where adding new pages would cause an infinite loop and large amounts of memory use in redux (7256)

User Facing Testing

1. Open the editor on any page/create a new page.
2. View the console and ensure no errors about RangeError: Maximum call stack size exceeded or similar appear.
3. Add the Checkout Block, ensure the editor works and the block is displayed correctly
4. Make a new page and add the Cart block, ensure the editor works and the block is displayed correctly.
5. Do a test order using the Cart and Checkout blocks.

Ensure error messages containing HTML are shown correctly in the Cart and Checkout blocks (7231)

User Facing Testing

1. Check out branch 1287-gh-Automattic/woopay 2Update the code: In src/Checkout/PaymentsHandler.php, comment or remove the if around the exception:

 // if ( empty( $customer_id ) ) {
          $session_data      = WooPaySession::UNSANITIZED_get_data();
          $blog_checkout_url = esc_url( add_query_arg( 'skip_platform_checkout', 'true', $session_data['store_data']
                                                 ['blog_checkout_url'] ) );
          /* translators: %1$s opening anchor tag with url, %2$s closing anchor tag */
          $error_message = __( 'we were unable to process your payment. Please %1$s go back to the merchant store %2$s and
                                          log into WooPay again.', 'woopay' );
          $open_tag      = '<a href="' . $blog_checkout_url . '">';
          $close_tag     = '</a>';
          throw new InvalidSessionException(
	        sprintf( $error_message, $open_tag, $close_tag ),
          );
// }

3. Get a valid checkout_session by checking out with a valid email and filling in the OTP code.
4. Place an order and see the error message

Prevent locked inner blocks from sometimes displaying twice (6676)

User Facing Testing

1. Install the newsletter-test plugin to your site
2. Go to the Checkout block in your editor
3. Observe the I want to receive updates about products and promotions. checkbox in the customer information block. Ensure it only displays once.
4. Save the page and ensure the newsletter signup block is still only shown once.
5. Visit the block on the front-end and ensure the newsletter signup block only shows once.

Improve visual consistency between block links. (7357)

User Facing Testing

1. Create a regular page (Pages > Add New) and add the All Product block to it;
2. Add the Active Filters block;
3. Add the Filter By Attribute block;
4. Select an attribute from the Filter By Attribute block and apply it;
5. When the page reloads, check if the "Clear All" button (in the Active Filters block) and the "Reset" button (in Filter By Attribute block) have the following properties:

Font size: 14px Font weight: normal Text decoration: underlined

6. Hover the mouse over the "Clear All" button and the "Reset" button and make sure the text decoration is changed to none (no underline) while the other properties remain the same:

Font size: 14px Font weight: normal Text decoration: none

Fix a problem that causes an infinite loop when inserting Cart block in wordpress.com (7367)

User Facing Testing

1. Get a zip of this plugin (from below) and upload it to a wordpress.com website.
2. Go to the editor and try to insert Cart, it should work.
3. Make sure no block is missing.