diff --git a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1080.md b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1080.md new file mode 100644 index 00000000000..272e6acd81a --- /dev/null +++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1080.md @@ -0,0 +1,480 @@ +# Testing notes and ZIP for release 10.8.0 + +Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12226434/woocommerce-gutenberg-products-block.zip) + +## WooCommerce Core + +### Use the `Single Product` block for the `Product Details Product Listing` pattern [#9978](https://github.com/woocommerce/woocommerce-blocks/pull/9978) + +1. Create a new page or post. +2. Insert the `Product Details Product Listing` pattern and save. +3. Check that the pattern is using the `Single Product` block and has a default product selected. +4. In the front end, check the pattern looks like the image above if the product has reviews. +5. Check nothing shows in the front end, if the product does not have reviews. + +#### Screenshots + +Screenshot 2023-06-23 at 15 29 12 + +### Store Customization > Centered Header Menu with Search - Update the pattern to become wireframed [#10226](https://github.com/woocommerce/woocommerce-blocks/pull/10226) + +1. Create a new post +2. Insert the Centered Header Menu with Search pattern and save +3. Make sure it works as expected and is properly rendered on the front-end + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-17 at 10 31 35 | Screenshot 2023-07-17 at 10 25 26 | + +### Store Customization > Minimal Header - Update the pattern to become wireframed [#10227](https://github.com/woocommerce/woocommerce-blocks/pull/10227) + +1. Create a new post +2. Insert the Minimal Header pattern and save +3. Make sure it works as expected and is properly rendered on the front-end + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-17 at 10 42 53 | Screenshot 2023-07-17 at 10 43 08 | + +### Remove styles from `Newest arrivals` pattern [#10256](https://github.com/woocommerce/woocommerce-blocks/pull/10256) + +1. In the post editor or the site editor, add the `Product Collections Newest Arrivals` pattern. +2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the `After` screenshot above. + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-18 at 15 42 55| Screenshot 2023-07-18 at 15 42 30 | + +### Remove styles from the `Testimonials 3 cols` pattern [#10258](https://github.com/woocommerce/woocommerce-blocks/pull/10258) + +1. In the post editor or the site editor, add the `Testimonials 3 columns` pattern. +2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the `After` screenshot above. + +#### Screenshots + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-18 at 16 18 49 | Screenshot 2023-07-18 at 16 18 25 | + +### Store Customization > Hero Product Split pattern - Update the pattern to become wireframed [#10270](https://github.com/woocommerce/woocommerce-blocks/pull/10270) + +1. Create a new post +2. Insert the Hero Product Split pattern and save +3. Make sure it works as expected and is correctly rendered on the front end: the design should match the one demonstrated on the screenshots of this PR. + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-19 at 12 02 36 Screenshot 2023-07-19 at 12 03 24 | Screenshot 2023-07-19 at 12 02 51 Screenshot 2023-07-19 at 12 03 07 | + +### Update the `Testimonials Single` pattern to have no opinionated styles [#10275](https://github.com/woocommerce/woocommerce-blocks/pull/10275) + +1. In the post editor or the site editor, add the `Testimonials Single` pattern. +2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the screenshot above. + +#### Screenshots + +Screenshot 2023-07-19 at 15 20 19 + +### Update the `Footer with 3 menus` pattern to have no opinionated styles [#10294](https://github.com/woocommerce/woocommerce-blocks/pull/10294) + +1. In the post editor or the site editor, add the `Footer with 3 menus` pattern. +2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the After screenshot above. + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-20 at 15 26 05 | Screenshot 2023-07-20 at 15 24 44 | + +### Move sale badge to top right of product image [#10297](https://github.com/woocommerce/woocommerce-blocks/pull/10297) + +1. Add the following blocks to a post/page. `Hand-picked Products`, `Best Selling Products`, `Products by Category`, `Newest Products`, `On Sale Products`, `Products by Attribute`, `Products by Tag`, `Top Rated Products`. +2. For each of these blocks, ensure the `Sale` badge is on the top right of the product image as seen in the `After` screenshot above. +3. Save the post/page and ensure it shows the same in the frontend. + +#### Screenshots + + +| Before | After | +| ------ | ----- | +|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/fcaa104e-dea0-4b17-b289-2d4b29fda06a) |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/5925108e-4e2c-48f4-8a4a-4988cc0dc7da) | + +### Update the `Footer with Simple Menu and Cart` pattern to have no opinionated styles [#10306](https://github.com/woocommerce/woocommerce-blocks/pull/10306) + +1. In the post editor or the site editor, add the `Footer with Simple Menu and Cart` pattern. +2. Verify there are no opinionated styles (borders, colors, fonts, etc) and the pattern looks like the After screenshot above. + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-21 at 12 54 00|Screenshot 2023-07-21 at 12 56 29| + +### Store Customization > Large Footer pattern - Update the pattern to become wireframed [#10323](https://github.com/woocommerce/woocommerce-blocks/pull/10323) + +1. Create a new post +2. Insert both the Large Footer and Large Footer Dark patterns. +3. Make sure they work as expected and are visible both in the editor and on the front-end +4. Make sure the styles match the screenshot added on this PR description + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-24 at 12 07 55 | Screenshot 2023-07-24 at 12 06 13 | + +### Store Customization > Introduce the new Featured Products: Fresh & Tasty pattern [#10339](https://github.com/woocommerce/woocommerce-blocks/pull/10339) + +1. Create a new post +2. Add the Featured Products: Fresh & Tasty pattern +3. Make sure the preview is properly rendered without any problems +4. Save the post and visualize it on the front-end: make sure the layout displayed matches the screenshots on this PR + +#### Screenshots + + +Desktop view: + +Screenshot 2023-07-25 at 10 21 28 + + +Mobile view: + +Screenshot 2023-07-25 at 10 37 28 + +### Store Customization > Featured Category Triple pattern - Update the pattern to become wireframed [#10343](https://github.com/woocommerce/woocommerce-blocks/pull/10343) + +1. Create a new post and insert the Featured Category Triple pattern +2. Ensure the pattern is rendered correctly in the editor +3. Save the post and go to the frontend +4. Ensure the pattern is rendered correctly without any errors and the styles match the screenshot on this PR. + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-25 at 13 01 37 | Screenshot 2023-07-25 at 13 22 51 | + +### Remove styles from `Product Details Product Listing` pattern [#10362](https://github.com/woocommerce/woocommerce-blocks/pull/10362) + +1. Create a page or post. +2. Insert the `Product Details Product Listing`. +3. Click on the product title and in the styles tab check it has no colors. +4. Click on the product `View products` button and in the styles tab check it has no colors or other styles. + +### Store Customization > Introduce the new Social: Follow us in social media pattern [#10368](https://github.com/woocommerce/woocommerce-blocks/pull/10368) + +1. Create a new post +2. Insert the **Social: Follow us in social media** pattern +3. Make sure you can preview the pattern without any problems in the editor and save. +4. On the front-end, make sure the pattern is properly rendered. + +#### Screenshots + + +| Desingn | Implemented | +| ------ | ----- | +| Screenshot 2023-07-26 at 13 08 52 | Screenshot 2023-07-26 at 13 04 33 | + +### Featured Items: Add selection button when id not found [#10387](https://github.com/woocommerce/woocommerce-blocks/pull/10387) + +1. Add the `Featured Category` block to a page. +2. Select an existing ID and click `Done`. +3. Go into `Code editor` mode and replace the `categoryId` to some random number that does not exists. +4. Click on `Exit code editor`. +5. You should now see an error `Sorry, an error occurred`. +6. Ensure you see the `Select a category` button and click it. +7. Ensure now you can select an existing category. + +#### Screenshots + + +| Before | After | +| ------ | ----- | +|![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/43775953-41be-4641-baae-79d0f48b8600) |![file.png](https://github.com/woocommerce/woocommerce-blocks/assets/2132595/8082adf2-f715-4369-ae09-1a75a0f811a4) | + +### Store Customization > Featured Products 5-Item Grid pattern - Update the pattern to become wireframed [#10401](https://github.com/woocommerce/woocommerce-blocks/pull/10401) + +1. Create a new post +2. Insert the Featured Products 5-Item Grid pattern +3. Ensure you can see everything working as expected in the editor +4. Save the post and head over to the front end: ensure everything works as expected and the style rendered matches the one displayed on this PR. + +#### Screenshots + + +| Before | After | +| ------ | ----- | +| Screenshot 2023-07-28 at 13 47 10 | Screenshot 2023-07-28 at 14 40 24 | + +### Update express checkout title, description, icon [#10237](https://github.com/woocommerce/woocommerce-blocks/pull/10237) + +1. Open up the Checkout page in the block editor +2. Verify the visual elements in the screenshots are correct +3. On the front end, add some products to your basket and go to Checkout +4. Verify that the title of the Express Checkout block has a capital "C" for the word "Checkout". + +#### Screenshots + +Note the capital C in _Checkout_ in the block title, and the description and icon in the settings bar on the right + +**Before:** +![Screenshot 2023-07-17 at 13 34 32](https://github.com/woocommerce/woocommerce-blocks/assets/3966773/8015e29d-47cd-4311-8983-fb3211ebe9d3) + +**After:** +![Screenshot 2023-07-17 at 13 34 09](https://github.com/woocommerce/woocommerce-blocks/assets/3966773/effa4d0b-86c7-4de4-b309-5483364b9f1c) + +### Add class specificity to fix indent [#10245](https://github.com/woocommerce/woocommerce-blocks/pull/10245) + +1. Switch to Storefront theme. +2. Create a post. +3. Add the following blocks to the page. `Filter by Attributes`, `Featured Category`, `Featured Product`, `Hand-picked Products`, `Reviews by Product`, `Reviews by Category`. +4. Ensure in each of these blocks that default shown search list is not indented to the right as shown in the `after` screenshot. Another words there should be no indentation. + +#### Screenshots + + + + + + + +
Before: +

+Screenshot 2023-07-06 at 10 50 20 + +		 After: +

+ +Screenshot 2023-07-06 at 10 51 03 + +
+ +### Remove Featured Category Cover Image pattern [#10252](https://github.com/woocommerce/woocommerce-blocks/pull/10252) + +1. In the post editor or the site editor, open the inserter and search for the Featured Category Cover Image pattern. +2. Verify it doesn't exist. + + + +### Remove opinionated styles from Hero Product 3 Split pattern [#10260](https://github.com/woocommerce/woocommerce-blocks/pull/10260) + +1. In the post editor or the site editor, add the Hero Product 3 Split pattern. +3. Verify it looks like the _After_ patterns in screenshot below (styles adapt to the theme) and it matches the design ([see](https://github.com/woocommerce/woocommerce-blocks/issues/10217)). + +Desktop | Mobile +--- | --- +![Captura de pantalla feta el 2023-07-18 a les 17 21 47](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/cac2b052-3469-408c-b442-24bc494a36fa) | ![Captura de pantalla feta el 2023-07-18 a les 17 22 10](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/2b5c57a7-fc86-44b3-970a-8cd73e39c6a3) + +### Add to Cart Form: Fix broken styles for the block when using inside the Single Product Block [#10282](https://github.com/woocommerce/woocommerce-blocks/pull/10282) + +1. Log in to your WordPress dashboard. +2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc. +3. On the left-hand side menu, click on Pages > Add New. +4. Inside the Page editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block. +5. In the block library that pops up, search for the 'Single Product' block. Click on it to add the block to the template. +6. On the top-right side, click on the Save button. +7. Visit a product and check if the Single Product block is shown and the Add to Cart Form block is correctly being displayed + +| Before | After | +| ------ | ----- | +| image | image | + +### Unify links to WordPress and WooCommerce websites in patterns [#10380](https://github.com/woocommerce/woocommerce-blocks/pull/10380) + +1. Create a new page and add the following patterns: Large Footer, Large Footer Dark, Simple Footer, Simple Footer Dark, Footer with Simple Menu and Cart, Footer with 2 Menus, Footer with 2 Menus Dark and Footer with 3 Menus. +2. Publish the page and visit it from the frontend. +4. Click on the links to the WordPress and/or WooCommerce templates which appear at the bottom of the patterns and verify all of them look ok and open in a new tab. + +### Fix Classic Template block in Single Product custom templates [#10342](https://github.com/woocommerce/woocommerce-blocks/pull/10342) + +1. Go to Appearance > Editor > Templates and create a Product template: + + + +3. Choose one of the products and create a custom template for it. +4. Remove all blocks from the template (except header and footer) and, as a replacement, add the WooCommerce Classic Template block. + + + +6. Visit the page of that product in the frontend. +7. Verify it renders the product details properly. + +Before | After +--- | --- +![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/fd660ef9-cc35-4c96-824e-cd3e776ca7b6) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/cef3d706-92c6-47fe-ab5c-17077fe764a2) + +### Change custom toolbar item to use toolbar button [#10246](https://github.com/woocommerce/woocommerce-blocks/pull/10246) + +1. Create a post and add `Featured Category` and `Featured Product` block to the page and have your developer console opened. +2. Click on each of the block so that you can see the toolbar popup for each block. +3. In your developer console, ensure you don't see the warning `Using custom components as toolbar controls is deprecated since version 5.6. Please use ToolbarItem, ToolbarButton or ToolbarDropdownMenu components instead.`. +4. Ensure each of the toolbar items are still functioning as expected. + +### Remove opinionated styles from Alternating Image and Text pattern [#10292](https://github.com/woocommerce/woocommerce-blocks/pull/10292) + +1. In the post editor or the site editor, add the Alternating Image and Text pattern. +2. Click on the image placeholders and add images to the pattern. +3. Visit the frontend of your site. +4. Verify the patterns looks like the _After_ patterns in screenshots below. + +Desktop: + +Before | After +--- | --- +![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/5019313c-c1e1-4c63-bac8-3da49f8722fb) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/3d7787b5-ec8b-4b1c-afd3-bb0cc1930915) + +### Fix SearchListControl styles (II) [#10308](https://github.com/woocommerce/woocommerce-blocks/pull/10308) + +1. Create a new post or page and add the Single Product, Products by Category and Newest Products blocks. +2. In all of them, check that the list control UI looks correct; that's the UI that lets you choose the product/category: + +Single Product (no change): + +Before | After +--- | --- +![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/9ba6b525-7250-4bc1-a2bf-883438c88a1c) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/9e7822f1-2c99-40f7-a149-59e86b885c42) + +Products by Category (slight margin change): + +Before | After +--- | --- +![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/7ada606c-ec28-4311-a090-522ff28a4614) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/02304ce5-2454-4f4a-bb42-e9250be8987b) + +Newest Products (broken UI fixed): + +Before | After +--- | --- + | + +:point_up: this UI is displayed in the sidebar, under the Filter by Category panel. + +### Add missing page titles in Cart and Checkout templates [#10281](https://github.com/woocommerce/woocommerce-blocks/pull/10281) + +» Verify that page titles are visible + +1. Install a block-theme, e.g. [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/). +2. Go to WP Admin » Appearance » Editor » Templates. +3. Open the Cart template and verify that it has the page title `Cart`. +4. Open the Checkout template and verify that it has the page title `Checkout`. +5. Go to the frontend and add a product to the cart. +6. Go to the Cart page and verify that it has the page title `Cart`. +7. Go to the Checkout page and verify that it has the page title `Checkout`. + +#### Screenshots + + + + + + + + + + + + +
Cart template (EN) - before: +

+ +Screenshot 2023-07-19 at 19 14 51 +		Cart template (EN) - after: +

+ +Screenshot 2023-07-19 at 19 13 20 +		Cart template (NL) - after: +

+ +Screenshot 2023-07-20 at 12 40 21 +
Checkout template (EN) - before: +

+ +Screenshot 2023-07-19 at 19 15 19 +		Checkout template (EN) - after: +

+ +Screenshot 2023-07-19 at 19 13 40 +		Checkout template (NL) - after: +

+ +Screenshot 2023-07-20 at 12 40 42 +
+ +### Add Color Panel [#10062](https://github.com/woocommerce/woocommerce-blocks/pull/10062) + +This testing is utilizing the implementation in the Mini-Cart block to verify functionality + +1. Insert the Mini-Cart Block into a template. +2. Select the block, in the settings panel for the block, turn on the "Display total price" toggle so you're able to see the color changes. +3. Select the "Styles" panel. +4. Set custom colors for the Icon, Price, and Product count color options. Verify they are changed in the Mini-Cart block. +5. Save the template and then view on the frontend. Verify the Mini-Cart block has retained the custom colors. + +### Create Mini-Cart template part area [#10203](https://github.com/woocommerce/woocommerce-blocks/pull/10203) + +1. With WP 6.3 and a block theme, go to Appearance > Editor > Patterns. +2. Verify there is a Mini-Cart template part area containing the Mini-Cart template part. + +Before | After +--- | --- +![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/687cf682-6670-4e5a-a9e5-0318813e59ab) | ![imatge](https://github.com/woocommerce/woocommerce-blocks/assets/3616980/222cf40b-3b6d-42e0-85b4-2bb1e2d0b679) + +### Newest Products: fix Stock Status filter [#10201](https://github.com/woocommerce/woocommerce-blocks/pull/10201) + +1. Go to Editor +2. Add Newest Products block +3. Focus on block +4. Try to open "Filter by stock status" and change the switches +5. Expected: Block doesn't crash and reacts to changes +6. Save and check that block renders on the frontend + +#### Screenshots + +Result after clicking "Filter by stock status": + +| Before | After | +| ------ | ----- | +| image | image | + +### Fix Misplacement of Shipping Radio Buttons [#10150](https://github.com/woocommerce/woocommerce-blocks/pull/10150) + +Instructions + +1. Create any test site. +2. Install and activate all the required plugins +3. Add sample products. +4. Add some Shipping methods. +5. Create new test page. +6. Add Cart block. +7. Change two-column grid to stacked column using align option. +8. Observe that "Shipping" radio buttons are not misaligned. + +#### Screenshots + +| Before | After | +| ------ | ----- | +| ![image](https://github.com/woocommerce/woocommerce-blocks/assets/6242098/a1ab4870-88cd-4f31-8dab-fb754bff55d6) | image | + +## Feature plugin + +### Remove border control for filter by attribute block [#10277](https://github.com/woocommerce/woocommerce-blocks/pull/10277) + +1. Add a post and insert `Filter by Attribute` block. +2. Check that the `border controls` are no longer available in the `Styles` section of the `Inspector controls`. + diff --git a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md index 921e030dfdd..ac04400a2d6 100644 --- a/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md +++ b/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/README.md @@ -161,6 +161,7 @@ Every release includes specific testing instructions for new features and bug fi - [10.6.0](./1060.md) - [10.6.1](./1061.md) - [10.7.0](./1070.md) +- [10.8.0](./1080.md)