129 lines
9.8 KiB
Markdown
129 lines
9.8 KiB
Markdown
# Testing notes and ZIP for release 8.4.0
|
|
|
|
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/9444105/woocommerce-gutenberg-products-block.zip)
|
|
|
|
## Feature plugin and package inclusion in WooCommerce
|
|
|
|
### Update the filter `Apply` buttons to match the new designs. ([6958](https://github.com/woocommerce/woocommerce-blocks/pull/6958))
|
|
|
|
1. Create a new page and add the `All Products` block and the filter pattern containing all filter blocks.
|
|
2. Save it and check the buttons look like the `After` screenshot on the editor and the frontend.
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="664" alt="Screenshot 2022-08-22 at 16 03 13" src="https://user-images.githubusercontent.com/186112/185940267-432c2866-c41a-4fda-8b0d-e6fbd3ef397b.png"> | <img width="684" alt="Screenshot 2022-08-23 at 10 41 03" src="https://user-images.githubusercontent.com/186112/186113450-1e59dfe5-6619-41e9-8f0c-a2e71a8eedde.png">|
|
|
|
|
### Update the design of the Filter Products by Attribute block. ([6920](https://github.com/woocommerce/woocommerce-blocks/pull/6920))
|
|
|
|
1. Add the `Filter by Attribute` block to a page.
|
|
2. Check that it looks like the new design in the editor and the front-end.
|
|
3. Check that the `Reset` button appears when a checkbox is checked.
|
|
4. Edit the page and change the Display Style to dropdown.
|
|
5. Check that it looks like the new design in the editor and the front-end (it won't look exactly like the design, check [this conversation](p1660817888642199-slack-C02SGH7JBGS) for more context)
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="675" alt="Screenshot 2022-08-19 at 11 36 19" src="https://user-images.githubusercontent.com/186112/185591110-209a3767-9701-4564-978c-c61a6b805ff6.png"> | <img width="691" alt="Screenshot 2022-08-19 at 11 35 10" src="https://user-images.githubusercontent.com/186112/185591165-f1216f4b-b8ee-4af6-9519-ddafb437894e.png"> |
|
|
| <img width="668" alt="Screenshot 2022-08-19 at 11 36 41" src="https://user-images.githubusercontent.com/186112/185591294-dd6d531c-5dfc-471a-ad96-6d7b57b63550.png">| <img width="673" alt="Screenshot 2022-08-19 at 11 37 15" src="https://user-images.githubusercontent.com/186112/185591322-917c6967-289b-44c8-932f-9b29d84be815.png"> |
|
|
| <img width="685" alt="Screenshot 2022-08-19 at 11 38 01" src="https://user-images.githubusercontent.com/186112/185591479-b914d75e-b176-485c-93d0-35ac969fbbae.png"> | <img width="670" alt="Screenshot 2022-08-19 at 11 37 28" src="https://user-images.githubusercontent.com/186112/185591503-b0705eba-58ba-4536-b97f-cff5f1761244.png"> |
|
|
|
|
### Update the design of the Filter by Attribute block settings panel. ([6912](https://github.com/woocommerce/woocommerce-blocks/pull/6912))
|
|
|
|
1. Add the `Filter by Attribute` block to a page.
|
|
2. Check the copy and the design matches with the new design.
|
|
3. Check no regression has happened.
|
|
|
|
### Terms and conditions, and Privacy policy links open in a new tab by default. ([6908](https://github.com/woocommerce/woocommerce-blocks/pull/6908))
|
|
|
|
1. Insert Checkout page and save the page.
|
|
2. On frontend, click on the terms or privacy links in the checkout block.
|
|
3. They should open in a new tab.
|
|
|
|
### Layout updates to the Active Filters block. ([6905](https://github.com/woocommerce/woocommerce-blocks/pull/6905))
|
|
|
|
1. Add the Active Filters block alongside some other Filters blocks.
|
|
2. Apply some filters to the page.
|
|
3. Confirm the layout matches the **After** screenshot above.
|
|
4. Confirm the **Remove Filter** buttons for each active filter have a hover state of an alternate shade of grey - also confirm they function as expected.
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="725" alt="CleanShot 2022-08-24 at 09 22 27@2x" src="https://user-images.githubusercontent.com/481776/186429719-de3cb516-467a-4635-b336-64bf63b96f9e.png"> | <img width="650" alt="CleanShot 2022-08-24 at 09 19 27@2x" src="https://user-images.githubusercontent.com/481776/186429883-6bfe4c9d-d7a4-4caf-a31f-72dbd33f88a7.png"> |
|
|
| | |
|
|
| <img width="725" alt="CleanShot 2022-08-24 at 09 21 47@2x" src="https://user-images.githubusercontent.com/481776/186430028-2f076c50-d6c9-4931-b5d1-347c844c43d1.png"> | <img width="650" alt="CleanShot 2022-08-24 at 09 20 16@2x" src="https://user-images.githubusercontent.com/481776/186430096-b2841edf-bbc3-47dc-8f36-7b568e697310.png"> |
|
|
|
|
### Update the design of the Filter Products by Stock block. ([6883](https://github.com/woocommerce/woocommerce-blocks/pull/6883))
|
|
|
|
1. Add the Filter by Stock component to a page using the All Products block, and also a block template.
|
|
2. Check that the control panel for this block looks like the design (minus Typography)
|
|
3. On both the page and the template frontends select a checkbox and observe that it looks as it should do with the design.
|
|
4. Check that a "Reset" button appears and clicking this resets the filter again.
|
|
5. Now go to your Edit Page & Edit Template pages and enable "'Apply filters' button".
|
|
6. On the frontends again, re-select your filter options and check that they are not applied immediately until you click "Apply"
|
|
7. Check that when this block is used with the PHP template & the All Products block that regardless of whether the "Apply Filters" button is active, that clicking "Reset" immediately clears the selected filter options
|
|
|
|
| Before | After |
|
|
| ------ | ----- |
|
|
| <img width="509" alt="Screenshot 2022-08-17 at 12 33 57" src="https://user-images.githubusercontent.com/8639742/185108568-1c6875e8-10a1-4070-919d-876c42af8a89.png"> | <img width="555" alt="Screenshot 2022-08-17 at 12 32 28" src="https://user-images.githubusercontent.com/8639742/185410884-45952fdd-14fe-4784-9ba6-c58c248630ad.png"> |
|
|
|
|
### Update the design of the Filter Products by Price block. ([6877](https://github.com/woocommerce/woocommerce-blocks/pull/6877))
|
|
|
|
1. Add `Filter Products by Price` block to a page.
|
|
2. Verify that the `Inline input fields` only shows when the `Price Range` is Editable.
|
|
3. Toggle Inline input fields, see the block in the editor updates accordingly.
|
|
4. Toggle Filter button, see the Reset and Apply button.
|
|
5. Add the All Products block then save the page.
|
|
6. On the front end, see the new style applied as in the editor.
|
|
7. Change the price using the slider then click the Apply button.
|
|
8. See the filter works as expected.
|
|
9. Click on the Reset button, see the price filter is reset. (Even if the filter button is enabled, clicking on the reset button should reset the filter query).
|
|
10. Tested again with PHP templates, ensure no regression.
|
|
|
|
<img width="1256" alt="image" src="https://user-images.githubusercontent.com/5423135/184097877-5210b4c6-907b-404f-bcf3-c7d83c02a563.png">
|
|
|
|
### Allow making the Cart/Checkout block page the default one from within the editor. ([6867](https://github.com/woocommerce/woocommerce-blocks/pull/6867))
|
|
|
|
To test this feature you need the latest trunk of WooCommerce, or WooCommerce 6.9.0. For older versions of WC (pre 6.9.0), the notice would show the old text:
|
|
|
|
<img width="297" alt="image" src="https://user-images.githubusercontent.com/6165348/184404663-11cac5f1-1729-4782-a39f-ee5f101a78a7.png">
|
|
|
|
1. Make sure you have a Cart and Checkout pages in WooCommerce -> Settings -> Advanced.
|
|
2. Those pages urls can be `/cart` and `/checkout`.
|
|
3. Open a new page, give it a title, insert Cart block.
|
|
4. Select Cart block, you should see the notice, select an inner block, you should see the notice as well.
|
|
5. Click on the notice, it will load for a couple of seconds, once it's green, visit your new page.
|
|
6. Make sure it's on the previous url, so `/cart`.
|
|
7. Go back to settings, make sure your new page is that value there.
|
|
8. Do the same thing for Checkout block.
|
|
9. Open a new page, add Cart block, save the page and publish it.
|
|
10. Select the block or one of its inner blocks, start the flow again.
|
|
11. It should work, confirm that by visiting the frontend.
|
|
|
|
<video src="https://user-images.githubusercontent.com/6165348/183219991-4b904273-67ef-43e1-94fb-7498531f104f.mov" controls="controls" style="max-width: 730px;">
|
|
</video>
|
|
|
|
### Register product search as a core/search variation when available. ([6191](https://github.com/woocommerce/woocommerce-blocks/pull/6191))
|
|
|
|
1. Ensure the Gutenberg version is ≥ 13.4 and it is deactivated.
|
|
2. With a block theme (2022 for example), add the Product Search block to the header.
|
|
3. See the Product Search is the independent block (as it is in `trunk`), not a variation of the Search block. See the block is editable in the editor and working as expected on the front end.
|
|
4. Activate Gutenberg.
|
|
5. On the front end, see the block is still working as expected and is still a WC block (notice the classes, and search icon).
|
|
6. Edit the header, see the Deprecation notice, and a call to action button to upgrade the search block to search variation.
|
|
7. Click on the CTA button to see if the block is converted to WC variation of the core search block.
|
|
8. Save and see the block functions flawlessly on the front end.
|
|
9. Edit the header again, try adding the Product Search block, only variation is available in the inserter. The legacy can't be found and inserted from the inserter.
|
|
|
|
<video src="https://user-images.githubusercontent.com/5423135/181692749-8ce8ea51-824a-49c3-97e3-fc1c05130fdb.mov" controls="controls" style="max-width: 730px;">
|
|
</video>
|
|
|
|
### Fixed a bug with a class name deriving from a translatable string. ([6914](https://github.com/woocommerce/woocommerce-blocks/pull/6914))
|
|
|
|
1. Add an item to your cart that has multiple variants. E.g. Hoodie (Blue, Logo)
|
|
2. Go to the Cart Block
|
|
3. Inspect the text for one of the variants (e.g. Colour: Blue)
|
|
4. Make sure there is a class called `wc-block-components-product-details__item` on the `<li>` element. This should be a child of `<ul className="wc-block-components-product-details">`
|
|
5. Change the language of your store
|
|
6. Refresh the cart page
|
|
7. Repeat steps 3 and 4. You should see the same result.
|