poc: use just flag and trunk on block, provide more complete default country selection on inspector controls

Author: CGastrell

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

@@ -5,7 +5,13 @@ import {
 	BlockContextProvider,
 	BlockControls,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl, ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	ToolbarButton,
+	ToolbarGroup,
+	SelectControl,
+} from '@wordpress/components';
 import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { globe } from '@wordpress/icons';
@@ -54,6 +60,13 @@ export default function PhoneFieldEdit( props ) {
 	useFormWrapper( props );
 
 	const countryPairs = useMemo( () => {
+		return countries.map( country => ( {
+			label: country.label,
+			value: country.code,
+		} ) );
+	}, [] );
+
+	const countryPairsWithNames = useMemo( () => {
 		return countries.map( country => ( {
 			label: country.country + ' ' + country.label,
 			value: country.code,
@@ -99,7 +112,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 => {
-			const value = event.target.value;
+			// if event is an array, we're using the select control
+			const value = Array.isArray( event ) ? event[ 0 ] : event.target.value;
 			setAttributes( { default: value } );
 		},
 		[ setAttributes ]
@@ -135,6 +149,17 @@ export default function PhoneFieldEdit( props ) {
 						onChange={ onChangeShowCountrySelector }
 						__nextHasNoMarginBottom={ true }
 					/>
+					{ showCountrySelector && (
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Default country', 'jetpack-forms' ) }
+							multiple
+							onChange={ onChangeDefaultCountry }
+							options={ countryPairsWithNames }
+							value={ [ defaultCountry ] }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 

projects/packages/forms/src/blocks/input-phone/edit.js

@@ -60,7 +60,7 @@ const PhoneInputEdit = ( { attributes, clientId, isSelected, name, setAttributes
 					<div className="jetpack-field__input-prefix">
 						<select
 							className="jetpack-field__input-element"
-							defaultValue={ defaultPrefix }
+							value={ defaultPrefix }
 							onChange={ onChangeDefaultPrefix }
 						>
 							{ prefixOptions.map( ( { label, value } ) => (