Add order confirmation wrapper block (#10286)

* Add a heading wrapper block

* Register the BillingWrapper Block server side

* Fix exception 'render_content' error

* Add the Billing Wrapper Block to the template

* Fix wrong block name error

* Fix php error

* Conditionally render Billing Address within the Wrapper

* Fix parent rendering

* Clean up code (remove billing address from the template)

* Update titles, descriptions, and icons of the billing Block and inner block

* Fix broken block by removing the "parent" keyword

* Use a user-friendly title and description for the Billing Wrapper

* Update Billing Wrapper Block's title case

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Fix PHP failing unit test

---------

Co-authored-by: Mike Jolley <mike.jolley@me.com>

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

@@ -32,15 +32,8 @@ const getBlockifiedTemplate = ( inheritedAttributes: InheritedAttributes ) =>
 		),
 		createBlock( 'core/columns', inheritedAttributes, [
 			createBlock( 'core/column', inheritedAttributes, [
-				createBlock( 'core/heading', {
-					level: 3,
-					content: __(
-						'Billing Address',
-						'woo-gutenberg-products-block'
-					),
-				} ),
 				createBlock(
-					'woocommerce/order-confirmation-billing-address',
+					'woocommerce/order-confirmation-billing-wrapper',
 					inheritedAttributes
 				),
 			] ),

assets/js/blocks/order-confirmation/billing-address/index.tsx

@@ -2,8 +2,7 @@
  * External dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { Icon } from '@wordpress/icons';
-import { totals } from '@woocommerce/icons';
+import { Icon, mapMarker } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,7 +15,7 @@ registerBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
-				icon={ totals }
+				icon={ mapMarker }
 				className="wc-block-editor-components-block-icon"
 			/>
 		),

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

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

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

@@ -0,0 +1,19 @@
+{
+	"name": "woocommerce/order-confirmation-billing-wrapper",
+	"version": "1.0.0",
+	"title": "Order Confirmation Billing Section",
+	"description": "Display the order confirmation billing section.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"attributes": {
+		"filterType": {
+			"type": "string"
+		},
+		"heading": {
+			"type": "string"
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		heading: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ) => {
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks
+				allowedBlocks={ [ 'core/heading' ] }
+				template={ [
+					[
+						'core/heading',
+						{
+							level: 3,
+							content: attributes.heading || '',
+							onChangeContent: ( value: string ) =>
+								setAttributes( { heading: value } ),
+						},
+					],
+					[
+						'woocommerce/order-confirmation-billing-address',
+						{
+							heading: '',
+							lock: {
+								remove: true,
+							},
+						},
+					],
+				] }
+			/>
+		</div>
+	);
+};
+
+export default Edit;

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

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

bin/webpack-entries.js

@@ -101,6 +101,9 @@ const blocks = {
 	'order-confirmation-shipping-address': {
 		customDir: 'order-confirmation/shipping-address',
 	},
+	'order-confirmation-billing-wrapper': {
+		customDir: 'order-confirmation/billing-wrapper',
+	},
 	'order-confirmation-status': {
 		customDir: 'order-confirmation/status',
 	},

src/BlockTypes/OrderConfirmation/BillingWrapper.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace Automattic\WooCommerce\Blocks\BlockTypes\OrderConfirmation;
+
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+use Automattic\WooCommerce\Blocks\BlockTypes\OrderConfirmation\BillingAddress;
+
+/**
+ * BillingWrapper class.
+ */
+class BillingWrapper extends AbstractOrderConfirmationBlock {
+
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'order-confirmation-billing-wrapper';
+
+	/**
+	 * Render the block.
+	 *
+	 * @param array    $attributes Block attributes.
+	 * @param string   $content Block content.
+	 * @param WP_Block $block Block instance.
+	 *
+	 * @return string | void Rendered block output.
+	 */
+	protected function render( $attributes, $content, $block ) {
+		$order = $this->get_order();
+
+		if ( ! $order || ! $this->is_current_customer_order( $order ) || ! $order->has_billing_address() ) {
+			return '';
+		}
+
+		$classname          = $attributes['className'] ?? '';
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+
+		if ( isset( $attributes['align'] ) ) {
+			$classname .= " align{$attributes['align']}";
+		}
+
+		return sprintf(
+			'<div class="wc-block-%4$s %1$s %2$s">%3$s</div>',
+			esc_attr( $classes_and_styles['classes'] ),
+			esc_attr( $classname ),
+			$content,
+			esc_attr( $this->block_name )
+		);
+	}
+
+	/**
+	 * This renders the content of the billing wrapper.
+	 *
+	 * @param \WC_Order $order Order object.
+	 * @param string    $permission Permission level for viewing order details.
+	 * @param array     $attributes Block attributes.
+	 */
+	protected function render_content( $order, $permission = false, $attributes = [] ) {}
+}

src/BlockTypesController.php

@@ -237,6 +237,7 @@ protected function get_block_types() {
 			$block_types[] = 'OrderConfirmation\Totals';
 			$block_types[] = 'OrderConfirmation\Downloads';
 			$block_types[] = 'OrderConfirmation\BillingAddress';
+			$block_types[] = 'OrderConfirmation\BillingWrapper';
 			$block_types[] = 'OrderConfirmation\ShippingAddress';
 		}