296 lines
20 KiB
Markdown
296 lines
20 KiB
Markdown
# Testing notes and ZIP for release 11.3.0
|
||
|
||
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/12862192/woocommerce-gutenberg-products-block.zip)
|
||
|
||
|
||
## WooCommerce Core
|
||
|
||
### Condensed Address Form Implementation [11167](https://github.com/woocommerce/woocommerce-blocks/pull/11167)
|
||
|
||
#### As a logged out guest customer
|
||
|
||
1. Add something to cart and then go to checkout
|
||
2. Notice the address form is shown
|
||
3. Fill out address. Wait for totals to update.
|
||
4. Refresh the page. Condensed address component should be visible.
|
||
|
||
#### As a logged in user who has checked out before (has an address)
|
||
|
||
1. Repeat above tests. Condensed address component should be visible upon entry to checkout.
|
||
2. Click "edit" on the condensed shipping address. Form should be shown instead.
|
||
3. Uncheck "use shipping for billing". Billing address form should be shown.
|
||
4. Change some item of billing address data.
|
||
5. Refresh the page.
|
||
6. Condensed billing address should be shown.
|
||
|
||
|
||
|
||
### Store Customization > Update aspect ratio, icons and default text for the Social: Follow us on social media pattern [11161](https://github.com/woocommerce/woocommerce-blocks/pull/11161)
|
||
|
||
1. Create a new post
|
||
2. Insert the **Social: Follow us on social media** pattern
|
||
3. Make sure it is correctly rendered both on the editor side and on the front end. The images should all be with a square format.
|
||
4. Make sure the icons have the color set as primary.
|
||
|
||
| Before | After |
|
||
| ------ | ----- |
|
||
| <img width="1163" alt="Screenshot 2023-10-06 at 10 39 06" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4d8c4dfc-9ade-4070-89cd-1bf8bbd2f538"> | <img width="1158" alt="Screenshot 2023-10-06 at 10 50 19" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/5361b577-9c5c-4bff-9273-b564a039dc31"> |
|
||
|
||
### Add horizontal padding to the Featured Category Triple pattern [11160](https://github.com/woocommerce/woocommerce-blocks/pull/11160)
|
||
|
||
1. Create a new page or post.
|
||
2. Insert the `Featured Category Triple` pattern.
|
||
3. Check if there's a padding left and right of the pattern, both in the editor and the front end.
|
||
|
||
### Remove placeholder and pagination [11145](https://github.com/woocommerce/woocommerce-blocks/pull/11145)
|
||
|
||
1. Create a new page or post.
|
||
2. Insert the `Product Collection 3 Columns`, `Product Collection 4 Columns`, `Product Collection 5 Columns`, and `Product Gallery` patterns.
|
||
3. Check they don't have the pagination or the no results blocks.
|
||
4. Check the image's aspect ratio is portrait (height > width).
|
||
|
||
| Before | After |
|
||
| ------ | ----- |
|
||
| <img width="1175" alt="before" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/cc9daafe-52ee-4f23-a852-ca33c46173b1"> | <img width="1168" alt="after" src="https://github.com/woocommerce/woocommerce-blocks/assets/186112/58956139-c68b-4fa2-974e-9e59ed9e5696"> |
|
||
|
||
### Store Customization > Homepage Template 1: Review layout and spacing in between patterns [11144](https://github.com/woocommerce/woocommerce-blocks/pull/11144)
|
||
|
||
1. Create a new page or post and insert all the patterns shown in the screenshot below 👇
|
||
- `Minimal 5-column products row` corresponds to `Product Collection 5 Columns`
|
||
2. Make sure the design is the same and the spacing between patterns matches.
|
||
|
||
<img width="524" alt="Screenshot 2023-10-02 at 17 39 07" src="https://user-images.githubusercontent.com/15730971/272015191-e07193cc-07e2-4a3e-b88e-29f4654850db.png">
|
||
|
||
### Store Customization > Replace patterns based on the Products (Beta) block with an equivalent based on the Product Collection block [11134](https://github.com/woocommerce/woocommerce-blocks/pull/11134)
|
||
|
||
| Old Pattern | Replacement |
|
||
| ------ | ----- |
|
||
| 3-Column Product Row <img width="686" alt="Screenshot 2023-10-04 at 17 12 47" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/2c18c4ba-d75a-43b2-aa8d-7e7734363655"> | Product Collection 3 Columns <img width="1227" alt="Screenshot 2023-10-04 at 17 13 37" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/6e842ad8-b163-4c02-9900-c6400a039960"> |
|
||
| 1:1 Image 4-Column Product Row <img width="685" alt="Screenshot 2023-10-04 at 17 14 25" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/120b128d-b31d-42df-a7de-db128840a9ae"> | Product Collection 4 Columns <img width="1233" alt="Screenshot 2023-10-04 at 17 14 59" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/5c95339e-0acb-451d-95f5-966b0c22506a"> |
|
||
| Minimal 5-Column Product Row <img width="688" alt="Screenshot 2023-10-04 at 17 15 54" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4b405ace-ef43-4c70-aa0e-0ce9ed268e4e"> | Product Collection 5 Columns <img width="1229" alt="Screenshot 2023-10-04 at 17 16 32" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/cbfce4ca-cdf6-440d-86e2-f3f44a18e373"> |
|
||
| Featured Products 5-Item Grid <img width="1215" alt="Screenshot 2023-10-04 at 17 17 40" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/127ccbf4-bbf8-4939-96d4-a97dc9125d26"> | Product Collection: Featured Products 5 Columns <img width="1220" alt="Screenshot 2023-10-04 at 17 18 14" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/4703a9df-6ab6-4970-9dbb-f2f35414499f"> |
|
||
|
||
1. Create a new post
|
||
2. Insert the following patterns: Product Collection 3 Columns, Product Collection 4 Columns, Product Collection 5 Columns, Product Collection: Featured Products 5 Columns
|
||
3. Make sure all of them are using the Product Collection block for rendering in the editor:
|
||
|
||
<img width="1995" alt="Screenshot 2023-10-04 at 17 23 05" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/9d63321a-fad2-41de-835b-2490ce7f9d27">
|
||
|
||
4. Save and head over to the front end: make sure things are working as expected and the designs match the ones displayed on the screenshots in this PR.
|
||
|
||
### Store Customization > Homepage Template 3: Review layout and spacing in between patterns [11131](https://github.com/woocommerce/woocommerce-blocks/pull/11131)
|
||
|
||
1. Create a new page or post and insert all the patterns shown in the screenshot below 👇 (`Featured Products 5-Item Grid` corresponds to `Product Collection: Featured Products 5 Columns`)
|
||
2. Make sure the design is the same and the spacing between patterns matches.
|
||
|
||
<img width="524" alt="Screenshot 2023-10-02 at 17 39 07" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/b72469a2-5b03-4193-b0fb-e1c0eb0e3e24">
|
||
|
||
### Store Customization > Add default image to Just Arrived pattern [11130](https://github.com/woocommerce/woocommerce-blocks/pull/11130)
|
||
|
||
1. Create a new post and add the pattern "Just Arrived Full Hero"
|
||
2. Check that it looks like the below screenshots on both desktop and mobile viewports both in the editor and on the frontend.
|
||
|
||
| Desktop | Mobile |
|
||
| ------ | ----- |
|
||
|  |  |
|
||
|
||
### Store Customization > Homepage Template 2: Review layout and spacing in between patterns [11129](https://github.com/woocommerce/woocommerce-blocks/pull/11129)
|
||
|
||
1. Create a new page or post and insert all the patterns shown in the screenshot below 👇
|
||
- `1:1 image 4-column products row` corresponds to `Product Collection 4 Columns`.
|
||
- `Minimal 5-column products row` corresponds to `Product Collection 5 Columns`.
|
||
2. Make sure the design is the same and the spacing between patterns matches.
|
||
|
||
<img width="449" alt="Screenshot 2023-10-02 at 17 36 50" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/56232ac8-8917-4a7f-96f0-058d88aa11e5">
|
||
|
||
### Add data-price button attribute containing product price [11117](https://github.com/woocommerce/woocommerce-blocks/pull/11117)
|
||
|
||
1. Add a page with a Products (Beta), Product by Category or Products by Attribute block on it.
|
||
2. Install Pinterest Tag Helper extension into your browser (I use Chrome for that matter).
|
||
3. Navigate to the page with the added block and click Add to Cart button.
|
||
4. See an AddToCart event inside Pinterest Tag Helper has no value attribute value (it has it set to null, instead of a product price).
|
||
|
||
|
||
|
||
Expected value is not `null`
|
||
|
||
<img width="1335" alt="All_Products_–_WordPress_Pinterest" src="https://github.com/woocommerce/woocommerce-blocks/assets/9010963/1d023231-3807-4bdc-b641-9d51ae4830cd">
|
||
|
||
### Store Customization > Wireframe and adjust width for the Just Arrived Full Hero pattern [11115](https://github.com/woocommerce/woocommerce-blocks/pull/11115)
|
||
|
||
1. Create a new post
|
||
2. Insert the **Just Arrived Full Hero** pattern
|
||
3. Add an image to it and save
|
||
4. Make sure the styles match what is on the screenshots of this PR
|
||
5. Save the post and check the front end: make sure things are working as expected as well
|
||
|
||
| Desktop | Mobile |
|
||
| ------ | ----- |
|
||
| <img width="1214" alt="Screenshot 2023-10-03 at 17 58 13" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/c928007f-ede0-419d-b528-e24ad50d228a"> | <img width="385" alt="Screenshot 2023-10-03 at 18 00 10" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/2883b7d8-8b60-4c07-9baa-8c69ec5430fa"> |
|
||
|
||
### Remove opinionated styles from the Hero Product 3 Split pattern [11110](https://github.com/woocommerce/woocommerce-blocks/pull/11110)
|
||
|
||
1. Insert the `Hero Product 3 Split` pattern into your page.
|
||
2. Go to Site Editor > Styles and select various color palettes.
|
||
3. Ensure the patterns style changes color based on the selected preferences.
|
||
4. Test in various block themes to ensure it works as expected.
|
||
|
||
| Before | After |
|
||
| ------ | ----- |
|
||
| <img width="1199" alt="Screenshot 2023-10-03 at 15 29 20" src="https://github.com/woocommerce/woocommerce-blocks/assets/8639742/7e0596c6-9873-4ac5-af98-14e014722008"> | <img width="1217" alt="Screenshot 2023-10-03 at 15 27 59" src="https://github.com/woocommerce/woocommerce-blocks/assets/8639742/960ac65f-468f-42f3-99be-1da28b9a20a5"> |
|
||
|
||
### Store Customization > Add the Featured Category Cover Image pattern [11109](https://github.com/woocommerce/woocommerce-blocks/pull/11109)
|
||
|
||
1. Create a new post
|
||
2. Insert the **Featured Category Cover Image** pattern
|
||
3. Make sure the styles match what is on the screenshots of this PR
|
||
4. Save the post and check the front end: make sure things are working as expected as well
|
||
|
||
| Desktop | Mobile |
|
||
| ------ | ----- |
|
||
| <img width="1214" alt="Screenshot 2023-10-03 at 15 39 56" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/cc1a509b-0e4f-448a-8483-0844d9d0068d"> | <img width="377" alt="Screenshot 2023-10-03 at 15 39 45" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/68317e43-211c-464e-a511-7a3368a5cbab"> |
|
||
|
||
### Add fee ID/key to parent cart and checkout block [11054](https://github.com/woocommerce/woocommerce-blocks/pull/11054)
|
||
|
||
#### Testing notes for the development team
|
||
|
||
1. add a fee to you cart, for example by using this code in your functions.php
|
||
```
|
||
add_action( 'woocommerce_cart_calculate_fees', function( $cart ) {
|
||
$cart->add_fee( 'Fee 0', 5, true );
|
||
$cart->add_fee( 'Fee 2', 10, true );
|
||
$cart->add_fee( 'Fee 3', 50, true );
|
||
});
|
||
```
|
||
2. go to your cart or checkout block
|
||
3. check the CSS classes of the fee elements with your browser developer tool
|
||
|
||
|
||
|
||
### Update the sidebar notice we show for incompatible extensions [10877](https://github.com/woocommerce/woocommerce-blocks/pull/10877)
|
||
|
||
#### Testing notes for the development team
|
||
|
||
##### Test updated text
|
||
|
||
1. Install and activate the [Coinbase Commerce extension](https://wordpress.org/plugins/coinbase-commerce/).
|
||
2. Install and activate the [Paystack WooCommerce Payment Gateway extension](https://wordpress.org/plugins/woo-paystack/). You should check `Enable Paystack` in its settings.
|
||
3. Create a test page and add the Checkout block to it.
|
||
4. Open the settings sidebar, if not already open.
|
||
5. Verify that the incompatibility notice lists the `Coinbase` and `Paystack` extensions:
|
||
<img width="280" alt="Screenshot 2023-09-22 at 19 57 49" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/f2779b98-0283-48fb-a1e5-fd43aa82bb46">
|
||
|
||
> **Note**
|
||
> If the compatibility notice does not appear, then open the inspector, go to `Application » Local Storage`, select your local site, remove the entry `wc-wc-blocks_dismissed_incompatible_payment_gateways_notices`, and refresh the page:
|
||
<img width="1279" alt="Screenshot 2023-09-22 at 19 58 40" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/0d34d3c9-9330-42cd-8242-1bb95a08ba1e">
|
||
|
||
##### Test display of incompatible extensions
|
||
|
||
1. Install and activate the following three helper plugins:
|
||
- [helper-plugin-1.zip](https://github.com/woocommerce/woocommerce-blocks/files/12701036/helper-plugin-1.zip)
|
||
- [helper-plugin-2.zip](https://github.com/woocommerce/woocommerce-blocks/files/12701039/helper-plugin-2.zip)
|
||
- [helper-plugin-3.zip](https://github.com/woocommerce/woocommerce-blocks/files/12701041/helper-plugin-3.zip)
|
||
2. Create a test page and add the Checkout block to it.
|
||
4. Open the settings sidebar, if not already open.
|
||
5. Verify that the incompatibility notice lists the `A → Incompatible Extension`, `Coinbase`, `N → Incompatible Extension
|
||
`, `Paystack` and `Z → Incompatible Extension` extensions:
|
||
<img width="277" alt="Screenshot 2023-09-22 at 20 12 20" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/f86e5ce1-6a1b-4ffa-8c24-a8b88fabfe7a">
|
||
|
||
##### Test closing of sidebar notice
|
||
|
||
1. Ensure that you executed the previous test case.
|
||
2. Dismiss the incompatibility sidebar notice by clicking on the X in the upper-right corner.
|
||
3. Refresh the page and verify that the incompatibility sidebar notice remains hidden.
|
||
|
||
<table>
|
||
<tr>
|
||
<td valign="top">Before:
|
||
<br><br>
|
||
<img width="279" alt="Screenshot 2023-09-22 at 20 23 22" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/c8be0e82-fddc-46f2-a8f7-eabda60e3d31">
|
||
</td>
|
||
<td valign="top">After:
|
||
<br><br>
|
||
<img width="277" alt="Screenshot 2023-09-22 at 20 12 20" src="https://github.com/woocommerce/woocommerce-blocks/assets/3323310/f86e5ce1-6a1b-4ffa-8c24-a8b88fabfe7a">
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
### Fix: Store Notices block breaks page editors [11165](https://github.com/woocommerce/woocommerce-blocks/pull/11165)
|
||
|
||
1. Edit a page.
|
||
2. Add the Store Notices Block.
|
||
3. Try Saving the page.
|
||
4. See no error. The page is saved successfully.
|
||
|
||
| Before | After |
|
||
| ------ | ----- |
|
||
| <img width="957" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5423135/c2a23518-5ccc-4aee-969c-311c58aa2eaf"> | <img width="953" alt="image" src="https://github.com/woocommerce/woocommerce-blocks/assets/5423135/7c380762-7ca1-466d-a03a-8e6c2a3682f1"> |
|
||
|
||
### Store Customization > Ensure the Just Arrived Full Hero pattern can have an AI selected image assigned to it [11159](https://github.com/woocommerce/woocommerce-blocks/pull/11159)
|
||
|
||
1. Access the JN install with the credentials provided here > p1696409554974299-slack-C053716F2H2
|
||
2. Create a new post
|
||
3. Insert the **Just Arrived Full Hero** pattern
|
||
4. Make sure it is correctly rendered both on the editor side and on the front end.
|
||
|
||
PS: the background image doesn't necessarily have to match what is displayed in the screenshot below; those are dynamically changed depending on the business description.
|
||
|
||
| Before | After |
|
||
| ------ | ----- |
|
||
| <img width="1207" alt="Screenshot 2023-10-06 at 09 55 46" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/a79aa838-1df2-470a-a00b-00776146e87a"> | <img width="1208" alt="Screenshot 2023-10-06 at 09 55 12" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/94170c78-463b-4eb9-be32-33dea06f1261"> |
|
||
|
||
### Store Customization > Fix the Testimonials 3 Columns pattern [11158](https://github.com/woocommerce/woocommerce-blocks/pull/11158)
|
||
|
||
#### Testing notes for the development team
|
||
|
||
1. Create a new post
|
||
2. Insert the Testimonials 3 Columns pattern
|
||
3. Make sure it works as expected both on the editor side and on the front end
|
||
4. Check your PHP error log and confirm you don't see any errors related to this pattern in particular.
|
||
|
||
| Before | After |
|
||
| ------ | ----- |
|
||
| <img width="1278" alt="Screenshot 2023-10-06 at 08 45 52" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/ce3eadb2-9109-4649-b4df-0980bbdb4497"> | <img width="1253" alt="Screenshot 2023-10-06 at 08 46 02" src="https://github.com/woocommerce/woocommerce-blocks/assets/15730971/53db772f-653e-4fc8-b5bb-d6515b2dc8cf"> |
|
||
|
||
### Pattern: fetch product id on the JS side [11138](https://github.com/woocommerce/woocommerce-blocks/pull/11138)
|
||
|
||
1. Open the post editor.
|
||
2. Add the `Product hero` and `Product details listing` patterns.
|
||
3. Ensure that a product is visible.
|
||
|
||
### Force 100% width for combobox in checkout block [11133](https://github.com/woocommerce/woocommerce-blocks/pull/11133)
|
||
|
||
1. Install and activate the Twenty Twenty-Three theme.
|
||
2. Install and activate the Gutenberg plugin.
|
||
3. Create a test page and add the Checkout block.
|
||
4. Edit the page and verify that the Country/Region and State fields are full width.
|
||
|
||
|
||
|
||
### Icon should use current color on checkout error [11127](https://github.com/woocommerce/woocommerce-blocks/pull/11127)
|
||
|
||
1. With TT3 go to Appearance > Editor, edit one template and open the styles sidebar. Select a dark style variation, like Pilgrimage.
|
||
2. In the frontend, add a product to your cart and go to the Checkout page with the Checkout block.
|
||
3. In the admin, mark that product as out of stock.
|
||
4. Reload the Checkout page.
|
||
5. Icon color should match text.
|
||
|
||
| Before | After |
|
||
| ------ | ----- |
|
||
|  |  |
|
||
|
||
### Single Product block: Redirect to the cart page after successful addition setting isn't respected [11151](https://github.com/woocommerce/woocommerce-blocks/pull/11151)
|
||
|
||
#### Test 1: Redirect shopper to the cart page after successful addition when setting is enabled
|
||
1. Enable redirects to the cart page with the setting under WooCommerce > Settings > Products > General > Add to cart behaviour > Check - Redirect to the cart page after successful addition
|
||
2. Create a product and a page with an FSE theme.
|
||
3. Add the product to the page with the Single Product block.
|
||
4. View the page and click "Add to cart". Make sure the shopper is redirected to the Cart page and the product was correctly added to the cart
|
||
|
||
#### Test 2: Keep shopper at the same page when setting is disabled
|
||
1. Enable redirects to the cart page with the setting under WooCommerce > Settings > Products > General > Add to cart behaviour > Check - Redirect to the cart page after successful addition
|
||
2. Create a product and a page with an FSE theme.
|
||
3. Add the product to the page with the Single Product block.
|
||
4. View the page and click "Add to cart". Make sure the shopper is NOT redirected to the Cart page;
|
||
5. Visit the Cart page and make sure the product was correctly added to the cart.
|