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

131 lines
9.5 KiB
Markdown
Raw Normal View History

# Testing notes and ZIP for release 7.8.0
Release: 7.8.0 (https://github.com/woocommerce/woocommerce-blocks/pull/6517) * Empty commit for release pull request * Add changelog for the 7.8.0 release * Add testing notes for 7.8.0 release * move legacy payment processing to its own class (https://github.com/woocommerce/woocommerce-blocks/pull/6519) * update changelog and testing instructions after the cherry-pick * add link * Featured Item: Fix colors from default palette not being applied (https://github.com/woocommerce/woocommerce-blocks/pull/6525) Gutenberg uses two different attributes for text colors: * `style.color.text`, and * `textColor` However, the second one is used only when a color from the default palette is selected AND the post is saved and reloaded. With this fix we use the human readable string from the default palette as a CSS variable. Please note that while Gutenberg correctly assigns the appropriate CSS class to render the right color, the problem is that if the color is handled by a class, it can be overridden for example by themes. See woocommerce/woocommerce-blocks#6492 * upload new zip * update changelog * Revert "Remove Combobox patch (https://github.com/woocommerce/woocommerce-blocks/pull/6465)" (https://github.com/woocommerce/woocommerce-blocks/pull/6531) This reverts commit 4976afad581d558c3e17ce809bded09772b624cd. * upload new zip * Bumping version strings to new version. Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> Co-authored-by: Lucio Giannotta <lucio.giannotta@a8c.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2022-06-07 13:40:54 +00:00
Zip file for testing: [woocommerce-gutenberg-products-block.zip](https://github.com/woocommerce/woocommerce-blocks/files/8853168/woocommerce-gutenberg-products-block.zip)
## Feature plugin and package inclusion in WooCommerce
### Filter Products by Price: Decrease price slider step sequence from 10 to 1. ([6486](https://github.com/woocommerce/woocommerce-blocks/pull/6486))
1. Create a new page and add a "Filter Products by Price" block plus the "All Products" to the page.
2. Save and preview the site on the Frontend e.g. via "Preview > Preview in new tab".
3. Interact with the price slider and confirm the price slider now increments in steps of 1 instead of 10.
4. Smoke test to ensure all other "Filter Products by Price" is still working as expected.
### Add the `Fixed image` and `Repeated image` media controls to the Featured Category block. ([6440](https://github.com/woocommerce/woocommerce-blocks/pull/6440))
1. Create a new page and add a `Featured Category` block, select a Category and, if it doesn't have an image, set one with the _Replace_ button in the toolbar.
2. On the block settings go to `Media Settings` and toggle `Fixed image` and `Repeated image` and save.
3. Check the rendered category on the frontend is correct and matches the one on the edit page.
4. Add a gradient overlay, save, and check the gradient is rendered on the frontend.
5. Edit the block again, repeat the steps above with different combinations on `Fixed image`, `Repeated image` and any other configuration.
6. Repeat steps 1-5 for the `Featured Product` block.
### Featured Item Blocks: Fix an issue where the default color could be overridden by a theme, and where custom colors where not applied correctly. ([6492](https://github.com/woocommerce/woocommerce-blocks/pull/6492))
| Before | After |
| --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ![before](https://user-images.githubusercontent.com/3616980/171025759-80071c62-e924-4a8a-93cd-211e1952b90d.png) | ![after](https://user-images.githubusercontent.com/1847066/171045209-5bcb5e59-59f0-433f-962a-5abbc2906975.png) |
Release: 7.8.0 (https://github.com/woocommerce/woocommerce-blocks/pull/6517) * Empty commit for release pull request * Add changelog for the 7.8.0 release * Add testing notes for 7.8.0 release * move legacy payment processing to its own class (https://github.com/woocommerce/woocommerce-blocks/pull/6519) * update changelog and testing instructions after the cherry-pick * add link * Featured Item: Fix colors from default palette not being applied (https://github.com/woocommerce/woocommerce-blocks/pull/6525) Gutenberg uses two different attributes for text colors: * `style.color.text`, and * `textColor` However, the second one is used only when a color from the default palette is selected AND the post is saved and reloaded. With this fix we use the human readable string from the default palette as a CSS variable. Please note that while Gutenberg correctly assigns the appropriate CSS class to render the right color, the problem is that if the color is handled by a class, it can be overridden for example by themes. See woocommerce/woocommerce-blocks#6492 * upload new zip * update changelog * Revert "Remove Combobox patch (https://github.com/woocommerce/woocommerce-blocks/pull/6465)" (https://github.com/woocommerce/woocommerce-blocks/pull/6531) This reverts commit 4976afad581d558c3e17ce809bded09772b624cd. * upload new zip * Bumping version strings to new version. Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> Co-authored-by: Lucio Giannotta <lucio.giannotta@a8c.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2022-06-07 13:40:54 +00:00
1. Activate the Storefront theme.
2. Add the Featured Product block to the page.
3. Select a product.
4. Notice that the default color of the text inside should be white.
5. Change the color using the picker to a custom one (not included in the default palette).
6. The color of the text should change.
7. Repeat steps 26 with the Featured Category block.
### Fix: All Products block: New product is missing in the Cart block if `Redirect to the cart page after successful addition` is enabled. ([6466](https://github.com/woocommerce/woocommerce-blocks/pull/6466))
1. Go to WooCommerce > Settings > Products > check both 'add to cart' behaviors to redirect and use AJAX, then save
2. On the home page, add the All Products block
3. On the front-end, click "add to cart" for any product
Release: 7.8.0 (https://github.com/woocommerce/woocommerce-blocks/pull/6517) * Empty commit for release pull request * Add changelog for the 7.8.0 release * Add testing notes for 7.8.0 release * move legacy payment processing to its own class (https://github.com/woocommerce/woocommerce-blocks/pull/6519) * update changelog and testing instructions after the cherry-pick * add link * Featured Item: Fix colors from default palette not being applied (https://github.com/woocommerce/woocommerce-blocks/pull/6525) Gutenberg uses two different attributes for text colors: * `style.color.text`, and * `textColor` However, the second one is used only when a color from the default palette is selected AND the post is saved and reloaded. With this fix we use the human readable string from the default palette as a CSS variable. Please note that while Gutenberg correctly assigns the appropriate CSS class to render the right color, the problem is that if the color is handled by a class, it can be overridden for example by themes. See woocommerce/woocommerce-blocks#6492 * upload new zip * update changelog * Revert "Remove Combobox patch (https://github.com/woocommerce/woocommerce-blocks/pull/6465)" (https://github.com/woocommerce/woocommerce-blocks/pull/6531) This reverts commit 4976afad581d558c3e17ce809bded09772b624cd. * upload new zip * Bumping version strings to new version. Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> Co-authored-by: Lucio Giannotta <lucio.giannotta@a8c.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2022-06-07 13:40:54 +00:00
4. See the page is redirected to the Cart page and the Cart block contains the newly added product.
### Add support for `Font size` and `Font family` for the `Mini Cart` block. ([6396](https://github.com/woocommerce/woocommerce-blocks/pull/6396))
| Before | After |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| ![before_now](https://user-images.githubusercontent.com/905781/167665373-ca4d9de0-77e9-4e98-bafb-b168c2e62638.jpg) | ![after_now](https://user-images.githubusercontent.com/905781/167665212-fbe1c92b-22cb-494a-b007-76c1bf9fa6b4.jpg) |
Release: 7.8.0 (https://github.com/woocommerce/woocommerce-blocks/pull/6517) * Empty commit for release pull request * Add changelog for the 7.8.0 release * Add testing notes for 7.8.0 release * move legacy payment processing to its own class (https://github.com/woocommerce/woocommerce-blocks/pull/6519) * update changelog and testing instructions after the cherry-pick * add link * Featured Item: Fix colors from default palette not being applied (https://github.com/woocommerce/woocommerce-blocks/pull/6525) Gutenberg uses two different attributes for text colors: * `style.color.text`, and * `textColor` However, the second one is used only when a color from the default palette is selected AND the post is saved and reloaded. With this fix we use the human readable string from the default palette as a CSS variable. Please note that while Gutenberg correctly assigns the appropriate CSS class to render the right color, the problem is that if the color is handled by a class, it can be overridden for example by themes. See woocommerce/woocommerce-blocks#6492 * upload new zip * update changelog * Revert "Remove Combobox patch (https://github.com/woocommerce/woocommerce-blocks/pull/6465)" (https://github.com/woocommerce/woocommerce-blocks/pull/6531) This reverts commit 4976afad581d558c3e17ce809bded09772b624cd. * upload new zip * Bumping version strings to new version. Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> Co-authored-by: Lucio Giannotta <lucio.giannotta@a8c.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2022-06-07 13:40:54 +00:00
1. Activate a **block** theme, like Twenty Twenty Two
2. Create a new page, and add the Mini Cart block
3. Check if the `Typography` option is available for the block
4. Check if the `Font size` and `Font family` options work correctly both in the editor and on the frontend
2b. After testing the above, try the same with the Mini Cart block added via the FSE editor (for example in the header)
### Set the default value for focalPoint on `block.json`. ([6499](https://github.com/woocommerce/woocommerce-blocks/pull/6499))
<img width="802" alt="Screenshot 2022-05-31 at 12 31 54" src="https://user-images.githubusercontent.com/186112/171153985-f4227ec0-9bd0-4a8e-823f-5ce396a3985d.png">
1. Create a new page and add a `Featured Product` or a `Featured Category` block and open the console.
2. Save the page and refresh the editor.
3. Click on the added block, edit some settings and check the error shown on the screenshot above does not appear.
4. Edit the focal point, save the block and check the block is rendered correctly on the edit page and on the frontend.
### Featured items: ensure valid DOM nesting in inspector controls. ([6501](https://github.com/woocommerce/woocommerce-blocks/pull/6501))
<img width="539" alt="Screenshot 2022-05-31 at 15 45 53" src="https://user-images.githubusercontent.com/1562646/171188665-aa0f82e8-2d74-4936-b0ad-122ee301925b.png">
<img width="266" alt="Screenshot 2022-05-31 at 14 28 01" src="https://user-images.githubusercontent.com/1562646/171189159-48bf6f3b-504b-4dee-9eab-f6ca8cc079c0.png">
1. Create a new page and add a `Featured Product` or a `Featured Category` block and open the console.
2. Click on the added block, edit some settings and check the error shown on the screenshot above does not appear.
### Migrate Featured Items Blocks to TypeScript. ([6439](https://github.com/woocommerce/woocommerce-blocks/pull/6439))
1. Add the **Featured Product** block to a page
2. Compare its functionality with the same block before these changes. Non-exhaustive list:
- When added, it shows a full-width selection dropdown to choose the product
- After choosing the product and clicking "Done", a loading spinner appears and the product is loaded
- All the info are displayed correctly (default image, title, description, price, call to action)
- The block toolbar shows the same tools (duotone, alignment, cropping/replacing, editing)
- The block sidebar shows the same options and they all work correctly (colors, content, media settings, etc.); note that the “border” does not currently work.
- The block appears resizable and resizing works the same way.
Release: 7.8.0 (https://github.com/woocommerce/woocommerce-blocks/pull/6517) * Empty commit for release pull request * Add changelog for the 7.8.0 release * Add testing notes for 7.8.0 release * move legacy payment processing to its own class (https://github.com/woocommerce/woocommerce-blocks/pull/6519) * update changelog and testing instructions after the cherry-pick * add link * Featured Item: Fix colors from default palette not being applied (https://github.com/woocommerce/woocommerce-blocks/pull/6525) Gutenberg uses two different attributes for text colors: * `style.color.text`, and * `textColor` However, the second one is used only when a color from the default palette is selected AND the post is saved and reloaded. With this fix we use the human readable string from the default palette as a CSS variable. Please note that while Gutenberg correctly assigns the appropriate CSS class to render the right color, the problem is that if the color is handled by a class, it can be overridden for example by themes. See woocommerce/woocommerce-blocks#6492 * upload new zip * update changelog * Revert "Remove Combobox patch (https://github.com/woocommerce/woocommerce-blocks/pull/6465)" (https://github.com/woocommerce/woocommerce-blocks/pull/6531) This reverts commit 4976afad581d558c3e17ce809bded09772b624cd. * upload new zip * Bumping version strings to new version. Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luigi <gigitux@gmail.com> Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> Co-authored-by: Lucio Giannotta <lucio.giannotta@a8c.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2022-06-07 13:40:54 +00:00
3. Verify the same for the **Featured Category** block.
### Refactor: Featured product and Featured category classes. ([6443](https://github.com/woocommerce/woocommerce-blocks/pull/6443))
1. Create a page and add a `Featured Category` block.
2. Save the page and check it renders correctly the default config in the frontend.
3. Edit the page and make some changes to the block (duotone, padding, overlay, focal point, fixed/repeated image etc.).
4. Save the page and check it renders correctly with the new settings.
5. Repeat steps 1-4 with the `Featured Product` block.
## Feature plugin only
### Fix: Only enqueue the relevant translations script. ([6478](https://github.com/woocommerce/woocommerce-blocks/pull/6478))
0. Change the language to the Netherlands then update all translations.
1. Visit a page without any blocks on the front end.
2. View source (don't use the Inspector).
3. See no unnecessary translations as the screenshot in [#6023](https://github.com/woocommerce/woocommerce-blocks/pull/6023) shows.
4. Create a page with the All Products block.
5. See translations work as expected in the editor and on the front end.
6. See the translation of Cart and Checkout blocks (and their inner blocks) are working as expected.
7. Check the page source of the pages containing WooCommerce Blocks, see only related translations are loaded.
### Respect low stock visibility setting in Cart/Checkout. ([6444](https://github.com/woocommerce/woocommerce-blocks/pull/6444))
1. Change a product to have its stock be managed, and set the stock quantity to 8.
2. Set that product Low stock threshold value to 10.
3. In WooCommerce -> Settings -> Products -> Inventory, set display format to "only show when below".
4. Add the item to your cart, you should see the low stock badge.
5. Change the setting to "never".
6. Visit cart again, the product no longer has the badge.
### Remove `useStoreSnackbarNotices` and interact directly with data store instead. ([6411](https://github.com/woocommerce/woocommerce-blocks/pull/6411))
1. Add a coupon to your store.
2. Add items to your cart.
3. Go to the Cart block, and apply the coupon. Ensure you see the snackbar notice for a successful coupon application.
4. **In a new tab**, open the Cart block again and remove the coupon. Ensure you see the snackbar notice for successful coupon removal.
5. Go back to the original tab and try removing the coupon, ensure you see an error message above the Cart.
6. Repeat the same steps but for the Checkout block.
### Decouple Store API payment handling from Checkout block loading code. ([6519](https://github.com/woocommerce/woocommerce-blocks/pull/6519))
1. Have a payment method like Stripe or WooCommerce payments enabled.
2. Go to checkout and try to place an order.
3. The order is placed and payment is captured and highlighted in admin area.