Testing notes and ZIP for release 7.6.0

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

Feature plugin and package inclusion in WooCommerce

Featured Category: Add background color option. (6368)

Prerequisites:

• Use the latest WordPress version (we want to use the site editor / Global Styles in testing).
• Install & use a block theme e.g. Twenty Twenty-Two.
• Deactivate the Gutenberg plugin for testing as we're currently observing this issue.

1. Create a new post/page.
2. In the editor, add two Featured Category blocks.
3. For each block select the same category, it should have a product picture.
4. Select each block and use the Replace button in the block toolbar to add a product image smaller than the Featured Category block (for an example see screenshots above).
5. Now select the first Featured Category block. In the editor sidebar's Color section of the block select a Background color. The background color should be visible in the parts not covered by the product image.
6. Save your post/page.
7. In the admin dashboard navigate to Appearance > Editor (/wp-admin/site-editor.php).
8. Open the Styles sidebar by clicking the round Styles icon in the top right of the editor.
9. In the Styles sidebar navigate to Blocks > Featured Category > Colors > Background.
10. Change the background color and save your changes.
11. Navigate back to the post/page you previously created.
12. The first block should still show the background color you selected in step 5. The second block should show the Global Styles color you selected in step 10.
13. Click Preview > Preview in new tab and confirm the colors appear as expected on the Frontend of your site as well.

Featured Product: Add background color option. (6367)

Prerequisites:

• Use the latest WordPress version (we want to use the site editor / Global Styles in testing).
• Install & use a block theme e.g. Twenty Twenty-Two.
• Deactivate the Gutenberg plugin for testing as we're currently observing this issue.

1. Create a new post/page.
2. In the editor, add two Featured Product blocks.
3. For each block select the same product, it should have a product picture.
4. Select each block and use the Crop tool in the block toolbar to crop the product image smaller than the Featured product block e.g. by setting the aspect ratio to 2:3.
5. Now select the first Featured Product block. In the editor sidebar's Color section of the block select a Background color. The background color should be visible in the parts not covered by the product image.
6. Save your post/page.
7. In the admin dashboard navigate to Appearance > Editor (/wp-admin/site-editor.php).
8. Open the Styles sidebar by clicking the round Styles icon in the top right of the editor.
9. In the Styles sidebar navigate to Blocks > Featured Product > Colors > Background.
10. Change the background color and save your changes.
11. Navigate back to the post/page you previously created.
12. The first block should still show the background color you selected in step 5. The second block should show the Global Styles color you selected in step 10.
13. Click Preview > Preview in new tab and confirm the colors appear as expected on the Frontend of your site as well.

Added media controls allowing the user to edit images within the editor on a Featured Category block. (6360)

1. Add the Featured Category block
2. Choose either a category with an associated image or select an image for the block through the toolbar
3. Click on the “Crop” icon on the toolbar
4. Ensure the toolbar controls are now changed and show: Zoom, Aspect ratio, Rotate | Apply, Cancel controls
5. Ensure only the image is now visible instead of the whole block inside the image editor
6. Try executing edits and applying them
7. Ensure the image turns semi-transparent and a loading spinner shows in the image
8. Ensure the block now shows your edited image
9. Click on the “Crop” icon again
10. Click away from the block
11. Ensure the block exits “Edit mode”

Added media controls allowing the user to edit images within the editor on a Featured Product block. (6348)

1. Add the Featured Product block
2. Choose a product with an image or select an image for the block through the toolbar
3. Click on the “Crop” icon on the toolbar
4. Ensure the toolbar controls are now changed and show: Zoom, Aspect ratio, Rotate | Apply, Cancel controls
5. Ensure only the image is now visible instead of the whole block inside the image editor
6. Try executing edits and applying them
7. Ensure the image turns semi-transparent and a loading spinner shows in the image
8. Ensure the block now shows your edited image
9. Click on the “Crop” icon again
10. Click away from the block
11. Ensure the block exits “Edit mode”

Add the alt text control to the Featured Category block media settings. (6341)

1. Create a new page and add a Featured Category.
2. On the block settings go to Media Settings and check the Alt text textarea appears empty.
3. Add an alt text, save the block and check it renders on the frontend with the specified alt text.
4. Edit the block again, remove the alt text and save it.
5. Check the alt rendered on the frontend corresponds to the category name.

Hide the Product Tag Cloud from the Widgets screen in classic themes. (6327)

1. With a classic theme (ie: Storefront), go to Appearance > Widgets.
2. Open the block inserter and make sure the Product Tag Cloud (isn't showing up)

Add the alt text control to the Featured Product block media settings. (6308)

1. Create a new page and add a Featured Product.
2. On the block settings go to Media Settings and check the Alt text textarea appears empty.
3. Add an alt text, save the block and check it renders on the frontend with the specified alt text.
4. Edit the block again, remove the alt text and save it.
5. Check the alt rendered on the frontend corresponds to the product name.

GridContentControl: Add product image control. (6302)

1. Activate a block theme, like Twenty Twenty Two
2. Create a new page, and add all the aforementioned, affected blocks (Handpicked Products etc.)

• Hand-picked Products
• Products by Tag
• Products by Attribute
• Products by Category
• Best Selling Products
• Newest Products
• On Sale Products
• Top Rated Products

3. Check if the Product image toggle is present under Content
4. Verify that the toggle shows/hides product Images both in the editor and the frontend

Remove the Template panel from the Setting Sidebar for Shop page. (6366)

1. Active Twenty Twenty-Two.
2. Make sure WooCommerce is setup (WC pages are installed).
3. Edit the Shop Page, don't see the Template panel.
4. Edit other pages, see the Template panel as normal.

Parse categories coming from the back-end as a json array. (6358)

1. Create two products assigned to two different categories and add one review to each of them.
2. Create a new page and add a Reviews by Category block.
3. Select only one category on the block (corresponding to one of the previous products/reviews) and save it.
4. Check that it renders the expected reviews only on the edit mode.
5. Publish the page, go to the frontend and check it renders the same expected reviews.
6. Edit the block and select multiple categories.
7. Check that it renders the expected reviews only on the edit mode.
8. Update the page, go to the frontend and check it renders the same expected reviews.
9. Edit again the block and deselect all the categories.
10. Check that it renders all the reviews only on the edit mode.
11. Update the page, go to the frontend and check it renders also all the reviews.

Fix: Mini Cart block is not available from the Edit template screen. (6351)

1. With Twenty Twenty-Two, add the Mini Cart block to the header template part.
2. Edit a page using Block Editor.
3. From the Page sidebar, edit the template.
   
4. Notice the Mini Cart block works as expected.

Fix Filter Products by Attribute block not working on PHP templates when Filter button was enabled. (6332)

1. With a block theme, go to Appearance > Site Editor.
2. Go to Templates and edit the Product Catalog template.
3. Above the WooCommerce Classic Template block, add the Filter Products by Attribute block (making sure you only have one Filter Products by Attribute block) and set its Filter button attribute to true.
4. In the frontend, filter by attribute.
5. Verify the page reloads and the filter is applied.