Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/8651068/woocommerce-gutenberg-products-block.zip)
## Feature plugin and package inclusion in WooCommerce
### Featured Category: Add background color option. ([6368](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6368))
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.
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))
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.
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.
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.
### 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.
### 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.
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-blocks/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/internal-developers/testing/releases/760.md)
