Forms: update child blocks to Block API v3 (#38916)

* Forms: update child blocks to API v3 * changelog * Remove extra padding form Form * Fix styles not applied to fields * Fix block splitting * Bump package version
Automattic · Aug 27, 2024 · 8d968e5 · 8d968e5
1 parent 9462203
commit 8d968e5
Show file tree

Hide file tree

Showing 19 changed files with 192 additions and 151 deletions.
diff --git a/projects/packages/forms/changelog/update-contact-form-block-api b/projects/packages/forms/changelog/update-contact-form-block-api
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Forms: update child blocks to Block API v3
diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-forms",
-	"version": "0.32.11",
+	"version": "0.32.12-alpha",
 	"description": "Jetpack Forms",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/forms/#readme",
 	"bugs": {

diff --git a/projects/packages/forms/src/blocks/contact-form/child-blocks.js b/projects/packages/forms/src/blocks/contact-form/child-blocks.js
@@ -1,4 +1,4 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { createBlock, getBlockType } from '@wordpress/blocks';
 import { Path } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
@@ -17,6 +17,7 @@ import { useFormWrapper } from './util/form';
 import renderMaterialIcon from './util/render-material-icon';
 
 const FieldDefaults = {
+	apiVersion: 3,
 	category: 'contact-form',
 	supports: {
 		reusable: false,
@@ -229,6 +230,7 @@ const FieldDefaults = {
 };
 
 const OptionFieldDefaults = {
+	apiVersion: 3,
 	category: 'contact-form',
 	edit: JetpackFieldOptionEdit,
 	attributes: {
@@ -675,7 +677,15 @@ export const childBlocks = [
 				/>
 			),
 			edit: editMultiField( 'checkbox' ),
-			save: () => <InnerBlocks.Content />,
+			save: () => {
+				const blockProps = useBlockProps.save();
+
+				return (
+					<div { ...blockProps }>
+						<InnerBlocks.Content />
+					</div>
+				);
+			},
 			attributes: {
 				...FieldDefaults.attributes,
 				label: {
@@ -713,7 +723,15 @@ export const childBlocks = [
 				</Fragment>
 			),
 			edit: editMultiField( 'radio' ),
-			save: () => <InnerBlocks.Content />,
+			save: () => {
+				const blockProps = useBlockProps.save();
+
+				return (
+					<div { ...blockProps }>
+						<InnerBlocks.Content />
+					</div>
+				);
+			},
 			attributes: {
 				...FieldDefaults.attributes,
 				label: {

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js
@@ -3,6 +3,7 @@ import {
 	InspectorControls,
 	PanelColorSettings,
 	BlockControls,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
@@ -27,6 +28,11 @@ function JetpackFieldCheckbox( props ) {
 	} = props;
 
 	const { blockStyle } = useJetpackFieldStyles( attributes );
+	const blockProps = useBlockProps( {
+		id: `jetpack-field-checkbox-${ instanceId }`,
+		className: 'jetpack-field jetpack-field-checkbox',
+		style: blockStyle,
+	} );
 
 	return (
 		<>
@@ -37,11 +43,7 @@ function JetpackFieldCheckbox( props ) {
 				/>
 			</BlockControls>
 
-			<div
-				id={ `jetpack-field-checkbox-${ instanceId }` }
-				className="jetpack-field jetpack-field-checkbox"
-				style={ blockStyle }
-			>
+			<div { ...blockProps }>
 				<input
 					className="jetpack-field-checkbox__checkbox"
 					type="checkbox"

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js
@@ -1,4 +1,4 @@
-import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
+import { InspectorControls, PanelColorSettings, useBlockProps } from '@wordpress/block-editor';
 import { BaseControl, PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
@@ -16,11 +16,13 @@ const JetpackFieldConsent = ( {
 	setAttributes,
 	attributes,
 } ) => {
+	const blockProps = useBlockProps( {
+		id: `jetpack-field-consent-${ instanceId }`,
+		className: 'jetpack-field jetpack-field-consent',
+	} );
+
 	return (
-		<div
-			id={ `jetpack-field-consent-${ instanceId }` }
-			className="jetpack-field jetpack-field-consent"
-		>
+		<div { ...blockProps }>
 			{ consentType === 'explicit' && (
 				<input className="jetpack-field-consent__checkbox" type="checkbox" disabled />
 			) }

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js
@@ -1,3 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -40,15 +41,17 @@ const JetpackDatePicker = props => {
 
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
 	const formStyle = useFormStyle( clientId );
-
-	const classes = clsx( 'jetpack-field', {
-		'is-selected': isSelected,
-		'has-placeholder': !! placeholder,
+	const blockProps = useBlockProps( {
+		className: clsx( 'jetpack-field', {
+			'is-selected': isSelected,
+			'has-placeholder': !! placeholder,
+		} ),
+		style: blockStyle,
 	} );
 
 	return (
 		<>
-			<div className={ classes } style={ blockStyle }>
+			<div { ...blockProps }>
 				<JetpackFieldLabel
 					attributes={ attributes }
 					label={ label }

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-dropdown.js
@@ -1,4 +1,4 @@
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -16,10 +16,13 @@ const JetpackDropdown = ( { attributes, clientId, isSelected, name, setAttribute
 	const { id, label, options, required, requiredText, toggleLabel, width } = attributes;
 	const optionsWrapper = useRef( undefined );
 	const formStyle = useFormStyle( clientId );
-
-	const classes = clsx( 'jetpack-field jetpack-field-dropdown', {
-		'is-selected': isSelected,
-		'has-placeholder': ! isEmpty( toggleLabel ),
+	const { blockStyle } = useJetpackFieldStyles( attributes );
+	const blockProps = useBlockProps( {
+		className: clsx( 'jetpack-field jetpack-field-dropdown', {
+			'is-selected': isSelected,
+			'has-placeholder': ! isEmpty( toggleLabel ),
+		} ),
+		style: blockStyle,
 	} );
 
 	useFormWrapper( { attributes, clientId, name } );
@@ -112,10 +115,8 @@ const JetpackDropdown = ( { attributes, clientId, isSelected, name, setAttribute
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
-	const { blockStyle } = useJetpackFieldStyles( attributes );
-
 	return (
-		<div className={ classes } style={ blockStyle }>
+		<div { ...blockProps }>
 			<div className="jetpack-field-dropdown__wrapper">
 				<JetpackFieldLabel
 					required={ required }

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-multiple.js
@@ -1,4 +1,4 @@
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import clsx from 'clsx';
@@ -41,14 +41,15 @@ function JetpackFieldMultiple( props ) {
 	} );
 
 	const { blockStyle } = useJetpackFieldStyles( attributes );
+	const blockProps = useBlockProps( {
+		id: `jetpack-field-multiple-${ instanceId }`,
+		className: classes,
+		style: blockStyle,
+	} );
 
 	return (
 		<>
-			<div
-				id={ `jetpack-field-multiple-${ instanceId }` }
-				className={ classes }
-				style={ blockStyle }
-			>
+			<div { ...blockProps }>
 				<JetpackFieldLabel
 					required={ required }
 					requiredText={ requiredText }

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-option.js
@@ -1,17 +1,14 @@
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { first } from 'lodash';
-import { useEffect } from 'react';
 import { supportsParagraphSplitting } from '../util/block-support';
 import { useParentAttributes } from '../util/use-parent-attributes';
 import { useJetpackFieldStyles } from './use-jetpack-field-styles';
 
 export const JetpackFieldOptionEdit = ( {
-	isSelected,
 	attributes,
 	clientId,
 	name,
@@ -30,7 +27,6 @@ export const JetpackFieldOptionEdit = ( {
 		[ clientId ]
 	);
 	const blockProps = useBlockProps();
-	const labelRef = useRef( null );
 
 	const handleSplit = label => {
 		return createBlock( name, {
@@ -48,45 +44,26 @@ export const JetpackFieldOptionEdit = ( {
 		removeBlock( clientId );
 	};
 
-	const onFocus = () => {
-		// TODO: move cursor to end
-	};
-
-	useEffect( () => {
-		const element = labelRef.current;
-
-		element?.addEventListener( 'focus', onFocus );
-
-		if ( isSelected ) {
-			// Timeout is necessary for the focus to be effective
-			setTimeout( () => element?.focus(), 0 );
-		}
-
-		return () => {
-			element?.removeEventListener( 'focus', onFocus );
-		};
-	}, [ isSelected, labelRef ] );
-
 	const supportsSplitting = supportsParagraphSplitting();
 	const type = name.replace( 'jetpack/field-option-', '' );
 	const classes = clsx( 'jetpack-field-option', `field-option-${ type }` );
 
 	return (
-		<div { ...( supportsSplitting ? blockProps : {} ) } className={ classes } style={ optionStyle }>
+		<div className={ classes } style={ optionStyle }>
 			<input type={ type } className="jetpack-option__type" tabIndex="-1" />
 			<RichText
+				{ ...blockProps }
 				identifier="label"
 				tagName="p"
 				className="wp-block"
 				value={ attributes.label }
 				placeholder={ __( 'Add option…', 'jetpack-forms' ) }
 				allowedFormats={ [] }
 				onChange={ val => setAttributes( { label: val } ) }
-				onReplace={ onReplace }
 				onRemove={ handleDelete }
+				onReplace={ onReplace }
 				preserveWhiteSpace={ false }
 				withoutInteractiveFormatting
-				ref={ labelRef }
 				{ ...( supportsSplitting ? {} : { onSplit: handleSplit } ) }
 			/>
 		</div>

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-textarea.js
@@ -1,3 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 import clsx from 'clsx';
@@ -21,12 +22,15 @@ const JetpackFieldTextarea = props => {
 		placeholder,
 		width,
 	} = props;
+
 	const formStyle = useFormStyle( clientId );
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
-
-	const classes = clsx( 'jetpack-field jetpack-field-textarea', {
-		'is-selected': isSelected,
-		'has-placeholder': ! isEmpty( placeholder ),
+	const blockProps = useBlockProps( {
+		className: clsx( 'jetpack-field jetpack-field-textarea', {
+			'is-selected': isSelected,
+			'has-placeholder': ! isEmpty( placeholder ),
+		} ),
+		style: blockStyle,
 	} );
 
 	useEffect( () => {
@@ -38,7 +42,7 @@ const JetpackFieldTextarea = props => {
 
 	return (
 		<>
-			<div className={ classes } style={ blockStyle }>
+			<div { ...blockProps }>
 				<JetpackFieldLabel
 					clientId={ clientId }
 					required={ required }

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js
@@ -1,3 +1,4 @@
+import { useBlockProps } from '@wordpress/block-editor';
 import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import clsx from 'clsx';
@@ -24,15 +25,17 @@ const JetpackField = props => {
 
 	const { blockStyle, fieldStyle } = useJetpackFieldStyles( attributes );
 	const formStyle = useFormStyle( clientId );
-
-	const classes = clsx( 'jetpack-field', {
-		'is-selected': isSelected,
-		'has-placeholder': ! isEmpty( placeholder ),
+	const blockProps = useBlockProps( {
+		className: clsx( 'jetpack-field', {
+			'is-selected': isSelected,
+			'has-placeholder': ! isEmpty( placeholder ),
+		} ),
+		style: blockStyle,
 	} );
 
 	return (
 		<>
-			<div className={ classes } style={ blockStyle }>
+			<div { ...blockProps }>
 				<JetpackFieldLabel
 					attributes={ attributes }
 					label={ label }