Updated Release Testing Instructions WooCommerce 6.6 (markdown)

Release-Testing-Instructions-WooCommerce-6.6.md

@@ -109,7 +109,143 @@ WooCommerce 6.6 includes:
 
 ### Blocks 7.6.0
 
-- [Testing instructions](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/testing/releases/760.md#feature-plugin-and-package-inclusion-in-woocommerce)
+
+### Featured Category: Add background color option. ([6368](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6368))
+
+Prerequisites:
+- Install & use a block theme e.g.[ Twenty Twenty-Two](https://pcm.wordpress.org/themes/twentytwentytwo/).
+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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6367))
+
+Prerequisites:
+- Install & use a block theme e.g.[ Twenty Twenty-Two](https://pcm.wordpress.org/themes/twentytwentytwo/).
+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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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.
+5. Edit other pages, see the Template panel as normal.
+
+### Parse categories coming from the back-end as a json array. ([6358](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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.
+<img src="https://user-images.githubusercontent.com/3616980/165728750-2d1863e7-b268-4074-9d4d-fdd7b97d4e88.png" width="288" alt=""/>
+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](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/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.
 
 
 ## WooCommerce Core Updates