woocommerce/plugins/woocommerce-blocks/docs/internal-developers/testing/releases/852.md

81 lines
6.0 KiB
Markdown
Raw Normal View History

Release: 8.5.2 (https://github.com/woocommerce/woocommerce-blocks/pull/7535) * use full link for WordPress resources (https://github.com/woocommerce/woocommerce-blocks/pull/7211) Co-authored-by: Niels Lange <info@nielslange.de> * Empty commit for release pull request * update readme * add testing instructions * add zip file link * update testing instructions and changelog entry * Bumping version strings to new version. * Empty commit for release pull request * Update styles of the Filter by Attribute dropdown so it looks good in TT3 (https://github.com/woocommerce/woocommerce-blocks/pull/7506) * Use theme's body background color as the mini cart contents default background color (https://github.com/woocommerce/woocommerce-blocks/pull/7510) Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> * Price Slider: use `currentColor` for the slider (https://github.com/woocommerce/woocommerce-blocks/pull/7527) * Fixed Price Slider Issue Located where the price slider was hard coded and replaced it. * fix CSS lint * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce/woocommerce-blocks#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce/woocommerce-blocks#7130 use currentColor instead of hard-coded color for the slider of the Filte By Price block * remove background-color Co-authored-by: EmptySet-Exe <46509186+EmptySet-Exe@users.noreply.github.com> Co-authored-by: Niels Lange <info@nielslange.de> * Make price slider 'inactive' range half transparent so it looks better in dark themes (https://github.com/woocommerce/woocommerce-blocks/pull/7525) * Fix inconsistent button styling with TT3 (https://github.com/woocommerce/woocommerce-blocks/pull/7516) * fix inconsistent button styling with TT3 * use wc_wp_theme_get_element_class_name * add check to be sure that wc_wp_theme_get_element_class_name function exists * Fix Mini Cart Block global styles woocommerce/woocommerce-blocks#7379 (https://github.com/woocommerce/woocommerce-blocks/pull/7515) * Fix Mini Cart Block global styles woocommerce/woocommerce-blocks#7379 Fix Mini Cart Block global styles * add font_size * Empty commit for release pull request * add changelog and testing instructions * add zip link for testing * Bumping version strings to new version. Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> Co-authored-by: Niels Lange <info@nielslange.de> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: Tung Du <dinhtungdu@gmail.com> Co-authored-by: EmptySet-Exe <46509186+EmptySet-Exe@users.noreply.github.com>
2022-10-31 15:10:27 +00:00
# Testing notes and ZIP for release 8.5.2
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/9901527/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.