Update 8609 testing instructions

This commit is contained in:
Thomas Roberts 2023-04-11 14:25:04 +01:00
parent c99eedc2d9
commit d2d615e901
1 changed files with 14 additions and 19 deletions

View File

@ -274,28 +274,23 @@ Ensure gutenberg plugin is active.
#### Test using blocks sidebar
#### Test using Global styles UI
1. Open the Global Styles sidebar by clicking the "Styles" button at the top right corner of the editor.
1. Check that padding is visible for `Product Image` in global styles UI
[Video link](https://user-images.githubusercontent.com/16707866/228781997-24a9a29f-4be7-46d4-b1b3-41520692d86d.mov)
[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. 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
2. Add Products block
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.
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.
#### Test using blocks sidebar
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.
**Also, verify these in `all products` block, which also uses Product Price block.**