Send a Message / WhatsApp block

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',
+	},
+};