Send a Message / WhatsApp block

[apeatling]

Note: New commits require the new files added in this PR to be re-added to the Fusion generated diff (D44901-code) as the WordPress.com gating (D44978-code) for the block depends on the resulting build

This block provides two things. The first is a parent "Send a Message" block that is the container for all messaging service inner blocks (very similar to the social icons block). The second is a WhatsApp Button block that provides the primary functionality for connecting to WhatsApp.

So far the "Send a Message" block is limited only to WhatsApp as a service, so this inner block is inserted by default. Going forward we can easily add more services.

There is a default "WhatsApp Button" variation of the "Send a Message" block that means that "WhatsApp Button" shows up in the inserter, not "Send a Message". In the future we can also provide other service variations so they appear in the inserter, rather than a generic "Send a Message" block.

This is how it works (note on mobile phones, tapping the button will open WhatsApp directly):

In this version of the block, I have hidden the child block inserter to the right of the WhatsApp button that would be used to insert buttons for other services. There is only one service, so it's not useful.

One caveat -- variations do not work via the / quick inserter, so you will not see the "WhatsApp Button" block appear here. This is being tracked here and I'll see what I can do to move this along: WordPress/gutenberg#20583

Testing instructions:

• Insert a WhatsApp button
• Add a phone number that is associated with a WhatsApp account
• Publish the post
• Confirm that clicking the button opens WhatsApp and the phone number and initial message look correct.
• Try on a mobile device and confirm that WhatsApp opens correctly.
• Adjust the color settings and confirm that this changes correctly.
• Insert multiple buttons on the page and confirm they all work separately and correctly.

Proposed changelog entry for your changes:

• Introduced a new WhatsApp button block to allow your users to send you messages on WhatsApp from your website.

[jetpackbot]

	Warnings
⚠️	pre-commit hook was skipped for one or more commits
⚠️	The Privacy section is missing for this PR. Please specify whether this PR includes any changes to data or privacy.

This is an automated check which relies on PULL_REQUEST_TEMPLATE. We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-15050

Generated by 🚫 dangerJS against a24fc30

[apeatling]

I'm working on this as a 20% time thing, and to help more rapidly improve my Gutenberg knowledge. It's outside of our current team cycle work.

[aaronrobertshaw]

Very nice @apeatling!

I've taken this for a bit of a spin and it works great.

There was only one minor issue. When I pushed WordPress' version back to 5.3 or earlier, the appender is visible and functional whereas its hidden for the time being in the current version of WP.

Related to that, even using the latest version of WP, if you expand the three dots toolbar menu, you can still choose to duplicate the inner Whatsapp block within the parent Send A Message block. If we are choosing to hide the appender for now, would it make sense to also hide that option?

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello apeatling! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D44901-code before merging this PR. Thank you!
This revision will be updated with each commit to this PR

[apeatling]

The ordering on that list surprised me, I expected to find my country code closer to the top :)

@jeherve What do you see when you go to https://https://public-api.wordpress.com/geo/ ? Your country code should be auto selected so you don't have to go through the list.

[apeatling]

Our other buttons allow you to add line breaks within the button text. Could we add this here as well?

Done. 👍

[apeatling]

The block preview for the Send a message block includes some details about the inner block that we probably should not be displaying:

This block should not appear in the main inserter, which version of Gutenberg was this in?

[apeatling]

@jeherve If you can give this a final approval I'll merge this and follow up in separate PRs.

[folletto]

For some reason the button isn't showing up on the Jurassing Ninja I tried to spin up, so apologies but I couldn't test this.

—

Privacy question: how are we storing that phone number?
I see it's redirecting so I imagine that the phone number is going to be provided in clear... is there any way for this to have the phone number protected, so it's not visible from the outside as a site visitor?

I know it might not, but if possible, yet it would be a great feature if it could prevent scraping — as I think most of the cases require the number to be in clear.

[jeherve]

For some reason the button isn't showing up on the Jurassic Ninja I tried to spin up, so apologies but I couldn't test this

Could you go to Settings > Jetpack Constants and ensure that the Beta checkbox is checked?

how are we storing that phone number?

It's stored in the post content, and is indeed available to any site visitor who can click on the button and see what phone number the button sends you to.

That's how the official Whatsapp button works as well:
https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat/

I don't know if I would consider this a privacy issue though; if you add a Whatsapp button to your site, I would assume that's because you do want people to contact you?

[fgiannar]

For some reason the button isn't showing up on the Jurassing Ninja I tried to spin up, so apologies but I couldn't test this.

Hi @folletto , in order to be able to see the button you could try going to Admin->Settings->Jetpack Constants and setting the JETPACK_BETA_BLOCKS to true.

Hope this helps :)

@apeatling You could possibly add this to the test instructions as well if you wish :)

[folletto]

I don't know if I would consider this a privacy issue though; if you add a Whatsapp button to your site, I would assume that's because you do want people to contact you?

I wouldn't consider a privacy "issue" because as you stated it's the default WhatsApp behaviour. I'm saying that if we provide a way that avoids scraping, we have a major privacy benefit (and yes, benefit > issue 😉 ).

Being open to receive a customer message doesn't mean you're open to receive any message from automated scrapers, robocalls, etc. Especially relevant if you're a small/sole business.

There are three layers here:

1. Visible to anyone inspecting, and to any scraper
2. Visible to anyone inspecting, but shielded from scrapers
3. Private

If we are able to have a block that does (3), it would be an amazing feature that we should advertise. Providing (2) would be regardless nice to help protect our users. Doing (1) is the status quo, so it's ok, it's just not very nice.

[jeherve]

What do you see when you go to https://public-api.wordpress.com/geo/ ?

I do see my country code (well the one where I'm proxied at the moment), but it doesn't seem to get picked up by the picker. This happens whether I am proxied or not.

This block should not appear in the main inserter, which version of Gutenberg was this in?

I'm seeing this on WP 5.4.2, no Gutenberg. It does not seem to happen in WP 5.3.4.

[jeherve]

This should be good to merge. We can keep iterating in follow-up PRs.

[apeatling]

I'm saying that if we provide a way that avoids scraping, we have a major privacy benefit (and yes, benefit > issue 😉 ).

@folletto I'll see if there are any ways to obfuscate the phone number. Another option is to be clear in the interface that your phone number will be exposed on your website.

[folletto]

Good point. If we can't obfuscate, let's make that clear! :)

[jeherve]

r209741-wpcom