diff --git a/docs/internal-developers/testing/releases/875.md b/docs/internal-developers/testing/releases/875.md new file mode 100644 index 00000000000..e687f737bb4 --- /dev/null +++ b/docs/internal-developers/testing/releases/875.md @@ -0,0 +1,80 @@ +# 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.