From 509c9cb18beb140f4e6ec6e87aad2986650cc833 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?=
 <grzegorz@gziolo.pl>
Date: Thu, 8 Aug 2019 14:49:25 +0200
Subject: [PATCH] Block library: Refactor Quote block to use class names for
 text align (#16779)

* Block library: Refactor Quote block to use class names for text align

* Refactor CSS theme styles to use new text align classes
---
 .../block-library/src/quote/deprecated.js     | 13 +++++++++++
 packages/block-library/src/quote/edit.js      | 12 +++++++++-
 packages/block-library/src/quote/save.js      | 11 +++++++++-
 packages/block-library/src/quote/theme.scss   |  8 +++----
 .../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 +++
 8 files changed, 83 insertions(+), 6 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 61024ff336aed1..5b8637138a2ae8 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 079db78e86493e..9210230f2ba02b 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 be0fe834fd7647..15d8445d7a740a 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/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index c3b684b8e2b159..fe3d90cd6a2567 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -13,16 +13,16 @@
 		font-style: normal;
 	}
 
-	&[style*="text-align:right"],
-	&[style*="text-align: right"] {
+	&.has-text-align-right,
+	&.has-text-align-right {
 		border-left: none;
 		border-right: 4px solid $black;
 		padding-left: 0;
 		padding-right: 1em;
 	}
 
-	&[style*="text-align:center"],
-	&[style*="text-align: center"] {
+	&.has-text-align-center,
+	&.has-text-align-center {
 		border: none;
 		padding-left: 0;
 	}
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 00000000000000..1aa27ba31ca7ef
--- /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 00000000000000..7270825d5ea7ec
--- /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 00000000000000..37bd661148acaa
--- /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 00000000000000..08271ab418b33b
--- /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 -->