Apply spacing improvements to the Checkout block (#47565)

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/style.scss

@@ -1,4 +1,5 @@
 .wc-block-checkout__actions {
+
 	&_row {
 		display: flex;
 		justify-content: space-between;
@@ -37,7 +38,6 @@
 
 .is-large {
 	.wc-block-checkout__actions {
-		border-top: 1px solid $universal-border-light;
+		padding: 0 0 $gap-largest 0;
-		padding: $gap-larger 0;
 	}
 }

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/edit.tsx

@@ -10,7 +10,6 @@ import { ORDER_FORM_KEYS } from '@woocommerce/block-settings';
  * Internal dependencies
  */
 import Block from './block';
-import './editor.scss';
 
 export const Edit = ( {
 	attributes,

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/editor.scss

@@ -1,12 +0,0 @@
-// Adjust padding and margins in the editor to improve selected block outlines.
-.wp-block-woocommerce-checkout-order-note-block {
-	margin-top: 20px;
-	margin-bottom: 20px;
-	padding-top: 4px;
-	padding-bottom: 4px;
-
-	.wc-block-checkout__add-note {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-}

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/index.tsx

@@ -8,7 +8,6 @@ import { registerBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
-import './style.scss';
 import attributes from './attributes';
 
 registerBlockType( 'woocommerce/checkout-additional-information-block', {

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-additional-information-block/style.scss

@@ -1,31 +0,0 @@
-.wc-block-checkout__add-note {
-	margin: $gap-larger 0;
-}
-
-.is-mobile,
-.is-small,
-.is-medium {
-	.wc-block-checkout__add-note {
-		border-bottom: 1px solid $universal-border-light;
-		margin-bottom: em($gap);
-		margin-top: em($gap);
-		padding: em($gap) 0;
-	}
-}
-
-.wc-block-checkout__add-note .wc-block-components-textarea {
-	border: 1px solid $universal-border-light;
-	margin-top: $gap;
-
-	&:focus {
-		background-color: #fff;
-		color: currentColor;
-		outline: 0;
-		box-shadow: 0 0 0 2px currentColor;
-	}
-}
-
-.wc-block-components-form
-.wc-block-checkout__order-notes.wc-block-components-checkout-step {
-	padding-left: 0;
-}

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/editor.scss

@@ -1,9 +1,13 @@
 // Adjust padding and margins in the editor to improve selected block outlines.
 .wp-block-woocommerce-checkout-order-note-block {
-	margin-top: 20px;
+	margin: $gap-largest 0;
-	margin-bottom: 20px;
+	padding: 4px 0;
-	padding-top: 4px;
+
-	padding-bottom: 4px;
+	.wc-block-checkout__order-notes.wc-block-components-checkout-step {
+		.wc-block-components-form & {
+			margin: 0;
+		}
+	}
 
 	.wc-block-checkout__add-note {
 		margin-top: 0;

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss

@@ -1,18 +1,16 @@
 .wc-block-checkout__add-note {
-	margin: $gap-larger 0;
+	margin: 0 0 $gap-largest 0;
-}
+	line-height: 1;
+	padding: 0;
 
-.is-mobile,
+	.wc-block-components-checkbox {
-.is-small,
+		line-height: 1;
-.is-medium {
+		margin-top: 0;
-	.wc-block-checkout__add-note {
+		margin-bottom: -3px;
-		border-bottom: 1px solid $universal-border-light;
-		margin-bottom: em($gap);
-		margin-top: em($gap);
-		padding: em($gap) 0;
 	}
 }
 
+
 .wc-block-checkout__add-note .wc-block-components-textarea {
 	border: 1px solid $universal-border-light;
 	margin-top: $gap;
@@ -28,4 +26,12 @@
 .wc-block-components-form
 .wc-block-checkout__order-notes.wc-block-components-checkout-step {
 	padding-left: 0;
+	margin-bottom: $gap-largest;
+
+	.is-medium &,
+	.is-small &,
+	.is-mobile & {
+		border-bottom: 0;
+		padding-bottom: 0;
+	}
 }

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/editor.scss

@@ -1,3 +1,10 @@
 .wc-block-components-shipping-rates-control__no-results-notice .components-notice__content {
 	color: $black;
 }
+
+
+.wc-block-components-shipping-rates-control label.wc-block-components-radio-control__option {
+	.is-small & {
+		padding: 0.875em 0.875em 0.875em em($gap-huge);
+	}
+}

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/block.json

@@ -22,6 +22,10 @@
 		"text": {
 			"type": "string",
 			"required": false
+		},
+		"showSeparator": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"parent": [ "woocommerce/checkout-fields-block" ],

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx

@@ -16,6 +16,7 @@ import {
 } from '@wordpress/components';
 import { PRIVACY_URL, TERMS_URL } from '@woocommerce/block-settings';
 import { ADMIN_URL } from '@woocommerce/settings';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -24,10 +25,10 @@ import './editor.scss';
 import { termsConsentDefaultText, termsCheckboxDefaultText } from './constants';
 
 export const Edit = ( {
-	attributes: { checkbox, text },
+	attributes: { checkbox, text, showSeparator },
 	setAttributes,
 }: {
-	attributes: { text: string; checkbox: boolean };
+	attributes: { text: string; checkbox: boolean; showSeparator: boolean };
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
 	const blockProps = useBlockProps();
@@ -126,9 +127,22 @@ export const Edit = ( {
 							} )
 						}
 					/>
+					<ToggleControl
+						label={ __( 'Show separator', 'woocommerce' ) }
+						checked={ showSeparator }
+						onChange={ () =>
+							setAttributes( {
+								showSeparator: ! showSeparator,
+							} )
+						}
+					/>
 				</PanelBody>
 			</InspectorControls>
-			<div className="wc-block-checkout__terms">
+			<div
+				className={ clsx( 'wc-block-checkout__terms', {
+					'wc-block-checkout__terms--with-separator': showSeparator,
+				} ) }
+			>
 				{ checkbox ? (
 					<>
 						<CheckboxControl

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/editor.scss

@@ -1,6 +1,16 @@
+.edit-post-visual-editor {
+
+	.is-small,
+	.is-medium {
+		.wc-block-checkout__terms {
+			padding: 4px;
+		}
+	}
+}
+
 // Adjust padding and margins in the editor to improve selected block outlines.
 .wc-block-checkout__terms {
-	margin: $gap-larger 0;
+	margin: 0 0 $gap-largest 0;
 	padding-top: 4px;
 	padding-bottom: 4px;
 	display: flex;

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx

@@ -20,9 +20,11 @@ const FrontendBlock = ( {
 	checkbox,
 	instanceId,
 	className,
+	showSeparator,
 }: {
 	text: string;
 	checkbox: boolean;
+	showSeparator: string | boolean;
 	instanceId: string;
 	className?: string;
 } ): JSX.Element => {
@@ -76,6 +78,8 @@ const FrontendBlock = ( {
 				'wc-block-checkout__terms',
 				{
 					'wc-block-checkout__terms--disabled': isDisabled,
+					'wc-block-checkout__terms--with-separator':
+						showSeparator !== 'false' && showSeparator !== false,
 				},
 				className
 			) }

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/style.scss

@@ -1,5 +1,25 @@
 .wc-block-checkout__terms {
-	margin: $gap-larger 0;
+	margin: 0 0 $gap-largest;
+
+	.is-mobile &,
+	.is-small & {
+		margin-bottom: $gap-larger;
+
+		&.wc-block-checkout__terms--with-separator {
+			padding-top: $gap-larger;
+		}
+	}
+
+	&.wc-block-checkout__terms--with-separator {
+		padding-top: $gap-largest;
+		border-top: 1px solid $universal-border-light;
+
+
+		.is-mobile &,
+		.is-small & {
+			border-top: 0;
+		}
+	}
 
 	textarea {
 		top: -5px;

plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss

@@ -8,6 +8,10 @@
 	.wc-block-components-shipping-rates-control__package {
 		border-bottom: 0;
 		margin: 0 0 1em;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
 	}
 }
 

plugins/woocommerce-blocks/packages/components/form-step/style.scss

@@ -5,13 +5,38 @@
 .wc-block-components-form .wc-block-components-checkout-step {
 	position: relative;
 	border: none;
-	background: none;
-	margin: 0;
 	padding: 0;
+	background: none;
+	margin: 0 0 $gap-largest 0;
 
 	.is-mobile &,
 	.is-small & {
 		padding-left: 0;
+		margin-bottom: $gap-larger;
+
+		// The below CSS rules are to show a separator between Checkout steps on mobile.
+		// This media query is required because on themes where the Checkout block is rendered alongside something else,
+		// e.g. Storefront using the "Default Template" (which has a sidebar) the checkout block can get the `.is-small`
+		// class, but the screen itself is larger than 400px.
+		@include breakpoint( "<600px" ) {
+			padding-top: $gap-larger;
+
+			// Remove padding from the first checkout step. First of type is required here as the first-child is the express payment methods block.
+			&:first-of-type {
+				padding-top: 0;
+			}
+
+			&::after {
+				position: absolute;
+				content: "";
+				bottom: -$gap-larger;
+				left: -100vw;
+				width: 200vw;
+				height: 1px;
+				background: currentColor;
+				opacity: 0.11;
+			}
+		}
 	}
 }
 
@@ -30,6 +55,10 @@
 
 .wc-block-components-checkout-step__content > * {
 	margin-bottom: $gap;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 }
 .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content > :last-child {
 	margin-bottom: 0;
@@ -38,7 +67,7 @@
 	margin-top: em($gap-smaller);
 }
 .wc-block-components-checkout-step__heading {
-	margin: $gap-larger 0 $gap-smaller;
+	margin: 0 0 $gap-smaller;
 	position: relative;
 
 	.wc-block-components-express-payment-continue-rule + .wc-block-components-checkout-step & {

plugins/woocommerce/changelog/add-separator-to-terms

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Add a control to enable a separator on the Checkout block's "Checkout Terms" block. This will enable a separator above the block that can be turned off in case the block is moved.

plugins/woocommerce/changelog/update-checkout-section-spacing

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Improve spacing between steps in the Checkout block on mobile and desktop