From 0f475a780a489aa3192fe468209d6d35c4e96a65 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Thu, 19 Mar 2020 11:28:10 -0700
Subject: [PATCH 01/32] Initial addition of send a message block into Jetpack
 block scaffolding

---
 .../blocks/send-a-message/attributes.js       |  31 +++
 .../blocks/send-a-message/countrycodes.js     | 241 +++++++++++++++++
 extensions/blocks/send-a-message/edit.js      | 250 ++++++++++++++++++
 extensions/blocks/send-a-message/editor.js    |   7 +
 extensions/blocks/send-a-message/editor.scss  |  44 +++
 extensions/blocks/send-a-message/icon.js      |  10 +
 extensions/blocks/send-a-message/index.js     |  62 +++++
 extensions/blocks/send-a-message/save.js      |  44 +++
 .../blocks/send-a-message/send-a-message.php  |  43 +++
 extensions/blocks/send-a-message/view.js      |   4 +
 extensions/blocks/send-a-message/view.scss    |  37 +++
 extensions/index.json                         |   2 +-
 12 files changed, 774 insertions(+), 1 deletion(-)
 create mode 100644 extensions/blocks/send-a-message/attributes.js
 create mode 100644 extensions/blocks/send-a-message/countrycodes.js
 create mode 100644 extensions/blocks/send-a-message/edit.js
 create mode 100644 extensions/blocks/send-a-message/editor.js
 create mode 100644 extensions/blocks/send-a-message/editor.scss
 create mode 100644 extensions/blocks/send-a-message/icon.js
 create mode 100644 extensions/blocks/send-a-message/index.js
 create mode 100644 extensions/blocks/send-a-message/save.js
 create mode 100644 extensions/blocks/send-a-message/send-a-message.php
 create mode 100644 extensions/blocks/send-a-message/view.js
 create mode 100644 extensions/blocks/send-a-message/view.scss

diff --git a/extensions/blocks/send-a-message/attributes.js b/extensions/blocks/send-a-message/attributes.js
new file mode 100644
index 0000000000000..7c2a4657ff7eb
--- /dev/null
+++ b/extensions/blocks/send-a-message/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',
+	},
+};
diff --git a/extensions/blocks/send-a-message/countrycodes.js b/extensions/blocks/send-a-message/countrycodes.js
new file mode 100644
index 0000000000000..9f268dd057d5f
--- /dev/null
+++ b/extensions/blocks/send-a-message/countrycodes.js
@@ -0,0 +1,241 @@
+export const countryCodes = [
+	{ code: 'US', label: '\ud83c\uddfa\ud83c\uddf8 +1', value: '1US' },
+	{ code: 'CA', label: '\ud83c\udde8\ud83c\udde6 +1', value: '1CA' },
+	{ code: 'BS', label: '\ud83c\udde7\ud83c\uddf8 +1242', value: '1242BS' },
+	{ code: 'BB', label: '\ud83c\udde7\ud83c\udde7 +1246', value: '1246BB' },
+	{ code: 'AI', label: '\ud83c\udde6\ud83c\uddee +1264', value: '1264AI' },
+	{ code: 'AG', label: '\ud83c\udde6\ud83c\uddec +1268', value: '1268AG' },
+	{ code: 'VG', label: '\ud83c\uddfb\ud83c\uddec +1284', value: '1284VG' },
+	{ code: 'VI', label: '\ud83c\uddfb\ud83c\uddee +1340', value: '1340VI' },
+	{ code: 'BM', label: '\ud83c\udde7\ud83c\uddf2 +1441', value: '1441BM' },
+	{ code: 'GD', label: '\ud83c\uddec\ud83c\udde9 +1473', value: '1473GD' },
+	{ code: 'TC', label: '\ud83c\uddf9\ud83c\udde8 +1649', value: '1649TC' },
+	{ code: 'MS', label: '\ud83c\uddf2\ud83c\uddf8 +1664', value: '1664MS' },
+	{ code: 'MP', label: '\ud83c\uddf2\ud83c\uddf5 +1670', value: '1670MP' },
+	{ code: 'GU', label: '\ud83c\uddec\ud83c\uddfa +1671', value: '1671GU' },
+	{ code: 'AS', label: '\ud83c\udde6\ud83c\uddf8 +1684', value: '1684AS' },
+	{ code: 'LC', label: '\ud83c\uddf1\ud83c\udde8 +1758', value: '1758LC' },
+	{ code: 'DM', label: '\ud83c\udde9\ud83c\uddf2 +1767', value: '1767DM' },
+	{ code: 'VC', label: '\ud83c\uddfb\ud83c\udde8 +1784', value: '1784VC' },
+	{ code: 'DO', label: '\ud83c\udde9\ud83c\uddf4 +1849', value: '1849DO' },
+	{ code: 'TT', label: '\ud83c\uddf9\ud83c\uddf9 +1868', value: '1868TT' },
+	{ code: 'KN', label: '\ud83c\uddf0\ud83c\uddf3 +1869', value: '1869KN' },
+	{ code: 'JM', label: '\ud83c\uddef\ud83c\uddf2 +1876', value: '1876JM' },
+	{ code: 'PR', label: '\ud83c\uddf5\ud83c\uddf7 +1939', value: '1939PR' },
+	{ code: 'EG', label: '\ud83c\uddea\ud83c\uddec +20', value: '20EG' },
+	{ code: 'MA', label: '\ud83c\uddf2\ud83c\udde6 +212', value: '212MA' },
+	{ code: 'DZ', label: '\ud83c\udde9\ud83c\uddff +213', value: '213DZ' },
+	{ code: 'TN', label: '\ud83c\uddf9\ud83c\uddf3 +216', value: '216TN' },
+	{ code: 'LY', label: '\ud83c\uddf1\ud83c\uddfe +218', value: '218LY' },
+	{ code: 'GM', label: '\ud83c\uddec\ud83c\uddf2 +220', value: '220GM' },
+	{ code: 'SN', label: '\ud83c\uddf8\ud83c\uddf3 +221', value: '221SN' },
+	{ code: 'MR', label: '\ud83c\uddf2\ud83c\uddf7 +222', value: '222MR' },
+	{ code: 'ML', label: '\ud83c\uddf2\ud83c\uddf1 +223', value: '223ML' },
+	{ code: 'GN', label: '\ud83c\uddec\ud83c\uddf3 +224', value: '224GN' },
+	{ code: 'CI', label: '\ud83c\udde8\ud83c\uddee +225', value: '225CI' },
+	{ code: 'BF', label: '\ud83c\udde7\ud83c\uddeb +226', value: '226BF' },
+	{ code: 'NE', label: '\ud83c\uddf3\ud83c\uddea +227', value: '227NE' },
+	{ code: 'TG', label: '\ud83c\uddf9\ud83c\uddec +228', value: '228TG' },
+	{ code: 'BJ', label: '\ud83c\udde7\ud83c\uddef +229', value: '229BJ' },
+	{ code: 'MU', label: '\ud83c\uddf2\ud83c\uddfa +230', value: '230MU' },
+	{ code: 'LR', label: '\ud83c\uddf1\ud83c\uddf7 +231', value: '231LR' },
+	{ code: 'SL', label: '\ud83c\uddf8\ud83c\uddf1 +232', value: '232SL' },
+	{ code: 'GH', label: '\ud83c\uddec\ud83c\udded +233', value: '233GH' },
+	{ code: 'NG', label: '\ud83c\uddf3\ud83c\uddec +234', value: '234NG' },
+	{ code: 'TD', label: '\ud83c\uddf9\ud83c\udde9 +235', value: '235TD' },
+	{ code: 'CF', label: '\ud83c\udde8\ud83c\uddeb +236', value: '236CF' },
+	{ code: 'CM', label: '\ud83c\udde8\ud83c\uddf2 +237', value: '237CM' },
+	{ code: 'CV', label: '\ud83c\udde8\ud83c\uddfb +238', value: '238CV' },
+	{ code: 'ST', label: '\ud83c\uddf8\ud83c\uddf9 +239', value: '239ST' },
+	{ code: 'GQ', label: '\ud83c\uddec\ud83c\uddf6 +240', value: '240GQ' },
+	{ code: 'GA', label: '\ud83c\uddec\ud83c\udde6 +241', value: '241GA' },
+	{ code: 'CG', label: '\ud83c\udde8\ud83c\uddec +242', value: '242CG' },
+	{ code: 'CD', label: '\ud83c\udde8\ud83c\udde9 +243', value: '243CD' },
+	{ code: 'AO', label: '\ud83c\udde6\ud83c\uddf4 +244', value: '244AO' },
+	{ code: 'GW', label: '\ud83c\uddec\ud83c\uddfc +245', value: '245GW' },
+	{ code: 'IO', label: '\ud83c\uddee\ud83c\uddf4 +246', value: '246IO' },
+	{ code: 'SC', label: '\ud83c\uddf8\ud83c\udde8 +248', value: '248SC' },
+	{ code: 'SD', label: '\ud83c\uddf8\ud83c\udde9 +249', value: '249SD' },
+	{ code: 'RW', label: '\ud83c\uddf7\ud83c\uddfc +250', value: '250RW' },
+	{ code: 'ET', label: '\ud83c\uddea\ud83c\uddf9 +251', value: '251ET' },
+	{ code: 'SO', label: '\ud83c\uddf8\ud83c\uddf4 +252', value: '252SO' },
+	{ code: 'DJ', label: '\ud83c\udde9\ud83c\uddef +253', value: '253DJ' },
+	{ code: 'KE', label: '\ud83c\uddf0\ud83c\uddea +254', value: '254KE' },
+	{ code: 'TZ', label: '\ud83c\uddf9\ud83c\uddff +255', value: '255TZ' },
+	{ code: 'UG', label: '\ud83c\uddfa\ud83c\uddec +256', value: '256UG' },
+	{ code: 'BI', label: '\ud83c\udde7\ud83c\uddee +257', value: '257BI' },
+	{ code: 'MZ', label: '\ud83c\uddf2\ud83c\uddff +258', value: '258MZ' },
+	{ code: 'ZM', label: '\ud83c\uddff\ud83c\uddf2 +260', value: '260ZM' },
+	{ code: 'MG', label: '\ud83c\uddf2\ud83c\uddec +261', value: '261MG' },
+	{ code: 'YT', label: '\ud83c\uddfe\ud83c\uddf9 +262', value: '262YT' },
+	{ code: 'RE', label: '\ud83c\uddf7\ud83c\uddea +262', value: '262RE' },
+	{ code: 'ZW', label: '\ud83c\uddff\ud83c\uddfc +263', value: '263ZW' },
+	{ code: 'NA', label: '\ud83c\uddf3\ud83c\udde6 +264', value: '264NA' },
+	{ code: 'MW', label: '\ud83c\uddf2\ud83c\uddfc +265', value: '265MW' },
+	{ code: 'LS', label: '\ud83c\uddf1\ud83c\uddf8 +266', value: '266LS' },
+	{ code: 'BW', label: '\ud83c\udde7\ud83c\uddfc +267', value: '267BW' },
+	{ code: 'SZ', label: '\ud83c\uddf8\ud83c\uddff +268', value: '268SZ' },
+	{ code: 'KM', label: '\ud83c\uddf0\ud83c\uddf2 +269', value: '269KM' },
+	{ code: 'ZA', label: '\ud83c\uddff\ud83c\udde6 +27', value: '27ZA' },
+	{ code: 'SH', label: '\ud83c\uddf8\ud83c\udded +290', value: '290SH' },
+	{ code: 'ER', label: '\ud83c\uddea\ud83c\uddf7 +291', value: '291ER' },
+	{ code: 'AW', label: '\ud83c\udde6\ud83c\uddfc +297', value: '297AW' },
+	{ code: 'FO', label: '\ud83c\uddeb\ud83c\uddf4 +298', value: '298FO' },
+	{ code: 'GL', label: '\ud83c\uddec\ud83c\uddf1 +299', value: '299GL' },
+	{ code: 'GR', label: '\ud83c\uddec\ud83c\uddf7 +30', value: '30GR' },
+	{ code: 'NL', label: '\ud83c\uddf3\ud83c\uddf1 +31', value: '31NL' },
+	{ code: 'BE', label: '\ud83c\udde7\ud83c\uddea +32', value: '32BE' },
+	{ code: 'FR', label: '\ud83c\uddeb\ud83c\uddf7 +33', value: '33FR' },
+	{ code: 'ES', label: '\ud83c\uddea\ud83c\uddf8 +34', value: '34ES' },
+	{ code: 'KY', label: '\ud83c\uddf0\ud83c\uddfe +345', value: '345KY' },
+	{ code: 'GI', label: '\ud83c\uddec\ud83c\uddee +350', value: '350GI' },
+	{ code: 'PT', label: '\ud83c\uddf5\ud83c\uddf9 +351', value: '351PT' },
+	{ code: 'LU', label: '\ud83c\uddf1\ud83c\uddfa +352', value: '352LU' },
+	{ code: 'IE', label: '\ud83c\uddee\ud83c\uddea +353', value: '353IE' },
+	{ code: 'IS', label: '\ud83c\uddee\ud83c\uddf8 +354', value: '354IS' },
+	{ code: 'AL', label: '\ud83c\udde6\ud83c\uddf1 +355', value: '355AL' },
+	{ code: 'MT', label: '\ud83c\uddf2\ud83c\uddf9 +356', value: '356MT' },
+	{ code: 'FI', label: '\ud83c\uddeb\ud83c\uddee +358', value: '358FI' },
+	{ code: 'BG', label: '\ud83c\udde7\ud83c\uddec +359', value: '359BG' },
+	{ code: 'HU', label: '\ud83c\udded\ud83c\uddfa +36', value: '36HU' },
+	{ code: 'LT', label: '\ud83c\uddf1\ud83c\uddf9 +370', value: '370LT' },
+	{ code: 'LV', label: '\ud83c\uddf1\ud83c\uddfb +371', value: '371LV' },
+	{ code: 'EE', label: '\ud83c\uddea\ud83c\uddea +372', value: '372EE' },
+	{ code: 'MD', label: '\ud83c\uddf2\ud83c\udde9 +373', value: '373MD' },
+	{ code: 'AM', label: '\ud83c\udde6\ud83c\uddf2 +374', value: '374AM' },
+	{ code: 'BY', label: '\ud83c\udde7\ud83c\uddfe +375', value: '375BY' },
+	{ code: 'AD', label: '\ud83c\udde6\ud83c\udde9 +376', value: '376AD' },
+	{ code: 'MC', label: '\ud83c\uddf2\ud83c\udde8 +377', value: '377MC' },
+	{ code: 'SM', label: '\ud83c\uddf8\ud83c\uddf2 +378', value: '378SM' },
+	{ code: 'VA', label: '\ud83c\uddfb\ud83c\udde6 +379', value: '379VA' },
+	{ code: 'UA', label: '\ud83c\uddfa\ud83c\udde6 +380', value: '380UA' },
+	{ code: 'RS', label: '\ud83c\uddf7\ud83c\uddf8 +381', value: '381RS' },
+	{ code: 'ME', label: '\ud83c\uddf2\ud83c\uddea +382', value: '382ME' },
+	{ code: 'XK', label: '\ud83c\uddfd\ud83c\uddf0 +383', value: '383XK' },
+	{ code: 'HR', label: '\ud83c\udded\ud83c\uddf7 +385', value: '385HR' },
+	{ code: 'SI', label: '\ud83c\uddf8\ud83c\uddee +386', value: '386SI' },
+	{ code: 'BA', label: '\ud83c\udde7\ud83c\udde6 +387', value: '387BA' },
+	{ code: 'MK', label: '\ud83c\uddf2\ud83c\uddf0 +389', value: '389MK' },
+	{ code: 'IT', label: '\ud83c\uddee\ud83c\uddf9 +39', value: '39IT' },
+	{ code: 'RO', label: '\ud83c\uddf7\ud83c\uddf4 +40', value: '40RO' },
+	{ code: 'CH', label: '\ud83c\udde8\ud83c\udded +41', value: '41CH' },
+	{ code: 'CZ', label: '\ud83c\udde8\ud83c\uddff +420', value: '420CZ' },
+	{ code: 'SK', label: '\ud83c\uddf8\ud83c\uddf0 +421', value: '421SK' },
+	{ code: 'LI', label: '\ud83c\uddf1\ud83c\uddee +423', value: '423LI' },
+	{ code: 'AT', label: '\ud83c\udde6\ud83c\uddf9 +43', value: '43AT' },
+	{ code: 'IM', label: '\ud83c\uddee\ud83c\uddf2 +44', value: '44IM' },
+	{ code: 'GG', label: '\ud83c\uddec\ud83c\uddec +44', value: '44GG' },
+	{ code: 'JE', label: '\ud83c\uddef\ud83c\uddea +44', value: '44JE' },
+	{ code: 'GB', label: '\ud83c\uddec\ud83c\udde7 +44', value: '44GB' },
+	{ code: 'DK', label: '\ud83c\udde9\ud83c\uddf0 +45', value: '45DK' },
+	{ code: 'SE', label: '\ud83c\uddf8\ud83c\uddea +46', value: '46SE' },
+	{ code: 'NO', label: '\ud83c\uddf3\ud83c\uddf4 +47', value: '47NO' },
+	{ code: 'SJ', label: '\ud83c\uddf8\ud83c\uddef +47', value: '47SJ' },
+	{ code: 'PL', label: '\ud83c\uddf5\ud83c\uddf1 +48', value: '48PL' },
+	{ code: 'DE', label: '\ud83c\udde9\ud83c\uddea +49', value: '49DE' },
+	{ code: 'FK', label: '\ud83c\uddeb\ud83c\uddf0 +500', value: '500FK' },
+	{ code: 'GS', label: '\ud83c\uddec\ud83c\uddf8 +500', value: '500GS' },
+	{ code: 'BZ', label: '\ud83c\udde7\ud83c\uddff +501', value: '501BZ' },
+	{ code: 'GT', label: '\ud83c\uddec\ud83c\uddf9 +502', value: '502GT' },
+	{ code: 'SV', label: '\ud83c\uddf8\ud83c\uddfb +503', value: '503SV' },
+	{ code: 'HN', label: '\ud83c\udded\ud83c\uddf3 +504', value: '504HN' },
+	{ code: 'NI', label: '\ud83c\uddf3\ud83c\uddee +505', value: '505NI' },
+	{ code: 'CR', label: '\ud83c\udde8\ud83c\uddf7 +506', value: '506CR' },
+	{ code: 'PA', label: '\ud83c\uddf5\ud83c\udde6 +507', value: '507PA' },
+	{ code: 'PM', label: '\ud83c\uddf5\ud83c\uddf2 +508', value: '508PM' },
+	{ code: 'HT', label: '\ud83c\udded\ud83c\uddf9 +509', value: '509HT' },
+	{ code: 'PE', label: '\ud83c\uddf5\ud83c\uddea +51', value: '51PE' },
+	{ code: 'MX', label: '\ud83c\uddf2\ud83c\uddfd +52', value: '52MX' },
+	{ code: 'CU', label: '\ud83c\udde8\ud83c\uddfa +53', value: '53CU' },
+	{ code: 'CY', label: '\ud83c\udde8\ud83c\uddfe +537', value: '537CY' },
+	{ code: 'AR', label: '\ud83c\udde6\ud83c\uddf7 +54', value: '54AR' },
+	{ code: 'BR', label: '\ud83c\udde7\ud83c\uddf7 +55', value: '55BR' },
+	{ code: 'CL', label: '\ud83c\udde8\ud83c\uddf1 +56', value: '56CL' },
+	{ code: 'CO', label: '\ud83c\udde8\ud83c\uddf4 +57', value: '57CO' },
+	{ code: 'VE', label: '\ud83c\uddfb\ud83c\uddea +58', value: '58VE' },
+	{ code: 'BL', label: '\ud83c\udde7\ud83c\uddf1 +590', value: '590BL' },
+	{ code: 'MF', label: '\ud83c\uddf2\ud83c\uddeb +590', value: '590MF' },
+	{ code: 'GP', label: '\ud83c\uddec\ud83c\uddf5 +590', value: '590GP' },
+	{ code: 'BO', label: '\ud83c\udde7\ud83c\uddf4 +591', value: '591BO' },
+	{ code: 'EC', label: '\ud83c\uddea\ud83c\udde8 +593', value: '593EC' },
+	{ code: 'GF', label: '\ud83c\uddec\ud83c\uddeb +594', value: '594GF' },
+	{ code: 'GY', label: '\ud83c\uddec\ud83c\uddfe +595', value: '595GY' },
+	{ code: 'PY', label: '\ud83c\uddf5\ud83c\uddfe +595', value: '595PY' },
+	{ code: 'MQ', label: '\ud83c\uddf2\ud83c\uddf6 +596', value: '596MQ' },
+	{ code: 'SR', label: '\ud83c\uddf8\ud83c\uddf7 +597', value: '597SR' },
+	{ code: 'UY', label: '\ud83c\uddfa\ud83c\uddfe +598', value: '598UY' },
+	{ code: 'MY', label: '\ud83c\uddf2\ud83c\uddfe +60', value: '60MY' },
+	{ code: 'CC', label: '\ud83c\udde8\ud83c\udde8 +61', value: '61CC' },
+	{ code: 'AU', label: '\ud83c\udde6\ud83c\uddfa +61', value: '61AU' },
+	{ code: 'CX', label: '\ud83c\udde8\ud83c\uddfd +61', value: '61CX' },
+	{ code: 'ID', label: '\ud83c\uddee\ud83c\udde9 +62', value: '62ID' },
+	{ code: 'PH', label: '\ud83c\uddf5\ud83c\udded +63', value: '63PH' },
+	{ code: 'NZ', label: '\ud83c\uddf3\ud83c\uddff +64', value: '64NZ' },
+	{ code: 'SG', label: '\ud83c\uddf8\ud83c\uddec +65', value: '65SG' },
+	{ code: 'TH', label: '\ud83c\uddf9\ud83c\udded +66', value: '66TH' },
+	{ code: 'TL', label: '\ud83c\uddf9\ud83c\uddf1 +670', value: '670TL' },
+	{ code: 'NF', label: '\ud83c\uddf3\ud83c\uddeb +672', value: '672NF' },
+	{ code: 'BN', label: '\ud83c\udde7\ud83c\uddf3 +673', value: '673BN' },
+	{ code: 'NR', label: '\ud83c\uddf3\ud83c\uddf7 +674', value: '674NR' },
+	{ code: 'PG', label: '\ud83c\uddf5\ud83c\uddec +675', value: '675PG' },
+	{ code: 'TO', label: '\ud83c\uddf9\ud83c\uddf4 +676', value: '676TO' },
+	{ code: 'SB', label: '\ud83c\uddf8\ud83c\udde7 +677', value: '677SB' },
+	{ code: 'VU', label: '\ud83c\uddfb\ud83c\uddfa +678', value: '678VU' },
+	{ code: 'FJ', label: '\ud83c\uddeb\ud83c\uddef +679', value: '679FJ' },
+	{ code: 'PW', label: '\ud83c\uddf5\ud83c\uddfc +680', value: '680PW' },
+	{ code: 'WF', label: '\ud83c\uddfc\ud83c\uddeb +681', value: '681WF' },
+	{ code: 'CK', label: '\ud83c\udde8\ud83c\uddf0 +682', value: '682CK' },
+	{ code: 'NU', label: '\ud83c\uddf3\ud83c\uddfa +683', value: '683NU' },
+	{ code: 'WS', label: '\ud83c\uddfc\ud83c\uddf8 +685', value: '685WS' },
+	{ code: 'KI', label: '\ud83c\uddf0\ud83c\uddee +686', value: '686KI' },
+	{ code: 'NC', label: '\ud83c\uddf3\ud83c\udde8 +687', value: '687NC' },
+	{ code: 'TV', label: '\ud83c\uddf9\ud83c\uddfb +688', value: '688TV' },
+	{ code: 'PF', label: '\ud83c\uddf5\ud83c\uddeb +689', value: '689PF' },
+	{ code: 'TK', label: '\ud83c\uddf9\ud83c\uddf0 +690', value: '690TK' },
+	{ code: 'FM', label: '\ud83c\uddeb\ud83c\uddf2 +691', value: '691FM' },
+	{ code: 'MH', label: '\ud83c\uddf2\ud83c\udded +692', value: '692MH' },
+	{ code: 'RU', label: '\ud83c\uddf7\ud83c\uddfa +7', value: '7RU' },
+	{ code: 'KZ', label: '\ud83c\uddf0\ud83c\uddff +77', value: '77KZ' },
+	{ code: 'JP', label: '\ud83c\uddef\ud83c\uddf5 +81', value: '81JP' },
+	{ code: 'KR', label: '\ud83c\uddf0\ud83c\uddf7 +82', value: '82KR' },
+	{ code: 'VN', label: '\ud83c\uddfb\ud83c\uddf3 +84', value: '84VN' },
+	{ code: 'KP', label: '\ud83c\uddf0\ud83c\uddf5 +850', value: '850KP' },
+	{ code: 'HK', label: '\ud83c\udded\ud83c\uddf0 +852', value: '852HK' },
+	{ code: 'MO', label: '\ud83c\uddf2\ud83c\uddf4 +853', value: '853MO' },
+	{ code: 'KH', label: '\ud83c\uddf0\ud83c\udded +855', value: '855KH' },
+	{ code: 'LA', label: '\ud83c\uddf1\ud83c\udde6 +856', value: '856LA' },
+	{ code: 'CN', label: '\ud83c\udde8\ud83c\uddf3 +86', value: '86CN' },
+	{ code: 'PN', label: '\ud83c\uddf5\ud83c\uddf3 +872', value: '872PN' },
+	{ code: 'BD', label: '\ud83c\udde7\ud83c\udde9 +880', value: '880BD' },
+	{ code: 'TW', label: '\ud83c\uddf9\ud83c\uddfc +886', value: '886TW' },
+	{ code: 'TR', label: '\ud83c\uddf9\ud83c\uddf7 +90', value: '90TR' },
+	{ code: 'IN', label: '\ud83c\uddee\ud83c\uddf3 +91', value: '91IN' },
+	{ code: 'PK', label: '\ud83c\uddf5\ud83c\uddf0 +92', value: '92PK' },
+	{ code: 'AF', label: '\ud83c\udde6\ud83c\uddeb +93', value: '93AF' },
+	{ code: 'LK', label: '\ud83c\uddf1\ud83c\uddf0 +94', value: '94LK' },
+	{ code: 'MM', label: '\ud83c\uddf2\ud83c\uddf2 +95', value: '95MM' },
+	{ code: 'MV', label: '\ud83c\uddf2\ud83c\uddfb +960', value: '960MV' },
+	{ code: 'LB', label: '\ud83c\uddf1\ud83c\udde7 +961', value: '961LB' },
+	{ code: 'JO', label: '\ud83c\uddef\ud83c\uddf4 +962', value: '962JO' },
+	{ code: 'SY', label: '\ud83c\uddf8\ud83c\uddfe +963', value: '963SY' },
+	{ code: 'IQ', label: '\ud83c\uddee\ud83c\uddf6 +964', value: '964IQ' },
+	{ code: 'KW', label: '\ud83c\uddf0\ud83c\uddfc +965', value: '965KW' },
+	{ code: 'SA', label: '\ud83c\uddf8\ud83c\udde6 +966', value: '966SA' },
+	{ code: 'YE', label: '\ud83c\uddfe\ud83c\uddea +967', value: '967YE' },
+	{ code: 'OM', label: '\ud83c\uddf4\ud83c\uddf2 +968', value: '968OM' },
+	{ code: 'PS', label: '\ud83c\uddf5\ud83c\uddf8 +970', value: '970PS' },
+	{ code: 'AE', label: '\ud83c\udde6\ud83c\uddea +971', value: '971AE' },
+	{ code: 'IL', label: '\ud83c\uddee\ud83c\uddf1 +972', value: '972IL' },
+	{ code: 'BH', label: '\ud83c\udde7\ud83c\udded +973', value: '973BH' },
+	{ code: 'QA', label: '\ud83c\uddf6\ud83c\udde6 +974', value: '974QA' },
+	{ code: 'BT', label: '\ud83c\udde7\ud83c\uddf9 +975', value: '975BT' },
+	{ code: 'MN', label: '\ud83c\uddf2\ud83c\uddf3 +976', value: '976MN' },
+	{ code: 'NP', label: '\ud83c\uddf3\ud83c\uddf5 +977', value: '977NP' },
+	{ code: 'IR', label: '\ud83c\uddee\ud83c\uddf7 +98', value: '98IR' },
+	{ code: 'TJ', label: '\ud83c\uddf9\ud83c\uddef +992', value: '992TJ' },
+	{ code: 'TM', label: '\ud83c\uddf9\ud83c\uddf2 +993', value: '993TM' },
+	{ code: 'AZ', label: '\ud83c\udde6\ud83c\uddff +994', value: '994AZ' },
+	{ code: 'GE', label: '\ud83c\uddec\ud83c\uddea +995', value: '995GE' },
+	{ code: 'KG', label: '\ud83c\uddf0\ud83c\uddec +996', value: '996KG' },
+	{ code: 'UZ', label: '\ud83c\uddfa\ud83c\uddff +998', value: '998UZ' },
+];
diff --git a/extensions/blocks/send-a-message/edit.js b/extensions/blocks/send-a-message/edit.js
new file mode 100644
index 0000000000000..2e39482b92523
--- /dev/null
+++ b/extensions/blocks/send-a-message/edit.js
@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+
+import { Component } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+import {
+	Button,
+	Placeholder,
+	TextControl,
+	TextareaControl,
+	SelectControl,
+	Toolbar,
+	Popover,
+	Icon,
+	PanelBody,
+	PanelRow,
+} from '@wordpress/components';
+import {
+	BlockControls,
+	InspectorControls,
+	RichText,
+	PanelColorSettings,
+	ContrastChecker,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+
+import { countryCodes } from './countrycodes.js';
+import { WhatsAppIcon } from './icon.js';
+import { title } from './index';
+import './view.scss';
+
+export default class SendAMessageEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.setDefaultCountryCode();
+
+		const isValidPhoneNumber = this.isValidPhoneNumber();
+		this.state = {
+			editing: ! isValidPhoneNumber,
+			isValidPhoneNumber: isValidPhoneNumber,
+		};
+
+		this.onSubmitURL = this.onSubmitURL.bind( this );
+	}
+
+	async setDefaultCountryCode() {
+		const { countryCode } = this.props.attributes;
+		const { setAttributes } = this.props;
+
+		if ( undefined === countryCode ) {
+			setAttributes( { countryCode: '1' } );
+
+			const geoFetch = await fetch( 'http://ip-api.com/json/?fields=countryCode' )
+				.then( response => {
+					if ( ! response.ok ) {
+						return false;
+					}
+
+					return response;
+				} )
+				.catch( () => {
+					return false;
+				} );
+
+			if ( geoFetch ) {
+				const geo = await geoFetch.json();
+
+				countryCodes.forEach( item => {
+					if ( item.code === geo.countryCode ) {
+						setAttributes( { countryCode: item.value } );
+					}
+				} );
+			}
+		}
+	}
+
+	onSubmitURL( e ) {
+		e.preventDefault();
+
+		if ( this.isValidPhoneNumber() ) {
+			this.setState( {
+				editing: false,
+				isValidPhoneNumber: true,
+			} );
+		} else {
+			this.setState( {
+				isValidPhoneNumber: false,
+			} );
+		}
+	}
+
+	isValidPhoneNumber() {
+		const { countryCode, phoneNumber } = this.props.attributes;
+		const phoneNumberRegEx = RegExp( /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, 'g' );
+
+		if ( undefined === phoneNumber || phoneNumber.length < 1 ) {
+			return false;
+		}
+
+		return phoneNumberRegEx.test( countryCode.replace( /\D/g, '' ) + phoneNumber );
+	}
+
+	render() {
+		const {
+			countryCode,
+			phoneNumber,
+			buttonText,
+			firstMessage,
+			colorClass,
+			backgroundColor,
+		} = this.props.attributes;
+
+		const { setAttributes, className } = this.props;
+
+		const onFocusPhoneNumber = () => {
+			this.setState( { isValidPhoneNumber: true } );
+		};
+
+		if ( this.state.editing ) {
+			return (
+				<Placeholder
+					icon={ WhatsAppIcon }
+					label={ title }
+					instructions={ __( 'Enter the phone number for your WhatsApp account:', 'jetpack' ) }
+					className={ className }
+				>
+					<form onSubmit={ this.onSubmitURL }>
+						<SelectControl
+							value={ countryCode }
+							onChange={ value => setAttributes( { countryCode: value } ) }
+							options={ countryCodes }
+						/>
+						<TextControl
+							placeholder={ __( 'Your phone number…', 'jetpack' ) }
+							onChange={ value => setAttributes( { phoneNumber: value } ) }
+							onFocus={ onFocusPhoneNumber }
+							value={ phoneNumber }
+						/>
+						{ ! this.state.isValidPhoneNumber && (
+							<Popover position="top center" className="whatsapp-phonenumber-invalid">
+								<Icon icon="info" />
+								{ __( 'Please enter a valid phone number', 'jetpack' ) }
+							</Popover>
+						) }
+						<Button isLarge type="submit">
+							{ _x( 'Insert', 'block insert button', 'jetpack' ) }
+						</Button>
+					</form>
+				</Placeholder>
+			);
+		}
+
+		const toolbarControls = [
+			{
+				icon: 'edit',
+				title: __( 'Edit WhatsApp phone number', 'jetpack' ),
+				onClick: () => this.setState( { editing: true } ),
+			},
+		];
+
+		const setBackgroundColor = color => {
+			setAttributes( { backgroundColor: color } );
+
+			if ( color === undefined || color === '#25D366' || color === '#465B64' ) {
+				return setAttributes( { colorClass: 'dark' } );
+			}
+
+			setAttributes( { colorClass: 'light' } );
+		};
+
+		return (
+			<div className={ className + ' is-color-' + colorClass }>
+				<BlockControls>
+					<Toolbar controls={ toolbarControls } />
+				</BlockControls>
+
+				<InspectorControls>
+					<PanelBody title="Message Settings" initialOpen={ true }>
+						<PanelRow>
+							<TextareaControl
+								label={ __( 'Default First Message', 'jetpack' ) }
+								help={ __(
+									'The default first message that will be sent by visitors when using this button.',
+									'jetpack'
+								) }
+								value={ firstMessage }
+								onChange={ text => setAttributes( { firstMessage: text } ) }
+							/>
+						</PanelRow>
+					</PanelBody>
+					<PanelColorSettings
+						title={ __( 'Color Settings', 'jetpack' ) }
+						initialOpen={ false }
+						colorSettings={ [
+							{
+								value: backgroundColor,
+								onChange: color => setBackgroundColor( color ),
+								label: __( 'Background Color', 'jetpack' ),
+								disableCustomColors: true,
+								colors: [
+									{
+										name: _x( 'WhatsApp Green', 'background color name', 'jetpack' ),
+										slug: 'whatsapp-green',
+										color: '#25D366',
+									},
+									{
+										name: _x( 'WhatsApp Dark', 'background color name', 'jetpack' ),
+										slug: 'whatsapp-dark',
+										color: '#465B64',
+									},
+									{
+										name: _x( 'WhatsApp Light', 'background color name', 'jetpack' ),
+										slug: 'whatsapp-light',
+										color: '#F4F4F4',
+									},
+									{
+										name: _x( 'White', 'background color name', 'jetpack' ),
+										slug: 'whatsapp-white',
+										color: '#FFFFFF',
+									},
+								],
+							},
+						] }
+					>
+						<ContrastChecker />
+					</PanelColorSettings>
+				</InspectorControls>
+
+				<RichText
+					placeholder={ buttonText.default }
+					keepPlaceholderOnFocus={ true }
+					value={ buttonText }
+					onChange={ value => setAttributes( { buttonText: value } ) }
+					withoutInteractiveFormatting
+					allowedFormats={ [] }
+					className="whatsapp-block__button"
+					tagName="a"
+					style={ {
+						backgroundColor: backgroundColor,
+					} }
+				/>
+			</div>
+		);
+	}
+}
diff --git a/extensions/blocks/send-a-message/editor.js b/extensions/blocks/send-a-message/editor.js
new file mode 100644
index 0000000000000..d05f403942058
--- /dev/null
+++ b/extensions/blocks/send-a-message/editor.js
@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import registerJetpackBlock from '../../shared/register-jetpack-block';
+import { name, settings } from '.';
+
+registerJetpackBlock( name, settings );
diff --git a/extensions/blocks/send-a-message/editor.scss b/extensions/blocks/send-a-message/editor.scss
new file mode 100644
index 0000000000000..6595852dd0bf9
--- /dev/null
+++ b/extensions/blocks/send-a-message/editor.scss
@@ -0,0 +1,44 @@
+/**
+ * Editor styles for Send A Message
+ */
+
+.wp-block-jetpack-send-a-message {
+	input.components-text-control__input {
+    	padding: 5px 8px;
+    	margin-left: 3px;
+	}
+
+	select.components-select-control__input {
+		width: 95px;
+		min-height: 30px;
+		padding-left: 10px;
+	}
+
+	button.components-button.is-large {
+		margin-left: 7px;
+	}
+
+	.components-placeholder__label svg {
+		margin-right: 6px;
+	}
+}
+
+.whatsapp-phonenumber-invalid {
+	.components-popover__content {
+		background: #B40000;
+		color: white;
+		padding: 6px 10px;
+		border-radius: 6px;
+		border: none;
+	}
+
+	&:not(.is-without-arrow):not(.is-mobile):after {
+		border-color: #B40000;
+	}
+
+	svg.dashicon {
+		vertical-align: top;
+		margin-right: 4px;
+		margin-top: -1px;
+	}
+}
diff --git a/extensions/blocks/send-a-message/icon.js b/extensions/blocks/send-a-message/icon.js
new file mode 100644
index 0000000000000..9eb3771376f0a
--- /dev/null
+++ b/extensions/blocks/send-a-message/icon.js
@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z" />
+	</SVG>
+);
diff --git a/extensions/blocks/send-a-message/index.js b/extensions/blocks/send-a-message/index.js
new file mode 100644
index 0000000000000..5afed0da96b65
--- /dev/null
+++ b/extensions/blocks/send-a-message/index.js
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import attributes from './attributes';
+import edit from './edit';
+import save from './save';
+import icon from './icon';
+
+/**
+ * Style dependencies
+ */
+import './editor.scss';
+
+export const name = 'send-a-message';
+export const title = __( 'Send A Message', 'jetpack' );
+export const whatsAppURL = 'https://api.whatsapp.com/send?phone=';
+export const defaultButtonText = __( 'Chat on WhatsApp', 'jetpack' );
+export const defaultFirstMessage = __(
+	'Hi, I got your WhatsApp information from your website.',
+	'jetpack'
+);
+
+export const settings = {
+	title,
+	description: (
+		<Fragment>
+			<p>
+				{ __(
+					'Let your visitors to send you a message on WhatsApp with the tap of a button.',
+					'jetpack'
+				) }
+			</p>
+		</Fragment>
+	),
+	icon,
+	category: 'jetpack',
+	keywords: [
+		_x( 'whatsapp', 'keyword', 'jetpack' ),
+		_x( 'messenger', 'keyword', 'jetpack' ),
+		_x( 'contact', 'keyword', 'jetpack' ),
+		_x( 'support', 'keyword', 'jetpack' ),
+	],
+	supports: {
+		align: [ 'left', 'center', 'right' ],
+		html: false,
+	},
+	attributes,
+	edit,
+	save: save,
+	example: {
+		attributes: {
+			countryCode: '1',
+			phoneNumber: '555-123-4567',
+		},
+	},
+};
diff --git a/extensions/blocks/send-a-message/save.js b/extensions/blocks/send-a-message/save.js
new file mode 100644
index 0000000000000..5fe53058cbf02
--- /dev/null
+++ b/extensions/blocks/send-a-message/save.js
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { whatsAppURL } from './index';
+
+export default function SendAMessageSave( props ) {
+	const {
+		countryCode,
+		phoneNumber,
+		firstMessage,
+		buttonText,
+		backgroundColor,
+		colorClass,
+	} = props.attributes;
+
+	const fullPhoneNumber = countryCode.replace( /\D+/g, '' ) + phoneNumber.replace( /\D+/g, '' );
+
+	const getWhatsAppUrl = () => {
+		let url = whatsAppURL + fullPhoneNumber;
+
+		if ( '' !== firstMessage ) {
+			url += '&text=' + encodeURIComponent( firstMessage );
+		}
+
+		return url;
+	};
+
+	return (
+		<div className={ props.className + ' is-color-' + colorClass }>
+			<a
+				className="whatsapp-block__button"
+				href={ getWhatsAppUrl() }
+				style={ { backgroundColor: backgroundColor } }
+			>
+				<RichText.Content value={ buttonText } />
+			</a>
+		</div>
+	);
+}
diff --git a/extensions/blocks/send-a-message/send-a-message.php b/extensions/blocks/send-a-message/send-a-message.php
new file mode 100644
index 0000000000000..c23016c291af9
--- /dev/null
+++ b/extensions/blocks/send-a-message/send-a-message.php
@@ -0,0 +1,43 @@
+<?php
+/**
+ * Send A Message Block.
+ *
+ * @since 8.x
+ *
+ * @package Jetpack
+ */
+
+namespace Jetpack\Send_A_Message_Block;
+
+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__ . '\load_assets' )
+	);
+}
+add_action( 'init', __NAMESPACE__ . '\register_block' );
+
+/**
+ * Send A Message block registration/dependency declaration.
+ *
+ * @param array  $attr    Array containing the Send A Message block attributes.
+ * @param string $content String containing the Send A Message block content.
+ *
+ * @return string
+ */
+function load_assets( $attr, $content ) {
+	/*
+	 * Enqueue necessary scripts and styles.
+	 */
+	\Jetpack_Gutenberg::load_assets_as_required( 'send-a-message' );
+
+	return $content;
+}
diff --git a/extensions/blocks/send-a-message/view.js b/extensions/blocks/send-a-message/view.js
new file mode 100644
index 0000000000000..741c50d6a0ff9
--- /dev/null
+++ b/extensions/blocks/send-a-message/view.js
@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './view.scss';
diff --git a/extensions/blocks/send-a-message/view.scss b/extensions/blocks/send-a-message/view.scss
new file mode 100644
index 0000000000000..5aaf2cc1942d9
--- /dev/null
+++ b/extensions/blocks/send-a-message/view.scss
@@ -0,0 +1,37 @@
+div.wp-block-jetpack-send-a-message {
+	a.whatsapp-block__button {
+		background: #25D366;
+		color: #fff;
+		display: inline-block;
+		padding: 8px 16px 8px 56px;
+		border-radius: 8px;
+		text-decoration: none;
+
+		font-family: "Helvetica Neue", Helvetica, Arials, sans-serif;
+		font-weight: 500;
+
+		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='white' d='M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z'></path></svg>");
+		background-position: 16px center;
+		background-repeat: no-repeat;
+		background-size: 32px 32px;
+	}
+
+	&.is-color-light {
+		a.whatsapp-block__button {
+			color: #465B64;
+			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='%23465B64' d='M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z'></path></svg>");
+		}
+	}
+
+	&.aligncenter {
+		text-align: center;
+	}
+
+	&.alignright {
+		text-align: right;
+	}
+
+	&:hover {
+		opacity: 0.9;
+	}
+}
diff --git a/extensions/index.json b/extensions/index.json
index 428c8e7b138d5..91c2777a82d48 100644
--- a/extensions/index.json
+++ b/extensions/index.json
@@ -32,7 +32,7 @@
 		"videopress",
 		"wordads"
 	],
-	"beta": [ "amazon" ],
+	"beta": [ "amazon", "send-a-message" ],
 	"experimental": [ "seo" ],
 	"no-post-editor": [
 		"business-hours",

From 46cefae6e08e1404b4de764526379f83a4d6714a Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Thu, 21 May 2020 10:43:01 -0700
Subject: [PATCH 02/32] 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.

---
 extensions/blocks/send-a-message/edit.js      | 252 +-----------------
 extensions/blocks/send-a-message/editor.js    |  11 +-
 extensions/blocks/send-a-message/editor.scss  |  41 ---
 extensions/blocks/send-a-message/index.js     |  43 +--
 .../whatsapp}/attributes.js                   |   0
 .../service-blocks/whatsapp/edit.js           | 250 +++++++++++++++++
 .../service-blocks/whatsapp/editor.scss       |  44 +++
 .../{ => service-blocks/whatsapp}/icon.js     |   0
 .../service-blocks/whatsapp/index.js          |  54 ++++
 .../{ => service-blocks/whatsapp}/save.js     |   0
 .../{ => service-blocks/whatsapp}/view.js     |   0
 .../{ => service-blocks/whatsapp}/view.scss   |   0
 .../{ => shared}/countrycodes.js              |   0
 .../blocks/send-a-message/variations.js       |  25 ++
 14 files changed, 403 insertions(+), 317 deletions(-)
 rename extensions/blocks/send-a-message/{ => service-blocks/whatsapp}/attributes.js (100%)
 create mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/edit.js
 create mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/editor.scss
 rename extensions/blocks/send-a-message/{ => service-blocks/whatsapp}/icon.js (100%)
 create mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/index.js
 rename extensions/blocks/send-a-message/{ => service-blocks/whatsapp}/save.js (100%)
 rename extensions/blocks/send-a-message/{ => service-blocks/whatsapp}/view.js (100%)
 rename extensions/blocks/send-a-message/{ => service-blocks/whatsapp}/view.scss (100%)
 rename extensions/blocks/send-a-message/{ => shared}/countrycodes.js (100%)
 create mode 100644 extensions/blocks/send-a-message/variations.js

diff --git a/extensions/blocks/send-a-message/edit.js b/extensions/blocks/send-a-message/edit.js
index 2e39482b92523..5c8777d8acf35 100644
--- a/extensions/blocks/send-a-message/edit.js
+++ b/extensions/blocks/send-a-message/edit.js
@@ -1,250 +1,16 @@
 /**
  * External dependencies
  */
+import { InnerBlocks } from '@wordpress/block-editor';
 
-import { Component } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
-import {
-	Button,
-	Placeholder,
-	TextControl,
-	TextareaControl,
-	SelectControl,
-	Toolbar,
-	Popover,
-	Icon,
-	PanelBody,
-	PanelRow,
-} from '@wordpress/components';
-import {
-	BlockControls,
-	InspectorControls,
-	RichText,
-	PanelColorSettings,
-	ContrastChecker,
-} from '@wordpress/block-editor';
+export default function SendAMessageEdit( props ) {
+	const { className } = props;
 
-/**
- * Internal dependencies
- */
-
-import { countryCodes } from './countrycodes.js';
-import { WhatsAppIcon } from './icon.js';
-import { title } from './index';
-import './view.scss';
-
-export default class SendAMessageEdit extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.setDefaultCountryCode();
-
-		const isValidPhoneNumber = this.isValidPhoneNumber();
-		this.state = {
-			editing: ! isValidPhoneNumber,
-			isValidPhoneNumber: isValidPhoneNumber,
-		};
-
-		this.onSubmitURL = this.onSubmitURL.bind( this );
-	}
-
-	async setDefaultCountryCode() {
-		const { countryCode } = this.props.attributes;
-		const { setAttributes } = this.props;
-
-		if ( undefined === countryCode ) {
-			setAttributes( { countryCode: '1' } );
-
-			const geoFetch = await fetch( 'http://ip-api.com/json/?fields=countryCode' )
-				.then( response => {
-					if ( ! response.ok ) {
-						return false;
-					}
-
-					return response;
-				} )
-				.catch( () => {
-					return false;
-				} );
-
-			if ( geoFetch ) {
-				const geo = await geoFetch.json();
-
-				countryCodes.forEach( item => {
-					if ( item.code === geo.countryCode ) {
-						setAttributes( { countryCode: item.value } );
-					}
-				} );
-			}
-		}
-	}
-
-	onSubmitURL( e ) {
-		e.preventDefault();
-
-		if ( this.isValidPhoneNumber() ) {
-			this.setState( {
-				editing: false,
-				isValidPhoneNumber: true,
-			} );
-		} else {
-			this.setState( {
-				isValidPhoneNumber: false,
-			} );
-		}
-	}
-
-	isValidPhoneNumber() {
-		const { countryCode, phoneNumber } = this.props.attributes;
-		const phoneNumberRegEx = RegExp( /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, 'g' );
-
-		if ( undefined === phoneNumber || phoneNumber.length < 1 ) {
-			return false;
-		}
-
-		return phoneNumberRegEx.test( countryCode.replace( /\D/g, '' ) + phoneNumber );
-	}
-
-	render() {
-		const {
-			countryCode,
-			phoneNumber,
-			buttonText,
-			firstMessage,
-			colorClass,
-			backgroundColor,
-		} = this.props.attributes;
-
-		const { setAttributes, className } = this.props;
-
-		const onFocusPhoneNumber = () => {
-			this.setState( { isValidPhoneNumber: true } );
-		};
-
-		if ( this.state.editing ) {
-			return (
-				<Placeholder
-					icon={ WhatsAppIcon }
-					label={ title }
-					instructions={ __( 'Enter the phone number for your WhatsApp account:', 'jetpack' ) }
-					className={ className }
-				>
-					<form onSubmit={ this.onSubmitURL }>
-						<SelectControl
-							value={ countryCode }
-							onChange={ value => setAttributes( { countryCode: value } ) }
-							options={ countryCodes }
-						/>
-						<TextControl
-							placeholder={ __( 'Your phone number…', 'jetpack' ) }
-							onChange={ value => setAttributes( { phoneNumber: value } ) }
-							onFocus={ onFocusPhoneNumber }
-							value={ phoneNumber }
-						/>
-						{ ! this.state.isValidPhoneNumber && (
-							<Popover position="top center" className="whatsapp-phonenumber-invalid">
-								<Icon icon="info" />
-								{ __( 'Please enter a valid phone number', 'jetpack' ) }
-							</Popover>
-						) }
-						<Button isLarge type="submit">
-							{ _x( 'Insert', 'block insert button', 'jetpack' ) }
-						</Button>
-					</form>
-				</Placeholder>
-			);
-		}
-
-		const toolbarControls = [
-			{
-				icon: 'edit',
-				title: __( 'Edit WhatsApp phone number', 'jetpack' ),
-				onClick: () => this.setState( { editing: true } ),
-			},
-		];
-
-		const setBackgroundColor = color => {
-			setAttributes( { backgroundColor: color } );
-
-			if ( color === undefined || color === '#25D366' || color === '#465B64' ) {
-				return setAttributes( { colorClass: 'dark' } );
-			}
-
-			setAttributes( { colorClass: 'light' } );
-		};
-
-		return (
-			<div className={ className + ' is-color-' + colorClass }>
-				<BlockControls>
-					<Toolbar controls={ toolbarControls } />
-				</BlockControls>
-
-				<InspectorControls>
-					<PanelBody title="Message Settings" initialOpen={ true }>
-						<PanelRow>
-							<TextareaControl
-								label={ __( 'Default First Message', 'jetpack' ) }
-								help={ __(
-									'The default first message that will be sent by visitors when using this button.',
-									'jetpack'
-								) }
-								value={ firstMessage }
-								onChange={ text => setAttributes( { firstMessage: text } ) }
-							/>
-						</PanelRow>
-					</PanelBody>
-					<PanelColorSettings
-						title={ __( 'Color Settings', 'jetpack' ) }
-						initialOpen={ false }
-						colorSettings={ [
-							{
-								value: backgroundColor,
-								onChange: color => setBackgroundColor( color ),
-								label: __( 'Background Color', 'jetpack' ),
-								disableCustomColors: true,
-								colors: [
-									{
-										name: _x( 'WhatsApp Green', 'background color name', 'jetpack' ),
-										slug: 'whatsapp-green',
-										color: '#25D366',
-									},
-									{
-										name: _x( 'WhatsApp Dark', 'background color name', 'jetpack' ),
-										slug: 'whatsapp-dark',
-										color: '#465B64',
-									},
-									{
-										name: _x( 'WhatsApp Light', 'background color name', 'jetpack' ),
-										slug: 'whatsapp-light',
-										color: '#F4F4F4',
-									},
-									{
-										name: _x( 'White', 'background color name', 'jetpack' ),
-										slug: 'whatsapp-white',
-										color: '#FFFFFF',
-									},
-								],
-							},
-						] }
-					>
-						<ContrastChecker />
-					</PanelColorSettings>
-				</InspectorControls>
+	const ALLOWED_BLOCKS = [ 'jetpack/whatsapp-button' ];
 
-				<RichText
-					placeholder={ buttonText.default }
-					keepPlaceholderOnFocus={ true }
-					value={ buttonText }
-					onChange={ value => setAttributes( { buttonText: value } ) }
-					withoutInteractiveFormatting
-					allowedFormats={ [] }
-					className="whatsapp-block__button"
-					tagName="a"
-					style={ {
-						backgroundColor: backgroundColor,
-					} }
-				/>
-			</div>
-		);
-	}
+	return (
+		<div className={ className }>
+			<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } templateInsertUpdatesSelection={ false } />
+		</div>
+	);
 }
diff --git a/extensions/blocks/send-a-message/editor.js b/extensions/blocks/send-a-message/editor.js
index d05f403942058..8543749f7ff5f 100644
--- a/extensions/blocks/send-a-message/editor.js
+++ b/extensions/blocks/send-a-message/editor.js
@@ -3,5 +3,14 @@
  */
 import registerJetpackBlock from '../../shared/register-jetpack-block';
 import { name, settings } from '.';
+import {
+	name as whatsAppBlockName,
+	settings as whatsAppBlockSettings,
+} from './service-blocks/whatsapp';
 
-registerJetpackBlock( name, settings );
+registerJetpackBlock( name, settings, [
+	{
+		name: whatsAppBlockName,
+		settings: whatsAppBlockSettings,
+	},
+] );
diff --git a/extensions/blocks/send-a-message/editor.scss b/extensions/blocks/send-a-message/editor.scss
index 6595852dd0bf9..97360cbf36bec 100644
--- a/extensions/blocks/send-a-message/editor.scss
+++ b/extensions/blocks/send-a-message/editor.scss
@@ -1,44 +1,3 @@
-/**
- * Editor styles for Send A Message
- */
-
 .wp-block-jetpack-send-a-message {
-	input.components-text-control__input {
-    	padding: 5px 8px;
-    	margin-left: 3px;
-	}
-
-	select.components-select-control__input {
-		width: 95px;
-		min-height: 30px;
-		padding-left: 10px;
-	}
-
-	button.components-button.is-large {
-		margin-left: 7px;
-	}
-
-	.components-placeholder__label svg {
-		margin-right: 6px;
-	}
-}
-
-.whatsapp-phonenumber-invalid {
-	.components-popover__content {
-		background: #B40000;
-		color: white;
-		padding: 6px 10px;
-		border-radius: 6px;
-		border: none;
-	}
-
-	&:not(.is-without-arrow):not(.is-mobile):after {
-		border-color: #B40000;
-	}
 
-	svg.dashicon {
-		vertical-align: top;
-		margin-right: 4px;
-		margin-top: -1px;
-	}
 }
diff --git a/extensions/blocks/send-a-message/index.js b/extensions/blocks/send-a-message/index.js
index 5afed0da96b65..91720c4cf8939 100644
--- a/extensions/blocks/send-a-message/index.js
+++ b/extensions/blocks/send-a-message/index.js
@@ -2,15 +2,15 @@
  * External dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
+import { InnerBlocks } from '@wordpress/block-editor';
+import { Path } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import attributes from './attributes';
 import edit from './edit';
-import save from './save';
-import icon from './icon';
+import variations from './variations';
+import renderMaterialIcon from '../../shared/render-material-icon';
 
 /**
  * Style dependencies
@@ -19,26 +19,13 @@ import './editor.scss';
 
 export const name = 'send-a-message';
 export const title = __( 'Send A Message', 'jetpack' );
-export const whatsAppURL = 'https://api.whatsapp.com/send?phone=';
-export const defaultButtonText = __( 'Chat on WhatsApp', 'jetpack' );
-export const defaultFirstMessage = __(
-	'Hi, I got your WhatsApp information from your website.',
-	'jetpack'
-);
 
 export const settings = {
 	title,
-	description: (
-		<Fragment>
-			<p>
-				{ __(
-					'Let your visitors to send you a message on WhatsApp with the tap of a button.',
-					'jetpack'
-				) }
-			</p>
-		</Fragment>
+	description: __( 'Let your visitors to send you messages with the tap of a button.', 'jetpack' ),
+	icon: renderMaterialIcon(
+		<Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" />
 	),
-	icon,
 	category: 'jetpack',
 	keywords: [
 		_x( 'whatsapp', 'keyword', 'jetpack' ),
@@ -46,17 +33,9 @@ export const settings = {
 		_x( 'contact', 'keyword', 'jetpack' ),
 		_x( 'support', 'keyword', 'jetpack' ),
 	],
-	supports: {
-		align: [ 'left', 'center', 'right' ],
-		html: false,
-	},
-	attributes,
+	attributes: {},
 	edit,
-	save: save,
-	example: {
-		attributes: {
-			countryCode: '1',
-			phoneNumber: '555-123-4567',
-		},
-	},
+	save: InnerBlocks.Content,
+	variations,
+	example: {},
 };
diff --git a/extensions/blocks/send-a-message/attributes.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/attributes.js
similarity index 100%
rename from extensions/blocks/send-a-message/attributes.js
rename to extensions/blocks/send-a-message/service-blocks/whatsapp/attributes.js
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/edit.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/edit.js
new file mode 100644
index 0000000000000..b0630af7d098e
--- /dev/null
+++ b/extensions/blocks/send-a-message/service-blocks/whatsapp/edit.js
@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+
+import { Component } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+import {
+	Button,
+	Placeholder,
+	TextControl,
+	TextareaControl,
+	SelectControl,
+	Toolbar,
+	Popover,
+	Icon,
+	PanelBody,
+	PanelRow,
+} from '@wordpress/components';
+import {
+	BlockControls,
+	InspectorControls,
+	RichText,
+	PanelColorSettings,
+	ContrastChecker,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+
+import { countryCodes } from '../../shared/countrycodes.js';
+import { WhatsAppIcon } from './icon.js';
+import { title } from './index';
+import './view.scss';
+
+export default class SendAMessageEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.setDefaultCountryCode();
+
+		const isValidPhoneNumber = this.isValidPhoneNumber();
+		this.state = {
+			editing: ! isValidPhoneNumber,
+			isValidPhoneNumber: isValidPhoneNumber,
+		};
+
+		this.onSubmitURL = this.onSubmitURL.bind( this );
+	}
+
+	async setDefaultCountryCode() {
+		const { countryCode } = this.props.attributes;
+		const { setAttributes } = this.props;
+
+		if ( undefined === countryCode ) {
+			setAttributes( { countryCode: '1' } );
+
+			const geoFetch = await fetch( 'http://ip-api.com/json/?fields=countryCode' )
+				.then( response => {
+					if ( ! response.ok ) {
+						return false;
+					}
+
+					return response;
+				} )
+				.catch( () => {
+					return false;
+				} );
+
+			if ( geoFetch ) {
+				const geo = await geoFetch.json();
+
+				countryCodes.forEach( item => {
+					if ( item.code === geo.countryCode ) {
+						setAttributes( { countryCode: item.value } );
+					}
+				} );
+			}
+		}
+	}
+
+	onSubmitURL( e ) {
+		e.preventDefault();
+
+		if ( this.isValidPhoneNumber() ) {
+			this.setState( {
+				editing: false,
+				isValidPhoneNumber: true,
+			} );
+		} else {
+			this.setState( {
+				isValidPhoneNumber: false,
+			} );
+		}
+	}
+
+	isValidPhoneNumber() {
+		const { countryCode, phoneNumber } = this.props.attributes;
+		const phoneNumberRegEx = RegExp( /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, 'g' );
+
+		if ( undefined === phoneNumber || phoneNumber.length < 1 ) {
+			return false;
+		}
+
+		return phoneNumberRegEx.test( countryCode.replace( /\D/g, '' ) + phoneNumber );
+	}
+
+	render() {
+		const {
+			countryCode,
+			phoneNumber,
+			buttonText,
+			firstMessage,
+			colorClass,
+			backgroundColor,
+		} = this.props.attributes;
+
+		const { setAttributes, className } = this.props;
+
+		const onFocusPhoneNumber = () => {
+			this.setState( { isValidPhoneNumber: true } );
+		};
+
+		if ( this.state.editing ) {
+			return (
+				<Placeholder
+					icon={ WhatsAppIcon }
+					label={ title }
+					instructions={ __( 'Enter the phone number for your WhatsApp account:', 'jetpack' ) }
+					className={ className }
+				>
+					<form onSubmit={ this.onSubmitURL }>
+						<SelectControl
+							value={ countryCode }
+							onChange={ value => setAttributes( { countryCode: value } ) }
+							options={ countryCodes }
+						/>
+						<TextControl
+							placeholder={ __( 'Your phone number…', 'jetpack' ) }
+							onChange={ value => setAttributes( { phoneNumber: value } ) }
+							onFocus={ onFocusPhoneNumber }
+							value={ phoneNumber }
+						/>
+						{ ! this.state.isValidPhoneNumber && (
+							<Popover position="top center" className="whatsapp-phonenumber-invalid">
+								<Icon icon="info" />
+								{ __( 'Please enter a valid phone number', 'jetpack' ) }
+							</Popover>
+						) }
+						<Button isLarge type="submit">
+							{ _x( 'Insert', 'block insert button', 'jetpack' ) }
+						</Button>
+					</form>
+				</Placeholder>
+			);
+		}
+
+		const toolbarControls = [
+			{
+				icon: 'edit',
+				title: __( 'Edit WhatsApp phone number', 'jetpack' ),
+				onClick: () => this.setState( { editing: true } ),
+			},
+		];
+
+		const setBackgroundColor = color => {
+			setAttributes( { backgroundColor: color } );
+
+			if ( color === undefined || color === '#25D366' || color === '#465B64' ) {
+				return setAttributes( { colorClass: 'dark' } );
+			}
+
+			setAttributes( { colorClass: 'light' } );
+		};
+
+		return (
+			<div className={ className + ' is-color-' + colorClass }>
+				<BlockControls>
+					<Toolbar controls={ toolbarControls } />
+				</BlockControls>
+
+				<InspectorControls>
+					<PanelBody title="Message Settings" initialOpen={ true }>
+						<PanelRow>
+							<TextareaControl
+								label={ __( 'Default First Message', 'jetpack' ) }
+								help={ __(
+									'The default first message that will be sent by visitors when using this button.',
+									'jetpack'
+								) }
+								value={ firstMessage }
+								onChange={ text => setAttributes( { firstMessage: text } ) }
+							/>
+						</PanelRow>
+					</PanelBody>
+					<PanelColorSettings
+						title={ __( 'Color Settings', 'jetpack' ) }
+						initialOpen={ false }
+						colorSettings={ [
+							{
+								value: backgroundColor,
+								onChange: color => setBackgroundColor( color ),
+								label: __( 'Background Color', 'jetpack' ),
+								disableCustomColors: true,
+								colors: [
+									{
+										name: _x( 'WhatsApp Green', 'background color name', 'jetpack' ),
+										slug: 'whatsapp-green',
+										color: '#25D366',
+									},
+									{
+										name: _x( 'WhatsApp Dark', 'background color name', 'jetpack' ),
+										slug: 'whatsapp-dark',
+										color: '#465B64',
+									},
+									{
+										name: _x( 'WhatsApp Light', 'background color name', 'jetpack' ),
+										slug: 'whatsapp-light',
+										color: '#F4F4F4',
+									},
+									{
+										name: _x( 'White', 'background color name', 'jetpack' ),
+										slug: 'whatsapp-white',
+										color: '#FFFFFF',
+									},
+								],
+							},
+						] }
+					>
+						<ContrastChecker />
+					</PanelColorSettings>
+				</InspectorControls>
+
+				<RichText
+					placeholder={ buttonText.default }
+					keepPlaceholderOnFocus={ true }
+					value={ buttonText }
+					onChange={ value => setAttributes( { buttonText: value } ) }
+					withoutInteractiveFormatting
+					allowedFormats={ [] }
+					className="whatsapp-block__button"
+					tagName="a"
+					style={ {
+						backgroundColor: backgroundColor,
+					} }
+				/>
+			</div>
+		);
+	}
+}
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/editor.scss b/extensions/blocks/send-a-message/service-blocks/whatsapp/editor.scss
new file mode 100644
index 0000000000000..6595852dd0bf9
--- /dev/null
+++ b/extensions/blocks/send-a-message/service-blocks/whatsapp/editor.scss
@@ -0,0 +1,44 @@
+/**
+ * Editor styles for Send A Message
+ */
+
+.wp-block-jetpack-send-a-message {
+	input.components-text-control__input {
+    	padding: 5px 8px;
+    	margin-left: 3px;
+	}
+
+	select.components-select-control__input {
+		width: 95px;
+		min-height: 30px;
+		padding-left: 10px;
+	}
+
+	button.components-button.is-large {
+		margin-left: 7px;
+	}
+
+	.components-placeholder__label svg {
+		margin-right: 6px;
+	}
+}
+
+.whatsapp-phonenumber-invalid {
+	.components-popover__content {
+		background: #B40000;
+		color: white;
+		padding: 6px 10px;
+		border-radius: 6px;
+		border: none;
+	}
+
+	&:not(.is-without-arrow):not(.is-mobile):after {
+		border-color: #B40000;
+	}
+
+	svg.dashicon {
+		vertical-align: top;
+		margin-right: 4px;
+		margin-top: -1px;
+	}
+}
diff --git a/extensions/blocks/send-a-message/icon.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/icon.js
similarity index 100%
rename from extensions/blocks/send-a-message/icon.js
rename to extensions/blocks/send-a-message/service-blocks/whatsapp/icon.js
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/index.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/index.js
new file mode 100644
index 0000000000000..7c7993352f43a
--- /dev/null
+++ b/extensions/blocks/send-a-message/service-blocks/whatsapp/index.js
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import attributes from './attributes';
+import edit from './edit';
+import save from './save';
+import icon from './icon';
+import { supportsCollections } from '../../../../shared/block-category';
+import './editor.scss';
+
+export const name = 'whatsapp-button';
+export const title = __( 'WhatsApp Button', 'jetpack' );
+export const whatsAppURL = 'https://api.whatsapp.com/send?phone=';
+export const defaultButtonText = __( 'Chat on WhatsApp', 'jetpack' );
+export const defaultFirstMessage = __(
+	'Hi, I got your WhatsApp information from your website.',
+	'jetpack'
+);
+
+export const settings = {
+	title,
+	description: __(
+		'Let your visitors to send you a message on WhatsApp with the tap of a button.',
+		'jetpack'
+	),
+	icon,
+	category: supportsCollections() ? 'grow' : 'jetpack',
+	parent: [ 'jetpack/send-a-message' ],
+	keywords: [
+		_x( 'whatsapp', 'keyword', 'jetpack' ),
+		_x( 'messenger', 'keyword', 'jetpack' ),
+		_x( 'contact', 'keyword', 'jetpack' ),
+		_x( 'support', 'keyword', 'jetpack' ),
+	],
+	supports: {
+		align: [ 'left', 'center', 'right' ],
+		html: false,
+		reusable: false,
+	},
+	attributes,
+	edit,
+	save: save,
+	example: {
+		attributes: {
+			countryCode: '1',
+			phoneNumber: '555-123-4567',
+		},
+	},
+};
diff --git a/extensions/blocks/send-a-message/save.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/save.js
similarity index 100%
rename from extensions/blocks/send-a-message/save.js
rename to extensions/blocks/send-a-message/service-blocks/whatsapp/save.js
diff --git a/extensions/blocks/send-a-message/view.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/view.js
similarity index 100%
rename from extensions/blocks/send-a-message/view.js
rename to extensions/blocks/send-a-message/service-blocks/whatsapp/view.js
diff --git a/extensions/blocks/send-a-message/view.scss b/extensions/blocks/send-a-message/service-blocks/whatsapp/view.scss
similarity index 100%
rename from extensions/blocks/send-a-message/view.scss
rename to extensions/blocks/send-a-message/service-blocks/whatsapp/view.scss
diff --git a/extensions/blocks/send-a-message/countrycodes.js b/extensions/blocks/send-a-message/shared/countrycodes.js
similarity index 100%
rename from extensions/blocks/send-a-message/countrycodes.js
rename to extensions/blocks/send-a-message/shared/countrycodes.js
diff --git a/extensions/blocks/send-a-message/variations.js b/extensions/blocks/send-a-message/variations.js
new file mode 100644
index 0000000000000..81ac994943d2a
--- /dev/null
+++ b/extensions/blocks/send-a-message/variations.js
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import whatsAppIcon from './service-blocks/whatsapp/icon';
+
+const variations = [
+	{
+		isDefault: true,
+		name: 'whatsapp-button',
+		title: __( 'WhatsApp Button', 'jetpack' ),
+		description: __(
+			'Let your visitors to send you messages on WhatsApp with the tap of a button.',
+			'jetpack'
+		),
+		icon: whatsAppIcon,
+		innerBlocks: [ [ 'jetpack/whatsapp-button' ] ],
+	},
+];
+
+export default variations;

From 4164f71ad8122704a91aeef122c16f0e29b0472d Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Thu, 21 May 2020 11:17:42 -0700
Subject: [PATCH 03/32] Make sure that innerblocks are registered and can load
 front end styles

---
 extensions/blocks/send-a-message/editor.js    |  10 +-
 .../blocks/send-a-message/send-a-message.php  |  26 +-
 .../service-blocks/whatsapp/attributes.js     |  31 ---
 .../service-blocks/whatsapp/edit.js           | 250 ------------------
 .../service-blocks/whatsapp/editor.scss       |  44 ---
 .../service-blocks/whatsapp/icon.js           |  10 -
 .../service-blocks/whatsapp/index.js          |  54 ----
 .../service-blocks/whatsapp/save.js           |  44 ---
 .../service-blocks/whatsapp/view.js           |   4 -
 .../service-blocks/whatsapp/view.scss         |  37 ---
 .../blocks/send-a-message/variations.js       |   2 +-
 extensions/index.json                         |   2 +-
 12 files changed, 20 insertions(+), 494 deletions(-)
 delete mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/attributes.js
 delete mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/edit.js
 delete mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/editor.scss
 delete mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/icon.js
 delete mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/index.js
 delete mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/save.js
 delete mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/view.js
 delete mode 100644 extensions/blocks/send-a-message/service-blocks/whatsapp/view.scss

diff --git a/extensions/blocks/send-a-message/editor.js b/extensions/blocks/send-a-message/editor.js
index 8543749f7ff5f..85233e379c424 100644
--- a/extensions/blocks/send-a-message/editor.js
+++ b/extensions/blocks/send-a-message/editor.js
@@ -4,13 +4,13 @@
 import registerJetpackBlock from '../../shared/register-jetpack-block';
 import { name, settings } from '.';
 import {
-	name as whatsAppBlockName,
-	settings as whatsAppBlockSettings,
-} from './service-blocks/whatsapp';
+	name as whatsAppButtonBlockName,
+	settings as whatsAppButtonBlockSettings,
+} from './whatsapp-button';
 
 registerJetpackBlock( name, settings, [
 	{
-		name: whatsAppBlockName,
-		settings: whatsAppBlockSettings,
+		name: whatsAppButtonBlockName,
+		settings: whatsAppButtonBlockSettings,
 	},
 ] );
diff --git a/extensions/blocks/send-a-message/send-a-message.php b/extensions/blocks/send-a-message/send-a-message.php
index c23016c291af9..bae3389523e1a 100644
--- a/extensions/blocks/send-a-message/send-a-message.php
+++ b/extensions/blocks/send-a-message/send-a-message.php
@@ -1,13 +1,16 @@
 <?php
 /**
- * Send A Message Block.
- *
- * @since 8.x
+ * Send a Message Block.
  *
  * @package Jetpack
  */
 
-namespace Jetpack\Send_A_Message_Block;
+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;
@@ -20,24 +23,21 @@
 function register_block() {
 	jetpack_register_block(
 		BLOCK_NAME,
-		array( 'render_callback' => __NAMESPACE__ . '\load_assets' )
+		array( 'render_callback' => __NAMESPACE__ . '\render_block' )
 	);
 }
 add_action( 'init', __NAMESPACE__ . '\register_block' );
 
 /**
- * Send A Message block registration/dependency declaration.
+ * Render callback.
  *
- * @param array  $attr    Array containing the Send A Message block attributes.
- * @param string $content String containing the Send A Message block content.
+ * @param array  $attributes Array containing the block attributes.
+ * @param string $content    String containing the block content.
  *
  * @return string
  */
-function load_assets( $attr, $content ) {
-	/*
-	 * Enqueue necessary scripts and styles.
-	 */
-	\Jetpack_Gutenberg::load_assets_as_required( 'send-a-message' );
+function render_block( $attributes, $content ) {
+	Jetpack_Gutenberg::load_styles_as_required( FEATURE_NAME );
 
 	return $content;
 }
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/attributes.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/attributes.js
deleted file mode 100644
index 7c2a4657ff7eb..0000000000000
--- a/extensions/blocks/send-a-message/service-blocks/whatsapp/attributes.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * 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',
-	},
-};
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/edit.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/edit.js
deleted file mode 100644
index b0630af7d098e..0000000000000
--- a/extensions/blocks/send-a-message/service-blocks/whatsapp/edit.js
+++ /dev/null
@@ -1,250 +0,0 @@
-/**
- * External dependencies
- */
-
-import { Component } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
-import {
-	Button,
-	Placeholder,
-	TextControl,
-	TextareaControl,
-	SelectControl,
-	Toolbar,
-	Popover,
-	Icon,
-	PanelBody,
-	PanelRow,
-} from '@wordpress/components';
-import {
-	BlockControls,
-	InspectorControls,
-	RichText,
-	PanelColorSettings,
-	ContrastChecker,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-
-import { countryCodes } from '../../shared/countrycodes.js';
-import { WhatsAppIcon } from './icon.js';
-import { title } from './index';
-import './view.scss';
-
-export default class SendAMessageEdit extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.setDefaultCountryCode();
-
-		const isValidPhoneNumber = this.isValidPhoneNumber();
-		this.state = {
-			editing: ! isValidPhoneNumber,
-			isValidPhoneNumber: isValidPhoneNumber,
-		};
-
-		this.onSubmitURL = this.onSubmitURL.bind( this );
-	}
-
-	async setDefaultCountryCode() {
-		const { countryCode } = this.props.attributes;
-		const { setAttributes } = this.props;
-
-		if ( undefined === countryCode ) {
-			setAttributes( { countryCode: '1' } );
-
-			const geoFetch = await fetch( 'http://ip-api.com/json/?fields=countryCode' )
-				.then( response => {
-					if ( ! response.ok ) {
-						return false;
-					}
-
-					return response;
-				} )
-				.catch( () => {
-					return false;
-				} );
-
-			if ( geoFetch ) {
-				const geo = await geoFetch.json();
-
-				countryCodes.forEach( item => {
-					if ( item.code === geo.countryCode ) {
-						setAttributes( { countryCode: item.value } );
-					}
-				} );
-			}
-		}
-	}
-
-	onSubmitURL( e ) {
-		e.preventDefault();
-
-		if ( this.isValidPhoneNumber() ) {
-			this.setState( {
-				editing: false,
-				isValidPhoneNumber: true,
-			} );
-		} else {
-			this.setState( {
-				isValidPhoneNumber: false,
-			} );
-		}
-	}
-
-	isValidPhoneNumber() {
-		const { countryCode, phoneNumber } = this.props.attributes;
-		const phoneNumberRegEx = RegExp( /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, 'g' );
-
-		if ( undefined === phoneNumber || phoneNumber.length < 1 ) {
-			return false;
-		}
-
-		return phoneNumberRegEx.test( countryCode.replace( /\D/g, '' ) + phoneNumber );
-	}
-
-	render() {
-		const {
-			countryCode,
-			phoneNumber,
-			buttonText,
-			firstMessage,
-			colorClass,
-			backgroundColor,
-		} = this.props.attributes;
-
-		const { setAttributes, className } = this.props;
-
-		const onFocusPhoneNumber = () => {
-			this.setState( { isValidPhoneNumber: true } );
-		};
-
-		if ( this.state.editing ) {
-			return (
-				<Placeholder
-					icon={ WhatsAppIcon }
-					label={ title }
-					instructions={ __( 'Enter the phone number for your WhatsApp account:', 'jetpack' ) }
-					className={ className }
-				>
-					<form onSubmit={ this.onSubmitURL }>
-						<SelectControl
-							value={ countryCode }
-							onChange={ value => setAttributes( { countryCode: value } ) }
-							options={ countryCodes }
-						/>
-						<TextControl
-							placeholder={ __( 'Your phone number…', 'jetpack' ) }
-							onChange={ value => setAttributes( { phoneNumber: value } ) }
-							onFocus={ onFocusPhoneNumber }
-							value={ phoneNumber }
-						/>
-						{ ! this.state.isValidPhoneNumber && (
-							<Popover position="top center" className="whatsapp-phonenumber-invalid">
-								<Icon icon="info" />
-								{ __( 'Please enter a valid phone number', 'jetpack' ) }
-							</Popover>
-						) }
-						<Button isLarge type="submit">
-							{ _x( 'Insert', 'block insert button', 'jetpack' ) }
-						</Button>
-					</form>
-				</Placeholder>
-			);
-		}
-
-		const toolbarControls = [
-			{
-				icon: 'edit',
-				title: __( 'Edit WhatsApp phone number', 'jetpack' ),
-				onClick: () => this.setState( { editing: true } ),
-			},
-		];
-
-		const setBackgroundColor = color => {
-			setAttributes( { backgroundColor: color } );
-
-			if ( color === undefined || color === '#25D366' || color === '#465B64' ) {
-				return setAttributes( { colorClass: 'dark' } );
-			}
-
-			setAttributes( { colorClass: 'light' } );
-		};
-
-		return (
-			<div className={ className + ' is-color-' + colorClass }>
-				<BlockControls>
-					<Toolbar controls={ toolbarControls } />
-				</BlockControls>
-
-				<InspectorControls>
-					<PanelBody title="Message Settings" initialOpen={ true }>
-						<PanelRow>
-							<TextareaControl
-								label={ __( 'Default First Message', 'jetpack' ) }
-								help={ __(
-									'The default first message that will be sent by visitors when using this button.',
-									'jetpack'
-								) }
-								value={ firstMessage }
-								onChange={ text => setAttributes( { firstMessage: text } ) }
-							/>
-						</PanelRow>
-					</PanelBody>
-					<PanelColorSettings
-						title={ __( 'Color Settings', 'jetpack' ) }
-						initialOpen={ false }
-						colorSettings={ [
-							{
-								value: backgroundColor,
-								onChange: color => setBackgroundColor( color ),
-								label: __( 'Background Color', 'jetpack' ),
-								disableCustomColors: true,
-								colors: [
-									{
-										name: _x( 'WhatsApp Green', 'background color name', 'jetpack' ),
-										slug: 'whatsapp-green',
-										color: '#25D366',
-									},
-									{
-										name: _x( 'WhatsApp Dark', 'background color name', 'jetpack' ),
-										slug: 'whatsapp-dark',
-										color: '#465B64',
-									},
-									{
-										name: _x( 'WhatsApp Light', 'background color name', 'jetpack' ),
-										slug: 'whatsapp-light',
-										color: '#F4F4F4',
-									},
-									{
-										name: _x( 'White', 'background color name', 'jetpack' ),
-										slug: 'whatsapp-white',
-										color: '#FFFFFF',
-									},
-								],
-							},
-						] }
-					>
-						<ContrastChecker />
-					</PanelColorSettings>
-				</InspectorControls>
-
-				<RichText
-					placeholder={ buttonText.default }
-					keepPlaceholderOnFocus={ true }
-					value={ buttonText }
-					onChange={ value => setAttributes( { buttonText: value } ) }
-					withoutInteractiveFormatting
-					allowedFormats={ [] }
-					className="whatsapp-block__button"
-					tagName="a"
-					style={ {
-						backgroundColor: backgroundColor,
-					} }
-				/>
-			</div>
-		);
-	}
-}
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/editor.scss b/extensions/blocks/send-a-message/service-blocks/whatsapp/editor.scss
deleted file mode 100644
index 6595852dd0bf9..0000000000000
--- a/extensions/blocks/send-a-message/service-blocks/whatsapp/editor.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Editor styles for Send A Message
- */
-
-.wp-block-jetpack-send-a-message {
-	input.components-text-control__input {
-    	padding: 5px 8px;
-    	margin-left: 3px;
-	}
-
-	select.components-select-control__input {
-		width: 95px;
-		min-height: 30px;
-		padding-left: 10px;
-	}
-
-	button.components-button.is-large {
-		margin-left: 7px;
-	}
-
-	.components-placeholder__label svg {
-		margin-right: 6px;
-	}
-}
-
-.whatsapp-phonenumber-invalid {
-	.components-popover__content {
-		background: #B40000;
-		color: white;
-		padding: 6px 10px;
-		border-radius: 6px;
-		border: none;
-	}
-
-	&:not(.is-without-arrow):not(.is-mobile):after {
-		border-color: #B40000;
-	}
-
-	svg.dashicon {
-		vertical-align: top;
-		margin-right: 4px;
-		margin-top: -1px;
-	}
-}
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/icon.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/icon.js
deleted file mode 100644
index 9eb3771376f0a..0000000000000
--- a/extensions/blocks/send-a-message/service-blocks/whatsapp/icon.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-
-export default (
-	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z" />
-	</SVG>
-);
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/index.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/index.js
deleted file mode 100644
index 7c7993352f43a..0000000000000
--- a/extensions/blocks/send-a-message/service-blocks/whatsapp/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { __, _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import attributes from './attributes';
-import edit from './edit';
-import save from './save';
-import icon from './icon';
-import { supportsCollections } from '../../../../shared/block-category';
-import './editor.scss';
-
-export const name = 'whatsapp-button';
-export const title = __( 'WhatsApp Button', 'jetpack' );
-export const whatsAppURL = 'https://api.whatsapp.com/send?phone=';
-export const defaultButtonText = __( 'Chat on WhatsApp', 'jetpack' );
-export const defaultFirstMessage = __(
-	'Hi, I got your WhatsApp information from your website.',
-	'jetpack'
-);
-
-export const settings = {
-	title,
-	description: __(
-		'Let your visitors to send you a message on WhatsApp with the tap of a button.',
-		'jetpack'
-	),
-	icon,
-	category: supportsCollections() ? 'grow' : 'jetpack',
-	parent: [ 'jetpack/send-a-message' ],
-	keywords: [
-		_x( 'whatsapp', 'keyword', 'jetpack' ),
-		_x( 'messenger', 'keyword', 'jetpack' ),
-		_x( 'contact', 'keyword', 'jetpack' ),
-		_x( 'support', 'keyword', 'jetpack' ),
-	],
-	supports: {
-		align: [ 'left', 'center', 'right' ],
-		html: false,
-		reusable: false,
-	},
-	attributes,
-	edit,
-	save: save,
-	example: {
-		attributes: {
-			countryCode: '1',
-			phoneNumber: '555-123-4567',
-		},
-	},
-};
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/save.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/save.js
deleted file mode 100644
index 5fe53058cbf02..0000000000000
--- a/extensions/blocks/send-a-message/service-blocks/whatsapp/save.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { RichText } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { whatsAppURL } from './index';
-
-export default function SendAMessageSave( props ) {
-	const {
-		countryCode,
-		phoneNumber,
-		firstMessage,
-		buttonText,
-		backgroundColor,
-		colorClass,
-	} = props.attributes;
-
-	const fullPhoneNumber = countryCode.replace( /\D+/g, '' ) + phoneNumber.replace( /\D+/g, '' );
-
-	const getWhatsAppUrl = () => {
-		let url = whatsAppURL + fullPhoneNumber;
-
-		if ( '' !== firstMessage ) {
-			url += '&text=' + encodeURIComponent( firstMessage );
-		}
-
-		return url;
-	};
-
-	return (
-		<div className={ props.className + ' is-color-' + colorClass }>
-			<a
-				className="whatsapp-block__button"
-				href={ getWhatsAppUrl() }
-				style={ { backgroundColor: backgroundColor } }
-			>
-				<RichText.Content value={ buttonText } />
-			</a>
-		</div>
-	);
-}
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/view.js b/extensions/blocks/send-a-message/service-blocks/whatsapp/view.js
deleted file mode 100644
index 741c50d6a0ff9..0000000000000
--- a/extensions/blocks/send-a-message/service-blocks/whatsapp/view.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * Internal dependencies
- */
-import './view.scss';
diff --git a/extensions/blocks/send-a-message/service-blocks/whatsapp/view.scss b/extensions/blocks/send-a-message/service-blocks/whatsapp/view.scss
deleted file mode 100644
index 5aaf2cc1942d9..0000000000000
--- a/extensions/blocks/send-a-message/service-blocks/whatsapp/view.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-div.wp-block-jetpack-send-a-message {
-	a.whatsapp-block__button {
-		background: #25D366;
-		color: #fff;
-		display: inline-block;
-		padding: 8px 16px 8px 56px;
-		border-radius: 8px;
-		text-decoration: none;
-
-		font-family: "Helvetica Neue", Helvetica, Arials, sans-serif;
-		font-weight: 500;
-
-		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='white' d='M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z'></path></svg>");
-		background-position: 16px center;
-		background-repeat: no-repeat;
-		background-size: 32px 32px;
-	}
-
-	&.is-color-light {
-		a.whatsapp-block__button {
-			color: #465B64;
-			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='%23465B64' d='M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z'></path></svg>");
-		}
-	}
-
-	&.aligncenter {
-		text-align: center;
-	}
-
-	&.alignright {
-		text-align: right;
-	}
-
-	&:hover {
-		opacity: 0.9;
-	}
-}
diff --git a/extensions/blocks/send-a-message/variations.js b/extensions/blocks/send-a-message/variations.js
index 81ac994943d2a..4db3c861f1b4d 100644
--- a/extensions/blocks/send-a-message/variations.js
+++ b/extensions/blocks/send-a-message/variations.js
@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import whatsAppIcon from './service-blocks/whatsapp/icon';
+import whatsAppIcon from './whatsapp-button/icon';
 
 const variations = [
 	{
diff --git a/extensions/index.json b/extensions/index.json
index 91c2777a82d48..8c46dd039ecdc 100644
--- a/extensions/index.json
+++ b/extensions/index.json
@@ -32,7 +32,7 @@
 		"videopress",
 		"wordads"
 	],
-	"beta": [ "amazon", "send-a-message" ],
+	"beta": [ "amazon", "send-a-message", "send-a-message/whatsapp-button" ],
 	"experimental": [ "seo" ],
 	"no-post-editor": [
 		"business-hours",

From 1548ec7de4d02bf2824ff4bbdd3700a4bcf27930 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Thu, 21 May 2020 14:42:30 -0700
Subject: [PATCH 04/32] [not verified] Add WhatsApp button innerblock.

---
 extensions/blocks/send-a-message/view.js      |   4 +
 extensions/blocks/send-a-message/view.scss    |   0
 .../whatsapp-button/attributes.js             |  31 +++
 .../send-a-message/whatsapp-button/edit.js    | 251 ++++++++++++++++++
 .../whatsapp-button/editor.scss               |  44 +++
 .../send-a-message/whatsapp-button/icon.js    |  10 +
 .../send-a-message/whatsapp-button/index.js   |  54 ++++
 .../send-a-message/whatsapp-button/save.js    |  47 ++++
 .../send-a-message/whatsapp-button/view.js    |   4 +
 .../send-a-message/whatsapp-button/view.scss  |  37 +++
 .../whatsapp-button/whatsapp-button.php       |  42 +++
 11 files changed, 524 insertions(+)
 create mode 100644 extensions/blocks/send-a-message/view.js
 create mode 100644 extensions/blocks/send-a-message/view.scss
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/attributes.js
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/edit.js
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/editor.scss
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/icon.js
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/index.js
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/save.js
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/view.js
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/view.scss
 create mode 100644 extensions/blocks/send-a-message/whatsapp-button/whatsapp-button.php

diff --git a/extensions/blocks/send-a-message/view.js b/extensions/blocks/send-a-message/view.js
new file mode 100644
index 0000000000000..741c50d6a0ff9
--- /dev/null
+++ b/extensions/blocks/send-a-message/view.js
@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './view.scss';
diff --git a/extensions/blocks/send-a-message/view.scss b/extensions/blocks/send-a-message/view.scss
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/extensions/blocks/send-a-message/whatsapp-button/attributes.js b/extensions/blocks/send-a-message/whatsapp-button/attributes.js
new file mode 100644
index 0000000000000..7c2a4657ff7eb
--- /dev/null
+++ b/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',
+	},
+};
diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
new file mode 100644
index 0000000000000..2ca276a434b46
--- /dev/null
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -0,0 +1,251 @@
+/**
+ * External dependencies
+ */
+
+import { __, _x } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import {
+	Button,
+	Placeholder,
+	BaseControl,
+	TextControl,
+	TextareaControl,
+	SelectControl,
+	Toolbar,
+	Popover,
+	Icon,
+	PanelBody,
+	PanelRow,
+} from '@wordpress/components';
+import {
+	BlockControls,
+	InspectorControls,
+	RichText,
+	PanelColorSettings,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+
+import { countryCodes } from '../shared/countrycodes.js';
+import './view.scss';
+
+export default function WhatsAppButtonEdit( { attributes, setAttributes, className } ) {
+	const {
+		countryCode,
+		phoneNumber,
+		buttonText,
+		firstMessage,
+		colorClass,
+		backgroundColor,
+	} = attributes;
+
+	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( false );
+
+	const getCountryCode = async () => {
+		if ( undefined !== countryCode ) {
+			return;
+		}
+
+		setAttributes( { countryCode: '1' } );
+
+		const geoFetch = await fetch( 'http://ip-api.com/json/?fields=countryCode' )
+			.then( response => {
+				if ( ! response.ok ) {
+					return false;
+				}
+
+				return response;
+			} )
+			.catch( () => {
+				return false;
+			} );
+
+		if ( geoFetch ) {
+			const geo = await geoFetch.json();
+
+			countryCodes.forEach( item => {
+				if ( item.code === geo.countryCode ) {
+					setAttributes( { countryCode: item.value } );
+				}
+			} );
+		}
+	};
+
+	useEffect( () => {
+		getCountryCode();
+	} );
+
+	const validatePhoneNumber = newPhoneNumber => {
+		const phoneNumberRegEx = RegExp( /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, 'g' );
+
+		if ( undefined === newPhoneNumber || newPhoneNumber.length < 1 ) {
+			return false;
+		}
+
+		return phoneNumberRegEx.test( countryCode.replace( /\D/g, '' ) + newPhoneNumber );
+	};
+
+	const onBlurPhoneNumber = e => {
+		setIsValidPhoneNumber( validatePhoneNumber( '' ) );
+	};
+
+	const toolbarControls = [
+		{
+			icon: 'edit',
+			title: __( 'Edit WhatsApp phone number', 'jetpack' ),
+			onClick: () => this.setState( { editing: true } ),
+		},
+	];
+
+	const setBackgroundColor = color => {
+		setAttributes( { backgroundColor: color } );
+
+		if ( color === undefined || color === '#25D366' || color === '#465B64' ) {
+			return setAttributes( { colorClass: 'dark' } );
+		}
+
+		setAttributes( { colorClass: 'light' } );
+	};
+
+	return (
+		<div className={ className + ' is-color-' + colorClass }>
+			<BlockControls>
+				<Toolbar controls={ toolbarControls } />
+			</BlockControls>
+
+			<InspectorControls>
+				<PanelBody title="WhatsApp Button Settings" initialOpen={ true }>
+					<BaseControl
+						label={ __( 'Phone Number', 'jetpack' ) }
+						help={ __(
+							'Enter the phone number you use for WhatsApp and would like to be contacted on.',
+							'jetpack'
+						) }
+					>
+						<SelectControl
+							value={ countryCode }
+							onChange={ value => setAttributes( { countryCode: value } ) }
+							options={ countryCodes }
+						/>
+						<TextControl
+							placeholder={ __( 'Your phone number…', 'jetpack' ) }
+							onBlur={ newPhoneNumber => onBlurPhoneNumber( newPhoneNumber ) }
+							value={ phoneNumber }
+						/>
+					</BaseControl>
+
+					<TextareaControl
+						label={ __( 'Default First Message', 'jetpack' ) }
+						help={ __(
+							'The default first message that will be sent by visitors when using this button.',
+							'jetpack'
+						) }
+						value={ firstMessage }
+						onChange={ text => setAttributes( { firstMessage: text } ) }
+					/>
+				</PanelBody>
+
+				<PanelColorSettings
+					title={ __( 'Color Settings', 'jetpack' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: backgroundColor,
+							onChange: color => setBackgroundColor( color ),
+							label: __( 'Background Color', 'jetpack' ),
+							disableCustomColors: true,
+							colors: [
+								{
+									name: _x( 'WhatsApp Green', 'background color name', 'jetpack' ),
+									slug: 'whatsapp-green',
+									color: '#25D366',
+								},
+								{
+									name: _x( 'WhatsApp Dark', 'background color name', 'jetpack' ),
+									slug: 'whatsapp-dark',
+									color: '#465B64',
+								},
+								{
+									name: _x( 'WhatsApp Light', 'background color name', 'jetpack' ),
+									slug: 'whatsapp-light',
+									color: '#F4F4F4',
+								},
+								{
+									name: _x( 'White', 'background color name', 'jetpack' ),
+									slug: 'whatsapp-white',
+									color: '#FFFFFF',
+								},
+							],
+						},
+					] }
+				></PanelColorSettings>
+			</InspectorControls>
+
+			<RichText
+				placeholder={ buttonText.default }
+				keepPlaceholderOnFocus={ true }
+				value={ buttonText }
+				onChange={ value => setAttributes( { buttonText: value } ) }
+				withoutInteractiveFormatting
+				allowedFormats={ [] }
+				className="whatsapp-block__button"
+				tagName="a"
+				style={ {
+					backgroundColor: backgroundColor,
+				} }
+			/>
+		</div>
+	);
+}
+
+// export default class SendAMessageEdit extends Component {
+// 	render() {
+// 		const {
+// 			countryCode,
+// 			phoneNumber,
+// 			buttonText,
+// 			firstMessage,
+// 			colorClass,
+// 			backgroundColor,
+// 		} = this.props.attributes;
+
+// 		const { setAttributes, className } = this.props;
+
+// 		if ( this.state.editing ) {
+// 			return (
+// 				<Placeholder
+// 					icon={ WhatsAppIcon }
+// 					label={ title }
+// 					instructions={ __( 'Enter the phone number for your WhatsApp account:', 'jetpack' ) }
+// 					className={ className }
+// 				>
+// 					<form onSubmit={ this.onSubmitURL }>
+// 						<SelectControl
+// 							value={ countryCode }
+// 							onChange={ value => setAttributes( { countryCode: value } ) }
+// 							options={ countryCodes }
+// 						/>
+// 						<TextControl
+// 							placeholder={ __( 'Your phone number…', 'jetpack' ) }
+// 							onChange={ value => setAttributes( { phoneNumber: value } ) }
+// 							onFocus={ onFocusPhoneNumber }
+// 							value={ phoneNumber }
+// 						/>
+// 						{ ! this.state.isValidPhoneNumber && (
+// 							<Popover position="top center" className="whatsapp-phonenumber-invalid">
+// 								<Icon icon="info" />
+// 								{ __( 'Please enter a valid phone number', 'jetpack' ) }
+// 							</Popover>
+// 						) }
+// 						<Button isLarge type="submit">
+// 							{ _x( 'Insert', 'block insert button', 'jetpack' ) }
+// 						</Button>
+// 					</form>
+// 				</Placeholder>
+// 			);
+// 		}
+
+// 	}
+// }
diff --git a/extensions/blocks/send-a-message/whatsapp-button/editor.scss b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
new file mode 100644
index 0000000000000..6595852dd0bf9
--- /dev/null
+++ b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
@@ -0,0 +1,44 @@
+/**
+ * Editor styles for Send A Message
+ */
+
+.wp-block-jetpack-send-a-message {
+	input.components-text-control__input {
+    	padding: 5px 8px;
+    	margin-left: 3px;
+	}
+
+	select.components-select-control__input {
+		width: 95px;
+		min-height: 30px;
+		padding-left: 10px;
+	}
+
+	button.components-button.is-large {
+		margin-left: 7px;
+	}
+
+	.components-placeholder__label svg {
+		margin-right: 6px;
+	}
+}
+
+.whatsapp-phonenumber-invalid {
+	.components-popover__content {
+		background: #B40000;
+		color: white;
+		padding: 6px 10px;
+		border-radius: 6px;
+		border: none;
+	}
+
+	&:not(.is-without-arrow):not(.is-mobile):after {
+		border-color: #B40000;
+	}
+
+	svg.dashicon {
+		vertical-align: top;
+		margin-right: 4px;
+		margin-top: -1px;
+	}
+}
diff --git a/extensions/blocks/send-a-message/whatsapp-button/icon.js b/extensions/blocks/send-a-message/whatsapp-button/icon.js
new file mode 100644
index 0000000000000..9eb3771376f0a
--- /dev/null
+++ b/extensions/blocks/send-a-message/whatsapp-button/icon.js
@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z" />
+	</SVG>
+);
diff --git a/extensions/blocks/send-a-message/whatsapp-button/index.js b/extensions/blocks/send-a-message/whatsapp-button/index.js
new file mode 100644
index 0000000000000..2205e3c0682d1
--- /dev/null
+++ b/extensions/blocks/send-a-message/whatsapp-button/index.js
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import attributes from './attributes';
+import edit from './edit';
+import save from './save';
+import icon from './icon';
+import { supportsCollections } from '../../../shared/block-category';
+import './editor.scss';
+
+export const name = 'whatsapp-button';
+export const title = __( 'WhatsApp Button', 'jetpack' );
+export const whatsAppURL = 'https://api.whatsapp.com/send?phone=';
+export const defaultButtonText = __( 'Chat on WhatsApp', 'jetpack' );
+export const defaultFirstMessage = __(
+	'Hi, I got your WhatsApp information from your website.',
+	'jetpack'
+);
+
+export const settings = {
+	title,
+	description: __(
+		'Let your visitors to send you a message on WhatsApp with the tap of a button.',
+		'jetpack'
+	),
+	icon,
+	category: supportsCollections() ? 'grow' : 'jetpack',
+	parent: [ 'jetpack/send-a-message' ],
+	keywords: [
+		_x( 'whatsapp', 'keyword', 'jetpack' ),
+		_x( 'messenger', 'keyword', 'jetpack' ),
+		_x( 'contact', 'keyword', 'jetpack' ),
+		_x( 'support', 'keyword', 'jetpack' ),
+	],
+	supports: {
+		align: [ 'left', 'center', 'right' ],
+		html: false,
+		reusable: false,
+	},
+	attributes,
+	edit,
+	save: save,
+	example: {
+		attributes: {
+			countryCode: '1',
+			phoneNumber: '555-123-4567',
+		},
+	},
+};
diff --git a/extensions/blocks/send-a-message/whatsapp-button/save.js b/extensions/blocks/send-a-message/whatsapp-button/save.js
new file mode 100644
index 0000000000000..132912677bbac
--- /dev/null
+++ b/extensions/blocks/send-a-message/whatsapp-button/save.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { whatsAppURL } from './index';
+
+export default function SendAMessageSave( { attributes, className } ) {
+	const {
+		countryCode,
+		phoneNumber,
+		firstMessage,
+		buttonText,
+		backgroundColor,
+		colorClass,
+	} = attributes;
+
+	const fullPhoneNumber =
+		countryCode && phoneNumber
+			? countryCode.replace( /\D+/g, '' ) + phoneNumber.replace( /\D+/g, '' )
+			: '';
+
+	const getWhatsAppUrl = () => {
+		let url = whatsAppURL + fullPhoneNumber;
+
+		if ( '' !== firstMessage ) {
+			url += '&text=' + encodeURIComponent( firstMessage );
+		}
+
+		return url;
+	};
+
+	return (
+		<div className={ className + ' is-color-' + colorClass }>
+			<a
+				className="whatsapp-block__button"
+				href={ getWhatsAppUrl() }
+				style={ { backgroundColor: backgroundColor } }
+			>
+				<RichText.Content value={ buttonText } />
+			</a>
+		</div>
+	);
+}
diff --git a/extensions/blocks/send-a-message/whatsapp-button/view.js b/extensions/blocks/send-a-message/whatsapp-button/view.js
new file mode 100644
index 0000000000000..741c50d6a0ff9
--- /dev/null
+++ b/extensions/blocks/send-a-message/whatsapp-button/view.js
@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+import './view.scss';
diff --git a/extensions/blocks/send-a-message/whatsapp-button/view.scss b/extensions/blocks/send-a-message/whatsapp-button/view.scss
new file mode 100644
index 0000000000000..c1d2cb68de336
--- /dev/null
+++ b/extensions/blocks/send-a-message/whatsapp-button/view.scss
@@ -0,0 +1,37 @@
+div.wp-block-jetpack-whatsapp-button {
+	a.whatsapp-block__button {
+		background: #25D366;
+		color: #fff;
+		display: inline-block;
+		padding: 8px 16px 8px 56px;
+		border-radius: 8px;
+		text-decoration: none;
+
+		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+		font-weight: 500;
+
+		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='white' d='M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z'></path></svg>");
+		background-position: 16px center;
+		background-repeat: no-repeat;
+		background-size: 32px 32px;
+	}
+
+	&.is-color-light {
+		a.whatsapp-block__button {
+			color: #465B64;
+			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='%23465B64' d='M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z'></path></svg>");
+		}
+	}
+
+	&.aligncenter {
+		text-align: center;
+	}
+
+	&.alignright {
+		text-align: right;
+	}
+
+	&:hover {
+		opacity: 0.9;
+	}
+}
diff --git a/extensions/blocks/send-a-message/whatsapp-button/whatsapp-button.php b/extensions/blocks/send-a-message/whatsapp-button/whatsapp-button.php
new file mode 100644
index 0000000000000..c594cee8c8649
--- /dev/null
+++ b/extensions/blocks/send-a-message/whatsapp-button/whatsapp-button.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * WhatsApp Button Block.
+ *
+ * @package Jetpack
+ */
+
+namespace Automattic\Jetpack\Extensions\WhatsApp_Button;
+
+use Jetpack;
+use Jetpack_Gutenberg;
+
+const PARENT_NAME  = 'send-a-message';
+const FEATURE_NAME = 'whatsapp-button';
+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' )
+	);
+}
+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( PARENT_NAME . '/' . FEATURE_NAME );
+
+	return $content;
+}

From 7b98d9beb64f15935f7c34c81323719457275232 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Thu, 21 May 2020 14:53:35 -0700
Subject: [PATCH 05/32] [not verified] Remove commented out old class component
 from WhatsApp block edit.

---
 .../send-a-message/whatsapp-button/edit.js    | 50 -------------------
 1 file changed, 50 deletions(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 2ca276a434b46..944ab1404946c 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -199,53 +199,3 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		</div>
 	);
 }
-
-// export default class SendAMessageEdit extends Component {
-// 	render() {
-// 		const {
-// 			countryCode,
-// 			phoneNumber,
-// 			buttonText,
-// 			firstMessage,
-// 			colorClass,
-// 			backgroundColor,
-// 		} = this.props.attributes;
-
-// 		const { setAttributes, className } = this.props;
-
-// 		if ( this.state.editing ) {
-// 			return (
-// 				<Placeholder
-// 					icon={ WhatsAppIcon }
-// 					label={ title }
-// 					instructions={ __( 'Enter the phone number for your WhatsApp account:', 'jetpack' ) }
-// 					className={ className }
-// 				>
-// 					<form onSubmit={ this.onSubmitURL }>
-// 						<SelectControl
-// 							value={ countryCode }
-// 							onChange={ value => setAttributes( { countryCode: value } ) }
-// 							options={ countryCodes }
-// 						/>
-// 						<TextControl
-// 							placeholder={ __( 'Your phone number…', 'jetpack' ) }
-// 							onChange={ value => setAttributes( { phoneNumber: value } ) }
-// 							onFocus={ onFocusPhoneNumber }
-// 							value={ phoneNumber }
-// 						/>
-// 						{ ! this.state.isValidPhoneNumber && (
-// 							<Popover position="top center" className="whatsapp-phonenumber-invalid">
-// 								<Icon icon="info" />
-// 								{ __( 'Please enter a valid phone number', 'jetpack' ) }
-// 							</Popover>
-// 						) }
-// 						<Button isLarge type="submit">
-// 							{ _x( 'Insert', 'block insert button', 'jetpack' ) }
-// 						</Button>
-// 					</form>
-// 				</Placeholder>
-// 			);
-// 		}
-
-// 	}
-// }

From 7b18026dc122d146b2816b1fe01059646ab01082 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Fri, 22 May 2020 11:33:47 -0700
Subject: [PATCH 06/32] Move phone number and message settings to the block
 toolbar as well as the sidebar.

---
 extensions/blocks/send-a-message/index.js     |   3 +-
 .../send-a-message/whatsapp-button/edit.js    | 116 +++++++++++-------
 .../whatsapp-button/editor.scss               |  15 ++-
 3 files changed, 82 insertions(+), 52 deletions(-)

diff --git a/extensions/blocks/send-a-message/index.js b/extensions/blocks/send-a-message/index.js
index 91720c4cf8939..b0715283c95a9 100644
--- a/extensions/blocks/send-a-message/index.js
+++ b/extensions/blocks/send-a-message/index.js
@@ -11,6 +11,7 @@ import { Path } from '@wordpress/components';
 import edit from './edit';
 import variations from './variations';
 import renderMaterialIcon from '../../shared/render-material-icon';
+import { supportsCollections } from '../../shared/block-category';
 
 /**
  * Style dependencies
@@ -26,7 +27,7 @@ export const settings = {
 	icon: renderMaterialIcon(
 		<Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" />
 	),
-	category: 'jetpack',
+	category: supportsCollections() ? 'grow' : 'jetpack',
 	keywords: [
 		_x( 'whatsapp', 'keyword', 'jetpack' ),
 		_x( 'messenger', 'keyword', 'jetpack' ),
diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 944ab1404946c..b0b10bec1212f 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -6,16 +6,14 @@ import { __, _x } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
 import {
 	Button,
-	Placeholder,
 	BaseControl,
 	TextControl,
 	TextareaControl,
 	SelectControl,
-	Toolbar,
-	Popover,
 	Icon,
 	PanelBody,
-	PanelRow,
+	ToolbarGroup,
+	Dropdown,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -23,6 +21,7 @@ import {
 	RichText,
 	PanelColorSettings,
 } from '@wordpress/block-editor';
+import { DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -91,14 +90,6 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		setIsValidPhoneNumber( validatePhoneNumber( '' ) );
 	};
 
-	const toolbarControls = [
-		{
-			icon: 'edit',
-			title: __( 'Edit WhatsApp phone number', 'jetpack' ),
-			onClick: () => this.setState( { editing: true } ),
-		},
-	];
-
 	const setBackgroundColor = color => {
 		setAttributes( { backgroundColor: color } );
 
@@ -109,42 +100,81 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		setAttributes( { colorClass: 'light' } );
 	};
 
+	const renderSettingsToggle = ( isOpen, onToggle ) => {
+		const openOnArrowDown = event => {
+			if ( ! isOpen && event.keyCode === DOWN ) {
+				event.preventDefault();
+				event.stopPropagation();
+				onToggle();
+			}
+		};
+
+		return (
+			<Button
+				className="components-toolbar__control jetpack-contact-form__toggle"
+				label={ __( 'Edit Form Settings' ) }
+				onClick={ onToggle }
+				onKeyDown={ openOnArrowDown }
+				icon={ <Icon icon="edit" /> }
+			/>
+		);
+	};
+
+	const renderSettings = () => {
+		return (
+			<>
+				<BaseControl
+					label={ __( 'Phone Number', 'jetpack' ) }
+					help={ __(
+						'Enter the phone number you use for WhatsApp and would like to be contacted on.',
+						'jetpack'
+					) }
+					className="jetpack-whatsapp-button__phonenumber"
+				>
+					<SelectControl
+						value={ countryCode }
+						onChange={ value => setAttributes( { countryCode: value } ) }
+						options={ countryCodes }
+					/>
+					<TextControl
+						placeholder={ __( 'Your phone number…', 'jetpack' ) }
+						onBlur={ newPhoneNumber => onBlurPhoneNumber( newPhoneNumber ) }
+						value={ phoneNumber }
+					/>
+				</BaseControl>
+
+				<TextareaControl
+					label={ __( 'Default First Message', 'jetpack' ) }
+					help={ __(
+						'The default first message that will be sent by visitors when using this button.',
+						'jetpack'
+					) }
+					value={ firstMessage }
+					onChange={ text => setAttributes( { firstMessage: text } ) }
+				/>
+			</>
+		);
+	};
+
 	return (
 		<div className={ className + ' is-color-' + colorClass }>
-			<BlockControls>
-				<Toolbar controls={ toolbarControls } />
-			</BlockControls>
+			{ ToolbarGroup && (
+				<BlockControls>
+					<ToolbarGroup>
+						<Dropdown
+							position="bottom right"
+							className="jetpack-contact-form-settings-selector"
+							contentClassName="jetpack-contact-form__popover"
+							renderToggle={ ( { isOpen, onToggle } ) => renderSettingsToggle( isOpen, onToggle ) }
+							renderContent={ () => renderSettings() }
+						/>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
 
 			<InspectorControls>
 				<PanelBody title="WhatsApp Button Settings" initialOpen={ true }>
-					<BaseControl
-						label={ __( 'Phone Number', 'jetpack' ) }
-						help={ __(
-							'Enter the phone number you use for WhatsApp and would like to be contacted on.',
-							'jetpack'
-						) }
-					>
-						<SelectControl
-							value={ countryCode }
-							onChange={ value => setAttributes( { countryCode: value } ) }
-							options={ countryCodes }
-						/>
-						<TextControl
-							placeholder={ __( 'Your phone number…', 'jetpack' ) }
-							onBlur={ newPhoneNumber => onBlurPhoneNumber( newPhoneNumber ) }
-							value={ phoneNumber }
-						/>
-					</BaseControl>
-
-					<TextareaControl
-						label={ __( 'Default First Message', 'jetpack' ) }
-						help={ __(
-							'The default first message that will be sent by visitors when using this button.',
-							'jetpack'
-						) }
-						value={ firstMessage }
-						onChange={ text => setAttributes( { firstMessage: text } ) }
-					/>
+					{ renderSettings() }
 				</PanelBody>
 
 				<PanelColorSettings
diff --git a/extensions/blocks/send-a-message/whatsapp-button/editor.scss b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
index 6595852dd0bf9..47218f6882d8e 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/editor.scss
+++ b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
@@ -2,22 +2,21 @@
  * Editor styles for Send A Message
  */
 
-.wp-block-jetpack-send-a-message {
+.jetpack-whatsapp-button__phonenumber {
+	.components-base-control {
+		margin-bottom: 0;
+	}
+
 	input.components-text-control__input {
-    	padding: 5px 8px;
-    	margin-left: 3px;
+		margin-bottom: 5px;
 	}
 
 	select.components-select-control__input {
-		width: 95px;
+		width: 105px;
 		min-height: 30px;
 		padding-left: 10px;
 	}
 
-	button.components-button.is-large {
-		margin-left: 7px;
-	}
-
 	.components-placeholder__label svg {
 		margin-right: 6px;
 	}

From a8a953343fea46713d2f5ee28489c0ed5825cc24 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Fri, 22 May 2020 13:11:01 -0700
Subject: [PATCH 07/32] Update settings icon to something more appropriate

---
 .../send-a-message/whatsapp-button/edit.js     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index b0b10bec1212f..f37f5a87c37c2 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-
 import { __, _x } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
 import {
@@ -10,10 +9,10 @@ import {
 	TextControl,
 	TextareaControl,
 	SelectControl,
-	Icon,
 	PanelBody,
 	ToolbarGroup,
 	Dropdown,
+	Path,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -26,8 +25,8 @@ import { DOWN } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-
 import { countryCodes } from '../shared/countrycodes.js';
+import renderMaterialIcon from '../../../shared/render-material-icon';
 import './view.scss';
 
 export default function WhatsAppButtonEdit( { attributes, setAttributes, className } ) {
@@ -43,10 +42,6 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( false );
 
 	const getCountryCode = async () => {
-		if ( undefined !== countryCode ) {
-			return;
-		}
-
 		setAttributes( { countryCode: '1' } );
 
 		const geoFetch = await fetch( 'http://ip-api.com/json/?fields=countryCode' )
@@ -73,6 +68,10 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 	};
 
 	useEffect( () => {
+		if ( undefined !== countryCode ) {
+			return;
+		}
+
 		getCountryCode();
 	} );
 
@@ -115,7 +114,9 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 				label={ __( 'Edit Form Settings' ) }
 				onClick={ onToggle }
 				onKeyDown={ openOnArrowDown }
-				icon={ <Icon icon="edit" /> }
+				icon={ renderMaterialIcon(
+					<Path d="M10.82 12.49c.02-.16.04-.32.04-.49 0-.17-.02-.33-.04-.49l1.08-.82c.1-.07.12-.21.06-.32l-1.03-1.73c-.06-.11-.2-.15-.31-.11l-1.28.5c-.27-.2-.56-.36-.87-.49l-.2-1.33c0-.12-.11-.21-.24-.21H5.98c-.13 0-.24.09-.26.21l-.2 1.32c-.31.12-.6.3-.87.49l-1.28-.5c-.12-.05-.25 0-.31.11l-1.03 1.73c-.06.12-.03.25.07.33l1.08.82c-.02.16-.03.33-.03.49 0 .17.02.33.04.49l-1.09.83c-.1.07-.12.21-.06.32l1.03 1.73c.06.11.2.15.31.11l1.28-.5c.27.2.56.36.87.49l.2 1.32c.01.12.12.21.25.21h2.06c.13 0 .24-.09.25-.21l.2-1.32c.31-.12.6-.3.87-.49l1.28.5c.12.05.25 0 .31-.11l1.03-1.73c.06-.11.04-.24-.06-.32l-1.1-.83zM7 13.75c-.99 0-1.8-.78-1.8-1.75s.81-1.75 1.8-1.75 1.8.78 1.8 1.75S8 13.75 7 13.75zM18 1.01L8 1c-1.1 0-2 .9-2 2v3h2V5h10v14H8v-1H6v3c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99z" />
+				) }
 			/>
 		);
 	};
@@ -139,6 +140,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 					<TextControl
 						placeholder={ __( 'Your phone number…', 'jetpack' ) }
 						onBlur={ newPhoneNumber => onBlurPhoneNumber( newPhoneNumber ) }
+						onChange={ newPhoneNumber => setAttributes( { phoneNumber: newPhoneNumber } ) }
 						value={ phoneNumber }
 					/>
 				</BaseControl>

From 5187b9ffb2932f7351d4b6e8719dc6c61a4d2064 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Mon, 25 May 2020 10:36:44 -0700
Subject: [PATCH 08/32] Update message block icon and support flex alignment
 inside the block.

---
 extensions/blocks/send-a-message/edit.js            |  5 ++++-
 extensions/blocks/send-a-message/editor.scss        | 13 +++++++++++++
 extensions/blocks/send-a-message/index.js           |  5 ++++-
 extensions/blocks/send-a-message/variations.js      |  2 +-
 .../blocks/send-a-message/whatsapp-button/edit.js   |  2 ++
 .../blocks/send-a-message/whatsapp-button/index.js  |  1 -
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/send-a-message/edit.js b/extensions/blocks/send-a-message/edit.js
index 5c8777d8acf35..9f8bd0c9aa85f 100644
--- a/extensions/blocks/send-a-message/edit.js
+++ b/extensions/blocks/send-a-message/edit.js
@@ -6,11 +6,14 @@ import { InnerBlocks } from '@wordpress/block-editor';
 export default function SendAMessageEdit( props ) {
 	const { className } = props;
 
+	// 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 allowedBlocks={ ALLOWED_BLOCKS } templateInsertUpdatesSelection={ false } />
+			<InnerBlocks template={ DEFAULT_TEMPLATE } allowedBlocks={ ALLOWED_BLOCKS } />
 		</div>
 	);
 }
diff --git a/extensions/blocks/send-a-message/editor.scss b/extensions/blocks/send-a-message/editor.scss
index 97360cbf36bec..220b666b1ff7d 100644
--- a/extensions/blocks/send-a-message/editor.scss
+++ b/extensions/blocks/send-a-message/editor.scss
@@ -1,3 +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 {
+		/* Until we have more service buttons available */
+		display: none;
+	}
 }
diff --git a/extensions/blocks/send-a-message/index.js b/extensions/blocks/send-a-message/index.js
index b0715283c95a9..ee49a2668d8c8 100644
--- a/extensions/blocks/send-a-message/index.js
+++ b/extensions/blocks/send-a-message/index.js
@@ -25,7 +25,7 @@ export const settings = {
 	title,
 	description: __( 'Let your visitors to send you messages with the tap of a button.', 'jetpack' ),
 	icon: renderMaterialIcon(
-		<Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" />
+		<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: [
@@ -34,6 +34,9 @@ export const settings = {
 		_x( 'contact', 'keyword', 'jetpack' ),
 		_x( 'support', 'keyword', 'jetpack' ),
 	],
+	supports: {
+		align: [ 'left', 'center', 'right' ],
+	},
 	attributes: {},
 	edit,
 	save: InnerBlocks.Content,
diff --git a/extensions/blocks/send-a-message/variations.js b/extensions/blocks/send-a-message/variations.js
index 4db3c861f1b4d..d22c35b3684bc 100644
--- a/extensions/blocks/send-a-message/variations.js
+++ b/extensions/blocks/send-a-message/variations.js
@@ -18,7 +18,7 @@ const variations = [
 			'jetpack'
 		),
 		icon: whatsAppIcon,
-		innerBlocks: [ [ 'jetpack/whatsapp-button' ] ],
+		innerBlocks: [ [ 'jetpack/whatsapp-button', {} ] ],
 	},
 ];
 
diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index f37f5a87c37c2..074a394a8cd72 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -223,7 +223,9 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 				withoutInteractiveFormatting
 				allowedFormats={ [] }
 				className="whatsapp-block__button"
+				multiline="false"
 				tagName="a"
+				preserveWhiteSpace={ false }
 				style={ {
 					backgroundColor: backgroundColor,
 				} }
diff --git a/extensions/blocks/send-a-message/whatsapp-button/index.js b/extensions/blocks/send-a-message/whatsapp-button/index.js
index 2205e3c0682d1..7fa73cde9bbe4 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/index.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/index.js
@@ -38,7 +38,6 @@ export const settings = {
 		_x( 'support', 'keyword', 'jetpack' ),
 	],
 	supports: {
-		align: [ 'left', 'center', 'right' ],
 		html: false,
 		reusable: false,
 	},

From 7e7b9d0258818617cafba43d81afd148439a20ee Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Mon, 25 May 2020 11:41:31 -0700
Subject: [PATCH 09/32] Fix up number validation, and auto select the WhatsApp
 button block when first inserted.

---
 .../send-a-message/whatsapp-button/edit.js    | 53 +++++++++++++------
 .../whatsapp-button/editor.scss               | 23 ++++----
 2 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 074a394a8cd72..9c543d0eb03fb 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -3,6 +3,8 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
+import { withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
 import {
 	Button,
 	BaseControl,
@@ -27,9 +29,10 @@ import { DOWN } from '@wordpress/keycodes';
  */
 import { countryCodes } from '../shared/countrycodes.js';
 import renderMaterialIcon from '../../../shared/render-material-icon';
+import HelpMessage from '../../../shared/help-message';
 import './view.scss';
 
-export default function WhatsAppButtonEdit( { attributes, setAttributes, className } ) {
+const WhatsAppButtonEdit = ( { attributes, setAttributes, className, selectBlock, clientId } ) => {
 	const {
 		countryCode,
 		phoneNumber,
@@ -39,7 +42,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		backgroundColor,
 	} = attributes;
 
-	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( false );
+	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( true );
 
 	const getCountryCode = async () => {
 		setAttributes( { countryCode: '1' } );
@@ -68,11 +71,10 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 	};
 
 	useEffect( () => {
-		if ( undefined !== countryCode ) {
-			return;
+		if ( undefined === countryCode ) {
+			getCountryCode();
+			selectBlock( clientId );
 		}
-
-		getCountryCode();
 	} );
 
 	const validatePhoneNumber = newPhoneNumber => {
@@ -85,10 +87,6 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		return phoneNumberRegEx.test( countryCode.replace( /\D/g, '' ) + newPhoneNumber );
 	};
 
-	const onBlurPhoneNumber = e => {
-		setIsValidPhoneNumber( validatePhoneNumber( '' ) );
-	};
-
 	const setBackgroundColor = color => {
 		setAttributes( { backgroundColor: color } );
 
@@ -111,7 +109,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		return (
 			<Button
 				className="components-toolbar__control jetpack-contact-form__toggle"
-				label={ __( 'Edit Form Settings' ) }
+				label={ __( 'WhatsApp Button Settings' ) }
 				onClick={ onToggle }
 				onKeyDown={ openOnArrowDown }
 				icon={ renderMaterialIcon(
@@ -137,12 +135,28 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 						onChange={ value => setAttributes( { countryCode: value } ) }
 						options={ countryCodes }
 					/>
+
 					<TextControl
 						placeholder={ __( 'Your phone number…', 'jetpack' ) }
-						onBlur={ newPhoneNumber => onBlurPhoneNumber( newPhoneNumber ) }
-						onChange={ newPhoneNumber => setAttributes( { phoneNumber: newPhoneNumber } ) }
+						onChange={ newPhoneNumber => {
+							setAttributes( { phoneNumber: newPhoneNumber } );
+
+							if ( newPhoneNumber.length === 0 ) {
+								setIsValidPhoneNumber( true );
+							}
+
+							if ( newPhoneNumber.length > 2 ) {
+								setIsValidPhoneNumber( validatePhoneNumber( phoneNumber ) );
+							}
+						} }
 						value={ phoneNumber }
 					/>
+
+					{ ! isValidPhoneNumber && (
+						<HelpMessage isError className="jetpack-whatsapp-error">
+							{ __( 'Please enter a valid phone number.', 'jetpack' ) }
+						</HelpMessage>
+					) }
 				</BaseControl>
 
 				<TextareaControl
@@ -165,8 +179,8 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 					<ToolbarGroup>
 						<Dropdown
 							position="bottom right"
-							className="jetpack-contact-form-settings-selector"
-							contentClassName="jetpack-contact-form__popover"
+							className="jetpack-whatsapp-button-settings-selector"
+							contentClassName="jetpack-whatsapp-button__popover"
 							renderToggle={ ( { isOpen, onToggle } ) => renderSettingsToggle( isOpen, onToggle ) }
 							renderContent={ () => renderSettings() }
 						/>
@@ -232,4 +246,11 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 			/>
 		</div>
 	);
-}
+};
+
+export default compose( [
+	withDispatch( dispatch => {
+		const { selectBlock } = dispatch( 'core/block-editor' );
+		return { selectBlock };
+	} ),
+] )( WhatsAppButtonEdit );
diff --git a/extensions/blocks/send-a-message/whatsapp-button/editor.scss b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
index 47218f6882d8e..839e9591446d0 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/editor.scss
+++ b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
@@ -22,22 +22,17 @@
 	}
 }
 
-.whatsapp-phonenumber-invalid {
-	.components-popover__content {
-		background: #B40000;
-		color: white;
-		padding: 6px 10px;
-		border-radius: 6px;
-		border: none;
-	}
+.jetpack-whatsapp-error {
+	display: inline-flex;
+	margin-bottom: 10px;
 
-	&:not(.is-without-arrow):not(.is-mobile):after {
-		border-color: #B40000;
+	svg, span {
+		color: red;
+		fill: red;
+		vertical-align: middle;
 	}
 
-	svg.dashicon {
-		vertical-align: top;
-		margin-right: 4px;
-		margin-top: -1px;
+	svg {
+		margin: -3px 5px 0 0;
 	}
 }

From 25096c3f365b37340f58992e975f33f77cedb812 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 26 May 2020 10:07:30 -0700
Subject: [PATCH 10/32] [not verified] Make sure parent block has wrapper on
 front end.

---
 extensions/blocks/send-a-message/index.js                 | 8 +++++++-
 extensions/blocks/send-a-message/view.js                  | 4 ----
 extensions/blocks/send-a-message/view.scss                | 0
 .../blocks/send-a-message/whatsapp-button/view.scss       | 1 +
 4 files changed, 8 insertions(+), 5 deletions(-)
 delete mode 100644 extensions/blocks/send-a-message/view.js
 delete mode 100644 extensions/blocks/send-a-message/view.scss

diff --git a/extensions/blocks/send-a-message/index.js b/extensions/blocks/send-a-message/index.js
index ee49a2668d8c8..02b8333033873 100644
--- a/extensions/blocks/send-a-message/index.js
+++ b/extensions/blocks/send-a-message/index.js
@@ -39,7 +39,13 @@ export const settings = {
 	},
 	attributes: {},
 	edit,
-	save: InnerBlocks.Content,
+	save: props => {
+		return (
+			<div className={ props.className }>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
 	variations,
 	example: {},
 };
diff --git a/extensions/blocks/send-a-message/view.js b/extensions/blocks/send-a-message/view.js
deleted file mode 100644
index 741c50d6a0ff9..0000000000000
--- a/extensions/blocks/send-a-message/view.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * Internal dependencies
- */
-import './view.scss';
diff --git a/extensions/blocks/send-a-message/view.scss b/extensions/blocks/send-a-message/view.scss
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/extensions/blocks/send-a-message/whatsapp-button/view.scss b/extensions/blocks/send-a-message/whatsapp-button/view.scss
index c1d2cb68de336..eb5443ae6b53f 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/view.scss
+++ b/extensions/blocks/send-a-message/whatsapp-button/view.scss
@@ -6,6 +6,7 @@ div.wp-block-jetpack-whatsapp-button {
 		padding: 8px 16px 8px 56px;
 		border-radius: 8px;
 		text-decoration: none;
+		white-space: nowrap;
 
 		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 		font-weight: 500;

From 329401eb1ec23338d7ec39cb618d6ddea3b3470a Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 26 May 2020 10:16:26 -0700
Subject: [PATCH 11/32] [not verified] Make sure the form settings popover has
 correct padding in older GB versions

---
 .../blocks/send-a-message/whatsapp-button/editor.scss      | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/editor.scss b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
index 839e9591446d0..c62356f134fcc 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/editor.scss
+++ b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
@@ -36,3 +36,10 @@
 		margin: -3px 5px 0 0;
 	}
 }
+
+// Make sure form settings dropdown looks good on older Gutenberg versions
+.jetpack-whatsapp-button__popover {
+	.components-popover__content {
+		padding: 12px;
+	}
+}

From 46ed1655b9f306bfdb1b7128dcbe8b8dbd2ce080 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 26 May 2020 11:28:29 -0700
Subject: [PATCH 12/32] Use constants for color names

---
 .../blocks/send-a-message/whatsapp-button/edit.js    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 9c543d0eb03fb..5f1e6b5b0f3ee 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -32,6 +32,10 @@ import renderMaterialIcon from '../../../shared/render-material-icon';
 import HelpMessage from '../../../shared/help-message';
 import './view.scss';
 
+const WHATSAPP_GREEN = '#25D366';
+const WHATSAPP_DARK = '#465B64';
+const WHATSAPP_LIGHT = '#F4F4F4';
+
 const WhatsAppButtonEdit = ( { attributes, setAttributes, className, selectBlock, clientId } ) => {
 	const {
 		countryCode,
@@ -90,7 +94,7 @@ const WhatsAppButtonEdit = ( { attributes, setAttributes, className, selectBlock
 	const setBackgroundColor = color => {
 		setAttributes( { backgroundColor: color } );
 
-		if ( color === undefined || color === '#25D366' || color === '#465B64' ) {
+		if ( color === undefined || color === WHATSAPP_GREEN || color === WHATSAPP_DARK ) {
 			return setAttributes( { colorClass: 'dark' } );
 		}
 
@@ -206,17 +210,17 @@ const WhatsAppButtonEdit = ( { attributes, setAttributes, className, selectBlock
 								{
 									name: _x( 'WhatsApp Green', 'background color name', 'jetpack' ),
 									slug: 'whatsapp-green',
-									color: '#25D366',
+									color: WHATSAPP_GREEN,
 								},
 								{
 									name: _x( 'WhatsApp Dark', 'background color name', 'jetpack' ),
 									slug: 'whatsapp-dark',
-									color: '#465B64',
+									color: WHATSAPP_DARK,
 								},
 								{
 									name: _x( 'WhatsApp Light', 'background color name', 'jetpack' ),
 									slug: 'whatsapp-light',
-									color: '#F4F4F4',
+									color: WHATSAPP_LIGHT,
 								},
 								{
 									name: _x( 'White', 'background color name', 'jetpack' ),

From 805dc9776da84597454c09552c4b1077bc4c72d0 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Fri, 12 Jun 2020 11:33:00 -0700
Subject: [PATCH 13/32] Hide the child block inserter on WP 5.3

---
 extensions/blocks/send-a-message/editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/editor.scss b/extensions/blocks/send-a-message/editor.scss
index 220b666b1ff7d..d8c64b3f85e99 100644
--- a/extensions/blocks/send-a-message/editor.scss
+++ b/extensions/blocks/send-a-message/editor.scss
@@ -9,7 +9,7 @@
 		}
 	}
 
-	.block-list-appender {
+	.block-list-appender, .block-editor-inserter {
 		/* Until we have more service buttons available */
 		display: none;
 	}

From 3488a442fadc4599240eb72a869ff4b931a62289 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <aaron@clickweave.com>
Date: Mon, 8 Jun 2020 15:45:47 +1000
Subject: [PATCH 14/32] Allow Send A Message block for free Jetpack plan

---
 class.jetpack-plan.php                              | 1 +
 extensions/blocks/send-a-message/send-a-message.php | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/class.jetpack-plan.php b/class.jetpack-plan.php
index e278a4973d5bc..7bec79d32b9f4 100644
--- a/class.jetpack-plan.php
+++ b/class.jetpack-plan.php
@@ -31,6 +31,7 @@ class Jetpack_Plan {
 			'supports' => array(
 				'opentable',
 				'calendly',
+				'send-a-message',
 			),
 		),
 		'personal' => array(
diff --git a/extensions/blocks/send-a-message/send-a-message.php b/extensions/blocks/send-a-message/send-a-message.php
index bae3389523e1a..a98609277af91 100644
--- a/extensions/blocks/send-a-message/send-a-message.php
+++ b/extensions/blocks/send-a-message/send-a-message.php
@@ -23,7 +23,10 @@
 function register_block() {
 	jetpack_register_block(
 		BLOCK_NAME,
-		array( 'render_callback' => __NAMESPACE__ . '\render_block' )
+		array(
+			'render_callback' => __NAMESPACE__ . '\render_block',
+			'plan_check'      => true,
+		)
 	);
 }
 add_action( 'init', __NAMESPACE__ . '\register_block' );

From cba0d0216d0b70804aab31e9ebebe428ef7a9d38 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 16 Jun 2020 11:45:34 -0700
Subject: [PATCH 15/32] Deconstruct params in function

---
 extensions/blocks/send-a-message/edit.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/extensions/blocks/send-a-message/edit.js b/extensions/blocks/send-a-message/edit.js
index 9f8bd0c9aa85f..a0195157646ef 100644
--- a/extensions/blocks/send-a-message/edit.js
+++ b/extensions/blocks/send-a-message/edit.js
@@ -3,9 +3,7 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function SendAMessageEdit( props ) {
-	const { className } = props;
-
+export default function SendAMessageEdit( { className } ) {
 	// Default template is single WhatsApp block until we offer
 	// more services
 	const DEFAULT_TEMPLATE = [ [ 'jetpack/whatsapp-button', {} ] ];

From 66650d7f470a4525086a8274ab5cf10af4bbe151 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 16 Jun 2020 11:46:53 -0700
Subject: [PATCH 16/32] Explicitly disable html support

---
 extensions/blocks/send-a-message/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/extensions/blocks/send-a-message/index.js b/extensions/blocks/send-a-message/index.js
index 02b8333033873..e176f33d8dfea 100644
--- a/extensions/blocks/send-a-message/index.js
+++ b/extensions/blocks/send-a-message/index.js
@@ -35,6 +35,7 @@ export const settings = {
 		_x( 'support', 'keyword', 'jetpack' ),
 	],
 	supports: {
+		html: false,
 		align: [ 'left', 'center', 'right' ],
 	},
 	attributes: {},

From 6d810b381e97e7a96c305227a18044e646c84785 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 16 Jun 2020 11:56:33 -0700
Subject: [PATCH 17/32] Add comment for the phone number validation regex

---
 extensions/blocks/send-a-message/whatsapp-button/edit.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 5f1e6b5b0f3ee..d3c724f08ee8e 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -82,6 +82,9 @@ const WhatsAppButtonEdit = ( { attributes, setAttributes, className, selectBlock
 	} );
 
 	const validatePhoneNumber = newPhoneNumber => {
+		// No alphabetical characters but allow dots, dashes, and brackets.
+		// These will be stripped for the WhatsApp API (only numbers), but retain
+		// them in the UI for a more readable number for the user.
 		const phoneNumberRegEx = RegExp( /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/, 'g' );
 
 		if ( undefined === newPhoneNumber || newPhoneNumber.length < 1 ) {

From 91cf8eeb808f2eb175e8ddacf7482906be843b8e Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 16 Jun 2020 12:13:08 -0700
Subject: [PATCH 18/32] Remove superfluous save

---
 extensions/blocks/send-a-message/whatsapp-button/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/index.js b/extensions/blocks/send-a-message/whatsapp-button/index.js
index 7fa73cde9bbe4..0deef80c4c552 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/index.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/index.js
@@ -43,7 +43,7 @@ export const settings = {
 	},
 	attributes,
 	edit,
-	save: save,
+	save,
 	example: {
 		attributes: {
 			countryCode: '1',

From 8a0da2f455193e01a8fb19897fce3ea430ad46d4 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 16 Jun 2020 12:31:33 -0700
Subject: [PATCH 19/32] Switch to useDispatch

---
 .../blocks/send-a-message/whatsapp-button/edit.js | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index d3c724f08ee8e..a7bb286bed134 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -3,8 +3,7 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
-import { withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
 import {
 	Button,
 	BaseControl,
@@ -36,7 +35,7 @@ const WHATSAPP_GREEN = '#25D366';
 const WHATSAPP_DARK = '#465B64';
 const WHATSAPP_LIGHT = '#F4F4F4';
 
-const WhatsAppButtonEdit = ( { attributes, setAttributes, className, selectBlock, clientId } ) => {
+export default function WhatsAppButtonEdit( { attributes, setAttributes, className, clientId } ) {
 	const {
 		countryCode,
 		phoneNumber,
@@ -47,6 +46,7 @@ const WhatsAppButtonEdit = ( { attributes, setAttributes, className, selectBlock
 	} = attributes;
 
 	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( true );
+	const { selectBlock } = useDispatch( 'core/block-editor' );
 
 	const getCountryCode = async () => {
 		setAttributes( { countryCode: '1' } );
@@ -253,11 +253,4 @@ const WhatsAppButtonEdit = ( { attributes, setAttributes, className, selectBlock
 			/>
 		</div>
 	);
-};
-
-export default compose( [
-	withDispatch( dispatch => {
-		const { selectBlock } = dispatch( 'core/block-editor' );
-		return { selectBlock };
-	} ),
-] )( WhatsAppButtonEdit );
+}

From 5b1879c7178f9694939c79f5b33b1e1ce56e10a1 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Wed, 17 Jun 2020 10:13:20 -0700
Subject: [PATCH 20/32] Add useEffect dependencies

---
 extensions/blocks/send-a-message/whatsapp-button/edit.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index a7bb286bed134..88c7f9a5ed924 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -48,7 +48,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 	const [ isValidPhoneNumber, setIsValidPhoneNumber ] = useState( true );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 
-	const getCountryCode = async () => {
+	const getCountryCode = useCallback( async () => {
 		setAttributes( { countryCode: '1' } );
 
 		const geoFetch = await fetch( 'http://ip-api.com/json/?fields=countryCode' )
@@ -72,14 +72,14 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 				}
 			} );
 		}
-	};
+	}, [ setAttributes ] );
 
 	useEffect( () => {
 		if ( undefined === countryCode ) {
 			getCountryCode();
 			selectBlock( clientId );
 		}
-	} );
+	}, [ clientId, countryCode, getCountryCode, selectBlock ] );
 
 	const validatePhoneNumber = newPhoneNumber => {
 		// No alphabetical characters but allow dots, dashes, and brackets.

From 364b50a67cc4849851eab9f0f1711e24e191aa48 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Wed, 17 Jun 2020 10:58:38 -0700
Subject: [PATCH 21/32] Fix undefined classname in front end.

---
 extensions/blocks/send-a-message/whatsapp-button/save.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/save.js b/extensions/blocks/send-a-message/whatsapp-button/save.js
index 132912677bbac..866269fe0b2d0 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/save.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/save.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { RichText } from '@wordpress/block-editor';
 
 /**
@@ -33,8 +34,10 @@ export default function SendAMessageSave( { attributes, className } ) {
 		return url;
 	};
 
+	const cssClassNames = classnames( className, colorClass ? 'is-color-' + colorClass : undefined );
+
 	return (
-		<div className={ className + ' is-color-' + colorClass }>
+		<div className={ cssClassNames }>
 			<a
 				className="whatsapp-block__button"
 				href={ getWhatsAppUrl() }

From c320ed72ca0ad15efad9336921d5acc0c82b606d Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Wed, 17 Jun 2020 11:09:41 -0700
Subject: [PATCH 22/32] Remove alignment support.

---
 extensions/blocks/send-a-message/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/index.js b/extensions/blocks/send-a-message/index.js
index e176f33d8dfea..f882f2bd2a79c 100644
--- a/extensions/blocks/send-a-message/index.js
+++ b/extensions/blocks/send-a-message/index.js
@@ -36,7 +36,6 @@ export const settings = {
 	],
 	supports: {
 		html: false,
-		align: [ 'left', 'center', 'right' ],
 	},
 	attributes: {},
 	edit,

From 0ec321ef2d0467905412a04c21e9e5efe9f54af3 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Mon, 22 Jun 2020 14:49:42 -0700
Subject: [PATCH 23/32] Fix missing translation

---
 extensions/blocks/send-a-message/whatsapp-button/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 88c7f9a5ed924..d76baa3a0a970 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -196,7 +196,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 			) }
 
 			<InspectorControls>
-				<PanelBody title="WhatsApp Button Settings" initialOpen={ true }>
+				<PanelBody title={ __( 'WhatsApp Button Settings', 'jetpack' ) } initialOpen={ true }>
 					{ renderSettings() }
 				</PanelBody>
 

From 64f5ca3e209a078909216fca72853b6e118b4eee Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Mon, 22 Jun 2020 14:50:21 -0700
Subject: [PATCH 24/32] Fix missing textdomain

---
 extensions/blocks/send-a-message/whatsapp-button/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index d76baa3a0a970..4e17d0c10ae1e 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -116,7 +116,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		return (
 			<Button
 				className="components-toolbar__control jetpack-contact-form__toggle"
-				label={ __( 'WhatsApp Button Settings' ) }
+				label={ __( 'WhatsApp Button Settings', 'jetpack' ) }
 				onClick={ onToggle }
 				onKeyDown={ openOnArrowDown }
 				icon={ renderMaterialIcon(

From 407c2678bf8e87a7ed7be0a674fb9c744f7ada57 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Mon, 22 Jun 2020 14:54:00 -0700
Subject: [PATCH 25/32] Switch to Jetpack geo API

---
 extensions/blocks/send-a-message/whatsapp-button/edit.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 4e17d0c10ae1e..4c57b210635e7 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -51,7 +51,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 	const getCountryCode = useCallback( async () => {
 		setAttributes( { countryCode: '1' } );
 
-		const geoFetch = await fetch( 'http://ip-api.com/json/?fields=countryCode' )
+		const geoFetch = await fetch( 'https://public-api.wordpress.com/geo/' )
 			.then( response => {
 				if ( ! response.ok ) {
 					return false;
@@ -67,7 +67,7 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 			const geo = await geoFetch.json();
 
 			countryCodes.forEach( item => {
-				if ( item.code === geo.countryCode ) {
+				if ( item.code === geo.country_short ) {
 					setAttributes( { countryCode: item.value } );
 				}
 			} );

From a5cd52bb57cd5e5c565149da275ce6a96401a13c Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Mon, 22 Jun 2020 15:14:39 -0700
Subject: [PATCH 26/32] URL encode inline svg to fix icons in IE11

---
 extensions/blocks/send-a-message/whatsapp-button/view.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/view.scss b/extensions/blocks/send-a-message/whatsapp-button/view.scss
index eb5443ae6b53f..9cf4601bc57e0 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/view.scss
+++ b/extensions/blocks/send-a-message/whatsapp-button/view.scss
@@ -11,7 +11,7 @@ div.wp-block-jetpack-whatsapp-button {
 		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 		font-weight: 500;
 
-		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='white' d='M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z'></path></svg>");
+		background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2026%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M24%2C11.6909333%20C24%2C18.1477333%2018.7256%2C23.3818667%2012.2181333%2C23.3818667%20C10.1522667%2C23.3818667%208.21146667%2C22.8538667%206.52293333%2C21.9272%20L0%2C24%20L2.12666667%2C17.7274667%20C1.05386667%2C15.9658667%200.436%2C13.8997333%200.436%2C11.6909333%20C0.436%2C5.23413333%205.71093333%2C0%2012.2181333%2C0%20C18.7261333%2C0%2024%2C5.23413333%2024%2C11.6909333%20Z%20M12.2181333%2C1.86186667%20C6.75573333%2C1.86186667%202.31253333%2C6.2712%202.31253333%2C11.6909333%20C2.31253333%2C13.8416%203.0136%2C15.8333333%204.19946667%2C17.4536%20L2.96186667%2C21.104%20L6.76853333%2C19.8941333%20C8.33253333%2C20.9210667%2010.2061333%2C21.52%2012.2184%2C21.52%20C17.68%2C21.52%2022.124%2C17.1112%2022.124%2C11.6914667%20C22.124%2C6.27173333%2017.6802667%2C1.86186667%2012.2181333%2C1.86186667%20Z%20M18.1677333%2C14.3834667%20C18.0949333%2C14.2642667%2017.9026667%2C14.1922667%2017.6141333%2C14.0490667%20C17.3250667%2C13.9058667%2015.9048%2C13.2122667%2015.6408%2C13.1170667%20C15.376%2C13.0216%2015.1829333%2C12.9736%2014.9906667%2C13.2602667%20C14.7984%2C13.5472%2014.2448%2C14.1922667%2014.076%2C14.3834667%20C13.9074667%2C14.5752%2013.7392%2C14.5992%2013.4501333%2C14.4557333%20C13.1616%2C14.3125333%2012.2312%2C14.0096%2011.128%2C13.0336%20C10.2696%2C12.2741333%209.68986667%2C11.3365333%209.52133333%2C11.0493333%20C9.35306667%2C10.7626667%209.50373333%2C10.6077333%209.648%2C10.4650667%20C9.77813333%2C10.3365333%209.93706667%2C10.1304%2010.0813333%2C9.9632%20C10.2261333%2C9.79573333%2010.2741333%2C9.67653333%2010.3698667%2C9.48506667%20C10.4666667%2C9.29386667%2010.4184%2C9.12666667%2010.3458667%2C8.98293333%20C10.2738667%2C8.83973333%209.69573333%2C7.4296%209.4552%2C6.85573333%20C9.21466667%2C6.2824%208.9744%2C6.37786667%208.8056%2C6.37786667%20C8.63733333%2C6.37786667%208.44453333%2C6.35386667%208.252%2C6.35386667%20C8.05946667%2C6.35386667%207.7464%2C6.4256%207.4816%2C6.71226667%20C7.21706667%2C6.9992%206.4712%2C7.69253333%206.4712%2C9.1024%20C6.4712%2C10.5125333%207.5056%2C11.8749333%207.6504%2C12.0658667%20C7.79466667%2C12.2568%209.64773333%2C15.2445333%2012.5837333%2C16.392%20C15.52%2C17.5389333%2015.52%2C17.1562667%2016.0496%2C17.1082667%20C16.5786667%2C17.0605333%2017.7578667%2C16.4152%2017.9994667%2C15.7464%20C18.2394667%2C15.0765333%2018.2394667%2C14.5029333%2018.1677333%2C14.3834667%20Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
 		background-position: 16px center;
 		background-repeat: no-repeat;
 		background-size: 32px 32px;
@@ -20,7 +20,7 @@ div.wp-block-jetpack-whatsapp-button {
 	&.is-color-light {
 		a.whatsapp-block__button {
 			color: #465B64;
-			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path fill='%23465B64' d='M24,11.6909333 C24,18.1477333 18.7256,23.3818667 12.2181333,23.3818667 C10.1522667,23.3818667 8.21146667,22.8538667 6.52293333,21.9272 L0,24 L2.12666667,17.7274667 C1.05386667,15.9658667 0.436,13.8997333 0.436,11.6909333 C0.436,5.23413333 5.71093333,0 12.2181333,0 C18.7261333,0 24,5.23413333 24,11.6909333 Z M12.2181333,1.86186667 C6.75573333,1.86186667 2.31253333,6.2712 2.31253333,11.6909333 C2.31253333,13.8416 3.0136,15.8333333 4.19946667,17.4536 L2.96186667,21.104 L6.76853333,19.8941333 C8.33253333,20.9210667 10.2061333,21.52 12.2184,21.52 C17.68,21.52 22.124,17.1112 22.124,11.6914667 C22.124,6.27173333 17.6802667,1.86186667 12.2181333,1.86186667 Z M18.1677333,14.3834667 C18.0949333,14.2642667 17.9026667,14.1922667 17.6141333,14.0490667 C17.3250667,13.9058667 15.9048,13.2122667 15.6408,13.1170667 C15.376,13.0216 15.1829333,12.9736 14.9906667,13.2602667 C14.7984,13.5472 14.2448,14.1922667 14.076,14.3834667 C13.9074667,14.5752 13.7392,14.5992 13.4501333,14.4557333 C13.1616,14.3125333 12.2312,14.0096 11.128,13.0336 C10.2696,12.2741333 9.68986667,11.3365333 9.52133333,11.0493333 C9.35306667,10.7626667 9.50373333,10.6077333 9.648,10.4650667 C9.77813333,10.3365333 9.93706667,10.1304 10.0813333,9.9632 C10.2261333,9.79573333 10.2741333,9.67653333 10.3698667,9.48506667 C10.4666667,9.29386667 10.4184,9.12666667 10.3458667,8.98293333 C10.2738667,8.83973333 9.69573333,7.4296 9.4552,6.85573333 C9.21466667,6.2824 8.9744,6.37786667 8.8056,6.37786667 C8.63733333,6.37786667 8.44453333,6.35386667 8.252,6.35386667 C8.05946667,6.35386667 7.7464,6.4256 7.4816,6.71226667 C7.21706667,6.9992 6.4712,7.69253333 6.4712,9.1024 C6.4712,10.5125333 7.5056,11.8749333 7.6504,12.0658667 C7.79466667,12.2568 9.64773333,15.2445333 12.5837333,16.392 C15.52,17.5389333 15.52,17.1562667 16.0496,17.1082667 C16.5786667,17.0605333 17.7578667,16.4152 17.9994667,15.7464 C18.2394667,15.0765333 18.2394667,14.5029333 18.1677333,14.3834667 Z'></path></svg>");
+			background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2026%27%3E%3Cpath%20fill%3D%27%2523465B64%27%20d%3D%27M24%2C11.6909333%20C24%2C18.1477333%2018.7256%2C23.3818667%2012.2181333%2C23.3818667%20C10.1522667%2C23.3818667%208.21146667%2C22.8538667%206.52293333%2C21.9272%20L0%2C24%20L2.12666667%2C17.7274667%20C1.05386667%2C15.9658667%200.436%2C13.8997333%200.436%2C11.6909333%20C0.436%2C5.23413333%205.71093333%2C0%2012.2181333%2C0%20C18.7261333%2C0%2024%2C5.23413333%2024%2C11.6909333%20Z%20M12.2181333%2C1.86186667%20C6.75573333%2C1.86186667%202.31253333%2C6.2712%202.31253333%2C11.6909333%20C2.31253333%2C13.8416%203.0136%2C15.8333333%204.19946667%2C17.4536%20L2.96186667%2C21.104%20L6.76853333%2C19.8941333%20C8.33253333%2C20.9210667%2010.2061333%2C21.52%2012.2184%2C21.52%20C17.68%2C21.52%2022.124%2C17.1112%2022.124%2C11.6914667%20C22.124%2C6.27173333%2017.6802667%2C1.86186667%2012.2181333%2C1.86186667%20Z%20M18.1677333%2C14.3834667%20C18.0949333%2C14.2642667%2017.9026667%2C14.1922667%2017.6141333%2C14.0490667%20C17.3250667%2C13.9058667%2015.9048%2C13.2122667%2015.6408%2C13.1170667%20C15.376%2C13.0216%2015.1829333%2C12.9736%2014.9906667%2C13.2602667%20C14.7984%2C13.5472%2014.2448%2C14.1922667%2014.076%2C14.3834667%20C13.9074667%2C14.5752%2013.7392%2C14.5992%2013.4501333%2C14.4557333%20C13.1616%2C14.3125333%2012.2312%2C14.0096%2011.128%2C13.0336%20C10.2696%2C12.2741333%209.68986667%2C11.3365333%209.52133333%2C11.0493333%20C9.35306667%2C10.7626667%209.50373333%2C10.6077333%209.648%2C10.4650667%20C9.77813333%2C10.3365333%209.93706667%2C10.1304%2010.0813333%2C9.9632%20C10.2261333%2C9.79573333%2010.2741333%2C9.67653333%2010.3698667%2C9.48506667%20C10.4666667%2C9.29386667%2010.4184%2C9.12666667%2010.3458667%2C8.98293333%20C10.2738667%2C8.83973333%209.69573333%2C7.4296%209.4552%2C6.85573333%20C9.21466667%2C6.2824%208.9744%2C6.37786667%208.8056%2C6.37786667%20C8.63733333%2C6.37786667%208.44453333%2C6.35386667%208.252%2C6.35386667%20C8.05946667%2C6.35386667%207.7464%2C6.4256%207.4816%2C6.71226667%20C7.21706667%2C6.9992%206.4712%2C7.69253333%206.4712%2C9.1024%20C6.4712%2C10.5125333%207.5056%2C11.8749333%207.6504%2C12.0658667%20C7.79466667%2C12.2568%209.64773333%2C15.2445333%2012.5837333%2C16.392%20C15.52%2C17.5389333%2015.52%2C17.1562667%2016.0496%2C17.1082667%20C16.5786667%2C17.0605333%2017.7578667%2C16.4152%2017.9994667%2C15.7464%20C18.2394667%2C15.0765333%2018.2394667%2C14.5029333%2018.1677333%2C14.3834667%20Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
 		}
 	}
 

From 62132655af15c37b5f36f59cd939796364c5fdd0 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Tue, 23 Jun 2020 10:21:45 -0700
Subject: [PATCH 27/32] Fix inline block buttons when more than one whatsapp
 button exists.

---
 extensions/blocks/send-a-message/whatsapp-button/view.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/view.scss b/extensions/blocks/send-a-message/whatsapp-button/view.scss
index 9cf4601bc57e0..4b7e9b1e89f8c 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/view.scss
+++ b/extensions/blocks/send-a-message/whatsapp-button/view.scss
@@ -1,4 +1,7 @@
 div.wp-block-jetpack-whatsapp-button {
+	display: inline-block;
+	margin-right: 5px;
+
 	a.whatsapp-block__button {
 		background: #25D366;
 		color: #fff;

From 8d7c32dcc13bab80bc221eadfd28ad69885fcc9b Mon Sep 17 00:00:00 2001
From: Andy Peatling <apeatling@users.noreply.github.com>
Date: Wed, 24 Jun 2020 09:34:06 -0700
Subject: [PATCH 28/32] Update extensions/blocks/send-a-message/index.js

Co-authored-by: Foteini Giannaropoulou <giannaropoulou.foteini@gmail.com>
---
 extensions/blocks/send-a-message/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/index.js b/extensions/blocks/send-a-message/index.js
index f882f2bd2a79c..fc801664d79f5 100644
--- a/extensions/blocks/send-a-message/index.js
+++ b/extensions/blocks/send-a-message/index.js
@@ -23,7 +23,7 @@ export const title = __( 'Send A Message', 'jetpack' );
 
 export const settings = {
 	title,
-	description: __( 'Let your visitors to send you messages with the tap of a button.', 'jetpack' ),
+	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" />
 	),

From 7ce2c8ba3a1d7b042a5ad9985f3a2be476d333b8 Mon Sep 17 00:00:00 2001
From: Andy Peatling <apeatling@users.noreply.github.com>
Date: Wed, 24 Jun 2020 09:34:13 -0700
Subject: [PATCH 29/32] Update extensions/blocks/send-a-message/variations.js

Co-authored-by: Foteini Giannaropoulou <giannaropoulou.foteini@gmail.com>
---
 extensions/blocks/send-a-message/variations.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/variations.js b/extensions/blocks/send-a-message/variations.js
index d22c35b3684bc..b991c72220173 100644
--- a/extensions/blocks/send-a-message/variations.js
+++ b/extensions/blocks/send-a-message/variations.js
@@ -14,7 +14,7 @@ const variations = [
 		name: 'whatsapp-button',
 		title: __( 'WhatsApp Button', 'jetpack' ),
 		description: __(
-			'Let your visitors to send you messages on WhatsApp with the tap of a button.',
+			'Let your visitors send you messages on WhatsApp with the tap of a button.',
 			'jetpack'
 		),
 		icon: whatsAppIcon,

From bc61c07039d7d02c24dd7d407658a14fb91c4757 Mon Sep 17 00:00:00 2001
From: Andy Peatling <apeatling@users.noreply.github.com>
Date: Wed, 24 Jun 2020 09:34:20 -0700
Subject: [PATCH 30/32] Update
 extensions/blocks/send-a-message/whatsapp-button/index.js

Co-authored-by: Foteini Giannaropoulou <giannaropoulou.foteini@gmail.com>
---
 extensions/blocks/send-a-message/whatsapp-button/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/index.js b/extensions/blocks/send-a-message/whatsapp-button/index.js
index 0deef80c4c552..78947605491ac 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/index.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/index.js
@@ -25,7 +25,7 @@ export const defaultFirstMessage = __(
 export const settings = {
 	title,
 	description: __(
-		'Let your visitors to send you a message on WhatsApp with the tap of a button.',
+		'Let your visitors send you a message on WhatsApp with the tap of a button.',
 		'jetpack'
 	),
 	icon,

From 10ff879f340e3a162f64e91c4db7fde6b19f9a83 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Thu, 25 Jun 2020 11:56:44 -0700
Subject: [PATCH 31/32] Remove spaces

---
 extensions/blocks/send-a-message/editor.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/blocks/send-a-message/editor.scss b/extensions/blocks/send-a-message/editor.scss
index d8c64b3f85e99..f1b050b466c24 100644
--- a/extensions/blocks/send-a-message/editor.scss
+++ b/extensions/blocks/send-a-message/editor.scss
@@ -4,8 +4,8 @@
 
 		.wp-block {
 			margin-top: 0px;
-   			margin-bottom: 0px;
-   			margin-right: 10px;
+			margin-bottom: 0px;
+			margin-right: 10px;
 		}
 	}
 

From a24fc30a7d99d05c7b668a1c830aa88bccf0c8c1 Mon Sep 17 00:00:00 2001
From: apeatling <apeatling@gmail.com>
Date: Thu, 25 Jun 2020 12:11:49 -0700
Subject: [PATCH 32/32] Support line breaks in button

---
 extensions/blocks/send-a-message/whatsapp-button/edit.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 4c57b210635e7..5ce1bf8dbf935 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -244,7 +244,6 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 				withoutInteractiveFormatting
 				allowedFormats={ [] }
 				className="whatsapp-block__button"
-				multiline="false"
 				tagName="a"
 				preserveWhiteSpace={ false }
 				style={ {