Forms: move international phone input to production #44922

CGastrell · 2025-08-22T22:02:05Z

Proposed changes:

This PR moves all the code we used to develop the country dropdown selector for phone input back into legacy telephone field.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

None

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Migration test: run jetpack test js packages/forms to verify the migration test passes. Then...

The main test here splits in 2:

github-actions · 2025-08-22T22:02:54Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the move/international-phone-input-to-telephone branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack move/international-phone-input-to-telephone

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-08-22T22:03:11Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

jp-launch-control · 2025-08-22T22:11:18Z

Code Coverage Summary

Coverage changed in 7 files. Only the first 5 are listed here.

File	Coverage	Δ%	Δ Uncovered
projects/packages/forms/src/blocks/field-telephone/edit.js	0/22 (0.00%)	0.00%	20 💔
projects/packages/forms/src/blocks/field-telephone/deprecated.js	7/9 (77.78%)	-22.22%	2 ❤️‍🩹
projects/packages/forms/src/modules/field-phone/view.js	0/47 (0.00%)	0.00%	2 ❤️‍🩹
projects/packages/forms/src/contact-form/class-contact-form-plugin.php	410/1272 (32.23%)	-0.03%	1 ❤️‍🩹
projects/packages/forms/src/blocks/shared/deprecations/inner-blocks-deprecation.js	1/6 (16.67%)	16.67%	-1 💚

1 file is newly checked for coverage.

File	Coverage
projects/packages/forms/src/blocks/field-telephone/country-list.js	0/1 (0.00%) 💔

Full summary · PHP report · JS report

_{Coverage check overridden by

Coverage tests to be added later
Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR
.}

edanzer

Few issues/questions from first round of testing. For this I was just testing this field as is, not backwards compatibility.

Country updates when as I type?
https://github.com/user-attachments/assets/bd3f18b1-387e-407c-934f-08f1a990b18a

Validation seems off. There's a triangle under the input with no message, and then the message on the bottom of the form says 'undefined'.

Width issues. I know this is already in discussion, but the country dropdown seems wide even on large screen. It becomes more notable if using columns or on mobile.

edanzer

There may be a mobile styling issue. Below are screenshots from my iphone with just name/email on a form (fits within the screen), and with the phone field added (extends about 2X off the right side of the screen).

No phone field

With phone field

simison · 2025-08-28T11:53:15Z

Overall works, couple things:

There's a space in saved data between the countrycode and number. Was that expected?

There's a stray ' before the number in CSV export:

simison · 2025-08-28T11:59:48Z

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

+		default: {
+			type: 'string',
+		},
+		onChangeDefaultCountry: {


Why is it necessary to pass a function in attributes? Is it interactivity API thing?

I don't think it's necessary. But it's part of the context provided for the innerblocks. As such, I thought it would be a good idea to keep it declared as it's supposed to be, so one can track down where is it coming from. Unsure if removing it from declaration impacts functionality.

simison · 2025-08-28T12:02:46Z

Why the move from projects/packages/forms/src/blocks/field-phone to projects/packages/forms/src/blocks/field-telephone? Not just the folder but also the block name from field-phone → field-telephone? From the previous convo, u understood we should keep the old block and have deprecation in place, which handles the new attribute addition.

… disregard default value

This reverts commit f5ae5f9.

…#45060) This reverts commit f5ae5f9.

* 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

…#45060) This reverts commit f5ae5f9.

CGastrell self-assigned this Aug 22, 2025

CGastrell added [Status] Needs Review This PR is ready for review. [Status] Needs Team Review Obsolete. Use Needs Review instead. [Package] Forms Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR labels Aug 22, 2025

github-actions bot added [Block] Contact Form Form block (also see Contact Form label) [Feature] Contact Form [Tests] Includes Tests labels Aug 22, 2025

github-actions bot added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Aug 22, 2025

CGastrell force-pushed the move/international-phone-input-to-telephone branch 2 times, most recently from 8af7637 to 829003f Compare August 25, 2025 19:10

edanzer reviewed Aug 25, 2025

View reviewed changes

CGastrell added [Type] Task and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Aug 26, 2025

CGastrell force-pushed the move/international-phone-input-to-telephone branch from 66229c3 to 16e5db9 Compare August 27, 2025 14:23

simison reviewed Aug 28, 2025

View reviewed changes

CGastrell force-pushed the move/international-phone-input-to-telephone branch 2 times, most recently from cfcb293 to 356a86d Compare August 29, 2025 22:15

CGastrell requested review from simison and edanzer September 2, 2025 14:17

CGastrell added 3 commits September 2, 2025 11:17

adapt process to use two letter country code, derive state from it

7b4b164

remove debugging code

b4a6695

move country list to field-telephone

e7f9d83

CGastrell added 18 commits September 2, 2025 11:20

changelog

e22984b

add test for phone field

3dc6e44

only render legacy phone field if showcountryselector is not present,…

0052802

… disregard default value

fix mobile views with long country names

fb59515

deprovision default when not using country selector on phone field

07dc3d8

cleanup useless code

a605e41

use the right field type for international phone number: phone

b10a347

only change country when lib has a possible value

2bbf012

create new instance whenever country changes

e2f793a

use same bblock properties declaration on php and js

9e5a991

inherit letter spacing so shared styles take effect

2a21d95

add default supports to field

0ec8489

required labels are affecting the label height, use smaller font

5d89503

keep mimicking input styles on wrapper

5f70c6e

use more probe styles to make wrapper look like input

865c605

export and use when available: input height css style from probe

23fc932

use line-height from probe

bfb31a6

move phone-input out of beta after some not optimal rebase

69ff365

CGastrell force-pushed the move/international-phone-input-to-telephone branch from 019e629 to 69ff365 Compare September 2, 2025 14:25

CGastrell mentioned this pull request Sep 2, 2025

Forms: add searchable country dropdown for phone number #45018

Merged

3 tasks

change phone-input name

7bede4e

CGastrell force-pushed the move/international-phone-input-to-telephone branch from 6d40c44 to 7bede4e Compare September 2, 2025 20:15

CGastrell merged commit f5ae5f9 into trunk Sep 3, 2025
67 checks passed

CGastrell deleted the move/international-phone-input-to-telephone branch September 3, 2025 14:41

github-actions bot removed the [Status] Needs Team Review Obsolete. Use Needs Review instead. label Sep 3, 2025

CGastrell added a commit that referenced this pull request Sep 3, 2025

Revert "Forms: move international phone input to production (#44922)"

3c7a84a

This reverts commit f5ae5f9.

CGastrell mentioned this pull request Sep 3, 2025

Revert "Forms: move international phone input to production" #45060

Merged

tbradsha pushed a commit that referenced this pull request Sep 3, 2025

Revert "Forms: move international phone input to production (#44922)" (…

5adef5e

…#45060) This reverts commit f5ae5f9.

kangzj pushed a commit that referenced this pull request Sep 4, 2025

Revert "Forms: move international phone input to production (#44922)" (…

e3e3180

…#45060) This reverts commit f5ae5f9.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Forms: move international phone input to production #44922

Forms: move international phone input to production #44922

Uh oh!

CGastrell commented Aug 22, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 22, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 22, 2025 •

edited

Loading

Uh oh!

jp-launch-control bot commented Aug 22, 2025 •

edited

Loading

Uh oh!

edanzer left a comment

Uh oh!

edanzer left a comment

Uh oh!

simison commented Aug 28, 2025

Uh oh!

simison Aug 28, 2025

Uh oh!

CGastrell Aug 28, 2025

Uh oh!

simison commented Aug 28, 2025

Uh oh!

Uh oh!

Uh oh!

Forms: move international phone input to production #44922

Forms: move international phone input to production #44922

Uh oh!

Conversation

CGastrell commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Uh oh!

github-actions bot commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control bot commented Aug 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

edanzer left a comment

Choose a reason for hiding this comment

Uh oh!

edanzer left a comment

Choose a reason for hiding this comment

Uh oh!

simison commented Aug 28, 2025

Uh oh!

simison Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

CGastrell Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

simison commented Aug 28, 2025

Uh oh!

Uh oh!

Uh oh!

CGastrell commented Aug 22, 2025 •

edited

Loading

github-actions bot commented Aug 22, 2025 •

edited

Loading

github-actions bot commented Aug 22, 2025 •

edited

Loading

jp-launch-control bot commented Aug 22, 2025 •

edited

Loading