Forms: Make file upload field block available in beta and refine its behavior (#41586)

Author: lezama

projects/packages/forms/changelog/refine-file-upload-field

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Forms: Refine file upload field block to use WordPress upload icon and follow consistent field patterns. Make the block available in beta. 

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

@@ -2,7 +2,7 @@ import { InnerBlocks } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { Path, Icon } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { globe, envelope, mobile } from '@wordpress/icons';
+import { globe, envelope, mobile, upload } from '@wordpress/icons';
 import { filter, isEmpty, map, startsWith, trim } from 'lodash';
 import JetpackField from './components/jetpack-field';
 import JetpackFieldCheckbox from './components/jetpack-field-checkbox';
@@ -521,9 +521,7 @@ export const childBlocks = [
 			description: __( 'Allow visitors to upload files through your form.', 'jetpack-forms' ),
 			icon: {
 				foreground: getIconColor(),
-				src: renderMaterialIcon(
-					<Path d="M11 14.5V6.33L8.5 8.83L7.67 8L12 3.67L16.33 8L15.5 8.83L13 6.33V14.5H11ZM12 20.33L7.67 16L8.5 15.17L11 17.67V15.5H13V17.67L15.5 15.17L16.33 16L12 20.33Z" />
-				),
+				src: <Icon icon={ upload } />,
 			},
 			edit: editField( 'file' ),
 			attributes: {
@@ -538,7 +536,7 @@ export const childBlocks = [
 					default: '',
 				},
 			},
-			isExperimental: true,
+			isBeta: true,
 		},
 	},
 	{

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

@@ -162,15 +162,15 @@ public static function register_child_blocks() {
 		);
 
 		$blocks_variation = apply_filters( 'jetpack_blocks_variation', \Automattic\Jetpack\Constants::get_constant( 'JETPACK_BLOCKS_VARIATION' ) );
-		if ( 'experimental' === $blocks_variation ) {
-			self::register_experimental_blocks();
+		if ( 'beta' === $blocks_variation ) {
+			self::register_beta_blocks();
 		}
 	}
 
 	/**
-	 * Register experimental blocks
+	 * Register beta blocks
 	 */
-	private static function register_experimental_blocks() {
+	private static function register_beta_blocks() {
 		Blocks::jetpack_register_block(
 			'jetpack/field-file',
 			array(

projects/packages/forms/src/blocks/contact-form/components/jetpack-field.js

@@ -47,23 +47,20 @@ const JetpackField = props => {
 					setAttributes={ setAttributes }
 					style={ formStyle }
 				/>
-				{ type === 'file' ? (
-					<input type="file" className="jetpack-field__input" />
-				) : (
-					<input
-						className="jetpack-field__input"
-						onChange={ e => setAttributes( { placeholder: e.target.value } ) }
-						style={ fieldStyle }
-						type="text"
-						value={ placeholder }
-						onKeyDown={ event => {
-							if ( event.defaultPrevented || event.key !== 'Enter' ) {
-								return;
-							}
-							insertBlocksAfter( createBlock( getDefaultBlockName() ) );
-						} }
-					/>
-				) }
+				<input
+					className="jetpack-field__input"
+					onChange={ e => setAttributes( { placeholder: e.target.value } ) }
+					style={ fieldStyle }
+					type={ type }
+					value={ placeholder }
+					onClick={ event => type === 'file' && event.preventDefault() }
+					onKeyDown={ event => {
+						if ( event.defaultPrevented || event.key !== 'Enter' ) {
+							return;
+						}
+						insertBlocksAfter( createBlock( getDefaultBlockName() ) );
+					} }
+				/>
 			</div>
 
 			<JetpackFieldControls

projects/packages/forms/src/blocks/contact-form/util/register-jetpack-block.js

@@ -19,7 +19,7 @@ import { addFilter } from '@wordpress/hooks';
 export default function registerJetpackBlock( name, settings, childBlocks = [], prefix = true ) {
 	const { available, details, unavailableReason } = getJetpackExtensionAvailability( name );
 	const jetpackData = getJetpackData();
-	const isExperimental = jetpackData?.blocks_variation === 'experimental';
+	const isBeta = jetpackData?.blocks_variation === 'beta';
 
 	const requiredPlan = requiresPaidPlan( unavailableReason, details );
 	const jpPrefix = prefix ? 'jetpack/' : '';
@@ -48,8 +48,8 @@ export default function registerJetpackBlock( name, settings, childBlocks = [],
 	// Register child blocks. Using `registerBlockType()` directly avoids availability checks -- if
 	// their parent is available, we register them all, without checking for their individual availability.
 	childBlocks.forEach( childBlock => {
-		// Skip experimental blocks unless experimental variation is enabled
-		if ( childBlock.settings?.isExperimental && ! isExperimental ) {
+		// Skip beta blocks unless beta variation is enabled
+		if ( childBlock.settings?.isBeta && ! isBeta ) {
 			return;
 		}
 		registerBlockType( jpPrefix + childBlock.name, childBlock.settings );