move to variation

Author: lezama

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

@@ -1,10 +1,4 @@
-import {
-	InspectorControls,
-	useBlockProps,
-	useInnerBlocksProps,
-	BlockContextProvider,
-} from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import { useBlockProps, useInnerBlocksProps, BlockContextProvider } from '@wordpress/block-editor';
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
@@ -36,6 +30,9 @@ export default function PhoneFieldEdit( props ) {
 			'jetpack-field',
 			'jetpack-field-phone',
 			'jetpack-field-telephone',
+			showCountrySelector
+				? 'jetpack-field-telephone--international'
+				: 'jetpack-field-telephone--basic',
 			width ? ` jetpack-field__width-${ width }` : '',
 			{
 				'is-selected': isSelected || isInnerBlockSelected,
@@ -54,17 +51,16 @@ export default function PhoneFieldEdit( props ) {
 		} ) );
 	}, [] );
 
-	const onChangeShowCountrySelector = value => {
-		setAttributes( {
-			showCountrySelector: value,
-		} );
-		setCountryList( value ? countryPairs : EMPTY_ARRAY );
-	};
-
 	useEffect( () => {
-		if ( showCountrySelector === undefined || showCountrySelector === true ) {
-			setAttributes( { showCountrySelector: true, default: defaultCountry || 'US' } );
+		// Initialize country list based on showCountrySelector attribute
+		if ( showCountrySelector ) {
 			setCountryList( countryPairs );
+			// Set default country if not already set
+			if ( ! defaultCountry ) {
+				setAttributes( { default: 'US' } );
+			}
+		} else {
+			setCountryList( EMPTY_ARRAY );
 		}
 	}, [ showCountrySelector, setAttributes, countryPairs, defaultCountry ] );
 
@@ -74,7 +70,9 @@ export default function PhoneFieldEdit( props ) {
 			[
 				'jetpack/label',
 				{
-					label: __( 'Phone number', 'jetpack-forms' ),
+					label: showCountrySelector
+						? __( 'Phone number', 'jetpack-forms' )
+						: __( 'Phone', 'jetpack-forms' ),
 					placeholder,
 					required,
 					requiredText,
@@ -106,17 +104,6 @@ export default function PhoneFieldEdit( props ) {
 				<div { ...innerBlocksProps } />
 			</BlockContextProvider>
 
-			<InspectorControls>
-				<PanelBody title={ __( 'Settings', 'jetpack-forms' ) }>
-					<ToggleControl
-						label={ __( 'Show country selector', 'jetpack-forms' ) }
-						checked={ showCountrySelector || false }
-						onChange={ onChangeShowCountrySelector }
-						__nextHasNoMarginBottom={ true }
-					/>
-				</PanelBody>
-			</InspectorControls>
-
 			<JetpackFieldControls
 				clientId={ clientId }
 				id={ id }

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

@@ -6,17 +6,18 @@ import { getIconColor } from '../shared/util/block-icons';
 import deprecated from './deprecated';
 import edit from './edit';
 import save from './save';
+import variations from './variations';
 
 const name = 'field-telephone';
 export const settings = {
 	...defaultSettings,
-	title: __( 'Phone number field', 'jetpack-forms' ),
+	title: __( 'Phone field', 'jetpack-forms' ),
 	keywords: [
 		__( 'Phone', 'jetpack-forms' ),
 		__( 'Cellular phone', 'jetpack-forms' ),
 		__( 'Mobile', 'jetpack-forms' ),
 	],
-	description: __( 'Collect phone numbers from site visitors.', 'jetpack-forms' ),
+	description: __( 'Add a phone input field to your form.', 'jetpack-forms' ),
 	icon: {
 		foreground: getIconColor(),
 		src: <Icon icon={ mobile } />,
@@ -43,6 +44,7 @@ export const settings = {
 	allowedBlocks: [ 'jetpack/label', 'jetpack/phone-input' ],
 	deprecated,
 	save,
+	variations,
 	example: {
 		attributes: {
 			default: 'US',

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

@@ -0,0 +1,58 @@
+import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { mobile } from '@wordpress/icons';
+import { getIconColor } from '../shared/util/block-icons';
+
+const variations = [
+	{
+		name: 'phone',
+		title: __( 'Phone', 'jetpack-forms' ),
+		description: __( 'Simple phone number field.', 'jetpack-forms' ),
+		icon: {
+			foreground: getIconColor(),
+			src: <Icon icon={ mobile } />,
+		},
+		attributes: {
+			showCountrySelector: false,
+		},
+		isActive: [ 'showCountrySelector' ],
+		scope: [ 'inserter', 'transform' ],
+		isDefault: true,
+		innerBlocks: [
+			[
+				'jetpack/label',
+				{
+					label: __( 'Phone', 'jetpack-forms' ),
+				},
+			],
+			[ 'jetpack/phone-input', {} ],
+		],
+	},
+	{
+		name: 'international-phone',
+		title: __( 'International phone', 'jetpack-forms' ),
+		description: __( 'Phone field with country selector.', 'jetpack-forms' ),
+		icon: {
+			foreground: getIconColor(),
+			src: <Icon icon={ mobile } />,
+		},
+		attributes: {
+			showCountrySelector: true,
+			default: 'US',
+		},
+		isActive: [ 'showCountrySelector' ],
+		scope: [ 'inserter', 'transform' ],
+		isDefault: false,
+		innerBlocks: [
+			[
+				'jetpack/label',
+				{
+					label: __( 'Phone number', 'jetpack-forms' ),
+				},
+			],
+			[ 'jetpack/phone-input', {} ],
+		],
+	},
+];
+
+export default variations;