Revert "Forms: add searchable country dropdown for phone number"

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

@@ -260,7 +260,6 @@ public static function register_child_blocks() {
 					'jetpack/field-prefix-options',
 					'jetpack/field-prefix-default',
 					'jetpack/field-prefix-onChange',
-					'jetpack/field-phone-country-toggle',
 				),
 			)
 		);

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -955,7 +955,7 @@
 			.jetpack-field__input,
 			.jetpack-field__textarea,
 			.jetpack-field-dropdown__toggle {
-				padding-top: max(var(--jetpack--contact-form--input-padding-top, 0), 1.4em);
+				padding-top: 1.4em;
 				padding-left: var(--jetpack--contact-form--animated-left-offset);
 			}
 

projects/packages/forms/src/blocks/contact-form/util/form-styles.js

@@ -152,7 +152,7 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
 		'--jetpack--contact-form--input-height': inputHeight,
 		'--jetpack--contact-form--font-size': fontSize,
 		'--jetpack--contact-form--font-family': fontFamily,
-		'--jetpack--contact-form--line-height': lineHeight === 'normal' ? '1.2em' : lineHeight,
+		'--jetpack--contact-form--line-height': lineHeight,
 		'--jetpack--contact-form--button-primary--color': buttonPrimaryColor,
 		'--jetpack--contact-form--button-primary--background-color': buttonPrimaryBackgroundColor,
 		'--jetpack--contact-form--button-primary--border': buttonPrimaryBorder,

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

@@ -3,26 +3,19 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	BlockContextProvider,
-	BlockControls,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { globe } from '@wordpress/icons';
 import clsx from 'clsx';
 import JetpackFieldControls from '../shared/components/jetpack-field-controls';
 import useFieldSelected from '../shared/hooks/use-field-selected';
 import useFormWrapper from '../shared/hooks/use-form-wrapper';
 import useJetpackFieldStyles from '../shared/hooks/use-jetpack-field-styles';
 import { countries } from './country-list';
-import { getTranslatedCountryName } from './country-names-translated';
 
 const EMPTY_ARRAY = [];
 
-const isBoolean = value => {
-	return value === true || value === false;
-};
-
 export default function PhoneFieldEdit( props ) {
 	const { setAttributes, attributes, clientId, isSelected } = props;
 	const {
@@ -39,28 +32,29 @@ export default function PhoneFieldEdit( props ) {
 	const { isInnerBlockSelected, hasPlaceholder } = useFieldSelected( clientId );
 	const { blockStyle } = useJetpackFieldStyles( attributes );
 	const blockProps = useBlockProps( {
-		className: clsx( 'jetpack-field', 'jetpack-field-phone', 'jetpack-field-telephone', {
-			[ `jetpack-field__width-${ width }` ]: width,
-			'is-selected': isSelected || isInnerBlockSelected,
-			'has-placeholder': hasPlaceholder,
-		} ),
+		className: clsx(
+			'jetpack-field',
+			'jetpack-field-phone',
+			'jetpack-field-telephone',
+			width ? ` jetpack-field__width-${ width }` : '',
+			{
+				'is-selected': isSelected || isInnerBlockSelected,
+				'has-placeholder': hasPlaceholder,
+			}
+		),
 		style: blockStyle,
 	} );
 
 	useFormWrapper( props );
 
 	const countryPairs = useMemo( () => {
 		return countries.map( country => ( {
-			...country,
-			country: getTranslatedCountryName( country.code ),
+			label: country.country + ' ' + country.label,
+			value: country.code,
 		} ) );
 	}, [] );
 
 	const onChangeShowCountrySelector = value => {
-		if ( ! isBoolean( value ) ) {
-			// if not a boolean (ie, event object), toggle the value
-			value = ! showCountrySelector;
-		}
 		setAttributes( {
 			showCountrySelector: value,
 		} );
@@ -95,7 +89,8 @@ export default function PhoneFieldEdit( props ) {
 	// Handler is provided as context from edit as index.js can't pass it as a prop.
 	const onChangeDefaultCountry = useCallback(
 		event => {
-			setAttributes( { default: event.target.value } );
+			const value = event.target.value;
+			setAttributes( { default: value } );
 		},
 		[ setAttributes ]
 	);
@@ -111,17 +106,6 @@ export default function PhoneFieldEdit( props ) {
 				<div { ...innerBlocksProps } />
 			</BlockContextProvider>
 
-			<BlockControls __experimentalShareWithChildBlocks>
-				<ToolbarGroup>
-					<ToolbarButton
-						title={ __( 'Show country selector', 'jetpack-forms' ) }
-						icon={ globe }
-						onClick={ onChangeShowCountrySelector }
-						className={ showCountrySelector ? 'is-pressed' : undefined }
-					/>
-				</ToolbarGroup>
-			</BlockControls>
-
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'jetpack-forms' ) }>
 					<ToggleControl