Forms: Multistep rebase

projects/js-packages/shared-extension-utils/changelog/add-has-feature-flag

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add hasFeatureFlag js function that can be added via the `jetpack_block_editor_feature_flags` filter

projects/js-packages/shared-extension-utils/index.js

@@ -25,6 +25,7 @@ export { getBlockIconComponent, getBlockIconProp } from './src/get-block-icon-fr
 export { default as getJetpackBlocksVariation } from './src/get-jetpack-blocks-variation';
 export * from './src/modules-state';
 export { default as isMyJetpackAvailable } from './src/is-my-jetpack-available';
+export { default as hasFeatureFlag } from './src/has-feature-flag';
 export * from './src/libs';
 export { default as useUpgradeFlow } from './src/hooks/use-upgrade-flow';
 export * from './src/block-editor-actions';

projects/js-packages/shared-extension-utils/src/has-feature-flag.js

@@ -0,0 +1,21 @@
+import getJetpackData from './get-jetpack-data';
+
+/**
+ * Return the value of the Jetpack feature flag.
+ *
+ * To add a new feature flag, you need use the `jetpack_block_editor_feature_flags` filter.
+ *
+ * @param {string} flag - The feature flag to check.
+ *
+ * @return {boolean} Whether the current user is connected.
+ */
+export default function hasFeatureFlag( flag ) {
+	const jetpackData = getJetpackData();
+	if ( ! jetpackData ) {
+		return false;
+	}
+	if ( ! jetpackData?.feature_flags ) {
+		return false;
+	}
+	return Boolean( jetpackData.feature_flags?.[ flag ] );
+}

projects/packages/forms/changelog/add-forms-multistep

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Forms: Multistep capabilities 

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

@@ -33,6 +33,10 @@ export default {
 		type: 'string',
 		default: '',
 	},
+	variationName: {
+		type: 'string',
+		default: '',
+	},
 	salesforceData: {
 		type: 'object',
 		default: {

projects/packages/forms/src/blocks/contact-form/child-blocks.js

@@ -1,3 +1,4 @@
+import { hasFeatureFlag } from '@automattic/jetpack-shared-extension-utils';
 import DeprecatedOptionCheckbox from '../deprecated/field-option-checkbox';
 import DeprecatedOptionRadio from '../deprecated/field-option-radio';
 import JetpackDropzone from '../dropzone';
@@ -15,6 +16,11 @@ import JetpackTelephoneField from '../field-telephone';
 import JetpackTextField from '../field-text';
 import JetpackTextareaField from '../field-textarea';
 import JetpackUrlField from '../field-url';
+import JetpackProgressIndicator from '../form-progress-indicator';
+import JetpackStep from '../form-step';
+import JetpackStepContainer from '../form-step-container';
+import JetpackStepDivider from '../form-step-divider';
+import JetpackStepNavigation from '../form-step-navigation';
 import JetpackInput from '../input';
 import JetpackLabel from '../label';
 import JetpackOption from '../option';
@@ -40,9 +46,19 @@ export const childBlocks = [
 	JetpackTelephoneField,
 	JetpackTextareaField,
 	JetpackFieldFile,
+
 	// The following are required for these blocks to be parsed correctly in block
 	// deprecations. They have been flagged with `supports.inserter: false` to
 	// prevent further use.
 	DeprecatedOptionCheckbox,
 	DeprecatedOptionRadio,
+	...( hasFeatureFlag( 'multistep-form' )
+		? [
+				JetpackStep,
+				JetpackStepContainer,
+				JetpackStepDivider,
+				JetpackStepNavigation,
+				JetpackProgressIndicator,
+		  ]
+		: [] ),
 ];

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

@@ -46,6 +46,19 @@ public static function register_block() {
 
 		add_filter( 'render_block_data', array( __CLASS__, 'find_nested_html_block' ), 10, 3 );
 		add_filter( 'render_block_core/html', array( __CLASS__, 'render_wrapped_html_block' ), 10, 2 );
+		add_filter( 'jetpack_block_editor_feature_flags', array( __CLASS__, 'register_feature' ) );
+	}
+	/**
+	 * Register the contact form block feature flag.
+	 *
+	 * @param array $features - the features array.
+	 *
+	 * @return array
+	 */
+	public static function register_feature( $features ) {
+		// Register the contact form block feature flag.
+		$features['multistep-form'] = Blocks::get_variation() === 'beta';
+		return $features;
 	}
 
 	/**
@@ -364,6 +377,31 @@ public static function register_child_blocks() {
 				'label' => __( 'Button', 'jetpack-forms' ),
 			)
 		);
+
+		Blocks::jetpack_register_block(
+			'jetpack/form-step',
+			array(
+				'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_form_step' ),
+			)
+		);
+
+		Blocks::jetpack_register_block(
+			'jetpack/form-step-navigation',
+			array(
+				'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_form_step_navigation' ),
+			)
+		);
+
+		Blocks::jetpack_register_block(
+			'jetpack/form-progress-indicator',
+			array(
+				'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_form_progress_indicator' ),
+			)
+		);
+
+		Blocks::jetpack_register_block(
+			'jetpack/form-step-container'
+		);
 	}
 
 	/**