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:

👋 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.

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.