81 lines
6.0 KiB
Markdown
81 lines
6.0 KiB
Markdown
|
# Testing notes and ZIP for release 8.7.5
|
||
|
|
||
|
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/9902031/woocommerce-gutenberg-products-block.zip)
|
||
|
|
||
|
## Feature plugin and package inclusion in WooCommerce
|
||
|
|
||
|
### Fix Mini Cart Global Styles. [7515](https://github.com/woocommerce/woocommerce-blocks/pull/7515)
|
||
|
|
||
|
|
||
|
1. Enable TT3 theme.
|
||
|
2. Go to Appearance > Site Editor and replace the header with `WooCommerce Essential Header | Light` pattern.
|
||
|
3. Save and visit the frontend.
|
||
|
4. Hover over the Mini Cart and be sure that the font size doesn't change.
|
||
|
5. Edit some settings related to the Mini Cart Global Styles.
|
||
|
6. Be sure that the settings are reflected correctly on the editor and frontend side.
|
||
|
|
||
|
### Fix inconsistent button styling with TT3. ([7516](https://github.com/woocommerce/woocommerce-blocks/pull/7516))
|
||
|
|
||
|
|
||
|
| Before | After |
|
||
|
| ------ | ----- |
|
||
|
|![image](https://user-images.githubusercontent.com/4463174/198559087-b24ceeb2-61ba-488f-84a0-f87d6b2bc965.png)|![image](https://user-images.githubusercontent.com/4463174/198559394-b3e377d5-3e6e-4f3e-9ea4-282fd02fe923.png)|
|
||
|
|
||
|
1. Enable TT3.
|
||
|
2. Create a new post/page and add the `All Product` block and the `Product Categories` block.
|
||
|
3. Save.
|
||
|
4. Visit the post/page via incognito mode and be sure that all the buttons have the same style.
|
||
|
|
||
|
### Make the Filter by Price block range color dependent of the theme color. [7525](https://github.com/woocommerce/woocommerce-blocks/pull/7525)
|
||
|
|
||
|
| Theme | Before | After |
|
||
|
| --- | ------ | ----- |
|
||
|
| Storefront | ![imatge](https://user-images.githubusercontent.com/3616980/198656336-463dd2fe-4329-4d5e-8305-43f8375a0077.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198666606-aa3c443b-0e21-4474-b6d2-084280ec557b.png) |
|
||
|
| TT2 (dark) | ![imatge](https://user-images.githubusercontent.com/3616980/198658810-b429e817-7685-4a4c-afbc-eb57b2a72543.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198666776-7dfb3663-ace5-40ff-91e5-87571b6767a0.png) |
|
||
|
| Bricksy | ![imatge](https://user-images.githubusercontent.com/3616980/198661164-3d84c0e5-c27b-40b8-82df-d8db319d4c50.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198667122-05c29bf8-534f-4409-8577-572b44d782f5.png) |
|
||
|
| TT3 (default) | ![imatge](https://user-images.githubusercontent.com/3616980/198665415-584ac7eb-3c20-4d35-a1a6-6501cc932bad.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198666131-2e641add-3918-4447-8260-dc8c9eefc684.png) |
|
||
|
| TT3 (Pilgrimage) | ![imatge](https://user-images.githubusercontent.com/3616980/198665030-cba725ec-a420-4184-98bf-3ace4e639e6f.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198667488-b03bb985-8304-4f7c-86b9-5a6bb3f073f9.png) |
|
||
|
|
||
|
1. Add the Filter by Price and the All Products blocks in the same page.
|
||
|
2. Visit the page in the frontend and move the price slider thumbs.
|
||
|
3. Verify there is enough contrast between the "active" part of the slider and the "inactive" one (see screenshots above).
|
||
|
|
||
|
|
||
|
### Filter by Price block: fix price slider visibility on dark themes. [7527](https://github.com/woocommerce/woocommerce-blocks/pull/7527)
|
||
|
|
||
|
| | With dark background | With light background |
|
||
|
|----------------|----------------------|-----------------------|
|
||
|
| Before this PR |![Screen Capture on 2022-10-28 at 17-10-01](https://user-images.githubusercontent.com/4463174/198670636-61618ba7-7160-4674-be03-d8245a1a8209.gif)|![Screen Capture on 2022-10-28 at 17-11-48](https://user-images.githubusercontent.com/4463174/198671568-57fa5e44-4eb1-4ad1-82b8-51e2d4a7e0f8.gif)|
|
||
|
| With this PR |![Screen Capture on 2022-10-28 at 17-08-35](https://user-images.githubusercontent.com/4463174/198669729-a206b68d-0d01-41a3-8117-1a8015aed0a5.gif)|![Screen Capture on 2022-10-28 at 17-02-05](https://user-images.githubusercontent.com/4463174/198665985-3ae65415-e997-4c9c-a146-e07947f5fc68.gif)|
|
||
|
|
||
|
|
||
|
1. Enable TT2.
|
||
|
2. Add the Filter by Price and All Products blocks inside a Columns block into a post or page.
|
||
|
3. Change the background color of the Filter by Price column to a dark color. Change the text color to a light color.
|
||
|
4. Notice the price slider is visible.
|
||
|
|
||
|
### Update the Mini Cart block drawer to honor the theme's background. [7510](https://github.com/woocommerce/woocommerce-blocks/pull/7510)
|
||
|
|
||
|
1. Download and activate [TT3](https://github.com/WordPress/twentytwentythree) select the Pilgrimage style variation (see screenshot below).
|
||
|
2. Add the Mini Cart block to a post or page.
|
||
|
3. In the frontend, click on the Mini Cart button to open the drawer.
|
||
|
4. Verify the background is dark and text can be read properly.
|
||
|
5. Back in the editor, select the Mini Cart block and press on `Edit Mini Cart template part` in the sidebar. That will open the template editor.
|
||
|
6. Verify text is legible there as well:
|
||
|
![imatge](https://user-images.githubusercontent.com/3616980/198266198-9a607821-cb5b-47e5-90ec-b0cd64ca34e3.png)
|
||
|
7. Try with all other TT3 theme variations and verify text can be properly read in all of them.
|
||
|
8. Repeat all steps above with TT2.
|
||
|
|
||
|
### Add white background to Filter by Attribute block dropdown so text is legible in dark backgrounds. [7506](https://github.com/woocommerce/woocommerce-blocks/pull/7506)
|
||
|
|
||
|
| Before | After |
|
||
|
| ------ | ----- |
|
||
|
| ![imatge](https://user-images.githubusercontent.com/3616980/198288809-7f575c00-72f1-41e7-8a19-1cf2c9e2b3b7.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198288636-225716da-6a6d-4db2-ad03-5dd404ea61d7.png) |
|
||
|
| ![imatge](https://user-images.githubusercontent.com/3616980/198288969-c5619a4b-a16f-4d39-815d-a6ebd336cc40.png) | ![imatge](https://user-images.githubusercontent.com/3616980/198289132-6066cb6d-03c6-4f5b-a791-69da2e1db95c.png) |
|
||
|
|
||
|
|
||
|
1. Download and activate [TT3](https://github.com/WordPress/twentytwentythree).
|
||
|
2. Add the All Products block with the Filter by Attribute block next to it in a post or page.
|
||
|
2. Visit the post or page and interact with the Filter by Attribute block.
|
||
|
3. Verify the background of the input has white background, so text is legible.
|