Order confirmation block styling

assets/css/abstracts/_colors.scss

@@ -15,3 +15,6 @@ $select-dropdown-dark: #1e1e1e;
 $select-dropdown-light: #fff;
 $select-item-dark: rgba(0, 0, 0, 0.4);
 $image-placeholder-border-color: #f2f2f2;
+
+// Universal colors for use on the frontend, currently being applied to checkout blocks.
+$universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white

assets/css/abstracts/_variables.scss

@@ -1,9 +1,10 @@
 @import "node_modules/@wordpress/base-styles/variables";
 
-$gap-largest: $grid-unit-50;
-$gap-larger: 4.5 * $grid-unit;
-$gap-large: $grid-unit-30;
-$gap: $grid-unit-20;
-$gap-small: $grid-unit-15;
-$gap-smaller: $grid-unit-10;
-$gap-smallest: $grid-unit-05;
+// grid-unit from base-styles is 8px.
+$gap-largest:  6 * $grid-unit;		// 48px
+$gap-larger:   4.5 * $grid-unit;	// 36px
+$gap-large:    3 * $grid-unit;		// 24px
+$gap:          2 * $grid-unit;		// 16px
+$gap-small:    1.5 * $grid-unit;	// 12px
+$gap-smaller:  1 * $grid-unit;		// 8px
+$gap-smallest: 0.5 * $grid-unit;	// 4px

assets/js/blocks/classic-template/order-confirmation.tsx

@@ -27,7 +27,11 @@ const getBlockifiedTemplate = ( inheritedAttributes: InheritedAttributes ) =>
 			inheritedAttributes
 		),
 		createBlock(
-			'woocommerce/order-confirmation-totals',
+			'woocommerce/order-confirmation-totals-wrapper',
+			inheritedAttributes
+		),
+		createBlock(
+			'woocommerce/order-confirmation-downloads-wrapper',
 			inheritedAttributes
 		),
 		createBlock( 'core/columns', inheritedAttributes, [

assets/js/blocks/order-confirmation/billing-address/style.scss

@@ -1,10 +1,25 @@
+.wp-block-woocommerce-order-confirmation-billing-wrapper > *:first-child {
+	margin-top: 0;
+}
+.wp-block-woocommerce-order-confirmation-billing-wrapper {
+	.block-editor-block-list__layout > *:first-child {
+		margin-top: 0 !important;
+	}
+}
 .wc-block-order-confirmation-billing-address {
-	border: 1px solid currentColor;
-	padding: $gap-large;
+	border: 1px solid $universal-border-light;
+	border-radius: 2px;
+	padding: $gap;
 
-	address {
+	address,
+	p {
 		width: 100% !important;
 		display: block;
 		box-sizing: border-box;
+		margin: 0 0 $gap;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
 	}
 }

assets/js/blocks/order-confirmation/billing-wrapper/block.json

@@ -1,7 +1,7 @@
 {
 	"name": "woocommerce/order-confirmation-billing-wrapper",
 	"version": "1.0.0",
-	"title": "Order Confirmation Billing",
+	"title": "Billing Address Section",
 	"description": "Display the order confirmation billing section.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],

assets/js/blocks/order-confirmation/billing-wrapper/edit.tsx

@@ -23,6 +23,7 @@ const Edit = ( {
 						'core/heading',
 						{
 							level: 3,
+							style: { typography: { fontSize: '24px' } },
 							content: attributes.heading || '',
 							onChangeContent: ( value: string ) =>
 								setAttributes( { heading: value } ),

assets/js/blocks/order-confirmation/downloads-wrapper/attributes.tsx

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default {
+	heading: {
+		type: 'string',
+		default: __( 'Downloads', 'woo-gutenberg-products-block' ),
+	},
+};

assets/js/blocks/order-confirmation/downloads-wrapper/block.json

@@ -0,0 +1,21 @@
+{
+	"name": "woocommerce/order-confirmation-downloads-wrapper",
+	"version": "1.0.0",
+	"title": "Downloads Section",
+	"description": "Display the downloadable products section.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"attributes": {
+		"heading": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"multiple": false,
+		"align": [ "wide", "full" ],
+		"html": false
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/order-confirmation/downloads-wrapper/edit.tsx

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { getSetting } from '@woocommerce/settings';
+
+const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		heading: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ) => {
+	const blockProps = useBlockProps();
+	const hasDownloadableProducts = getSetting(
+		'storeHasDownloadableProducts'
+	);
+
+	if ( ! hasDownloadableProducts ) {
+		return null;
+	}
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks
+				allowedBlocks={ [ 'core/heading' ] }
+				template={ [
+					[
+						'core/heading',
+						{
+							level: 3,
+							style: { typography: { fontSize: '24px' } },
+							content: attributes.heading || '',
+							onChangeContent: ( value: string ) =>
+								setAttributes( { heading: value } ),
+						},
+					],
+					[
+						'woocommerce/order-confirmation-downloads',
+						{
+							lock: {
+								remove: true,
+							},
+						},
+					],
+				] }
+			/>
+		</div>
+	);
+};
+
+export default Edit;

assets/js/blocks/order-confirmation/downloads-wrapper/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType, type BlockConfiguration } from '@wordpress/blocks';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { Icon, download } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import attributes from './attributes';
+
+registerBlockType(
+	metadata as BlockConfiguration,
+	{
+		icon: {
+			src: (
+				<Icon
+					icon={ download }
+					className="wc-block-editor-components-block-icon"
+				/>
+			),
+		},
+		edit,
+		save() {
+			return (
+				<div { ...useBlockProps.save() }>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+		attributes,
+	} as unknown as Partial< BlockConfiguration >
+);

assets/js/blocks/order-confirmation/downloads/block.json

@@ -7,7 +7,50 @@
 	"keywords": [ "WooCommerce" ],
 	"supports": {
 		"multiple": false,
-		"align": [ "wide", "full" ]
+		"align": [ "wide", "full" ],
+		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"color": {
+			"background": true,
+			"text": true,
+			"link": true,
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"__experimentalSelector": ".wp-block-woocommerce-order-confirmation-totals table"
 	},
 	"attributes": {
 		"align": {
@@ -17,10 +60,6 @@
 		"className": {
 			"type": "string",
 			"default": ""
-		},
-		"isPreview": {
-			"type": "boolean",
-			"default": false
 		}
 	},
 	"textdomain": "woo-gutenberg-products-block",