Forms: add conditional logic to form fields

projects/packages/forms/changelog/try-conditional-form-fields

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add conditional logic to form fields, so any field can be shown or hidden based on another field's answer. Disabled by default while in testing; enable it with the forms-conditional-logic feature flag.

projects/packages/forms/composer.json

@@ -11,6 +11,7 @@
 		"automattic/jetpack-connection": "@dev",
 		"automattic/jetpack-device-detection": "@dev",
 		"automattic/jetpack-external-connections": "@dev",
+		"automattic/jetpack-feature-flags": "@dev",
 		"automattic/jetpack-jwt": "@dev",
 		"automattic/jetpack-logo": "@dev",
 		"automattic/jetpack-menu-badges": "@dev",

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

@@ -1,4 +1,7 @@
 import { hasFeatureFlag } from '@automattic/jetpack-shared-extension-utils';
+// Side-effect import: registers the editor.BlockEdit filter that adds the conditional-logic
+// panel to every jetpack/field-* block.
+import '../shared/conditional-logic/register.jsx';
 import DeprecatedOptionCheckbox from '../deprecated/field-option-checkbox/index.js';
 import DeprecatedOptionRadio from '../deprecated/field-option-radio/index.js';
 import JetpackDropzone from '../dropzone/index.jsx';

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

@@ -204,6 +204,10 @@ public static function register_feature( $features ) {
 		$features['multistep-form'] = Current_Plan::supports( 'multistep-form' );
 		$features['form-webhooks']  = Current_Plan::supports( 'form-webhooks' );
 
+		// Bridges the jetpack-feature-flags registration to the editor, so JS `hasFeatureFlag()`
+		// and PHP `Feature_Flags::is_enabled()` answer from one source under one name.
+		$features[ Jetpack_Forms::CONDITIONAL_LOGIC_FLAG ] = Jetpack_Forms::is_conditional_logic_enabled();
+
 		return self::register_central_form_management_default( $features );
 	}
 

projects/packages/forms/src/blocks/field-checkbox/index.js

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'choice',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'boolean',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Checkbox', 'jetpack-forms' ),
@@ -49,4 +59,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-consent/index.js

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'advanced',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'boolean',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Terms consent', 'jetpack-forms' ),
@@ -70,4 +80,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-date/index.js

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'advanced',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'date',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Date picker', 'jetpack-forms' ),
@@ -56,4 +66,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-email/index.jsx

@@ -12,6 +12,16 @@ export const form_editor = {
 	category: 'contact-info',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'string',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Email field', 'jetpack-forms' ),
@@ -45,4 +55,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-file/index.jsx

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'advanced',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'file',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'File upload field', 'jetpack-forms' ),
@@ -45,4 +55,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-hidden/index.js

@@ -10,6 +10,16 @@ export const form_editor = {
 	category: 'advanced',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'hidden',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Hidden field', 'jetpack-forms' ),
@@ -39,4 +49,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-image-select/index.tsx

@@ -16,6 +16,20 @@ export const form_editor = {
 	category: 'choice',
 };
 
+/*
+ * Deliberately no `conditional_logic` declaration, so this block gets no panel.
+ *
+ * An image-select field submits a JSON document describing the choice
+ * (`{"perceived":"A","selected":"a","label":"Blue",...}`), not the label the rule builder
+ * offers as a value. All three evaluators would compare that document against `Blue` and
+ * never match, so `is` would be permanently false and `is not` permanently true: a rule
+ * would hide its field forever and the answer would then be dropped at storage.
+ *
+ * Comparing the decoded `label` in every evaluator is the real fix, but that is value-shape
+ * handling in exactly the place where the JS and PHP evaluators already drift. Offering no
+ * rule is better than offering one that cannot fire.
+ */
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Image Select Field', 'jetpack-forms' ),

projects/packages/forms/src/blocks/field-multiple-choice/index.js

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'choice',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'multichoice',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Multiple choice (checkbox)', 'jetpack-forms' ),
@@ -70,4 +80,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-name/index.js

@@ -13,6 +13,16 @@ export const form_editor = {
 	category: 'contact-info',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'string',
+};
+
 const transforms = {
 	...transformsSource,
 	to: transformsSource.to.filter( transform => ! transform.blocks.includes( 'jetpack/' + name ) ),
@@ -57,4 +67,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-number/index.js

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'basic',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'number',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Number input field', 'jetpack-forms' ),
@@ -41,4 +51,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-rating/index.js

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'advanced',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'rating',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Rating field', 'jetpack-forms' ),
@@ -60,4 +70,4 @@ export const settings = {
 	},
 };
 
-export default { name, settings, form_editor };
+export default { name, settings, form_editor, conditional_logic };

projects/packages/forms/src/blocks/field-select/index.js

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'choice',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'choice',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Dropdown field', 'jetpack-forms' ),
@@ -62,4 +72,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-single-choice/index.js

@@ -11,6 +11,16 @@ export const form_editor = {
 	category: 'choice',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'choice',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Single choice (radio)', 'jetpack-forms' ),
@@ -68,4 +78,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-slider/index.jsx

@@ -10,6 +10,16 @@ export const form_editor = {
 	category: 'advanced',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'number',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Slider field', 'jetpack-forms' ),
@@ -85,4 +95,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-telephone/index.jsx

@@ -12,6 +12,16 @@ export const form_editor = {
 	category: 'contact-info',
 };
 
+/**
+ * Conditional logic: how this field's value is compared.
+ *
+ * Declared per block so the rule builder can offer the right operators and value
+ * input. A block that omits this simply gets no conditional-logic support.
+ */
+export const conditional_logic = {
+	type: 'string',
+};
+
 export const settings = {
 	...defaultSettings,
 	title: __( 'Phone number field', 'jetpack-forms' ),
@@ -74,4 +84,5 @@ export default {
 	name,
 	settings,
 	form_editor,
+	conditional_logic,
 };

projects/packages/forms/src/blocks/field-text/edit.jsx

@@ -2,6 +2,15 @@ import { __ } from '@wordpress/i18n';
 import JetpackField from '../shared/components/jetpack-field.jsx';
 import useFormWrapper from '../shared/hooks/use-form-wrapper.js';
 
+/**
+ * Editor component for the jetpack/field-text block.
+ *
+ * The conditional-logic panel is not wired up here: an `editor.BlockEdit` filter adds it to
+ * every `jetpack/field-*` block, this one included.
+ *
+ * @param {object} props - Block editor props passed in by Gutenberg.
+ * @return {object} The text field editor markup.
+ */
 export default function TextFieldEdit( props ) {
 	useFormWrapper( props );