161 lines
11 KiB
Markdown
161 lines
11 KiB
Markdown
# Testing notes and ZIP for release 11.1.0
|
|
|
|
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12577251/woocommerce-gutenberg-products-block.zip)
|
|
|
|
## WooCommerce Core
|
|
|
|
### Enhancements
|
|
|
|
#### Add Product Collection Rows pattern [#10857](https://github.com/woocommerce/woocommerce-blocks/pull/10857)
|
|
|
|
1. Go to Editor
|
|
2. Insert "Product Collection Rows" pattern
|
|
3. Save and go to frontend
|
|
4. Verify it looks like in the screenshots below. Note: Product Rating color is a plugin feature, meaning that stars will appear in default color (e.g. black) instead of yellow when testing in Core.
|
|
|
|
| Reference | Editor | Frontend
|
|
| ------ | ----- | -- |
|
|
|  | <img width="757" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/abeaaa75-155f-4181-b604-b9dab18052a9"> | <img width="747" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/73079494-2fbd-4214-8638-b6116715b972"> |
|
|
|
|
#### Add Simple Grid Product Collection pattern [#10835](https://github.com/woocommerce/woocommerce-blocks/pull/10835)
|
|
|
|
1. Go to Editor
|
|
2. Insert "Product Collection Simple Grid" pattern
|
|
3. Save and go to frontend
|
|
4. Verify it looks like in the screenshots below
|
|
|
|
| Reference | Editor | Frontend
|
|
| ------ | ----- | -- |
|
|
|  | <img width="712" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/5c92b850-5a77-4794-8e2b-5cb789506174"> | <img width="738" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/ba331287-b195-4a29-8157-72a6d5ec5e1a"> |
|
|
|
|
#### Product Hero Pattern > Adjust the content width [#10832](https://github.com/woocommerce/woocommerce-blocks/pull/10832)
|
|
|
|
1. Create a new post
|
|
2. Insert the Product Hero pattern
|
|
3. Make sure the pattern is properly displayed both in the editor and on the front end
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="1199" alt="Screenshot 2023-09-04 at 22 04 40" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/ffc2c7a9-00b3-4035-b86a-690d572bab40"> | <img width="1234" alt="Screenshot 2023-09-04 at 22 04 22" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4e8c4c24-d96b-44bd-93b2-b69203dc41ff"> |
|
|
|
|
#### Fix: Load blocks style separately for classic themes [#10758](https://github.com/woocommerce/woocommerce-blocks/pull/10758)
|
|
|
|
0. Activate Storefront theme.
|
|
1. Create a post or page and add the All Products block. Verify styles are loaded correctly.
|
|
2. Visit the page in the frontend and verify styles are loaded correctly in the frontend as well.
|
|
3. Repeat steps 1 and 2 with all blocks listed on [this page](https://wordpress.org/plugins/woo-gutenberg-products-block/). Make sure to test each block individually. So, when possible, try with only one block on the page (in some cases, that's not possible, ie: filter blocks, in that case, try with as few blocks as possible on the page). The reason is that we want to make sure each block includes the style dependencies that it needs, so they need to be tested in isolation, otherwise styles from other blocks might leak into other blocks and "help fix issues".
|
|
4. Repeat steps above with a block themes. Block themes are excluded from the newly added logic so there shouldn't be any regression with blocks theme as well, but we should ,at least, smoke test with a block theme.
|
|
|
|
#### Adjust `Follow us on social media` pattern icon alignment [#10709](https://github.com/woocommerce/woocommerce-blocks/pull/10709)
|
|
|
|
1. Create a new post or page.
|
|
2. Insert the **Follow us on social media** Pattern.
|
|
3. Confirm the pattern is correctly displayed in the editor.
|
|
4. Save the post and head over to the front end and confirm the pattern is correctly displayed both on desktop and mobile view (the layout should match the one demonstrated in the above screenshots in the After column and in the screencast under the Updated section).
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
|  |  |
|
|
|
|
### Bug Fixes
|
|
|
|
#### Change default number of columns in Related Products [#10875](https://github.com/woocommerce/woocommerce-blocks/pull/10875)
|
|
|
|
1. Go to Single Product template
|
|
2. Remove the content and add "WooCommerce Single Product Block"
|
|
3. Transform it to blockified template by clicking a blue button in the center of the block
|
|
4. Related Products blocks has 5 columns and grid layout
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="1004" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/858ac043-5979-47e0-a682-d992876d574b"> | <img width="1285" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/20098064/8f88a269-39b5-4b0b-8513-e90e2c3558e4"> |
|
|
|
|
#### Product Image: Fix bug that prevented block styles being applied within the editor [#10859](https://github.com/woocommerce/woocommerce-blocks/pull/10859)
|
|
|
|
1. Insert Single Product Block into a page
|
|
2. Select the product image
|
|
3. Open up styles in the inspector
|
|
4. Apply a border radius
|
|
5. Check this gets applied in the editor AND on the frontend.
|
|
6. Now check other styles are working as expected (padding, margin etc) and that no regressions have been introduced.
|
|
7. Now check that other blocks using this are working as expected. E.g. `Products (Beta)` and `Product Collections (Beta)`.
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
|  |  |
|
|
|
|
#### Fix bug with wpautop for the empty cart [#10768](https://github.com/woocommerce/woocommerce-blocks/pull/10768)
|
|
|
|
1. Install WooCommerce WC 8.0.x and a block theme (such as Twenty Twenty Three)
|
|
2. Go to Appearance > Editor > Templates > Cart
|
|
3. If this has the Cart Block, delete it and Include the `[woocommerce_cart]` shortcode.
|
|
4. Save and visit this page with an empty cart
|
|
5. The `Return to Shop` button should have equal padding top and bottom
|
|
|
|
| Before | After |
|
|
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| <img width="721" alt="Screenshot 2023-08-29 at 15 05 47" src="https://github.com/woocommerce/woocommerce-blocks/assets/3966773/35fbce4d-09da-4c4d-b535-0f76aa786e85"> | <img width="709" alt="Screenshot 2023-08-29 at 15 05 21" src="https://github.com/woocommerce/woocommerce-blocks/assets/3966773/cdb19385-3a7d-49cf-b620-4d5cd5254f55"> |
|
|
|
|
#### Prevent the Cart block reloading when adding an item to it from the Empty Cart block [#10624](https://github.com/woocommerce/woocommerce-blocks/pull/10624)
|
|
|
|
1. Add an item to your cart and go to the Cart block. Ensure it renders correctly.
|
|
2. Remove the item from your cart and ensure you see the Empty Cart block.
|
|
3. From the Empty Cart block, add an item to your cart.
|
|
4. Notice the cart loads and shows the new item.
|
|
5. Ensure the page does not reload during this process.
|
|
6. Create a page and add Products (Beta) to it. Save the page.
|
|
7. Visit the page and add items to your cart. Ensure they work and you can go to Cart -> Checkout successfully and place the order.
|
|
8. Repeat step 6 and 7 with the Products by Attribute block, and Product Collection block.
|
|
|
|
#### Product button: Sync temporary number of items on instantiation [#10604](https://github.com/woocommerce/woocommerce-blocks/pull/10604)
|
|
|
|
1. Add a Product Collection block
|
|
2. Add items to the cart
|
|
3. Paginate to a different page
|
|
4. Add more items to the cart
|
|
5. Check that when paginating back and forth, it shows the correct number of items
|
|
6. Open the MiniCart block
|
|
7. Change the number of items of products that are in the same page
|
|
8. Check that the animation is triggered
|
|
9. Change the number of items of products that are not in the same page
|
|
10. Navigate to the page that has those products and check that the number of items is correct
|
|
11. Use a cache plugin (or simulate a cached page)
|
|
12. Check everything again
|
|
|
|
#### Customer Account Block: Fixed an issue that would make the account icon scale incorrectly in certain environments (prominently in the TT1 theme) [#10533](https://github.com/woocommerce/woocommerce-blocks/pull/10533)
|
|
|
|
1. Add Customer Account block to a page.
|
|
2. Set the font-size to `XL`.
|
|
3. Activate the Twenty-Twenty-One theme.
|
|
4. Ensure the size of the icon is the same in the editor and the front-end, and is aligned with the font size of the label.
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="711" alt="Screenshot 2023-08-10 at 23 09 08" src="https://github.com/woocommerce/woocommerce-blocks/assets/1847066/d5480538-beac-4b87-b944-2092d9e20329"> | <img width="704" alt="Screenshot 2023-08-10 at 23 09 31" src="https://github.com/woocommerce/woocommerce-blocks/assets/1847066/bc9c240f-83c3-4833-9605-e93be63190be"> |
|
|
|
|
#### Customer Account Block: Fixed an issue that caused padding to be inconsistent between the editor and the front-end [#10476](https://github.com/woocommerce/woocommerce-blocks/pull/10476)
|
|
|
|
1. Add a Customer Account block to a post or page.
|
|
2. For easier readability of padding, assign it a background color.
|
|
3. Notice that there is a `0.5em` padding in the container, and the same around the icon.
|
|
4. Save it and test in on the front-end: padding should be the same.
|
|
5. Go back to the editor and remove the icon (select: “Text only” from the Inspector Controls).
|
|
6. Padding should decrease to just `0.5em` around the box.
|
|
7. Save and test it on the front-end: padding should be the same.
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="591" alt="Screenshot 2023-08-04 at 21 13 02" src="https://github.com/woocommerce/woocommerce-blocks/assets/1847066/40d58f4d-8d3c-46b8-833e-b21b5d736911"> | <img width="698" alt="Screenshot 2023-08-04 at 21 13 16" src="https://github.com/woocommerce/woocommerce-blocks/assets/1847066/a70b145f-9dbe-4f61-a98c-6ba987d09a23"> |
|
|
|
|
## Feature Plugin
|
|
|
|
### Bug Fixes
|
|
|
|
#### Fixed notice displaying on Cart and Checkout template [#10151](https://github.com/woocommerce/woocommerce-blocks/pull/10151)
|
|
|
|
1. Activate a based theme like TT3
|
|
2. Go to Appearance > Editor > Templates > Manage All Templates
|
|
3. Click the three dots next to the Cart and Checkout templates and then clear customizations
|
|
4. Add product via add to cart link. (Eg: [http://localhost/cart/?add-to-cart=34](http://localhost/cart/?add-to-cart=34))
|
|
5. Verify that the notice stating that the item was added to the cart appears
|