From da1ad4f7e97039a5aba9333a8f436f8bd56a160b Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 26 Jul 2019 20:36:21 +0200
Subject: [PATCH] Block library: Refactor Quote block to use class names for
 text align

---
 .../block-library/src/quote/deprecated.js     | 13 +++++++++++
 packages/block-library/src/quote/edit.js      | 12 +++++++++-
 packages/block-library/src/quote/save.js      | 11 +++++++++-
 .../blocks/core__quote__deprecated-2.html     |  6 +++++
 .../blocks/core__quote__deprecated-2.json     | 14 ++++++++++++
 .../core__quote__deprecated-2.parsed.json     | 22 +++++++++++++++++++
 .../core__quote__deprecated-2.serialized.html |  3 +++
 7 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.parsed.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.serialized.html

diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
index 61024ff336aed..5b8637138a2ae 100644
--- a/packages/block-library/src/quote/deprecated.js
+++ b/packages/block-library/src/quote/deprecated.js
@@ -28,6 +28,19 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: blockAttributes,
+		save( { attributes } ) {
+			const { align, value, citation } = attributes;
+
+			return (
+				<blockquote style={ { textAlign: align ? align : null } }>
+					<RichText.Content multiline value={ value } />
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+				</blockquote>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
index 079db78e86493..9210230f2ba02 100644
--- a/packages/block-library/src/quote/edit.js
+++ b/packages/block-library/src/quote/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,6 +12,7 @@ import { BlockQuotation } from '@wordpress/components';
 
 export default function QuoteEdit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
 	const { align, value, citation } = attributes;
+
 	return (
 		<>
 			<BlockControls>
@@ -17,7 +23,11 @@ export default function QuoteEdit( { attributes, setAttributes, isSelected, merg
 					} }
 				/>
 			</BlockControls>
-			<BlockQuotation className={ className } style={ { textAlign: align } }>
+			<BlockQuotation
+				className={ classnames( className, {
+					[ `has-text-align-${ align }` ]: align,
+				} ) }
+			>
 				<RichText
 					identifier="value"
 					multiline
diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
index be0fe834fd764..15d8445d7a740 100644
--- a/packages/block-library/src/quote/save.js
+++ b/packages/block-library/src/quote/save.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,8 +11,12 @@ import { RichText } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { align, value, citation } = attributes;
 
+	const className = classnames( {
+		[ `has-text-align-${ align }` ]: align,
+	} );
+
 	return (
-		<blockquote style={ { textAlign: align ? align : null } }>
+		<blockquote className={ className }>
 			<RichText.Content multiline value={ value } />
 			{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 		</blockquote>
diff --git a/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.html b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.html
new file mode 100644
index 0000000000000..1aa27ba31ca7e
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.html
@@ -0,0 +1,6 @@
+<!-- wp:core/quote {"align":"right"} -->
+<blockquote style="text-align:right" class="wp-block-quote">
+	<p>Testing deprecated quote block...</p>
+	<cite>...with a caption</cite>
+</blockquote>
+<!-- /wp:core/quote -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.json
new file mode 100644
index 0000000000000..7270825d5ea7e
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.json
@@ -0,0 +1,14 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/quote",
+        "isValid": true,
+        "attributes": {
+            "value": "<p>Testing deprecated quote block...</p>",
+            "citation": "...with a caption",
+            "align": "right"
+        },
+        "innerBlocks": [],
+        "originalContent": "<blockquote style=\"text-align:right\" class=\"wp-block-quote\">\n\t<p>Testing deprecated quote block...</p>\n\t<cite>...with a caption</cite>\n</blockquote>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.parsed.json b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.parsed.json
new file mode 100644
index 0000000000000..37bd661148aca
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.parsed.json
@@ -0,0 +1,22 @@
+[
+    {
+        "blockName": "core/quote",
+        "attrs": {
+            "align": "right"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<blockquote style=\"text-align:right\" class=\"wp-block-quote\">\n\t<p>Testing deprecated quote block...</p>\n\t<cite>...with a caption</cite>\n</blockquote>\n",
+        "innerContent": [
+            "\n<blockquote style=\"text-align:right\" class=\"wp-block-quote\">\n\t<p>Testing deprecated quote block...</p>\n\t<cite>...with a caption</cite>\n</blockquote>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.serialized.html
new file mode 100644
index 0000000000000..08271ab418b33
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__quote__deprecated-2.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:quote {"align":"right"} -->
+<blockquote class="wp-block-quote has-text-align-right"><p>Testing deprecated quote block...</p><cite>...with a caption</cite></blockquote>
+<!-- /wp:quote -->