add form-thank-you block

projects/packages/forms/src/blocks/form-thank-you/edit.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { CORE_BLOCKS } from '../shared/util/constants';
+
+const ALLOWED_BLOCKS = [
+	...CORE_BLOCKS,
+	'jetpack/image-compare',
+	'jetpack/markdown',
+	'jetpack/slideshow',
+	'jetpack/tiled-gallery',
+	'videopress/video',
+];
+
+const TEMPLATE = [
+	[ 'core/heading', { level: 2, content: __( 'Thank you!', 'jetpack-forms' ) } ],
+	[
+		'core/paragraph',
+		{ content: __( 'Your message has been sent successfully.', 'jetpack-forms' ) },
+	],
+];
+
+export default function FormThankYouEdit() {
+	const blockProps = useBlockProps();
+	blockProps.className += ' jetpack-form-thank-you__container';
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: ALLOWED_BLOCKS,
+		template: TEMPLATE,
+		templateInsertUpdatesSelection: false,
+	} );
+
+	return <div { ...innerBlocksProps } />;
+}

projects/packages/forms/src/blocks/form-thank-you/icon.tsx

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Path } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import renderMaterialIcon from '../shared/components/render-material-icon';
+import { getIconColor } from '../shared/util/block-icons';
+
+const ThankYouIcon = renderMaterialIcon(
+	<>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+		/>
+	</>
+);
+
+export default {
+	foreground: getIconColor(),
+	src: ThankYouIcon,
+};

projects/packages/forms/src/blocks/form-thank-you/index.ts

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import icon from './icon';
+import save from './save';
+
+export const name = 'form-thank-you';
+
+export const settings = {
+	apiVersion: 3,
+	title: __( 'Thank You Message', 'jetpack-forms' ),
+	category: 'contact-form',
+	description: __( 'Customize the message shown after form submission.', 'jetpack-forms' ),
+	icon,
+	parent: [ 'jetpack/contact-form' ],
+	supports: {
+		html: false,
+		reusable: false,
+		inserter: false, // Auto-created only, not manually insertable
+		align: true,
+		color: {
+			background: true,
+			text: false,
+			__experimentalDefaultControls: {
+				background: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: true,
+				padding: true,
+			},
+		},
+	},
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		style: {
+			type: 'object',
+		},
+	},
+	edit: edit,
+	save: save,
+	example: {},
+};
+
+export default {
+	name,
+	settings,
+};

projects/packages/forms/src/blocks/form-thank-you/save.tsx

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+
+export default () => {
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } />;
+};