Forms: Add synced forms support with convert toolbar

projects/packages/forms/changelog/update-form-block-saves-custom-post-type

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add ConvertFormToolbar component for managing synced form conversions in the block editor

projects/packages/forms/package.json

@@ -16,19 +16,20 @@
 	"author": "Automattic",
 	"type": "module",
 	"scripts": {
-		"build": "pnpm run clean && pnpm run build:blocks && pnpm run build:contact-form && pnpm run build:dashboard && pnpm run module:build",
+		"build": "pnpm run clean && pnpm run build:blocks && pnpm run build:contact-form && pnpm run build:dashboard && pnpm run build:form-editor && pnpm run module:build",
 		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build && pnpm run validate",
 		"build:blocks": "webpack --config ./tools/webpack.config.blocks.js",
 		"build:contact-form": "webpack --config ./tools/webpack.config.contact-form.js",
 		"build:dashboard": "webpack --config ./tools/webpack.config.dashboard.js",
+		"build:form-editor": "webpack --config ./tools/webpack.config.form-editor.js",
 		"clean": "rm -rf dist/ .cache/",
 		"module:build": "webpack --config ./tools/webpack.config.modules.js",
 		"module:watch": "webpack --watch --config ./tools/webpack.config.modules.js",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest --config=tests/jest.config.js",
 		"test-coverage": "pnpm run test --coverage",
 		"typecheck": "tsc --noEmit",
 		"validate": "pnpm exec validate-es --no-error-on-unmatched-pattern dist/",
-		"watch": "concurrently 'pnpm:build:blocks --watch' 'pnpm:build:contact-form --watch' 'pnpm:build:dashboard --watch' 'pnpm:module:watch'"
+		"watch": "concurrently 'pnpm:build:blocks --watch' 'pnpm:build:contact-form --watch' 'pnpm:build:dashboard --watch' 'pnpm:build:form-editor --watch' 'pnpm:module:watch'"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"
@@ -99,6 +100,8 @@
 		"@wordpress/api-fetch": "7.36.0",
 		"@wordpress/browserslist-config": "6.36.0",
 		"@wordpress/date": "5.36.0",
+		"@wordpress/edit-post": "8.36.0",
+		"@wordpress/plugins": "7.36.0",
 		"autoprefixer": "10.4.20",
 		"concurrently": "9.2.1",
 		"glob": "11.1.0",

projects/packages/forms/src/blocks/contact-form/attributes.ts

@@ -4,6 +4,9 @@
 import { __ } from '@wordpress/i18n';
 
 export default {
+	ref: {
+		type: 'number' as const,
+	},
 	subject: {
 		type: 'string',
 		default: window.jpFormsBlocks?.defaults?.subject || '',

projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php

@@ -728,9 +728,62 @@ public static function gutenblock_render_form( $atts, $content ) {
 
 		self::load_view_scripts();
 
+		// Handle ref attribute - load form from jetpack-form post
+		if ( isset( $atts['ref'] ) && is_numeric( $atts['ref'] ) ) {
+			return self::render_synced_form( $atts['ref'] );
+		}
+
 		return Contact_Form::parse( $atts, do_blocks( $content ) );
 	}
 
+	/**
+	 * Render a synced form by reference ID.
+	 *
+	 * @param int $ref_id The jetpack_form post ID.
+	 * @return string Rendered form HTML.
+	 */
+	private static function render_synced_form( $ref_id ) {
+		// Circular reference prevention.
+		static $seen_refs = array();
+
+		if ( isset( $seen_refs[ $ref_id ] ) ) {
+			return sprintf(
+				'<div class="wp-block-jetpack-contact-form">%s</div>',
+				esc_html__( 'Circular reference detected in form.', 'jetpack-forms' )
+			);
+		}
+
+		// Load the jetpack-form post.
+		$synced_form = get_post( $ref_id );
+
+		// Validate post.
+		if ( ! $synced_form || 'jetpack_form' !== $synced_form->post_type ) {
+			return '';
+		}
+
+		// Only render published and draft post statuses.
+		// todo: add a "active" status so that we can disable forms without deleting them.
+		if ( ! in_array( $synced_form->post_status, array( 'publish', 'draft' ), true ) ) {
+			return '';
+		}
+
+		// Mark as seen for circular reference prevention.
+		$seen_refs[ $ref_id ] = true;
+
+		// Parse and render blocks from post_content.
+		$blocks = parse_blocks( $synced_form->post_content );
+		$output = '';
+
+		foreach ( $blocks as $block ) {
+			$output .= render_block( $block );
+		}
+
+		// Clean up.
+		unset( $seen_refs[ $ref_id ] );
+
+		return $output;
+	}
+
 	/**
 	 * Load editor styles for the block.
 	 * These are loaded via enqueue_block_assets to ensure proper loading in the editor iframe context.

projects/packages/forms/src/blocks/contact-form/components/convert-form-toolbar.tsx

@@ -0,0 +1,141 @@
+/**
+ * Convert Form Toolbar Component
+ * Provides toolbar buttons to convert forms to synced mode and edit synced forms
+ */
+
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { FORM_POST_TYPE } from '../../shared/util/constants.js';
+import { createSyncedForm } from '../utils/form-sync-manager';
+
+interface ConvertFormToolbarProps {
+	clientId: string;
+	attributes: Record< string, unknown >;
+	setAttributes: ( attrs: Record< string, unknown > ) => void;
+}
+
+export function ConvertFormToolbar( { clientId, attributes }: ConvertFormToolbarProps ) {
+	const [ isConverting, setIsConverting ] = useState( false );
+
+	// Get the current page/post title and navigation function from settings
+	const { postTitle, onNavigateToEntityRecord } = useSelect( select => {
+		const editedPost = select( editorStore ).getEditedPostAttribute( 'title' );
+		const { getSettings } = select( blockEditorStore );
+		return {
+			postTitle: editedPost || 'Untitled',
+			onNavigateToEntityRecord: getSettings().onNavigateToEntityRecord,
+		};
+	}, [] );
+
+	// Get block data
+	const block = useSelect(
+		select => select( blockEditorStore ).getBlock( clientId ),
+		[ clientId ]
+	);
+
+	// Get functions to manipulate blocks
+	const { replaceInnerBlocks, updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
+
+	const hasRef = !! attributes.ref;
+
+	/**
+	 * Convert inline form to synced form
+	 */
+	const convertToSynced = async () => {
+		if ( ! block || isConverting ) {
+			return;
+		}
+
+		setIsConverting( true );
+
+		try {
+			// Remove ref from attributes if it exists (shouldn't, but safety check)
+			const { ...cleanAttributes } = attributes;
+
+			// Create the synced form post with all attributes and innerBlocks
+			const postId = await createSyncedForm(
+				{
+					attributes: cleanAttributes,
+					innerBlocks: block.innerBlocks || [],
+				},
+				postTitle
+			);
+
+			// Clear innerBlocks first
+			replaceInnerBlocks( clientId, [], false );
+
+			// Get all current attribute keys
+			const attributeKeys = Object.keys( attributes );
+			const clearedAttributes: Record< string, unknown > = {};
+
+			// Set all attributes to undefined to clear them
+			attributeKeys.forEach( key => {
+				clearedAttributes[ key ] = undefined;
+			} );
+
+			// Then set only the ref
+			clearedAttributes.ref = postId;
+
+			// Update attributes using updateBlockAttributes which properly clears them
+			updateBlockAttributes( clientId, clearedAttributes );
+
+			createSuccessNotice( __( 'Form converted successfully', 'jetpack-forms' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch ( error ) {
+			createErrorNotice(
+				__( 'Failed to convert form to synced form. Please try again.', 'jetpack-forms' ),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+				}
+			);
+		} finally {
+			setIsConverting( false );
+		}
+	};
+
+	/**
+	 * Navigate to edit the synced form post
+	 */
+	const handleEditOriginal = () => {
+		if ( ! attributes.ref || ! onNavigateToEntityRecord ) {
+			return;
+		}
+
+		onNavigateToEntityRecord( {
+			postId: attributes.ref as number,
+			postType: FORM_POST_TYPE,
+		} );
+	};
+
+	const showEditButton = hasRef && onNavigateToEntityRecord;
+	const showConvertButton = ! hasRef;
+
+	return (
+		<ToolbarGroup>
+			{ showEditButton && (
+				<ToolbarButton onClick={ handleEditOriginal } label={ __( 'Edit form', 'jetpack-forms' ) }>
+					{ __( 'Edit Form', 'jetpack-forms' ) }
+				</ToolbarButton>
+			) }
+			{ showConvertButton && (
+				<ToolbarButton
+					onClick={ convertToSynced }
+					disabled={ isConverting }
+					label={ __( 'Convert to synced form', 'jetpack-forms' ) }
+				>
+					{ __( 'Convert Form', 'jetpack-forms' ) }
+				</ToolbarButton>
+			) }
+		</ToolbarGroup>
+	);
+}