700.md

Testing notes and ZIP for release 7.0.0

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

Feature Plugin

FSE: Enable global style for Attribute Filter Block (5557)

1. Upgrade to WordPress 5.9.
2. Install and enable the Twenty Twenty-Two theme.
3. Add the Filter Products By Attribute Block to a post.
4. On the right sidebar, personalize the styles of the block.
5. Go on the page and check if there are changes.
6. Reset to default using the Reset button from the different sections.
7. Go to Dashboard and select Appearance > Editor (beta). On top of the screen, select Home > Browser all templates > Single Post. When the page is loaded, add the block to the page.
8. On the Editor page click on the Styles icon on the right-top corner.
9. Verify that the Filter Products By Attribute Block is shown under the Blocks section. Personalize again the block.
10. Save your changes.
11. Go on the page created earlier and check if all styles are applied correctly.
12. Edit your previous post/page again.
13. Change again the styles.
14. Save your changes.
15. Check if these styles have priority over the styles from the Site Editor.

FSE: Enable global style for Sale Product Block (5565)

1. Install and enable the Twenty Twenty-Two theme.
2. Add the All Products Block to a post.
3. Go to Dashboard and select Appearance > Editor (beta).
4. On the Editor page click on the Styles icon on the right-top corner.
5. Verify that the On-Sale Badge is shown under the Blocks section. Click on the label. Personalize the block.
6. Save your changes.
7. Go on the page created earlier and check if all styles are applied correctly.

FSE: Revert template customization for WooCommerce templates (5746)

1. Ensure you have the latest WooCommerce, WordPress 5.9 and a block theme so that the FSE feature is enabled.
2. Go to Appearance > Editor and load Single Product template, customize the content and save the template.
3. In a separate tab ensure these changes are represented on the frontend, be careful not to reload the current tab.
4. Back in your Site Editor tab, using the navigation please navigate back to All Templates view. In the list of templates your customized Single Product template should indicate it has been customized.
5. Click the three dots on the right of this template and click "Clear Customizations" and wait until the action has been complete.
6. Click "Single Product" again to go back into this template, check that all customizations have been cleared.
7. In a separate tab ensure these changes are represented on the frontend, be careful not to reload the current tab.
8. Now in your Site Editor tab make another customization in this template and save it. Then using the navigation please navigate back to All Templates view. In the list of templates your customized Single Product template should indicate it has been customized.
9. Now click "Single Product" again to go back into the Site Editor, check that these customizations are showing still in the Site Editor.
10. Click the downward chevron in the top bar next to the block template title. It should show a "Clear Customizations" option here, click this and check that all customizations are reverted.
11. Now add a WooCommerce template (e.g. single-product.html) into your theme or download and install this version of TwentyTwentyTwo and test steps 1-10 again.

Checkout: Local state management for shipping options (5802)

1. Ensure your store has multiple shipping methods setup
2. Add something to your cart that requires shipping
3. Go to the cart block
4. Select a shipping option. Confirm the UI updates instantly, and the option remains checked once totals are updated
5. Open 2 tabs with a cart block in each
6. In tab 1, select a shipping method
7. In tab 2, change an item qty. Confirm that once the update completes, the correct shipping method is selected.

Cart and Checkout: Appender button overlap (5801)

1. Open up a page with the Checkout block in the editor
2. Select the “Wide Width” option
3. Confirm that the "Place Order" button and the "Add Block" button at the bottom of the block don't overlap
4. Confirm that in the right hand side bar, the total price doesn't overlap with the "Add block" button
5. Also check the Cart block that the insert inner block buttons don't overlap

Cart and Checkout: Fix button hover and focus states (5712)

1. Create test pages for cart, mini cart, and checkout blocks.
2. In each page check the hover and focus styles for the View my cart, Go to checkout, Proceed to Checkout, and Place Order buttons.
3. You can do the same test using the available default themes and the Storefront theme as well.

Product blocks: Fix ignoring redirection to cart after add (5708)

1. Go to WooCommerce Settings > Products > General and toggle Redirect to the cart page after successful addition
2. Add All Blocks and/or other products blocks.
3. Hit the Add to Cart button
4. If setting is enabled you should be automatically redirected to the cart

Checkout: Fix default attributes not being passed to the front-end (5732)

1. Add the Checkout block and select the Shipping Address in the editor.
2. Change the settings (try a few different, random settings) in the sidebar and ensure the block changes as expected.
3. Save the block and load it on the front-end and ensure the block is rendered as you expect based on the attributes you saved.
4. Go back to the editor and select the Checkout block as a whole, set the "Dark mode inputs" option to true.
5. Load the block in the front-end again and ensure the dark mode inputs are being used.

Checkout: Fix handling of orders without payments (5720)

1. Create a coupon for 100% of the order total.
2. Add items to cart.
3. Apply the coupon. The order total should be 0 and the payment section hidden during checkout.
4. Place the order. Confirm it goes through without errors.

TS conversion of several blocks (5668)

The following components have been converted to TypeScript, hence they benefit from a smoke test:

• base/components/ProductList
• base/components/FilterElementLabel
• base/components/FilterSubmitButton
• base/components/Form
• base/components/LoadMoreButton
• base/components/LoadingMask
• base/components/Pagination
• base/components/SortSelect

FSE: Add a “Remove Image” option to the Featured Category Block (5719)

1. Go to post or page
2. Add Featured Category block and add an image to it
3. Check the "Remove" button that appears in the toolbar
4. Click the "Remove" button and check it removes the image, save block and check frontend.

TT2: Fix Twenty Twenty-Two Products by Category Block item tile styling issues (5684)

1. Get the Twenty Twenty Two theme
2. Create a page with Products by category block with products on sale available
3. Visit the page
4. Confirm sale price on products on sale is not underlined
5. Add product to cart
6. Confirm View cart action is centred under the Add to cart button and not broken into two lines

---

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.