[POC] Added custom fields to the checkout blocks

assets/js/blocks/checkout/form-step/custom-fields.tsx

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+import { Button, PanelBody, TextControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { useEffect } from 'react';
+const { dispatch } = wp.data;
+
+/**
+ * Internal dependencies
+ */
+export interface FormStepBlockProps {
+	attributes: { title: string; description: string; showStepNumber: boolean };
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+	className?: string;
+	children?: React.ReactNode;
+	lock?: { move: boolean; remove: boolean };
+}
+
+/**
+ * Custom Fields list for use in the editor.
+ */
+export const CustomFields = (): JSX.Element => {
+	const post = wp.data.select( 'core/editor' ).getCurrentPost();
+	const [ fields, setFields ] = useState( post.checkout_custom_fields );
+
+	const addField = () => {
+		setFields( [ ...fields, { name: 'test-field' } ] );
+	};
+
+	useEffect( () => {
+		dispatch( 'core/editor' ).editPost( {
+			checkout_custom_fields: fields,
+		} );
+	}, [ fields ] );
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Custom Fields', 'woo-gutenberg-products-block' ) }
+			>
+				{ fields.map( ( field, index ) => (
+					<TextControl
+						label={ __(
+							'Field Name:',
+							'woo-gutenberg-products-block'
+						) }
+						key={ index }
+						value={ field.name }
+						onChange={ () => void 0 }
+					/>
+				) ) }
+				<Button
+					variant="secondary"
+					isBusy={ false }
+					aria-disabled={ false }
+					onClick={ addField }
+				>
+					{ __( 'Add Custom Field', 'woo-gutenberg-products-block' ) }
+				</Button>
+			</PanelBody>
+		</InspectorControls>
+	);
+};

assets/js/blocks/checkout/form-step/form-step-block.tsx

@@ -14,6 +14,7 @@ import { PanelBody, ToggleControl } from '@wordpress/components';
  * Internal dependencies
  */
 import FormStepHeading from './form-step-heading';
+import { CustomFields } from './custom-fields';
 export interface FormStepBlockProps {
 	attributes: { title: string; description: string; showStepNumber: boolean };
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
@@ -53,11 +54,11 @@ export const FormStepBlock = ( {
 							'woo-gutenberg-products-block'
 						) }
 						checked={ showStepNumber }
-						onChange={ () =>
+						onChange={ () => {
 							setAttributes( {
 								showStepNumber: ! showStepNumber,
-							} )
-						}
+							} );
+						} }
 					/>
 				</PanelBody>
 			</InspectorControls>
@@ -69,6 +70,7 @@ export const FormStepBlock = ( {
 					style={ { backgroundColor: 'transparent' } }
 				/>
 			</FormStepHeading>
+			<CustomFields />
 			<div className="wc-block-components-checkout-step__container">
 				<p className="wc-block-components-checkout-step__description">
 					<PlainText

woocommerce-gutenberg-products-block.php

@@ -318,3 +318,85 @@ function woocommerce_blocks_interactivity_setup() {
 	}
 }
 add_action( 'plugins_loaded', 'woocommerce_blocks_interactivity_setup' );
+
+
+add_action( 'rest_api_init', 'add_checkout_custom_fields' );
+
+/**
+ * Adds custom checkout fields to the checkout page rest api.
+ */
+function add_checkout_custom_fields() {
+	// Field name to register.
+	$field = 'checkout_custom_fields';
+	register_rest_field(
+		'page',
+		$field,
+		array(
+			'get_callback'    => function ( $object ) use ( $field ) {
+				// Get field as single value from post meta.
+				return get_option( $field, [] );
+			},
+			'update_callback' => function ( $value, $object ) use ( $field ) {
+				// Update the field/meta value.
+				update_option( $field, $value );
+			},
+			'schema'          => array(
+				'type'       => 'object',
+				'properties' => array(
+					'billing'    => array(
+						'type'     => 'array',
+						'elements' => array(
+							'type'       => 'object',
+							'properties' => array(
+								'id'       => 'integer',
+								'label'    => 'string',
+								'required' => 'boolean',
+								'type'     => 'string',
+								'size'     => 'string', //half|full
+								// 'priority' => 'integer',
+							),
+						),
+					),
+					'shipping'   => array(
+						'type'     => 'array',
+						'elements' => array(
+							'type'       => 'object',
+							'properties' => array(
+								'id'       => 'integer',
+								'label'    => 'string',
+								'required' => 'boolean',
+								'type'     => 'string',
+								'size'     => 'string', //half|full
+								// 'priority' => 'integer',
+							),
+						),
+					),
+					'additional' => array(
+						'type'     => 'array',
+						'elements' => array(
+							'type'       => 'object',
+							'properties' => array(
+								'id'       => 'integer',
+								'label'    => 'string',
+								'required' => 'boolean',
+								'type'     => 'string',
+								'size'     => 'string', //half|full
+								// 'priority' => 'integer',
+							),
+						),
+					),
+				),
+				// 'arg_options' => array(
+				// 	'sanitize_callback' => function ( $value ) {
+				// 		// Make the value safe for storage.
+				// 		return sanitize_text_field( $value );
+				// 	},
+				// 	'validate_callback' => function ( $value ) {
+				// 		// Valid if it contains exactly 10 English letters.
+				// 		return (bool) preg_match( '/\A[a-z]{10}\Z/', $value );
+				// 	},
+				// ),
+			),
+		)
+	);
+}