Added WhatsApp icon to the Social Icon Block

[paulopmt1]

What?

I have added the Whatsapp icon to the Social Icons Block, as my first Gutenberg contribuition.

Why?

WhatsApp is really famous in Brazil, it's used for everything here, so I wanted my first Gutenberg contribution to impact these users.

This is related to: #30378

How?

Testing Instructions

1. Open a Post or Page
2. Add a Social Block
3. Add the WhatsApp Icon
4. Add content to it, normally https://wa.me/your-phone-number
5. Save and make sure it appears as expected in the editor as well as the preview

Screenshots or screencast

In the editor:

Result in the preview:

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @paulopmt1! 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.

[paaljoachim]

Hi Paulo Marcos.

Thank you for your very first contribution to Gutenberg! It is much appreciated!

I tested the PR using the Gutenberg PR build. Using this method: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/
Adding the WhatsApp icon looks identical to adding other social media icons.

Backend:

Testing the Frontend with Twenty Twenty Two showed some weirdness which has I believe nothing to do with this PR, so feel free to skip this part.

Testing the Frontend with Twenty Twenty One showed this:

From what I see this PR in relation to design and functionality works as it should.
Both of the above screenshots shows what it would look like when hovering the cursor over the Whatsapp icon. Showing the status area of the browser with the link.

[ndiego]

@paulopmt1 this looks great! The PR is testing well and I see no issues. Can you try and rebase the PR, that hopefully will fix the failing check. I am also going to have someone check the svg. Looks good to me, but not my area of expertise. Once the failing checks are cleared and we have confirmation on the svg, I'll approve and we can get this merged!

[ndiego]

@critterverse, @jameskoster or @javierarce would anyone be able to do a quick review of the new WhatsApp svg in this PR. Otherwise, the PR looks good to go once the failing check is corrected. Thanks for your help 🙏

[critterverse]

Nice, agree that this is a great addition to the social icons. I redrew this to match the lineweight used in our other icons before realizing that we don't customize social icons to match our library and generally use the logo as is. So this LGTM!

[ndiego]

This all looks good, lets 🚢!

[github-actions]

Congratulations on your first merged pull request, @paulopmt1! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[paulopmt1]

Thanks, @paaljoachim, @ndiego, and @critterverse for reviewing my first Gutenberg PR! I'm really happy to have my own code in Gutenberg, and will start a new task now!

[fluiddot]

👋 I checked this change in the native version of the editor and worked fine 🎊 .

[Hativ]

If I change the icon color (with the setting of the block), the WhatsApp icon doesn't look good anymore and doesn't match the others:

[paaljoachim]

Hi Hativ. @Hativ
Can you create a new github issue and link to this merged PR? It would make it easier for someone to tackle it.

[ndiego]

@Hativ @paaljoachim I see what the issue is. I will create an issue and the corresponding PR to get this fixed.