Skip to content

Commit b9b7495

Browse files
CGastrellkangzj
CGastrell
authored and
kangzj
committed
Forms: move international phone input to production (#44922)
* adapt process to use two letter country code, derive state from it * remove debugging code * move country list to field-telephone * remove field-phone registration and handlers * move input-phone out of beta * move field-phone code into field-telephone, update block definition and deprecation/migration * use type phone for proper wrapper and type setup, render old field-telephone as usual * adapt css classes to both telephone and phone * use new label format for country dropdown * improve deprecation/migration eligibility * add migration test * changelog * add test for phone field * only render legacy phone field if showcountryselector is not present, disregard default value * fix mobile views with long country names * deprovision default when not using country selector on phone field * cleanup useless code * use the right field type for international phone number: phone * only change country when lib has a possible value * create new instance whenever country changes * use same bblock properties declaration on php and js * inherit letter spacing so shared styles take effect * add default supports to field * required labels are affecting the label height, use smaller font * keep mimicking input styles on wrapper * use more probe styles to make wrapper look like input * export and use when available: input height css style from probe * use line-height from probe * move phone-input out of beta after some not optimal rebase * change phone-input name
1 parent 597f1ac commit b9b7495

File tree

23 files changed

+514
-360
lines changed

23 files changed

+514
-360
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: minor
2+
Type: changed
3+
4+
Forms: move all international phone code and UI back into legacy telephone field, keep backwards compat

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ 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';
1817
import JetpackRatingField from '../field-rating';
1918
import JetpackDropdownField from '../field-select';
2019
import JetpackSingleChoiceField from '../field-single-choice';
@@ -62,9 +61,7 @@ export const childBlocks = [
6261
...( getJetpackBlocksVariation() === 'experimental'
6362
? [ JetpackRatingField, JetpackRatingInput, JetpackFieldSlider, JetpackSliderInput ]
6463
: [] ),
65-
...( getJetpackBlocksVariation() === 'beta'
66-
? [ JetpackTimeField, JetpackPhoneField, JetpackPhoneInput ]
67-
: [] ),
64+
...( getJetpackBlocksVariation() === 'beta' ? [ JetpackTimeField, JetpackPhoneInput ] : [] ),
6865

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

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

Lines changed: 53 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,41 @@ 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+
230265
if ( Blocks::get_variation() === 'experimental' ) {
231266
Blocks::jetpack_register_block(
232267
'jetpack/input-rating',
@@ -265,44 +300,6 @@ public static function register_child_blocks() {
265300
);
266301
}
267302

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-
306303
// Field render methods.
307304
Blocks::jetpack_register_block(
308305
'jetpack/field-text',
@@ -346,7 +343,24 @@ public static function register_child_blocks() {
346343
'jetpack/field-telephone',
347344
array(
348345
'render_callback' => array( Contact_Form_Plugin::class, 'gutenblock_render_field_telephone' ),
349-
'provides_context' => array( 'jetpack/field-required' => 'required' ),
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+
),
350364
)
351365
);
352366
Blocks::jetpack_register_block(
@@ -459,31 +473,6 @@ public static function register_child_blocks() {
459473
'provides_context' => array( 'jetpack/field-required' => 'required' ),
460474
)
461475
);
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-
);
487476
}
488477

489478
// 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: 85%;
317+
font-size: 72%;
318318
margin-inline-start: 0.25em;
319319
font-weight: 400;
320320
}

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

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

133134
styleProbe.remove();
@@ -148,6 +149,7 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
148149
'--jetpack--contact-form--input-padding': inputPadding,
149150
'--jetpack--contact-form--input-padding-top': inputPaddingTop,
150151
'--jetpack--contact-form--input-padding-left': inputPaddingLeft,
152+
'--jetpack--contact-form--input-height': inputHeight,
151153
'--jetpack--contact-form--font-size': fontSize,
152154
'--jetpack--contact-form--font-family': fontFamily,
153155
'--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-phone',
263+
'jetpack/field-telephone',
264264
{},
265265
[
266266
[ 'jetpack/label', { label: __( 'Phone', 'jetpack-forms' ) } ],
@@ -343,7 +343,7 @@ const variations = [
343343
],
344344
},
345345
{
346-
name: 'jetpack/field-phone',
346+
name: 'jetpack/field-telephone',
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-phone',
448+
'jetpack/field-telephone',
449449
{ required: true },
450450
[
451451
[ 'jetpack/label', { label: __( 'Phone', 'jetpack-forms' ) } ],
@@ -523,7 +523,7 @@ const variations = [
523523
],
524524
},
525525
{
526-
name: 'jetpack/field-phone',
526+
name: 'jetpack/field-telephone',
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-phone',
950+
'jetpack/field-telephone',
951951
{},
952952
[
953953
[ 'jetpack/label', { label: __( 'Phone Number', 'jetpack-forms' ) } ],

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

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

0 commit comments

Comments
 (0)