231 lines
16 KiB
Markdown
231 lines
16 KiB
Markdown
# Testing notes and ZIP for release 10.3.0
|
||
|
||
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/11554379/woocommerce-gutenberg-products-block.zip)
|
||
|
||
## WooCommerce Core
|
||
|
||
### Only show the Mini Cart count badge when there are items in the cart [#9259](https://github.com/woocommerce/woocommerce-blocks/pull/9259)
|
||
|
||
1. Add the Mini Cart block to the header of your store.
|
||
2. In the frontend, with an empty cart, verify the count badge is not visible. Verify you can open and close the Mini Cart drawer and the badge is still not visible.
|
||
3. Now, add some products to your cart and verify the badge becomes visible. Try reloading the page and verify the count badge is still there.
|
||
|
||
### Store API: Fix payment method validation (fixes COD) [#9375](https://github.com/woocommerce/woocommerce-blocks/pull/9375)
|
||
|
||
1. Enable Cash on Delivery as a payment method
|
||
2. Make sure "enable for shipping methods" is blank, and 'accept for virtual orders" is off
|
||
3. Add an item to your cart and checkout, selecting COD as the payment method
|
||
4. Place order successfully
|
||
|
||
### Styling fixes for form step headings [#9437](https://github.com/woocommerce/woocommerce-blocks/pull/9437)
|
||
|
||
1. Install and activate a block theme, e.g. [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/).
|
||
2. Go to WP Admin » Appearance » Editor.
|
||
3. Open the Styles sidebar.
|
||
4. Increase the font size for headings from the Typography settings.
|
||
5. Go to the Checkout block page editor.
|
||
6. View the form step headings - check that the bottom of the text is not cut off
|
||
|
||
### Product Gallery Block > Remove global variable overwrite and keep support for the Single Product Block. [#9475](https://github.com/woocommerce/woocommerce-blocks/pull/9475)
|
||
|
||
1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard, and on the sidebar, click on "Appearance > Editor".
|
||
2. Select the Single Product template to customize it and click on edit.
|
||
3. If you are still not using the blockified version of the template, click on “Transform into blocks” first to ensure all blocks are in place.
|
||
4. Make sure the Product Gallery block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
|
||
5. On the front end, ensure the block works as expected and the product can be added to the cart.
|
||
6. Now create a new post and add the Single Product Block to it.
|
||
7. Save the post and head over to the FE: make sure the Gallery Block is properly displayed on the post without any problems.
|
||
|
||
### Fix compatibility between the checkout block and the template editor. [#9495](https://github.com/woocommerce/woocommerce-blocks/pull/9495)
|
||
|
||
1. Ensure the latest version of Gutenberg is installed. This is required to reproduce the issue.
|
||
2. Go into the template editor - Appearance > Editor > Templates
|
||
3. Insert the Cart block within any template e.g. the page template
|
||
4. Confirm that the preview shows:
|
||
- payment methods and shipping methods
|
||
- cart image previews
|
||
|
||
### Update Mini-Cart block editor sidebar [#9420](https://github.com/woocommerce/woocommerce-blocks/pull/9420)
|
||
|
||
1. Add the Mini-Cart block to the header of your site.
|
||
2. Click on the block and open the editor sidebar.
|
||
3. Verify the strings from the design below match the UI (note: it's expected that some options from the design are still not implemented, just focus on the strings of the options that exist in both screenshots):
|
||
|
||
| Design | Actual |
|
||
| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|
||
|  |  |
|
||
|
||
### Add to Cart Button > Update block registration to rely on metadata and enable usage for the Single Product Block [#9404](https://github.com/woocommerce/woocommerce-blocks/pull/9404)
|
||
|
||
1. Create a new Post
|
||
2. Add the Products (Beta) Block
|
||
3. Within the Products (Beta) Block, make sure the "Add to Cart button" block is listed in the inserter and add it.
|
||
4. Save the post and head over to the frontend: make sure the button is correctly displayed and when you click on it, the correct product is added to cart.
|
||
|
||
### Fix alignment issue with 'Add Coupon Code' button in WooCommerce Blocks (#9391) [#9392](https://github.com/woocommerce/woocommerce-blocks/pull/9392)
|
||
|
||
1. Go to `/wp-admin/options-general.php` and select `Deutsch` as the site language.
|
||
2. Go to `/wp-admin/update-core.php` and fetch the available translations.
|
||
3. Create a test page with the Checkout block.
|
||
4. Go to the frontend.
|
||
5. Add a product to the cart.
|
||
6. Go to the test page with the Checkout block.
|
||
7. Verify that the _"Gutscheincode oder Rabattcode hinzufügen"_ button is correctly aligned (aligned left with the same intent on both lines when wrapped)
|
||
|
||
### Improve transform classic product template UX [#9386](https://github.com/woocommerce/woocommerce-blocks/pull/9386)
|
||
|
||
1. Open the Single Product Template.
|
||
2. Be sure that the description is: "Transform this template into multiple blocks so you can add, remove, reorder, and customize your **single product template** (for other templates, this should correspond to the name of the template)."
|
||
3. Hover the button "transform into blocks".
|
||
4. Ensure the preview corresponds to the "blockified template".
|
||
5. Click the button.
|
||
6. Ensure that the group block around the blockified product is selected.
|
||
7. Ensure the snackbar is visible and the undo button works correctly.
|
||
|
||
### Add color and typography styles on the mini cart title block [#9382](https://github.com/woocommerce/woocommerce-blocks/pull/9382)
|
||
|
||
1. Install and activate the Twenty Twenty-Three theme
|
||
2. Go to Appearance > Editor > Template parts > Mini Cart
|
||
3. Select the `Mini Cart Title` block and add some customizations on the settings sidebar (colors, typography).
|
||
4. Check if the customizations are applied in the editor and in the frontend of the website.
|
||
5. Set country to something with an optional postcode, e.g. Vietnam
|
||
6. Try to checkout with the field empty, it should pass fine.
|
||
|
||
### Fix Checkout block stepped sections numbers overlapping [#9497](https://github.com/woocommerce/woocommerce-blocks/pull/9497)
|
||
|
||
1. Go to the Checkout block in the page editor.
|
||
2. Click on an inner block.
|
||
3. Make sure stepped checkout is enabled
|
||
4. Confirm the block selection frame is not overlapping with the section number.
|
||
|
||
### Product Meta block: Remove the fill color of the icon and move it to the Icons library, Product Details block: Remove the fill color of the Product Details icon and move it to the icons library ([#9506](https://github.com/woocommerce/woocommerce-blocks/pull/9506) and [#9503](https://github.com/woocommerce/woocommerce-blocks/pull/9503))
|
||
|
||
1. In WP Admin, 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.
|
||
2. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
|
||
3. On the left-hand side menu, click on Templates. This will open the list of available templates.
|
||
4. Find and select the Single Product template from the list.
|
||
5. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
|
||
6. Inside the Site editor, click on the List View button, usually found at the top left of the editing space, to see the list of blocks added to the editor area.
|
||
7. In the list of blocks, click on the Product Meta block. Make sure the icon change its default color from black to white when selected.
|
||
8. In the list of blocks, click on the Product Details block. Make sure the icon change its default color from black to white when selected.
|
||
|
||
### Update Mini-Cart block logic to use isSiteEditorPage util [#9501](https://github.com/woocommerce/woocommerce-blocks/pull/9501)
|
||
|
||
1. Create a post or page.
|
||
2. Add the Mini Cart block and select it.
|
||
3. Verify in the sidebar there is no _Mini-Cart in cart and checkout pages_ toggle.
|
||
4. Now go to the Site Editor (Appearance > Editor).
|
||
5. Add the Mini Cart block to the header of your theme.
|
||
6. Verify in the sidebar there is a _Mini-Cart in cart and checkout pages_ toggle.
|
||
|
||
7. Now change to a classic theme (ie: Storefront).
|
||
8. Go to Appearance > Widgets and add the Mini Cart block to a widget area.
|
||
9. Verify in the sidebar there is no _Mini-Cart in cart and checkout pages_ toggle.
|
||
|
||
### Prevent QuantitySelector stealing focus on page load [#9487](https://github.com/woocommerce/woocommerce-blocks/pull/9487)
|
||
|
||
1. Add one product to your page, making sure you only have one item of that product.
|
||
2. Go to the Cart page (with the Cart block).
|
||
3. Verify the quantity field input doesn't get the focus on page load.
|
||
|
||
### Allow Shipping method prices to inherit global styles text color [#9456](https://github.com/woocommerce/woocommerce-blocks/pull/9456)
|
||
|
||
1. Install and activate a block theme, e.g. [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/).
|
||
2. Create a test page with the Checkout block.
|
||
3. Create a test page with the Cart block.
|
||
4. Go to WP Admin » Appearance » Editor.
|
||
5. Open the Styles sidebar.
|
||
6. Adjust all Color settings.
|
||
7. Confirm shipping method price color also gets change.
|
||
|
||
### Render Product Details block when used along the Post Content block [#9479](https://github.com/woocommerce/woocommerce-blocks/pull/9479)
|
||
|
||
1. Edit the Single Product Template.
|
||
2. Migrate to the Blockified Template by clicking the button: `Transform into blocks`.
|
||
3. Add the `Post Content` as first block of the main group block.
|
||
4. Save.
|
||
5. Visit a Product page.
|
||
6. Ensure that the Product Details block and Post Content block are visible.
|
||
|
||
### Mini Cart: stop using Modal component [#9345](https://github.com/woocommerce/woocommerce-blocks/pull/9345)
|
||
|
||
1. Add the Mini Cart block to the header of your site via (Appearance > Editor).
|
||
2. In the frontend and with the Cart empty, open the Mini Cart drawer, verify you can open and close the drawer without problems.
|
||
3. Add some products to your cart and open the Mini Cart drawer again. Verify you can open and close it, you can change the products quantity, etc.
|
||
4. Go to Appearance > Editor > Template Parts > Mini Cart and change some of the styles of the inner blocks. For example, add a custom background, border and width to the Mini Cart Contents block.
|
||
5. Repeat step 3.
|
||
|
||
Now, let's test that things keep working if there are two Mini Cart blocks in the same page. We don't officially support it, but at the same time we don't want the experience to be broken.
|
||
|
||
6. create a post or page and add the Mini Cart block.
|
||
7. Open that post/page in the frontend. You should now have two Mini Cart buttons in the screen, the one from the site header and the one from the post/page.
|
||
8. Verify both buttons work as expected.
|
||
|
||
### Global Styles: Fix radio control overlap when font-size is small [#9436](https://github.com/woocommerce/woocommerce-blocks/pull/9436)
|
||
|
||
1. Install and activate a block theme, e.g. [Twenty Twenty-Three](https://wordpress.org/themes/twentytwentythree/).
|
||
2. Create a test page with the Checkout block.
|
||
3. Go to WP Admin » Appearance » Editor.
|
||
4. Open the Styles sidebar.
|
||
5. Adjust the font-size from the typography settings. Reduce the font size to 0.8.
|
||
6. Go to the Cart and Checkout block page.
|
||
7. Confirm Radio buttons are not overlapping with the labels.
|
||
|
||
## Patterns
|
||
|
||
### Update `Hero Product – Split` Pattern Color Settings [#9433](https://github.com/woocommerce/woocommerce-blocks/pull/9433)
|
||
|
||
1. Activate a block theme (TT3).
|
||
2. From the editor, insert the `Hero Product – Split` pattern (under the WooCommerce section).
|
||
3. Confirm the text area has a black background, a white heading, and a white button with black text.
|
||
4. Switch to another block theme and repeat steps 2-3.
|
||
5. Confirm there is no change in colors on the pattern, by default.
|
||
6. Confirm it is possible to update the color settings in the editor.
|
||
|
||
### [Pattern] Add new `Hero product chessboard` pattern [#9180](https://github.com/woocommerce/woocommerce-blocks/pull/9180)
|
||
|
||
1. Create a new page or post
|
||
2. Make sure the `Hero product chessboard` pattern appears under the WooCommerce category dropdown.
|
||
3. Insert in and make sure it shows as expected on the design.
|
||
|
||
### Add new `Product listing with gallery` pattern [#9347](https://github.com/woocommerce/woocommerce-blocks/pull/9347)
|
||
|
||
1. Create a new page or post
|
||
2. Make sure the `Product listing with gallery` pattern appears under the WooCommerce category dropdown.
|
||
3. Insert in and make sure it shows as expected on the design.
|
||
|
||
### Add Product Details: product listing pattern [#9383](https://github.com/woocommerce/woocommerce-blocks/pull/9383)
|
||
|
||
1. Create a new post
|
||
2. Insert the new "Product Details: product listing" as demonstrated on the screencast
|
||
3. Make sure the pattern is properly displayed on the Editor side without any errors in the console
|
||
4. Make sure the pattern is also displayed on the frontend without any problems
|
||
|
||
### Add new `Product collections: featured collections` pattern [#9388](https://github.com/woocommerce/woocommerce-blocks/pull/9388)
|
||
|
||
1. Create a new page or post
|
||
2. Make sure the `Product collections: featured collections` pattern appears under the WooCommerce category dropdown.
|
||
3. Insert in and make sure it shows as expected on the design.
|
||
|
||
### Add product details pattern [#9408](https://github.com/woocommerce/woocommerce-blocks/pull/9408)
|
||
|
||
1. Add a page/post and use the block inserter and go to Patterns->WooCommerce->Product Details Pattern.
|
||
2. Ensure you see the preview like the screenshot above and add it to the page/post.
|
||
3. Ensure it looks like the design in the screenshot.
|
||
4. Save/update and go to the frontend and ensure it displays the same as well.
|
||
|
||
### Add banner pattern [#9434](https://github.com/woocommerce/woocommerce-blocks/pull/9434)
|
||
|
||
1. Add a page/post and use the block inserter to add the `Banner` pattern by going to patterns->woocommerce->Banner
|
||
2. Ensure the preview shows nicely per the screenshot above.
|
||
3. After adding the pattern to the page/post, publish/update and view it in the frontend and ensure it displays as what you saw in the preview.
|
||
|
||
### Add to Cart with Options block > Restore the global variable to its original value after being overriden [#9581](https://github.com/woocommerce/woocommerce-blocks/pull/9581)
|
||
|
||
1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard and on the sidebar, click on "Appearance > Editor".
|
||
2. Select the Single Product template to customize it and click on edit.
|
||
3. If you are still using the Classic template, click on the button to transform it to the blockifyed version.
|
||
4. Make sure the Add to Cart with Options block is available for usage on the inserter (you can remove/add the block from the template), add it, and save.
|
||
5. On the frontend, ensure the button works as expected, and the product can be added to the cart.
|
||
6. Access the single template for all available product types, including simple, variable, grouped, and external and make sure you can add all of them to the cart.
|