Social Icons: Add a 'Phone' icon which takes a tel: linkadded new phone variation

[colinduwe]

What?

This adds a new Phone variation to the Social Link block. It uses the DashIcons phone icon. It has a url attribute of 'tel:' so that users correctly add a phone phone number.

Why?

Issue: #55718
Its a nice addition to the social links block

How?

This adds a new Phone variation to the Social Link block. It uses the DashIcons phone icon. It has a url attribute of 'tel:' so that users correctly add a phone phone number.

Do note that because of the URL attribute, this variation is different than all other variations which have an empty URL. If the URL is empty we add an opacity to the icon to indicate to the user that they haven't added a URL yet. We also do not render Social Link Blocks on the front end if they have an empty URL. The phone icon's initial state in non-empty so works a little differently than the others.

Also, the block description from block.json isn't entirely appropriate in this context. ("Display an icon linking to a social media profile or site.") I'm not aware that we can alter that for a variation.

Testing Instructions

1. Add a Social Icons block to a post or page and add a phone icon to that.
2. Add a phone number
3. Test the phone icon on the front end. It should trigger a phone call.

Testing Instructions for Keyboard

1. Add a Social Icons block to a post or page and add a phone icon to that.
2. Add a phone number
3. Test the phone icon on the front end. It should trigger a phone call.

Screenshots or screencast

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: First-time Contributor, [Block] Social.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @colinduwe! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.