From 728f07a6183b6b7f3245a0c73642e86a7093eb63 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Fri, 4 Aug 2017 17:40:45 -0400
Subject: [PATCH 01/21] A good start maybe?

---
 modules/shortcodes/tweet.php | 58 ++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 9a6a679a8dbdc..d8c5e85918d47 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -17,6 +17,7 @@
  */
 
 add_shortcode( 'tweet', array( 'Jetpack_Tweet', 'jetpack_tweet_shortcode' ) );
+add_action( 'enqueue_block_editor_assets', array( 'Jetpack_Tweet', 'enqueue_block_editor_assets' ) );
 
 class Jetpack_Tweet {
 
@@ -142,4 +143,61 @@ static public function jetpack_tweet_shortcode_script() {
 		}
 	}
 
+	static public function enqueue_block_editor_assets() {
+		wp_enqueue_script( 'wp-blocks' );
+		wp_enqueue_script( 'wp-i18n' );
+		wp_enqueue_script( 'wp-element' );
+		wp_enqueue_script( 'shortcode' );
+		add_action( 'admin_print_footer_scripts', array( __CLASS__, 'admin_footer' ), 999 );
+	}
+
+	static public function admin_footer() {
+?>
+<script>
+( function( wp ) {
+	var blockStyle = {
+			backgroundColor: '#900',
+			color: '#fff',
+			padding: '20px'
+		};
+
+	wp.blocks.registerBlockType( 'jetpack/tweet', {
+		title: wp.i18n.__( 'Tweet', 'jetpack' ),
+		icon: 'twitter',
+		category: 'layout',
+
+		attributes : {
+			tweet : wp.blocks.query.query( 'input[name=tweet]').value
+		},
+
+		edit : function( props ) {
+			return wp.element.createElement(
+				'input',
+				{
+					name : 'tweet',
+					type : 'url',
+					value : props.tweet
+				},
+				null
+			);
+		},
+
+		save : function( props ) {
+			return wp.shortcode.string({
+				tag     : 'tweet',
+				attrs   : {
+					named   : {},
+					numeric : [
+						props.tweet
+					]
+				}
+			});
+		}
+
+	} );
+} )( window.wp );
+</script>
+<?php
+	}
+
 } // class end

From f3c43aa0f5454bf4471938e99bd95f9fbfb90641 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Fri, 4 Aug 2017 21:51:11 -0400
Subject: [PATCH 02/21] Correct how we refer to the tweet attribute.

---
 modules/shortcodes/tweet.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index d8c5e85918d47..487ab65f74ff0 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -176,7 +176,7 @@ static public function admin_footer() {
 				{
 					name : 'tweet',
 					type : 'url',
-					value : props.tweet
+					value : props.attributes.tweet
 				},
 				null
 			);
@@ -188,7 +188,7 @@ static public function admin_footer() {
 				attrs   : {
 					named   : {},
 					numeric : [
-						props.tweet
+						props.attributes.tweet
 					]
 				}
 			});

From b9da75c753701d38c53a46a25feb177ceb585554 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Fri, 4 Aug 2017 22:34:07 -0400
Subject: [PATCH 03/21] Update the prop when the field changes.  Still not
 thrilled with this method.

---
 modules/shortcodes/tweet.php | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 487ab65f74ff0..55d7c8f9610b6 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -176,7 +176,12 @@ static public function admin_footer() {
 				{
 					name : 'tweet',
 					type : 'url',
-					value : props.attributes.tweet
+					value : props.attributes.tweet,
+					onInput: function( event ) {
+						props.setAttributes({
+							tweet: event.target.value
+						});
+					}
 				},
 				null
 			);

From 1fbb0d4843681333d890d94e60ae1f4fcc4e351b Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Fri, 4 Aug 2017 22:34:53 -0400
Subject: [PATCH 04/21] Add a dummy function to explore how we can parse this
 on initialization.

---
 modules/shortcodes/tweet.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 55d7c8f9610b6..97aa94a715e2f 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -167,7 +167,9 @@ static public function admin_footer() {
 		category: 'layout',
 
 		attributes : {
-			tweet : wp.blocks.query.query( 'input[name=tweet]').value
+			tweet : function ( node ) {
+				console.log( node );
+			}
 		},
 
 		edit : function( props ) {

From 6817940b28fd178c106303f1439fc4d4930829ec Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Sat, 5 Aug 2017 12:29:51 -0400
Subject: [PATCH 05/21] Somewhat tidier way of doing the script.

This lets it be inline on the page, with the other scripts -- rather
than printed at the very bottom.

Leaving the `script` tags there but commented out so PHPStorm still
syntax highlights it as js.
---
 modules/shortcodes/tweet.php | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 97aa94a715e2f..d9e22ff00283d 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -144,16 +144,23 @@ static public function jetpack_tweet_shortcode_script() {
 	}
 
 	static public function enqueue_block_editor_assets() {
-		wp_enqueue_script( 'wp-blocks' );
-		wp_enqueue_script( 'wp-i18n' );
-		wp_enqueue_script( 'wp-element' );
-		wp_enqueue_script( 'shortcode' );
-		add_action( 'admin_print_footer_scripts', array( __CLASS__, 'admin_footer' ), 999 );
+		wp_register_script(
+			'jetpack-shortcode-tweet-gutenberg',
+			null,
+			array( 'wp-blocks', 'wp-i18n', 'wp-element', 'shortcode' )
+		);
+		wp_enqueue_script( 'jetpack-shortcode-tweet-gutenberg' );
+
+		ob_start();
+		self::jetpack_shortcode_tweet_gutenberg_script();
+		$content = ob_get_clean();
+
+		wp_script_add_data( 'jetpack-shortcode-tweet-gutenberg', 'data', $content );
 	}
 
-	static public function admin_footer() {
+	static public function jetpack_shortcode_tweet_gutenberg_script() {
 ?>
-<script>
+// <script>
 ( function( wp ) {
 	var blockStyle = {
 			backgroundColor: '#900',
@@ -203,7 +210,7 @@ static public function admin_footer() {
 
 	} );
 } )( window.wp );
-</script>
+// </script>
 <?php
 	}
 

From 2e98277786c502c35acb7aed5dcc1983208730bd Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 14:31:51 -0400
Subject: [PATCH 06/21] Clear out some unused chaff.

---
 modules/shortcodes/tweet.php | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index d9e22ff00283d..2af1a96937ad3 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -162,12 +162,6 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 ?>
 // <script>
 ( function( wp ) {
-	var blockStyle = {
-			backgroundColor: '#900',
-			color: '#fff',
-			padding: '20px'
-		};
-
 	wp.blocks.registerBlockType( 'jetpack/tweet', {
 		title: wp.i18n.__( 'Tweet', 'jetpack' ),
 		icon: 'twitter',

From 7b3729b52d747f3b499fa23bc9e04ad8cd7c8996 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 14:32:18 -0400
Subject: [PATCH 07/21] Flesh out how to find the tweet url from the node.

---
 modules/shortcodes/tweet.php | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 2af1a96937ad3..aa4b6177afdc3 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -169,7 +169,15 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 
 		attributes : {
 			tweet : function ( node ) {
-				console.log( node );
+				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
+				if ( shortcode.attrs.named.tweet ) {
+					return shortcode.attrs.named.tweet;
+				}
+				if ( shortcode.attrs.numeric[0] ) {
+					return shortcode.attrs.numeric[0];
+				}
+				return null;
+			},
 			}
 		},
 

From eb7499eae03a29d16746e71eed0ddb844645a698 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 14:34:35 -0400
Subject: [PATCH 08/21] Don't return the result of the array directly.

Build, then compile.  This will make it easier for us to add more
conditional additions later.
---
 modules/shortcodes/tweet.php | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index aa4b6177afdc3..f12aee8442b21 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -199,7 +199,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 		},
 
 		save : function( props ) {
-			return wp.shortcode.string({
+			var args = {
 				tag     : 'tweet',
 				attrs   : {
 					named   : {},
@@ -207,7 +207,9 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 						props.attributes.tweet
 					]
 				}
-			});
+			};
+
+			return wp.shortcode.string( args );
 		}
 
 	} );

From 3d3cb22733e7e6c5ede0d8ca9983660cd5c99573 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 14:35:04 -0400
Subject: [PATCH 09/21] Use onChange not onInput to satisfy browser console
 nag.

---
 modules/shortcodes/tweet.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index f12aee8442b21..0f26fb430005c 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -188,7 +188,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 					name : 'tweet',
 					type : 'url',
 					value : props.attributes.tweet,
-					onInput: function( event ) {
+					onChange: function( event ) {
 						props.setAttributes({
 							tweet: event.target.value
 						});

From 9b2f478bcda2acdfca7c279f5471e90f5e351175 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 14:35:30 -0400
Subject: [PATCH 10/21] Add in handling for other optional attributes.

---
 modules/shortcodes/tweet.php | 51 ++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 0f26fb430005c..9936933fa8787 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -178,6 +178,40 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 				}
 				return null;
 			},
+			align : function ( node ) {
+				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
+				if ( shortcode.attrs.named.align ) {
+					return shortcode.attrs.named.align;
+				}
+				return 'none';
+			},
+			width : function ( node ) {
+				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
+				if ( shortcode.attrs.named.width ) {
+					return shortcode.attrs.named.width;
+				}
+				return '';
+			},
+			lang : function ( node ) {
+				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
+				if ( shortcode.attrs.named.lang ) {
+					return shortcode.attrs.named.lang;
+				}
+				return 'en';
+			},
+			hide_thread : function ( node ) {
+				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
+				if ( shortcode.attrs.named.hide_thread ) {
+					return shortcode.attrs.named.hide_thread;
+				}
+				return 'false';
+			},
+			hide_media : function ( node ) {
+				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
+				if ( shortcode.attrs.named.hide_media ) {
+					return shortcode.attrs.named.hide_media;
+				}
+				return 'false';
 			}
 		},
 
@@ -209,6 +243,23 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 				}
 			};
 
+			// Populate optional attributes.
+			if ( props.attributes.align && props.attributes.align !== 'none' ) {
+				args.attrs.named.align = props.attributes.align;
+			}
+			if ( props.attributes.width && props.attributes.width !== '' ) {
+				args.attrs.named.width = props.attributes.width;
+			}
+			if ( props.attributes.lang && props.attributes.lang !== 'en' ) {
+				args.attrs.named.lang = props.attributes.lang;
+			}
+			if ( props.attributes.hide_thread && props.attributes.hide_thread !== 'none' ) {
+				args.attrs.named.hide_thread = props.attributes.hide_thread;
+			}
+			if ( props.attributes.hide_media && props.attributes.hide_media !== 'none' ) {
+				args.attrs.named.hide_media = props.attributes.hide_media;
+			}
+
 			return wp.shortcode.string( args );
 		}
 

From 9b22ae0759cfaacaa4588ae2aa2fbb8d4fd74148 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 14:36:04 -0400
Subject: [PATCH 11/21] Wrap it in the generated classname?  Probably a good
 idea?

---
 modules/shortcodes/tweet.php | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 9936933fa8787..3d4b2b669a29e 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -260,6 +260,13 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 				args.attrs.named.hide_media = props.attributes.hide_media;
 			}
 
+			if ( props.className ) {
+				return wp.element.createElement(
+					'div',
+					{ className : props.className },
+					wp.shortcode.string( args )
+			}
+
 			return wp.shortcode.string( args );
 		}
 

From 6fbc6c2367c34fd3e11251f5918f48182c60e8a1 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 14:37:17 -0400
Subject: [PATCH 12/21] Oops, forgot the closing parens.

---
 modules/shortcodes/tweet.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 3d4b2b669a29e..94e27acedf139 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -265,6 +265,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 					'div',
 					{ className : props.className },
 					wp.shortcode.string( args )
+				);
 			}
 
 			return wp.shortcode.string( args );

From fb52f65753c6d242b2b35d6b9e7673e8614e0a7e Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 14:54:24 -0400
Subject: [PATCH 13/21] Set the generated shortcode to single.

---
 modules/shortcodes/tweet.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 94e27acedf139..2fdbe1a7aa3d9 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -235,6 +235,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 		save : function( props ) {
 			var args = {
 				tag     : 'tweet',
+				type    : 'single',
 				attrs   : {
 					named   : {},
 					numeric : [

From 2b8a30af282a6390fd4ba82b187d463cd3a9cc6b Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 17:21:07 -0400
Subject: [PATCH 14/21] Change to an array so we can return multiples.

---
 modules/shortcodes/tweet.php | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 2fdbe1a7aa3d9..6ff497246008e 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -216,20 +216,22 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 		},
 
 		edit : function( props ) {
-			return wp.element.createElement(
-				'input',
-				{
-					name : 'tweet',
-					type : 'url',
-					value : props.attributes.tweet,
-					onChange: function( event ) {
-						props.setAttributes({
-							tweet: event.target.value
-						});
-					}
-				},
-				null
-			);
+			return [
+				wp.element.createElement(
+					'input',
+					{
+						name : 'tweet',
+						type : 'url',
+						value : props.attributes.tweet,
+						onChange: function( event ) {
+							props.setAttributes({
+								tweet : event.target.value
+							});
+						}
+					},
+					null
+				)
+			];
 		},
 
 		save : function( props ) {

From 8d9f1f4bd848f1f780d580bd51e3e5cc011d652a Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 17:21:31 -0400
Subject: [PATCH 15/21] Add BlockControls AlignmentToolbar.

---
 modules/shortcodes/tweet.php | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 6ff497246008e..e3eacf6200970 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -217,6 +217,21 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 
 		edit : function( props ) {
 			return [
+				!! props.focus && wp.element.createElement(
+					wp.blocks.BlockControls,
+					{ key : 'controls' },
+					wp.element.createElement(
+						wp.blocks.AlignmentToolbar,
+						{
+							value    : props.attributes.align,
+							onChange : function( newAlignment ) {
+								props.setAttributes( {
+									align : newAlignment
+								} );
+							}
+						}
+					)
+				),
 				wp.element.createElement(
 					'input',
 					{

From 0b5476fc6f1384594924d41e3b082764d7a14275 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 17:21:58 -0400
Subject: [PATCH 16/21] Add sidebar width control.

---
 modules/shortcodes/tweet.php | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index e3eacf6200970..f123f3474149d 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -232,6 +232,45 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 						}
 					)
 				),
+				!! props.focus && wp.element.createElement(
+					wp.blocks.InspectorControls,
+					{ key : 'inspector' },
+					[
+						wp.element.createElement(
+							wp.blocks.BlockDescription,
+							null,
+							wp.element.createElement(
+								'p',
+								null,
+								wp.i18n.__( 'Optional embed settings:' )
+							)
+						),
+						wp.element.createElement(
+							'label',
+							null,
+							wp.element.createElement(
+								'label',
+								null,
+								[
+									wp.i18n.__( 'Width:' ),
+									wp.element.createElement(
+										'input',
+										{
+											type : 'number',
+											min : 100,
+											value : props.attributes.width,
+											onChange : function( newWidth ) {
+												props.setAttributes( {
+													width : newWidth.target.value
+												} );
+											}
+										}
+									)
+								]
+							)
+						),
+					]
+				),
 				wp.element.createElement(
 					'input',
 					{

From baa38bc4ea76d9645aec53ece330acff11c933b6 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 17:22:34 -0400
Subject: [PATCH 17/21] If there's a className to be set, wrap it in a div so
 it can be set on that.

---
 modules/shortcodes/tweet.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index f123f3474149d..6e58761cef392 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -317,7 +317,8 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 				args.attrs.named.hide_media = props.attributes.hide_media;
 			}
 
-			if ( props.className ) {
+			// If there's a className to be set, wrap it in a div so it can be set on that.
+			if ( props.className || props.attributes.className ) {
 				return wp.element.createElement(
 					'div',
 					{ className : props.className },

From ba90d71ee1749b480fe882ebe29daa6791662538 Mon Sep 17 00:00:00 2001
From: George Stephanis <georgestephanis@automattic.com>
Date: Mon, 7 Aug 2017 17:22:48 -0400
Subject: [PATCH 18/21] This is necessary so React doesn't turn `"` into
 `&quot;`

---
 modules/shortcodes/tweet.php | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 6e58761cef392..14608ac4dd093 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -321,8 +321,12 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 			if ( props.className || props.attributes.className ) {
 				return wp.element.createElement(
 					'div',
-					{ className : props.className },
-					wp.shortcode.string( args )
+					{
+						// This is necessary so React doesn't turn `"` into `&quot;`
+						dangerouslySetInnerHTML: {
+							__html: wp.shortcode.string( args )
+						}
+					}
 				);
 			}
 

From 32a0ea5f29b74b4e64254b022d676cbbb1dc4396 Mon Sep 17 00:00:00 2001
From: George Stephanis <George@Stephanis.info>
Date: Thu, 17 Aug 2017 13:31:42 -0400
Subject: [PATCH 19/21] Rewrite attributes array to a function.

---
 modules/shortcodes/tweet.php | 76 +++++++++++++++---------------------
 1 file changed, 31 insertions(+), 45 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index 14608ac4dd093..f9cc8f147bf4e 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -167,52 +167,38 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 		icon: 'twitter',
 		category: 'layout',
 
-		attributes : {
-			tweet : function ( node ) {
-				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
-				if ( shortcode.attrs.named.tweet ) {
-					return shortcode.attrs.named.tweet;
-				}
-				if ( shortcode.attrs.numeric[0] ) {
-					return shortcode.attrs.numeric[0];
-				}
-				return null;
-			},
-			align : function ( node ) {
-				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
-				if ( shortcode.attrs.named.align ) {
-					return shortcode.attrs.named.align;
-				}
-				return 'none';
-			},
-			width : function ( node ) {
-				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
-				if ( shortcode.attrs.named.width ) {
-					return shortcode.attrs.named.width;
-				}
-				return '';
-			},
-			lang : function ( node ) {
-				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
-				if ( shortcode.attrs.named.lang ) {
-					return shortcode.attrs.named.lang;
-				}
-				return 'en';
-			},
-			hide_thread : function ( node ) {
-				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
-				if ( shortcode.attrs.named.hide_thread ) {
-					return shortcode.attrs.named.hide_thread;
-				}
-				return 'false';
-			},
-			hide_media : function ( node ) {
-				var shortcode = wp.shortcode.next( 'tweet', node.innerText );
-				if ( shortcode.attrs.named.hide_media ) {
-					return shortcode.attrs.named.hide_media;
-				}
-				return 'false';
+		attributes : function( content ) {
+			console.log( content );
+			var shortcode = wp.shortcode.next( 'tweet', content ),
+				data = {};
+
+			if ( shortcode.attrs.named.tweet ) {
+				data.tweet = shortcode.attrs.named.tweet;
+			} else if ( shortcode.attrs.numeric[0] ) {
+				data.tweet = shortcode.attrs.numeric[0];
+			}
+
+			if ( shortcode.attrs.named.align ) {
+				data.align = shortcode.attrs.named.align;
 			}
+
+			if ( shortcode.attrs.named.width ) {
+				data.width = shortcode.attrs.named.width;
+			}
+
+			if ( shortcode.attrs.named.lang ) {
+				data.lang = shortcode.attrs.named.lang;
+			}
+
+			if ( shortcode.attrs.named.hide_thread ) {
+				data.hide_thread = shortcode.attrs.named.hide_thread;
+			}
+
+			if ( shortcode.attrs.named.hide_media ) {
+				data.hide_media = shortcode.attrs.named.hide_media;
+			}
+
+			return data;
 		},
 
 		edit : function( props ) {

From 1f52720946be6ea5a4b2855c09e389387ed171a8 Mon Sep 17 00:00:00 2001
From: George Stephanis <George@Stephanis.info>
Date: Thu, 17 Aug 2017 13:32:19 -0400
Subject: [PATCH 20/21] Are you the keymaster?

https://www.youtube.com/watch?v=pNnIbFFzpD8
---
 modules/shortcodes/tweet.php | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index f9cc8f147bf4e..aae5f2717110e 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -209,6 +209,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 					wp.element.createElement(
 						wp.blocks.AlignmentToolbar,
 						{
+							key : '<?php echo md5( __FILE__ . __LINE__ ); ?>',
 							value    : props.attributes.align,
 							onChange : function( newAlignment ) {
 								props.setAttributes( {
@@ -224,7 +225,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 					[
 						wp.element.createElement(
 							wp.blocks.BlockDescription,
-							null,
+							{ key : '<?php echo md5( __FILE__ . __LINE__ ); ?>' },
 							wp.element.createElement(
 								'p',
 								null,
@@ -233,15 +234,16 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 						),
 						wp.element.createElement(
 							'label',
-							null,
+							{ key : '<?php echo md5( __FILE__ . __LINE__ ); ?>' },
 							wp.element.createElement(
 								'label',
-								null,
+								{ key : '<?php echo md5( __FILE__ . __LINE__ ); ?>' },
 								[
 									wp.i18n.__( 'Width:' ),
 									wp.element.createElement(
 										'input',
 										{
+											key : '<?php echo md5( __FILE__ . __LINE__ ); ?>',
 											type : 'number',
 											min : 100,
 											value : props.attributes.width,
@@ -260,6 +262,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 				wp.element.createElement(
 					'input',
 					{
+						key : '<?php echo md5( __FILE__ . __LINE__ ); ?>',
 						name : 'tweet',
 						type : 'url',
 						value : props.attributes.tweet,

From ebe395357a3d583cfa8a814489df91e08fdefdcf Mon Sep 17 00:00:00 2001
From: George Stephanis <George@Stephanis.info>
Date: Thu, 17 Aug 2017 13:44:29 -0400
Subject: [PATCH 21/21] Alias `el` to `wp.element.createElement`

For brevity.
---
 modules/shortcodes/tweet.php | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/modules/shortcodes/tweet.php b/modules/shortcodes/tweet.php
index aae5f2717110e..6d384698f5f19 100644
--- a/modules/shortcodes/tweet.php
+++ b/modules/shortcodes/tweet.php
@@ -162,6 +162,8 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 ?>
 // <script>
 ( function( wp ) {
+	var el = wp.element.createElement;
+
 	wp.blocks.registerBlockType( 'jetpack/tweet', {
 		title: wp.i18n.__( 'Tweet', 'jetpack' ),
 		icon: 'twitter',
@@ -203,10 +205,10 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 
 		edit : function( props ) {
 			return [
-				!! props.focus && wp.element.createElement(
+				!! props.focus && el(
 					wp.blocks.BlockControls,
 					{ key : 'controls' },
-					wp.element.createElement(
+					el(
 						wp.blocks.AlignmentToolbar,
 						{
 							key : '<?php echo md5( __FILE__ . __LINE__ ); ?>',
@@ -219,28 +221,28 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 						}
 					)
 				),
-				!! props.focus && wp.element.createElement(
+				!! props.focus && el(
 					wp.blocks.InspectorControls,
 					{ key : 'inspector' },
 					[
-						wp.element.createElement(
+						el(
 							wp.blocks.BlockDescription,
 							{ key : '<?php echo md5( __FILE__ . __LINE__ ); ?>' },
-							wp.element.createElement(
+							el(
 								'p',
 								null,
 								wp.i18n.__( 'Optional embed settings:' )
 							)
 						),
-						wp.element.createElement(
+						el(
 							'label',
 							{ key : '<?php echo md5( __FILE__ . __LINE__ ); ?>' },
-							wp.element.createElement(
+							el(
 								'label',
 								{ key : '<?php echo md5( __FILE__ . __LINE__ ); ?>' },
 								[
 									wp.i18n.__( 'Width:' ),
-									wp.element.createElement(
+									el(
 										'input',
 										{
 											key : '<?php echo md5( __FILE__ . __LINE__ ); ?>',
@@ -259,7 +261,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 						),
 					]
 				),
-				wp.element.createElement(
+				el(
 					'input',
 					{
 						key : '<?php echo md5( __FILE__ . __LINE__ ); ?>',
@@ -308,7 +310,7 @@ static public function jetpack_shortcode_tweet_gutenberg_script() {
 
 			// If there's a className to be set, wrap it in a div so it can be set on that.
 			if ( props.className || props.attributes.className ) {
-				return wp.element.createElement(
+				return el(
 					'div',
 					{
 						// This is necessary so React doesn't turn `"` into `&quot;`