Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update testing instructions for woocommerce/woocommerce-blocks#8895

This commit is contained in:
Thomas Roberts 2023-04-11 09:30:21 +01:00
parent a7d4b07bf6
commit cc3c1cf1cc
1 changed files with 17 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
plugins/woocommerce-blocks/docs/internal-developers/testing/releases/1000.md
View File

@ -298,53 +298,28 @@ Ensure gutenberg plugin is active.
#### Test using blocks sidebar
1. Open the Global Styles sidebar by clicking the "Styles" button at the top right corner of the editor.
#### Test using Global styles UI
[Video link](https://user-images.githubusercontent.com/16707866/228781997-24a9a29f-4be7-46d4-b1b3-41520692d86d.mov)
1. Check that padding is visible for `Product Image` in global styles UI
2. In the Global Styles sidebar, locate the "Product Price" block.
3. Customize the block using the new styling options available under the "Product Price" block in the Global Styles sidebar:
- Change the background color under the "Colors" settings.
- Adjust the line height, font family, and letter spacing under the "Typography" settings.
- Modify the padding under the "Layout" settings.
4. Verify that these applied correctly within editor & on frontend:
1. Create a new post
[Link to video](https://user-images.githubusercontent.com/16707866/228507928-f7a9bb3e-8b69-4cf2-b46e-20a72f8e80bb.mov)
2. Change the padding & now to verify that this padding change is applied to `Product Image` block:
1. Go to Editor
2. Add Products block
3. Add Product Price block as an inner block if not included already
4. Check the Product Price block in both the editor and on the front-end to ensure that the changes made through the Global styles UI are accurately applied:
- In the editor, inspect Product Price block & ensure it matches the value set in the Global styles UI.
- Save the post & publish it. On frontend, inspect Product Price block & ensure it matches the value set in the Global styles UI.
**Also, verify these in `all products` block, which also uses Product Price block.**
### Add padding support for Product Image block ([8895](https://github.com/woocommerce/woocommerce-blocks/pull/8895))
3. Add Product Image block as an inner block if not included already
4. Check the Product Image block's padding in both the editor and on the front-end to ensure that the changes made through the Global styles UI are accurately applied:
- In the editor, select the Product Image block and observe the padding applied around the image. Ensure it matches the value set in the Global styles UI.
- Save the post or page, and then preview it on the front-end. Confirm that the Product Image block's padding is consistent with the value specified in the Global styles UI.
#### Test using blocks sidebar
1. Create a new page or post
2. Add the "Products" block to your post.
3. Add Product SKU block as an inner block if not included already
4. Select the Product SKU block and open the block settings in the right sidebar.
5. Customize the block using the new styling options available:
- Change the text color, background color, font family, font size, font appearance, line height, letter spacing, text decoration, letter case, margin, and padding under the appropriate settings sections.
6. Verify that the styling changes are immediately visible and applied correctly within the editor itself.
7. Save the post, then view it on the front-end to ensure the styling changes are visible and applied correctly.
1. Navigate to the WordPress admin dashboard and create a new post or page.
2. Add Products block
3. Add Product Image block as an inner block if not included already
4. Select the image block and open the block settings sidebar.
5. Adjust the margin and padding values for the image block and ensure that the changes are visually reflected in the editor.
6. Save the post or page and preview it on the front-end.
7. Verify that the applied margin and padding values are correctly displayed on the front-end as well.
#### Test using Global Styles
1. Open the Global Styles sidebar by clicking the "Styles" button at the top right corner of the editor.
[Video link](https://user-images.githubusercontent.com/16707866/228781997-24a9a29f-4be7-46d4-b1b3-41520692d86d.mov)
2. In the Global Styles sidebar, locate the "Product SKU" block.
3. Customize the block using the new styling options available under the "Product SKU" block in the Global Styles sidebar:
- Change the text color, background color, font family, font size, font appearance, line height, letter spacing, text decoration, letter case, margin, and padding under the appropriate settings sections.
4. Verify that these applied correctly within editor & on frontend:
- Create a new post
- Add Products block
- Add Product SKU block as an inner block if not included already
- Check the Product SKU block in both the editor and on the front-end to ensure that the changes made through the Global styles UI are accurately applied:
- In the editor, inspect Product SKU block & ensure it matches the values set in the Global styles UI.
- Save the post & publish it. On frontend, inspect Product SKU block & ensure it matches the values set in the Global styles UI.
**Also, verify the changes in All Products block, which also uses Product SKU block.**