Send a Message / WhatsApp block (#15050)

* Initial addition of send a message block into Jetpack block scaffolding

* Switch to innerblocks for supporting WhatsApp block within main Send a Message block parent. This will allow us to support other services within the same block in the future, while providing service variations so that users can directly insert the buttons they want from the inserter.

* Make sure that innerblocks are registered and can load front end styles

* [not verified] Add WhatsApp button innerblock.

* [not verified] Remove commented out old class component from WhatsApp block edit.

* Move phone number and message settings to the block toolbar as well as the sidebar.

* Update settings icon to something more appropriate

* Update message block icon and support flex alignment inside the block.

* Fix up number validation, and auto select the WhatsApp button block when first inserted.

* [not verified] Make sure parent block has wrapper on front end.

* [not verified] Make sure the form settings popover has correct padding in older GB versions

* Use constants for color names

* Hide the child block inserter on WP 5.3

* Allow Send A Message block for free Jetpack plan

* Deconstruct params in function

* Explicitly disable html support

* Add comment for the phone number validation regex

* Remove superfluous save

* Switch to useDispatch

* Add useEffect dependencies

* Fix undefined classname in front end.

* Remove alignment support.

* Fix missing translation

* Fix missing textdomain

* Switch to Jetpack geo API

* URL encode inline svg to fix icons in IE11

* Fix inline block buttons when more than one whatsapp button exists.

* Update extensions/blocks/send-a-message/index.js

Co-authored-by: Foteini Giannaropoulou <giannaropoulou.foteini@gmail.com>

* Update extensions/blocks/send-a-message/variations.js

Co-authored-by: Foteini Giannaropoulou <giannaropoulou.foteini@gmail.com>

* Update extensions/blocks/send-a-message/whatsapp-button/index.js

Co-authored-by: Foteini Giannaropoulou <giannaropoulou.foteini@gmail.com>

* Remove spaces

* Support line breaks in button

Co-authored-by: Aaron Robertshaw <aaron@clickweave.com>
Co-authored-by: Foteini Giannaropoulou <giannaropoulou.foteini@gmail.com>

class.jetpack-plan.php

@@ -31,6 +31,7 @@ class Jetpack_Plan {
 			'supports' => array(
 				'opentable',
 				'calendly',
+				'send-a-message',
 			),
 		),
 		'personal' => array(

extensions/blocks/send-a-message/edit.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function SendAMessageEdit( { className } ) {
+	// Default template is single WhatsApp block until we offer
+	// more services
+	const DEFAULT_TEMPLATE = [ [ 'jetpack/whatsapp-button', {} ] ];
+	const ALLOWED_BLOCKS = [ 'jetpack/whatsapp-button' ];
+
+	return (
+		<div className={ className }>
+			<InnerBlocks template={ DEFAULT_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
+		</div>
+	);
+}

extensions/blocks/send-a-message/editor.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import registerJetpackBlock from '../../shared/register-jetpack-block';
+import { name, settings } from '.';
+import {
+	name as whatsAppButtonBlockName,
+	settings as whatsAppButtonBlockSettings,
+} from './whatsapp-button';
+
+registerJetpackBlock( name, settings, [
+	{
+		name: whatsAppButtonBlockName,
+		settings: whatsAppButtonBlockSettings,
+	},
+] );

extensions/blocks/send-a-message/editor.scss

@@ -0,0 +1,16 @@
+.wp-block-jetpack-send-a-message {
+	.block-editor-block-list__layout {
+		display: inline-flex;
+
+		.wp-block {
+			margin-top: 0px;
+			margin-bottom: 0px;
+			margin-right: 10px;
+		}
+	}
+
+	.block-list-appender, .block-editor-inserter {
+		/* Until we have more service buttons available */
+		display: none;
+	}
+}

extensions/blocks/send-a-message/index.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { InnerBlocks } from '@wordpress/block-editor';
+import { Path } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import variations from './variations';
+import renderMaterialIcon from '../../shared/render-material-icon';
+import { supportsCollections } from '../../shared/block-category';
+
+/**
+ * Style dependencies
+ */
+import './editor.scss';
+
+export const name = 'send-a-message';
+export const title = __( 'Send A Message', 'jetpack' );
+
+export const settings = {
+	title,
+	description: __( 'Let your visitors send you messages with the tap of a button.', 'jetpack' ),
+	icon: renderMaterialIcon(
+		<Path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z" />
+	),
+	category: supportsCollections() ? 'grow' : 'jetpack',
+	keywords: [
+		_x( 'whatsapp', 'keyword', 'jetpack' ),
+		_x( 'messenger', 'keyword', 'jetpack' ),
+		_x( 'contact', 'keyword', 'jetpack' ),
+		_x( 'support', 'keyword', 'jetpack' ),
+	],
+	supports: {
+		html: false,
+	},
+	attributes: {},
+	edit,
+	save: props => {
+		return (
+			<div className={ props.className }>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+	variations,
+	example: {},
+};

extensions/blocks/send-a-message/send-a-message.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Send a Message Block.
+ *
+ * @package Jetpack
+ */
+
+namespace Automattic\Jetpack\Extensions\Send_A_Message;
+
+require_once dirname( __FILE__ ) . '/whatsapp-button/whatsapp-button.php';
+
+use Jetpack;
+use Jetpack_Gutenberg;
+
+const FEATURE_NAME = 'send-a-message';
+const BLOCK_NAME   = 'jetpack/' . FEATURE_NAME;
+
+/**
+ * Registers the block for use in Gutenberg
+ * This is done via an action so that we can disable
+ * registration if we need to.
+ */
+function register_block() {
+	jetpack_register_block(
+		BLOCK_NAME,
+		array(
+			'render_callback' => __NAMESPACE__ . '\render_block',
+			'plan_check'      => true,
+		)
+	);
+}
+add_action( 'init', __NAMESPACE__ . '\register_block' );
+
+/**
+ * Render callback.
+ *
+ * @param array  $attributes Array containing the block attributes.
+ * @param string $content    String containing the block content.
+ *
+ * @return string
+ */
+function render_block( $attributes, $content ) {
+	Jetpack_Gutenberg::load_styles_as_required( FEATURE_NAME );
+
+	return $content;
+}

extensions/blocks/send-a-message/variations.js

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import whatsAppIcon from './whatsapp-button/icon';
+
+const variations = [
+	{
+		isDefault: true,
+		name: 'whatsapp-button',
+		title: __( 'WhatsApp Button', 'jetpack' ),
+		description: __(
+			'Let your visitors send you messages on WhatsApp with the tap of a button.',
+			'jetpack'
+		),
+		icon: whatsAppIcon,
+		innerBlocks: [ [ 'jetpack/whatsapp-button', {} ] ],
+	},
+];
+
+export default variations;

extensions/blocks/send-a-message/whatsapp-button/attributes.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default {
+	countryCode: {
+		type: 'string',
+	},
+	phoneNumber: {
+		type: 'string',
+	},
+	firstMessage: {
+		type: 'string',
+		default: __( 'Hi, I got your WhatsApp information from your website.', 'jetpack' ),
+	},
+	buttonText: {
+		type: 'array',
+		source: 'children',
+		selector: 'a.whatsapp-block__button',
+		default: __( 'Chat on WhatsApp', 'jetpack' ),
+	},
+	backgroundColor: {
+		type: 'string',
+		default: '#25D366',
+	},
+	colorClass: {
+		type: 'string',
+		default: 'dark',
+	},
+};