Apply spacing improvements to the Checkout block

[opr]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

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

Before	After

Desktop

Before	After

Closes #46004 .

How to test the changes in this Pull Request:

Note

Please repeat these steps in Chrome/Firefox/Safari with varying screen sizes. Please also test in different browsers on your mobile. Please also test with different themes. I tested with Storefront, Tsubaki, Twenty Twenty-Four, Tove.

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Reference figma: 2JyXNimI4oGeJZhgQNZE9V-fi-2072%3A31996

1. Add an item to your cart and go to the Checkout block.
2. Observe the vertical space between each checkout step. Ensure it is consistent, and it is 48px
3. 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.
4. 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.
5. Save the page and reload the Checkout block on the front end.
6. Again, check for vertical spacing consistency across all device sizes.
7. Return to the editor, remove the Checkout Terms and Conditions block.
8. Save the page and reload the Checkout block on the front end.
9. Again, check for vertical spacing consistency across all device sizes, paying special attention to the end of the form near the place order button.
10. Return to the editor, insert the order notes block above the Checkout button. Do not re-add the terms and conditions block yet.
11. Save the page and reload the Checkout block on the front end.
12. 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.
13. Go back to the editor, add the Checkout Terms block back above the place order button. Select it and turn on the Require checkbox option.

13. 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.
14. Test with Local pickup enabled/disabled and ensure everything is consistent.
15. 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.
16. Check the Cart block and compare it to trunk. Ensure no spacing changes have occurred.

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

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.

[github-actions]

Hi @nielslange, @nikkivias,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[nielslange]

Thanks for working on this, @opr. I've successfully tested the PR based on your testing steps, so I'm pre-approving the PR.

Out of curiosity, is there a particular reason why in some cases you replaced $gap-larger with ... rem? Personally, I'd rather use $gap and it's siblings, wherever possible. That said, spacing-wise, the PR looks great. I was just curious about the mixed units.

[nielslange]

Nice approach! 🤩

[nikkivias]

@opr Thanks for your patience. I have gone through the different scenarios and things are looking good. Well done! And great workaround on the separator.

[nikkivias]

I have gone through the different scenarios and things are looking good. Well done! And great workaround on the separator.

[nielslange]

I've double-checked the PR and it works as expected. Both code and testing-steps are looking fine. Let's ⛴️ this improvement! 🙌