From e6d1341980120cf461db977a38b8bcc28f91ac8b Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Mon, 9 May 2022 12:20:22 +0100 Subject: [PATCH] Add testing notes --- .../docs/testing/releases/760.md | 138 ++++++++++++++++++ .../docs/testing/releases/README.md | 1 + 2 files changed, 139 insertions(+) create mode 100644 plugins/woocommerce-blocks/docs/testing/releases/760.md diff --git a/plugins/woocommerce-blocks/docs/testing/releases/760.md b/plugins/woocommerce-blocks/docs/testing/releases/760.md new file mode 100644 index 00000000000..5abf8b5389b --- /dev/null +++ b/plugins/woocommerce-blocks/docs/testing/releases/760.md @@ -0,0 +1,138 @@ +## Testing notes and ZIP for release 7.6.0 + +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)) + +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](https://pcm.wordpress.org/themes/twentytwentytwo/). +- **Deactivate** the Gutenberg plugin for testing as we're currently observing [this issue](https://github.com/WordPress/gutenberg/issues/40808). +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: +- 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](https://pcm.wordpress.org/themes/twentytwentytwo/). +- **Deactivate** the Gutenberg plugin for testing as we're currently observing [this issue](https://github.com/WordPress/gutenberg/issues/40808). +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.) +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. + +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. diff --git a/plugins/woocommerce-blocks/docs/testing/releases/README.md b/plugins/woocommerce-blocks/docs/testing/releases/README.md index 971ecbc161c..03771c77537 100644 --- a/plugins/woocommerce-blocks/docs/testing/releases/README.md +++ b/plugins/woocommerce-blocks/docs/testing/releases/README.md @@ -70,6 +70,7 @@ Every release includes specific testing instructions for new features and bug fi - [7.4.1](./741.md) - [7.4.2](./742.md) - [7.5.0](./750.md) +- [7.6.0](./760.md) ---