github-actions[bot]
commented
2 weeks ago Test using WordPress Playground
The changes in this pull request can be previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.
Test this pull request with WordPress Playground.
Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.
nikkivias
Submission Review Guidelines:
Changes proposed in this Pull Request:
This PR changes a lot of CSS to achieve the spacing requested in #46004 for both desktop and mobile.
Each checkout step now has a bottom margin of 48px. Previously, the titles of each step had padding/margin applied to the top however I moved it to the bottom of each checkout step.
Order notes, terms and conditions, and checkout actions all had to have some additional styling applied as they are outside of a "Checkout step".
As per the figma I moved the horizontal separator from between the Order Notes block and the Terms and Conditions block to be between the Terms and Conditions Block and the Checkout actions block (submit button). The separator is now tied to the checkout actions block and rendered above it.
Mobile
Desktop
Closes #46004 .
How to test the changes in this Pull Request:
Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:
Reference figma: 2JyXNimI4oGeJZhgQNZE9V-fi-2072%3A31996
Add an item to your cart and go to the Checkout block.
Observe the vertical space between each checkout step. Ensure it is consistent, and it is 48px
Check the Checkout block in the editor. Spacing should also be consistent here, although some padding has been added to various blocks to assist with highlighting them in the editor, so the checks here can be less strict, though all sections should look reasonably consistent and similar to what's rendered on the front-end.
In the editor, select the "Order notes" block and delete it. Ensure the spacing between elements is not affected by this and it still looks consistent.
Save the page and reload the Checkout block on the front end.
Again, check for vertical spacing consistency across all device sizes.
Return to the editor, remove the Checkout Terms and Conditions block.
Save the page and reload the Checkout block on the front end.
Again, check for vertical spacing consistency across all device sizes, paying special attention to the end of the form near the place order button.
Return to the editor, insert the order notes block above the Checkout button. Do not re-add the terms and conditions block yet.
Save the page and reload the Checkout block on the front end.
Check for vertical spacing consistency across all device sizes, paying special attention to the end of the form near the place order button. Be sure to check the "Add order note" box and ensure that the spacing is still fine with the textarea visible.
Go back to the editor, add the Checkout Terms block back above the place order button. Select it and turn on the
Require checkboxoption.Return to the Checkout block on the front end and reload. Try to check out without checking the Terms and Conditions box. Ensure the spacing is still fine when the checkbox is in its error state.
Test with Local pickup enabled/disabled and ensure everything is consistent.
Try various different configurations by modifying the block options of various inner blocks (use your creativity!) and ensure spacing is looking good in each configuration in both the editor and front-end.
Check the Cart block and compare it to trunk. Ensure no spacing changes have occurred.
Changelog entry