From 3e1e0311b42e054e880a64f8f3f81666cb1e1bc2 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 13 Apr 2017 15:04:04 +0100
Subject: [PATCH 1/3] Blocks: Adding the quote block

---
 blocks/library/index.js         |  1 +
 blocks/library/quote/index.js   | 50 +++++++++++++++++++++++++++++++++
 blocks/library/quote/style.scss | 24 ++++++++++++++++
 languages/gutenberg.pot         |  4 +++
 4 files changed, 79 insertions(+)
 create mode 100644 blocks/library/quote/index.js
 create mode 100644 blocks/library/quote/style.scss

diff --git a/blocks/library/index.js b/blocks/library/index.js
index 3402384178f1ec..9ae6e3c160ecbe 100644
--- a/blocks/library/index.js
+++ b/blocks/library/index.js
@@ -2,3 +2,4 @@ import './freeform';
 import './image';
 import './text';
 import './list';
+import './quote';
diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
new file mode 100644
index 00000000000000..ae78e477b1e9b6
--- /dev/null
+++ b/blocks/library/quote/index.js
@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlock, query as hpq } from 'api';
+import Editable from 'components/editable';
+
+const { html, query } = hpq;
+
+registerBlock( 'core/quote', {
+	title: wp.i18n.__( 'Quote' ),
+	icon: 'format-quote',
+	category: 'common',
+
+	attributes: {
+		value: ( node ) => query( 'blockquote > p', html() )( node ).join(),
+		citation: html( 'footer' )
+	},
+
+	edit( { attributes, setAttributes } ) {
+		const { value, citation } = attributes;
+
+		return (
+			<blockquote className="blocks-quote">
+				<Editable
+					value={ value }
+					onChange={ ( newValue ) => setAttributes( { value: newValue } ) } />
+				<footer>
+					<Editable
+						value={ citation }
+						onChange={ ( newValue ) => setAttributes( { citation: newValue } ) } />
+				</footer>
+			</blockquote>
+		);
+	},
+
+	save( attributes ) {
+		const { value, citation } = attributes;
+		return (
+			<blockquote>
+				{ value }
+				{ !! citation &&
+					<footer>
+						{ citation }
+					</footer>
+				}
+			</blockquote>
+		);
+	}
+} );
diff --git a/blocks/library/quote/style.scss b/blocks/library/quote/style.scss
new file mode 100644
index 00000000000000..bbf126ca75a4f9
--- /dev/null
+++ b/blocks/library/quote/style.scss
@@ -0,0 +1,24 @@
+.blocks-quote {
+	margin: 0;
+	box-shadow: inset 0px 0px 0px 0px $light-gray-500;
+	transition: all .2s ease;
+	font-size: 20px;
+	border-left: 4px solid $black;
+	padding-left: 1em;
+	font-style: italic;
+
+	footer {
+		color: $dark-gray-100;
+		font-size: 0.9em;
+		font-style: normal;
+		margin-left: 1.3em;
+		position: relative;
+
+		&:after {
+			content: '— ';
+			position: absolute;
+			left: -1.3em;
+			top: 0;
+		}
+	}
+}
diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot
index 5430e7ec22659f..aa60d2221378a1 100644
--- a/languages/gutenberg.pot
+++ b/languages/gutenberg.pot
@@ -38,6 +38,10 @@ msgstr ""
 msgid "Justify"
 msgstr ""
 
+#: blocks/library/quote/index.js:11
+msgid "Quote"
+msgstr ""
+
 #: blocks/library/text/index.js:10
 msgid "Text"
 msgstr ""

From 12db3e9014d87ac4f2d4228131a66c28fcc6ed9b Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 13 Apr 2017 16:22:27 +0100
Subject: [PATCH 2/3] Fix the multi-paragraph issue and the
 dangerouslySetInnerHTML

---
 blocks/library/quote/index.js   | 22 +++++++++++-----------
 blocks/library/quote/style.scss |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
index ae78e477b1e9b6..cb384034c50751 100644
--- a/blocks/library/quote/index.js
+++ b/blocks/library/quote/index.js
@@ -13,7 +13,9 @@ registerBlock( 'core/quote', {
 	category: 'common',
 
 	attributes: {
-		value: ( node ) => query( 'blockquote > p', html() )( node ).join(),
+		value: ( node ) => query( 'blockquote > p', html() )( node )
+			.map( innerHTML => `<p>${ innerHTML }</p>` )
+			.join( '' ),
 		citation: html( 'footer' )
 	},
 
@@ -36,15 +38,13 @@ registerBlock( 'core/quote', {
 
 	save( attributes ) {
 		const { value, citation } = attributes;
-		return (
-			<blockquote>
-				{ value }
-				{ !! citation &&
-					<footer>
-						{ citation }
-					</footer>
-				}
-			</blockquote>
-		);
+		return [
+			'<blockquote>',
+			value,
+			citation
+				? `<footer>${ citation }</footer>`
+				: '',
+			'</blockquote>'
+		].join( '' );
 	}
 } );
diff --git a/blocks/library/quote/style.scss b/blocks/library/quote/style.scss
index bbf126ca75a4f9..78880c2b0d8aa1 100644
--- a/blocks/library/quote/style.scss
+++ b/blocks/library/quote/style.scss
@@ -14,7 +14,7 @@
 		margin-left: 1.3em;
 		position: relative;
 
-		&:after {
+		&:before {
 			content: '— ';
 			position: absolute;
 			left: -1.3em;

From 7cd66af8bcabaf378c7e50835c181290da21d71e Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Thu, 13 Apr 2017 16:46:32 -0400
Subject: [PATCH 3/3] Treat quote value as array of paragraphs

---
 blocks/library/quote/index.js | 46 +++++++++++++++++++++++------------
 languages/gutenberg.pot       |  2 +-
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
index cb384034c50751..cfb71794a55be1 100644
--- a/blocks/library/quote/index.js
+++ b/blocks/library/quote/index.js
@@ -5,7 +5,10 @@ import './style.scss';
 import { registerBlock, query as hpq } from 'api';
 import Editable from 'components/editable';
 
-const { html, query } = hpq;
+const { parse, html, query } = hpq;
+
+const fromValueToParagraphs = ( value ) => value.map( ( paragraph ) => `<p>${ paragraph }</p>` ).join( '' );
+const fromParagraphsToValue = ( paragraphs ) => parse( paragraphs, query( 'p', html() ) );
 
 registerBlock( 'core/quote', {
 	title: wp.i18n.__( 'Quote' ),
@@ -13,9 +16,7 @@ registerBlock( 'core/quote', {
 	category: 'common',
 
 	attributes: {
-		value: ( node ) => query( 'blockquote > p', html() )( node )
-			.map( innerHTML => `<p>${ innerHTML }</p>` )
-			.join( '' ),
+		value: query( 'blockquote > p', html() ),
 		citation: html( 'footer' )
 	},
 
@@ -25,12 +26,20 @@ registerBlock( 'core/quote', {
 		return (
 			<blockquote className="blocks-quote">
 				<Editable
-					value={ value }
-					onChange={ ( newValue ) => setAttributes( { value: newValue } ) } />
+					value={ fromValueToParagraphs( value ) }
+					onChange={
+						( paragraphs ) => setAttributes( {
+							value: fromParagraphsToValue( paragraphs )
+						} )
+					} />
 				<footer>
 					<Editable
 						value={ citation }
-						onChange={ ( newValue ) => setAttributes( { citation: newValue } ) } />
+						onChange={
+							( newValue ) => setAttributes( {
+								citation: newValue
+							} )
+						} />
 				</footer>
 			</blockquote>
 		);
@@ -38,13 +47,20 @@ registerBlock( 'core/quote', {
 
 	save( attributes ) {
 		const { value, citation } = attributes;
-		return [
-			'<blockquote>',
-			value,
-			citation
-				? `<footer>${ citation }</footer>`
-				: '',
-			'</blockquote>'
-		].join( '' );
+
+		return (
+			<blockquote>
+				{ value.map( ( paragraph, i ) => (
+					<p
+						key={ i }
+						dangerouslySetInnerHTML={ {
+							__html: paragraph
+						} } />
+				) ) }
+				<footer dangerouslySetInnerHTML={ {
+					__html: citation
+				} } />
+			</blockquote>
+		);
 	}
 } );
diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot
index aa60d2221378a1..5a6dce40b5ee78 100644
--- a/languages/gutenberg.pot
+++ b/languages/gutenberg.pot
@@ -38,7 +38,7 @@ msgstr ""
 msgid "Justify"
 msgstr ""
 
-#: blocks/library/quote/index.js:11
+#: blocks/library/quote/index.js:14
 msgid "Quote"
 msgstr ""