|
| 1 | +## Testing notes and ZIP for release 7.6.0 |
| 2 | + |
| 3 | +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-gutenberg-products-block/files/8651068/woocommerce-gutenberg-products-block.zip) |
| 4 | + |
| 5 | +## Feature plugin and package inclusion in WooCommerce |
| 6 | + |
| 7 | +### Featured Category: Add background color option. ([6368](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6368)) |
| 8 | + |
| 9 | +Prerequisites: |
| 10 | +- Use the latest WordPress version (we want to use the site editor / Global Styles in testing). |
| 11 | +- Install & use a block theme e.g.[ Twenty Twenty-Two](https://pcm.wordpress.org/themes/twentytwentytwo/). |
| 12 | +- **Deactivate** the Gutenberg plugin for testing as we're currently observing [this issue](https://github.com/WordPress/gutenberg/issues/40808). |
| 13 | +1. Create a new post/page. |
| 14 | +2. In the editor, add two `Featured Category` blocks. |
| 15 | +3. For each block select the same category, it should have a product picture. |
| 16 | +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). |
| 17 | +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. |
| 18 | +6. Save your post/page. |
| 19 | +7. In the admin dashboard navigate to `Appearance` > `Editor` (`/wp-admin/site-editor.php`). |
| 20 | +8. Open the Styles sidebar by clicking the round Styles icon in the top right of the editor. |
| 21 | +9. In the Styles sidebar navigate to `Blocks` > `Featured Category` > `Colors` > `Background`. |
| 22 | +10. Change the background color and save your changes. |
| 23 | +11. Navigate back to the post/page you previously created. |
| 24 | +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. |
| 25 | +13. Click `Preview` > `Preview in new tab` and confirm the colors appear as expected on the Frontend of your site as well. |
| 26 | + |
| 27 | +### Featured Product: Add background color option. ([6367](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6367)) |
| 28 | + |
| 29 | +Prerequisites: |
| 30 | +- Use the latest WordPress version (we want to use the site editor / Global Styles in testing). |
| 31 | +- Install & use a block theme e.g.[ Twenty Twenty-Two](https://pcm.wordpress.org/themes/twentytwentytwo/). |
| 32 | +- **Deactivate** the Gutenberg plugin for testing as we're currently observing [this issue](https://github.com/WordPress/gutenberg/issues/40808). |
| 33 | +1. Create a new post/page. |
| 34 | +2. In the editor, add two `Featured Product` blocks. |
| 35 | +3. For each block select the same product, it should have a product picture. |
| 36 | +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. |
| 37 | +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. |
| 38 | +6. Save your post/page. |
| 39 | +7. In the admin dashboard navigate to `Appearance` > `Editor` (`/wp-admin/site-editor.php`). |
| 40 | +8. Open the Styles sidebar by clicking the round Styles icon in the top right of the editor. |
| 41 | +9. In the Styles sidebar navigate to `Blocks` > `Featured Product` > `Colors` > `Background`. |
| 42 | +10. Change the background color and save your changes. |
| 43 | +11. Navigate back to the post/page you previously created. |
| 44 | +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. |
| 45 | +13. Click `Preview` > `Preview in new tab` and confirm the colors appear as expected on the Frontend of your site as well. |
| 46 | + |
| 47 | +### 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)) |
| 48 | + |
| 49 | +1. Add the Featured Category block |
| 50 | +2. Choose either a category with an associated image or select an image for the block through the toolbar |
| 51 | +3. Click on the “Crop” icon on the toolbar |
| 52 | +4. Ensure the toolbar controls are now changed and show: `Zoom, Aspect ratio, Rotate | Apply, Cancel` controls |
| 53 | +5. Ensure only the image is now visible instead of the whole block inside the image editor |
| 54 | +6. Try executing edits and applying them |
| 55 | +7. Ensure the image turns semi-transparent and a loading spinner shows in the image |
| 56 | +8. Ensure the block now shows your edited image |
| 57 | +9. Click on the “Crop” icon again |
| 58 | +10. Click away from the block |
| 59 | +11. Ensure the block exits “Edit mode” |
| 60 | + |
| 61 | +### 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)) |
| 62 | + |
| 63 | +1. Add the Featured Product block |
| 64 | +2. Choose a product with an image or select an image for the block through the toolbar |
| 65 | +3. Click on the “Crop” icon on the toolbar |
| 66 | +4. Ensure the toolbar controls are now changed and show: `Zoom, Aspect ratio, Rotate | Apply, Cancel` controls |
| 67 | +5. Ensure only the image is now visible instead of the whole block inside the image editor |
| 68 | +6. Try executing edits and applying them |
| 69 | +7. Ensure the image turns semi-transparent and a loading spinner shows in the image |
| 70 | +8. Ensure the block now shows your edited image |
| 71 | +9. Click on the “Crop” icon again |
| 72 | +10. Click away from the block |
| 73 | +11. Ensure the block exits “Edit mode” |
| 74 | + |
| 75 | +### Add the alt text control to the Featured Category block media settings. ([6341](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6341)) |
| 76 | + |
| 77 | +1. Create a new page and add a `Featured Category`. |
| 78 | +2. On the block settings go to `Media Settings` and check the `Alt text` textarea appears empty. |
| 79 | +3. Add an `alt` text, save the block and check it renders on the frontend with the specified `alt` text. |
| 80 | +4. Edit the block again, remove the `alt` text and save it. |
| 81 | +5. Check the `alt` rendered on the frontend corresponds to the category name. |
| 82 | + |
| 83 | +### Hide the Product Tag Cloud from the Widgets screen in classic themes. ([6327](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6327)) |
| 84 | + |
| 85 | +1. With a classic theme (ie: Storefront), go to Appearance > Widgets. |
| 86 | +2. Open the block inserter and make sure the Product Tag Cloud (isn't showing up) |
| 87 | + |
| 88 | +### Add the alt text control to the Featured Product block media settings. ([6308](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6308)) |
| 89 | + |
| 90 | +1. Create a new page and add a `Featured Product`. |
| 91 | +2. On the block settings go to `Media Settings` and check the `Alt text` textarea appears empty. |
| 92 | +3. Add an `alt` text, save the block and check it renders on the frontend with the specified `alt` text. |
| 93 | +4. Edit the block again, remove the `alt` text and save it. |
| 94 | +5. Check the `alt` rendered on the frontend corresponds to the product name. |
| 95 | + |
| 96 | +### GridContentControl: Add product image control. ([6302](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6302)) |
| 97 | + |
| 98 | +1. Activate a **block** theme, like Twenty Twenty Two |
| 99 | +2. Create a new page, and add all the aforementioned, affected blocks (Handpicked Products etc.) |
| 100 | + - Hand-picked Products |
| 101 | + - Products by Tag |
| 102 | + - Products by Attribute |
| 103 | + - Products by Category |
| 104 | + - Best Selling Products |
| 105 | + - Newest Products |
| 106 | + - On Sale Products |
| 107 | + - Top Rated Products |
| 108 | +3. Check if the **Product image** toggle is present under **Content** |
| 109 | +4. Verify that the toggle shows/hides product Images both in the editor and the frontend |
| 110 | + |
| 111 | +### Remove the Template panel from the Setting Sidebar for Shop page. ([6366](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6366)) |
| 112 | + |
| 113 | +1. Active Twenty Twenty-Two. |
| 114 | +2. Make sure WooCommerce is setup (WC pages are installed). |
| 115 | +3. Edit the Shop Page, don't see the Template panel. |
| 116 | +5. Edit other pages, see the Template panel as normal. |
| 117 | + |
| 118 | +### Parse categories coming from the back-end as a json array. ([6358](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6358)) |
| 119 | + |
| 120 | +1. Create two products assigned to two different categories and add one review to each of them. |
| 121 | +2. Create a new page and add a `Reviews by Category` block. |
| 122 | +3. Select only one category on the block (corresponding to one of the previous products/reviews) and save it. |
| 123 | +4. Check that it renders the expected reviews only on the edit mode. |
| 124 | +5. Publish the page, go to the frontend and check it renders the same expected reviews. |
| 125 | +6. Edit the block and select multiple categories. |
| 126 | +7. Check that it renders the expected reviews only on the edit mode. |
| 127 | +8. Update the page, go to the frontend and check it renders the same expected reviews. |
| 128 | +9. Edit again the block and deselect all the categories. |
| 129 | +10. Check that it renders **all** the reviews only on the edit mode. |
| 130 | +11. Update the page, go to the frontend and check it renders also **all** the reviews. |
| 131 | + |
| 132 | +### Fix: Mini Cart block is not available from the Edit template screen. ([6351](https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/6351)) |
| 133 | + |
| 134 | +1. With Twenty Twenty-Two, add the Mini Cart block to the header template part. |
| 135 | +2. Edit a page using Block Editor. |
| 136 | +3. From the Page sidebar, edit the template. |
| 137 | +<img src="https://user-images.githubusercontent.com/3616980/165728750-2d1863e7-b268-4074-9d4d-fdd7b97d4e88.png" width="288" alt=""/> |
| 138 | +4. Notice the Mini Cart block works as expected. |
| 139 | + |
| 140 | +### 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)) |
| 141 | + |
| 142 | +1. With a block theme, go to Appearance > Site Editor. |
| 143 | +2. Go to Templates and edit the Product Catalog template. |
| 144 | +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. |
| 145 | +4. In the frontend, filter by attribute. |
| 146 | +5. Verify the page reloads and the filter is applied. |
0 commit comments