demo/newsletter

assets/js/blocks/cart-checkout/checkout-i2/component-init.js

@@ -18,6 +18,15 @@ registerBlockComponent( {
 	),
 } );
 
+registerBlockComponent( {
+	blockName: 'woocommerce/checkout-newsletter-block',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/newsletter" */ './inner-blocks/checkout-newsletter-block/block'
+		)
+	),
+} );
+
 registerBlockComponent( {
 	blockName: 'woocommerce/checkout-totals-block',
 	component: lazy( () =>

assets/js/blocks/cart-checkout/checkout-i2/editor.scss

@@ -20,3 +20,16 @@
 		display: block;
 	}
 }
+
+.wp-block-woocommerce-checkout-newsletter-block .wc-block-components-checkbox {
+	padding-left: 0;
+}
+
+.wc-blocks-newsletter {
+	display: flex;
+	align-items: center;
+	textarea {
+		top: -5px;
+		position: relative;
+	}
+}

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-fields-block/edit.tsx

@@ -18,6 +18,7 @@ const ALLOWED_BLOCKS = [
 	'woocommerce/checkout-payment-block',
 	'woocommerce/checkout-order-note-block',
 	'woocommerce/checkout-actions-block',
+	'woocommerce/checkout-newsletter-block',
 	...getRegisteredBlocks( 'fields' ),
 ];
 const TEMPLATE: InnerBlockTemplate[] = [

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-newsletter-block/block.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import CheckboxControl from '@woocommerce/base-components/checkbox-control';
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+const Block = ( {
+	optOut,
+	description,
+}: {
+	optOut: boolean;
+	description: string;
+} ): JSX.Element => {
+	const [ checked, setChecked ] = useState( optOut );
+	return (
+		<div className="wc-block-checkout__newsletter">
+			<CheckboxControl
+				id="newsletter"
+				label={ description }
+				checked={ checked }
+				onChange={ () => setChecked( ! checked ) }
+				className="components-base-control--nested"
+			/>
+		</div>
+	);
+};
+
+export default Block;

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-newsletter-block/edit.tsx

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import {
+	useBlockProps,
+	PlainText,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import CheckboxControl from '@woocommerce/base-components/checkbox-control';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+export const Edit = ( {
+	attributes: { optOut, description },
+	setAttributes,
+}: {
+	attributes: { description: string; optOut: boolean };
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				<PanelBody title={ 'Default state' }>
+					<ToggleControl
+						label={ 'If this should be opt in or opt out' }
+						checked={ optOut }
+						onChange={ () =>
+							setAttributes( {
+								optOut: ! optOut,
+							} )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div className="wc-blocks-newsletter">
+				<CheckboxControl
+					id="newsletter"
+					checked={ optOut }
+					onChange={ () => setAttributes( { optOut: ! optOut } ) }
+					className="components-base-control--nested"
+				/>
+				<PlainText
+					className={ '' }
+					value={ description }
+					onChange={ ( value ) =>
+						setAttributes( { description: value } )
+					}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-newsletter-block/index.tsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+
+registerFeaturePluginBlockType( 'woocommerce/checkout-newsletter-block', {
+	title: __( 'Newsletter Subscription', 'woo-gutenberg-products-block' ),
+	category: 'woocommerce',
+	description: __(
+		'A field to Subscribe to a newsletters',
+		'woo-gutenberg-products-block'
+	),
+	supports: {
+		align: false,
+		html: false,
+		multiple: false,
+	},
+	parent: [ 'woocommerce/checkout-fields-block' ],
+	attributes: {
+		optOut: {
+			type: 'boolean',
+			default: false,
+		},
+		description: {
+			type: 'string',
+			default: 'Subscribe to our newsletter',
+		},
+	},
+	apiVersion: 2,
+	edit: Edit,
+	save: Save,
+} );

assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/index.tsx

@@ -4,6 +4,7 @@
 import './checkout-fields-block';
 import './checkout-totals-block';
 import './checkout-shipping-address-block';
+import './checkout-newsletter-block';
 import './checkout-contact-information-block';
 import './checkout-billing-address-block';
 import './checkout-actions-block';

src/BlockTypesController.php

@@ -163,6 +163,7 @@ protected function get_atomic_blocks() {
 			'checkout-payment-block',
 			'checkout-shipping-address-block',
 			'checkout-express-payment-block',
+			'checkout-newsletter-block',
 		];
 	}
 }