Update label/id when transforming

Author: edanzer

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

@@ -1,10 +1,13 @@
 import { __ } from '@wordpress/i18n';
 import JetpackField from '../shared/components/jetpack-field';
 import useFormWrapper from '../shared/hooks/use-form-wrapper';
+import useNameLabelSync from './hooks/use-name-label-sync';
 
 export default function NameFieldEdit( props ) {
 	useFormWrapper( props );
 
+	useNameLabelSync( { clientId: props.clientId, id: props.attributes?.id } );
+
 	return (
 		<JetpackField
 			clientId={ props.clientId }

projects/packages/forms/src/blocks/field-name/hooks/use-name-label-sync.js

@@ -0,0 +1,81 @@
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import {
+	FIRST_NAME_ID,
+	LAST_NAME_ID,
+	DEFAULT_FIRST_NAME_LABEL,
+	DEFAULT_LAST_NAME_LABEL,
+	DEFAULT_NAME_LABEL,
+} from '../variations';
+
+const isKnownId = id => id === FIRST_NAME_ID || id === LAST_NAME_ID;
+
+const getDefaultLabelForId = id => {
+	if ( id === FIRST_NAME_ID ) return DEFAULT_FIRST_NAME_LABEL;
+	if ( id === LAST_NAME_ID ) return DEFAULT_LAST_NAME_LABEL;
+	return DEFAULT_NAME_LABEL;
+};
+
+/**
+ * Sync the nested label text with the Name field's variation id when users transform
+ * between known variations (first-name/last-name).
+ *
+ * @param {object} params          - Parameters.
+ * @param {string} params.clientId - Block clientId for the Name field
+ * @param {string} params.id       - Current variation id (e.g., 'first-name' | 'last-name')
+ */
+export default function useNameLabelSync( { clientId, id } ) {
+	const prevIdRef = useRef( id );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const labelClientId = useSelect(
+		select => {
+			const block = select( blockEditorStore ).getBlock( clientId );
+			const labelBlock = block?.innerBlocks?.find( b => b.name === 'jetpack/label' );
+			return labelBlock?.clientId;
+		},
+		[ clientId ]
+	);
+
+	const currentLabel = useSelect(
+		select => {
+			return labelClientId
+				? select( blockEditorStore ).getBlockAttributes( labelClientId )?.label
+				: undefined;
+		},
+		[ labelClientId ]
+	);
+
+	useEffect( () => {
+		const newId = id;
+		const prevId = prevIdRef.current;
+
+		if ( ! labelClientId ) {
+			prevIdRef.current = newId;
+			return;
+		}
+
+		// Handle transforms between known variations.
+		if ( isKnownId( newId ) && newId !== prevId ) {
+			const nextDefault = getDefaultLabelForId( newId );
+			// Ensure the parent block id matches the variation id.
+			if ( newId ) {
+				updateBlockAttributes( clientId, { id: newId } );
+			}
+			// Always set the label to the default for the selected variation.
+			updateBlockAttributes( labelClientId, { label: nextDefault } );
+		}
+
+		// Handle transforms from a known variation back to the base Name (no id).
+		const becameBase = isKnownId( prevId ) && ( newId === undefined || newId === '' );
+		if ( becameBase ) {
+			// Clear the parent block id when returning to base.
+			updateBlockAttributes( clientId, { id: '' } );
+			// Always set the label back to the base default.
+			updateBlockAttributes( labelClientId, { label: DEFAULT_NAME_LABEL } );
+		}
+
+		prevIdRef.current = newId;
+	}, [ id, clientId, labelClientId, currentLabel, updateBlockAttributes ] );
+}

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

@@ -10,34 +10,55 @@ const icon = {
 	),
 };
 
+export const FIRST_NAME_ID = 'first-name';
+export const LAST_NAME_ID = 'last-name';
+
+export const DEFAULT_FIRST_NAME_LABEL = __( 'First name', 'jetpack-forms' );
+export const DEFAULT_LAST_NAME_LABEL = __( 'Last name', 'jetpack-forms' );
+export const DEFAULT_NAME_LABEL = __( 'Name', 'jetpack-forms' );
+
 const variations = [
 	{
-		name: 'first-name',
-		title: __( 'First name', 'jetpack-forms' ),
+		name: 'name',
+		title: DEFAULT_NAME_LABEL,
+		description: __( 'Collect the visitor’s name.', 'jetpack-forms' ),
+		icon,
+		scope: [ 'transform' ],
+		attributes: {
+			id: '',
+		},
+		innerBlocks: [
+			[ 'jetpack/label', { label: DEFAULT_NAME_LABEL } ],
+			[ 'jetpack/input', { type: 'text' } ],
+		],
+	},
+	{
+		name: FIRST_NAME_ID,
+		title: DEFAULT_FIRST_NAME_LABEL,
 		description: __( 'Collect the visitor’s first name.', 'jetpack-forms' ),
 		icon,
 		scope: [ 'inserter', 'transform' ],
 		isActive: [ 'id' ],
 		attributes: {
-			id: 'first-name',
+			id: FIRST_NAME_ID,
 		},
 		innerBlocks: [
-			[ 'jetpack/label', { label: __( 'First name', 'jetpack-forms' ) } ],
+			[ 'jetpack/label', { label: DEFAULT_FIRST_NAME_LABEL } ],
 			[ 'jetpack/input', { type: 'text' } ],
 		],
 	},
 	{
-		name: 'last-name',
-		title: __( 'Last name', 'jetpack-forms' ),
+		name: LAST_NAME_ID,
+		title: DEFAULT_LAST_NAME_LABEL,
 		description: __( 'Collect the visitor’s last name.', 'jetpack-forms' ),
 		icon,
 		scope: [ 'inserter', 'transform' ],
 		isActive: [ 'id' ],
 		attributes: {
-			id: 'last-name',
+			id: LAST_NAME_ID,
 		},
 		innerBlocks: [
-			[ 'jetpack/label', { label: __( 'Last name', 'jetpack-forms' ) } ],
+			[ 'jetpack/label', { label: DEFAULT_LAST_NAME_LABEL } ],
 			[ 'jetpack/input', { type: 'text' } ],
 		],
 	},