164 lines
10 KiB
Markdown
164 lines
10 KiB
Markdown
# 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.)
|
|
|
|
- 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.
|
|
4. 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.
|
|
|
|
<!-- FEEDBACK -->
|
|
|
|
---
|
|
|
|
[We're hiring!](https://woocommerce.com/careers/) Come work with us!
|
|
|
|
🐞 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)
|
|
|
|
<!-- /FEEDBACK -->
|
|
|