Skip to content

Commit 3c7a84a

Browse files
CGastrellCGastrell
authored
Revert "Forms: move international phone input to production (#44922)"
This reverts commit f5ae5f9.
1 parent f5ae5f9 commit 3c7a84a

File tree

23 files changed

+360
-514
lines changed

23 files changed

+360
-514
lines changed

‎projects/packages/forms/changelog/move-international-phone-input-to-telephone‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import JetpackImageSelectField from '../field-image-select';
1414
import JetpackMultipleChoiceField from '../field-multiple-choice';
1515
import JetpackNameField from '../field-name';
1616
import JetpackNumberField from '../field-number';
17+
import JetpackPhoneField from '../field-phone';
1718
import JetpackRatingField from '../field-rating';
1819
import JetpackDropdownField from '../field-select';
1920
import JetpackSingleChoiceField from '../field-single-choice';
@@ -61,7 +62,9 @@ export const childBlocks = [
6162
...( getJetpackBlocksVariation() === 'experimental'
6263
? [ JetpackRatingField, JetpackRatingInput, JetpackFieldSlider, JetpackSliderInput ]
6364
: [] ),
64-
...( getJetpackBlocksVariation() === 'beta' ? [ JetpackTimeField, JetpackPhoneInput ] : [] ),
65+
...( getJetpackBlocksVariation() === 'beta'
66+
? [ JetpackTimeField, JetpackPhoneField, JetpackPhoneInput ]
67+
: [] ),
6568

6669
// The following are required for these blocks to be parsed correctly in block
6770
// deprecations. They have been flagged with `supports.inserter: false` to

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

Lines changed: 64 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -227,41 +227,6 @@ public static function register_child_blocks() {
227227
)
228228
);
229229

230-
Blocks::jetpack_register_block(
231-
'jetpack/phone-input',
232-
array(
233-
'supports' => array(
234-
'__experimentalBorder' => array(
235-
'color' => true,
236-
'radius' => true,
237-
'style' => true,
238-
'width' => true,
239-
),
240-
'color' => array(
241-
'text' => true,
242-
'background' => true,
243-
'gradients' => false,
244-
),
245-
'typography' => array(
246-
'fontSize' => true,
247-
'lineHeight' => true,
248-
'__experimentalFontFamily' => true,
249-
'__experimentalFontWeight' => true,
250-
'__experimentalFontStyle' => true,
251-
'__experimentalTextTransform' => true,
252-
'__experimentalTextDecoration' => true,
253-
'__experimentalLetterSpacing' => true,
254-
),
255-
),
256-
'uses_context' => array(
257-
'jetpack/field-share-attributes',
258-
'jetpack/field-prefix-options',
259-
'jetpack/field-prefix-default',
260-
'jetpack/field-prefix-onChange',
261-
),
262-
)
263-
);
264-
265230
if ( Blocks::get_variation() === 'experimental' ) {
266231
Blocks::jetpack_register_block(
267232
'jetpack/input-rating',
@@ -300,6 +265,44 @@ public static function register_child_blocks() {
300265
);
301266
}
302267

268+
if ( Blocks::get_variation() === 'beta' ) {
269+
270+
Blocks::jetpack_register_block(
271+
'jetpack/phone-input',
272+
array(
273+
'supports' => array(
274+
'__experimentalBorder' => array(
275+
'color' => true,
276+
'radius' => true,
277+
'style' => true,
278+
'width' => true,
279+
),
280+
'color' => array(
281+
'text' => true,
282+
'background' => true,
283+
'gradients' => false,
284+
),
285+
'typography' => array(
286+
'fontSize' => true,
287+
'lineHeight' => true,
288+
'__experimentalFontFamily' => true,
289+
'__experimentalFontWeight' => true,
290+
'__experimentalFontStyle' => true,
291+
'__experimentalTextTransform' => true,
292+
'__experimentalTextDecoration' => true,
293+
'__experimentalLetterSpacing' => true,
294+
),
295+
),
296+
'uses_context' => array(
297+
'jetpack/field-share-attributes',
298+
'jetpack/field-prefix-options',
299+
'jetpack/field-prefix-default',
300+
'jetpack/field-prefix-onChange',
301+
),
302+
)
303+
);
304+
}
305+
303306
// Field render methods.
304307
Blocks::jetpack_register_block(
305308
'jetpack/field-text',
@@ -343,24 +346,7 @@ public static function register_child_blocks() {
343346
'jetpack/field-telephone',
344347
array(
345348
'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_field_telephone' ),
346-
'attributes' => array(
347-
'showCountrySelector' => array(
348-
'type' => 'boolean',
349-
),
350-
'default' => array(
351-
'type' => 'string',
352-
'role' => 'content',
353-
),
354-
),
355-
'supports' => array(
356-
'interactivity' => true,
357-
),
358-
'provides_context' => array(
359-
'jetpack/field-share-attributes' => 'shareAttributes',
360-
'jetpack/field-required' => 'required',
361-
'jetpack/field-prefix-default' => 'default',
362-
'jetpack/field-phone-country-toggle' => 'showCountrySelector',
363-
),
349+
'provides_context' => array( 'jetpack/field-required' => 'required' ),
364350
)
365351
);
366352
Blocks::jetpack_register_block(
@@ -473,6 +459,31 @@ public static function register_child_blocks() {
473459
'provides_context' => array( 'jetpack/field-required' => 'required' ),
474460
)
475461
);
462+
463+
Blocks::jetpack_register_block(
464+
'jetpack/field-phone',
465+
array(
466+
'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_field_phone' ),
467+
'attributes' => array(
468+
'showCountrySelector' => array(
469+
'type' => 'boolean',
470+
'default' => true,
471+
),
472+
'default' => array(
473+
'type' => 'string',
474+
'default' => '',
475+
'role' => 'content',
476+
),
477+
),
478+
'supports' => array(
479+
'interactivity' => true,
480+
),
481+
'provides_context' => array(
482+
'jetpack/field-required' => 'required',
483+
'jetpack/field-prefix-default' => 'default',
484+
),
485+
)
486+
);
476487
}
477488

478489
// Paid file field block

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@
314314
word-break: normal;
315315
color: unset;
316316
opacity: 0.6;
317-
font-size: 72%;
317+
font-size: 85%;
318318
margin-inline-start: 0.25em;
319319
font-weight: 400;
320320
}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,6 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
128128
fontSize,
129129
fontFamily,
130130
lineHeight,
131-
inputHeight,
132131
} = window.getComputedStyle( inputNode );
133132

134133
styleProbe.remove();
@@ -149,7 +148,6 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
149148
'--jetpack--contact-form--input-padding': inputPadding,
150149
'--jetpack--contact-form--input-padding-top': inputPaddingTop,
151150
'--jetpack--contact-form--input-padding-left': inputPaddingLeft,
152-
'--jetpack--contact-form--input-height': inputHeight,
153151
'--jetpack--contact-form--font-size': fontSize,
154152
'--jetpack--contact-form--font-family': fontFamily,
155153
'--jetpack--contact-form--line-height': lineHeight,

‎projects/packages/forms/src/blocks/contact-form/variations.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ const variations = [
260260
[ [ 'jetpack/label', { label: __( 'Email', 'jetpack-forms' ) } ], [ 'jetpack/input' ] ],
261261
],
262262
[
263-
'jetpack/field-telephone',
263+
'jetpack/field-phone',
264264
{},
265265
[
266266
[ 'jetpack/label', { label: __( 'Phone', 'jetpack-forms' ) } ],
@@ -343,7 +343,7 @@ const variations = [
343343
],
344344
},
345345
{
346-
name: 'jetpack/field-telephone',
346+
name: 'jetpack/field-phone',
347347
innerBlocks: [
348348
{
349349
name: 'jetpack/label',
@@ -445,7 +445,7 @@ const variations = [
445445
[ [ 'jetpack/label', { label: __( 'Email', 'jetpack-forms' ) } ], [ 'jetpack/input' ] ],
446446
],
447447
[
448-
'jetpack/field-telephone',
448+
'jetpack/field-phone',
449449
{ required: true },
450450
[
451451
[ 'jetpack/label', { label: __( 'Phone', 'jetpack-forms' ) } ],
@@ -523,7 +523,7 @@ const variations = [
523523
],
524524
},
525525
{
526-
name: 'jetpack/field-telephone',
526+
name: 'jetpack/field-phone',
527527
attributes: { required: true },
528528
innerBlocks: [
529529
{ name: 'jetpack/label', attributes: { label: __( 'Phone', 'jetpack-forms' ) } },
@@ -947,7 +947,7 @@ const variations = [
947947
],
948948
],
949949
[
950-
'jetpack/field-telephone',
950+
'jetpack/field-phone',
951951
{},
952952
[
953953
[ 'jetpack/label', { label: __( 'Phone Number', 'jetpack-forms' ) } ],

‎projects/packages/forms/src/blocks/field-telephone/country-list.js‎ renamed to ‎projects/packages/forms/src/blocks/field-phone/country-list.js‎

File renamed without changes.

‎projects/packages/forms/src/blocks/field-phone/edit.js‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import {
2+
InspectorControls,
3+
useBlockProps,
4+
useInnerBlocksProps,
5+
BlockContextProvider,
6+
} from '@wordpress/block-editor';
7+
import { PanelBody, ToggleControl } from '@wordpress/components';
8+
import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
9+
import { __ } from '@wordpress/i18n';
10+
import clsx from 'clsx';
11+
import JetpackFieldControls from '../shared/components/jetpack-field-controls';
12+
import useFieldSelected from '../shared/hooks/use-field-selected';
13+
import useFormWrapper from '../shared/hooks/use-form-wrapper';
14+
import useJetpackFieldStyles from '../shared/hooks/use-jetpack-field-styles';
15+
import { countries } from './country-list';
16+
17+
const EMPTY_ARRAY = [];
18+
19+
export default function PhoneFieldEdit( props ) {
20+
const { setAttributes, attributes, clientId, isSelected } = props;
21+
const {
22+
showCountrySelector,
23+
width,
24+
id,
25+
required,
26+
requiredText,
27+
placeholder,
28+
default: defaultCountry,
29+
} = attributes;
30+
const [ countryList, setCountryList ] = useState( EMPTY_ARRAY );
31+
32+
const { isInnerBlockSelected, hasPlaceholder } = useFieldSelected( clientId );
33+
const { blockStyle } = useJetpackFieldStyles( attributes );
34+
const blockProps = useBlockProps( {
35+
className: clsx(
36+
'jetpack-field',
37+
'jetpack-field-phone',
38+
width ? ` jetpack-field__width-${ width }` : '',
39+
{
40+
'is-selected': isSelected || isInnerBlockSelected,
41+
'has-placeholder': hasPlaceholder,
42+
}
43+
),
44+
style: blockStyle,
45+
} );
46+
47+
useFormWrapper( props );
48+
49+
const countryPairs = useMemo( () => {
50+
return countries.map( country => ( {
51+
label: country.country + ' ' + country.flag + ' ' + country.value,
52+
value: country.code,
53+
} ) );
54+
}, [] );
55+
56+
const onChangeShowCountrySelector = value => {
57+
setAttributes( {
58+
showCountrySelector: value,
59+
} );
60+
setCountryList( value ? countryPairs : EMPTY_ARRAY );
61+
};
62+
63+
useEffect( () => {
64+
if ( showCountrySelector === undefined || showCountrySelector === true ) {
65+
setAttributes( { showCountrySelector: true, default: defaultCountry || 'US' } );
66+
setCountryList( countryPairs );
67+
}
68+
}, [ showCountrySelector, setAttributes, countryPairs, defaultCountry ] );
69+
70+
const innerBlocksProps = useInnerBlocksProps( blockProps, {
71+
allowedBlocks: [ 'jetpack/label', 'jetpack/phone-input' ],
72+
template: [
73+
[
74+
'jetpack/label',
75+
{
76+
label: __( 'Phone number', 'jetpack-forms' ),
77+
placeholder,
78+
required,
79+
requiredText,
80+
},
81+
],
82+
[ 'jetpack/phone-input', {} ],
83+
],
84+
templateLock: 'all',
85+
__experimentalCaptureToolbars: true,
86+
} );
87+
88+
// Handler is provided as context from edit as index.js can't pass it as a prop.
89+
const onChangeDefaultCountry = useCallback(
90+
event => {
91+
const value = event.target.value;
92+
setAttributes( { default: value } );
93+
},
94+
[ setAttributes ]
95+
);
96+
97+
return (
98+
<>
99+
<BlockContextProvider
100+
value={ {
101+
'jetpack/field-prefix-onChange': onChangeDefaultCountry,
102+
'jetpack/field-prefix-options': countryList,
103+
} }
104+
>
105+
<div { ...innerBlocksProps } />
106+
</BlockContextProvider>
107+
108+
<InspectorControls>
109+
<PanelBody title={ __( 'Settings', 'jetpack-forms' ) }>
110+
<ToggleControl
111+
label={ __( 'Show country selector', 'jetpack-forms' ) }
112+
checked={ showCountrySelector || false }
113+
onChange={ onChangeShowCountrySelector }
114+
__nextHasNoMarginBottom={ true }
115+
/>
116+
</PanelBody>
117+
</InspectorControls>
118+
119+
<JetpackFieldControls
120+
clientId={ clientId }
121+
id={ id }
122+
required={ required }
123+
attributes={ attributes }
124+
setAttributes={ setAttributes }
125+
width={ width }
126+
/>
127+
</>
128+
);
129+
}

0 commit comments

Comments
 (0)