Forms: Add form editor

projects/packages/forms/changelog/add-form-editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Forms: Add form editor under a feature flag

projects/packages/forms/package.json

@@ -16,11 +16,12 @@
 	"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",
 		"build:wp-build": "wp-build",
 		"clean": "rm -rf dist/ .cache/",
 		"module:build": "webpack --config ./tools/webpack.config.modules.js",
@@ -29,7 +30,7 @@
 		"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:module:watch' 'pnpm:build:form-editor --watch'",
 		"watch:wp-build": "wp-build --watch"
 	},
 	"browserslist": [
@@ -67,6 +68,7 @@
 		"@wordpress/interactivity": "6.37.0",
 		"@wordpress/lazy-editor": "1.3.0",
 		"@wordpress/notices": "5.37.0",
+		"@wordpress/plugins": "7.37.0",
 		"@wordpress/primitives": "4.37.0",
 		"@wordpress/route": "0.2.0",
 		"@wordpress/theme": "0.3.0",

projects/packages/forms/src/blocks/shared/util/constants.js

@@ -61,3 +61,9 @@ export const FORM_STYLE = {
 	DEFAULT: 'default',
 	OUTLINED: 'outlined',
 };
+
+/**
+ * The custom post type for jetpack forms.
+ * Matches Contact_Form::POST_TYPE in PHP.
+ */
+export const FORM_POST_TYPE = 'jetpack_form';

projects/packages/forms/src/contact-form/class-contact-form-plugin.php

@@ -10,6 +10,7 @@
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Automattic\Jetpack\Constants;
 use Automattic\Jetpack\Extensions\Contact_Form\Contact_Form_Block;
+use Automattic\Jetpack\Forms\Editor\Form_Editor;
 use Automattic\Jetpack\Forms\Jetpack_Forms;
 use Automattic\Jetpack\Forms\Service\Form_Webhooks;
 use Automattic\Jetpack\Forms\Service\Google_Drive;
@@ -369,6 +370,7 @@ protected function __construct() {
 
 		if ( self::has_editor_feature_flag( 'central-form-management' ) ) {
 			Contact_Form::register_post_type();
+			Form_Editor::init();
 		}
 	}
 

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

@@ -518,6 +518,7 @@ public static function register_post_type() {
 			'map_meta_cap'          => true,
 			'labels'                => $labels,
 			'hierarchical'          => false,
+			'template'              => array( array( 'jetpack/contact-form' ) ),
 			'supports'              => array(
 				'title',
 				'editor',

projects/packages/forms/src/form-editor/class-form-editor.php

@@ -0,0 +1,158 @@
+<?php
+/**
+ * Jetpack forms editor.
+ *
+ * @package automattic/jetpack-forms
+ */
+
+namespace Automattic\Jetpack\Forms\Editor;
+
+use Automattic\Jetpack\Assets;
+use Automattic\Jetpack\Forms\ContactForm\Contact_Form;
+
+/**
+ * Class Form_Editor
+ *
+ * Handles the form editor functionality for jetpack-form post type.
+ */
+class Form_Editor {
+
+	/**
+	 * Script handle for the form editor.
+	 *
+	 * @var string
+	 */
+	const SCRIPT_HANDLE = 'jetpack-form-editor';
+
+	/**
+	 * Initialize the form editor.
+	 */
+	public static function init() {
+		add_filter( 'allowed_block_types_all', array( __CLASS__, 'allowed_blocks_for_jetpack_form' ), 10, 2 );
+		add_filter( 'block_editor_settings_all', array( __CLASS__, 'block_editor_settings_all' ), 10, 2 );
+		add_action( 'admin_enqueue_scripts', array( __CLASS__, 'enqueue_admin_scripts' ) );
+	}
+
+	/**
+	 * Restrict allowed blocks when editing jetpack-form posts.
+	 *
+	 * Only allows field blocks and supporting blocks. The contact-form block is excluded
+	 * because visual wrapping is handled via DOM manipulation in the editor script.
+	 *
+	 * @param bool|array $allowed_block_types Array of block type slugs, or boolean to enable/disable all.
+	 * @param object     $editor_context       The current editor context.
+	 * @return bool|array Array of allowed block types for jetpack-form posts.
+	 */
+	public static function allowed_blocks_for_jetpack_form( $allowed_block_types, $editor_context ) {
+		// Only apply to jetpack-form post type.
+		if ( ! isset( $editor_context->post ) || Contact_Form::POST_TYPE !== $editor_context->post->post_type ) {
+			return $allowed_block_types;
+		}
+
+		// Allow only field blocks, button, and core blocks.
+		// Visual wrapping is handled by JavaScript DOM manipulation.
+		return array(
+			// Field blocks.
+			'jetpack/field-name',
+			'jetpack/field-email',
+			'jetpack/field-url',
+			'jetpack/field-telephone',
+			'jetpack/field-textarea',
+			'jetpack/field-checkbox',
+			'jetpack/field-checkbox-multiple',
+			'jetpack/field-radio',
+			'jetpack/field-select',
+			'jetpack/field-date',
+			'jetpack/field-consent',
+			'jetpack/field-rating',
+			'jetpack/field-text',
+			'jetpack/field-number',
+			'jetpack/field-file-upload',
+
+			// Supporting blocks.
+			'jetpack/button',
+			'jetpack/label',
+			'jetpack/input',
+			'jetpack/options',
+			'jetpack/option',
+			'jetpack/phone-input',
+
+			// Multistep blocks.
+			'jetpack/form-step',
+			'jetpack/form-step-container',
+			'jetpack/form-step-divider',
+			'jetpack/form-step-navigation',
+			'jetpack/form-progress-indicator',
+
+			// Core blocks for rich content.
+			'core/audio',
+			'core/columns',
+			'core/column',
+			'core/group',
+			'core/heading',
+			'core/html',
+			'core/image',
+			'core/list',
+			'core/list-item',
+			'core/paragraph',
+			'core/row',
+			'core/separator',
+			'core/spacer',
+			'core/stack',
+			'core/subhead',
+			'core/video',
+		);
+	}
+
+	/**
+	 * Modify block editor settings for jetpack-form posts.
+	 *
+	 * @param array  $settings       Block editor settings.
+	 * @param object $editor_context The current editor context.
+	 * @return array Modified block editor settings for jetpack-form posts.
+	 */
+	public static function block_editor_settings_all( $settings, $editor_context ) {
+		// Only apply to jetpack-form post type.
+		if ( ! isset( $editor_context->post ) || Contact_Form::POST_TYPE !== $editor_context->post->post_type ) {
+			return $settings;
+		}
+
+		// Disable block locking capability.
+		$settings['canLockBlocks'] = false;
+
+		return $settings;
+	}
+
+	/**
+	 * Enqueue admin scripts for block editor.
+	 * Loads in all post block editor contexts (excluding the site editor) so that the
+	 * rename command is available and can be used when a form block is selected.
+	 */
+	public static function enqueue_admin_scripts() {
+		$screen = get_current_screen();
+
+		// Only load in block editor contexts, not site editor
+		if ( ! $screen || $screen->id === 'site-editor' || ! $screen->is_block_editor ) {
+			return;
+		}
+		$asset_file = __DIR__ . '/../../dist/form-editor/jetpack-form-editor.asset.php';
+		if ( ! file_exists( $asset_file ) ) {
+			// phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log
+			error_log( 'Form Editor asset file not found: ' . $asset_file );
+			return;
+		}
+		$asset = require $asset_file;
+		Assets::register_script(
+			self::SCRIPT_HANDLE,
+			'../../dist/form-editor/jetpack-form-editor.js',
+			__FILE__,
+			array(
+				'in_footer'    => true,
+				'textdomain'   => 'jetpack-forms',
+				'enqueue'      => true,
+				'dependencies' => $asset['dependencies'],
+				'version'      => $asset['version'],
+			)
+		);
+	}
+}