From 6b03b9ab23c2357fcde9207f53042675ac6802d6 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 26 Jul 2019 19:49:15 +0200
Subject: [PATCH] Block library: Refactor Verse block to use class names for
 text align

---
 packages/block-library/CHANGELOG.md           |  5 +++
 packages/block-library/src/style.scss         |  2 ++
 .../block-library/src/verse/deprecated.js     | 35 +++++++++++++++++++
 packages/block-library/src/verse/edit.js      |  9 ++++-
 packages/block-library/src/verse/index.js     |  6 ++--
 packages/block-library/src/verse/save.js      | 11 +++++-
 .../blocks/core__verse__deprecated.html       |  3 ++
 .../blocks/core__verse__deprecated.json       | 13 +++++++
 .../core__verse__deprecated.parsed.json       | 22 ++++++++++++
 .../core__verse__deprecated.serialized.html   |  3 ++
 10 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 packages/block-library/src/verse/deprecated.js
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__verse__deprecated.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__verse__deprecated.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__verse__deprecated.parsed.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__verse__deprecated.serialized.html

diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index e61bddfbbf2de0..78e90241d1869a 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -1,5 +1,10 @@
 ## Master (unreleased)
 
+### Enhancements
+
+- Heading block uses `has-text-align-*` class names rather than inline style for text alignment.
+- Verse block uses `has-text-align-*` class names rather than inline style for text alignment.
+
 ### Bug Fixes
 
 - Fixed insertion of columns in the table block, which now inserts columns for all table sections ([#16410](https://github.com/WordPress/gutenberg/pull/16410))
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index f9a2909ff360a8..540fd4cd99ec51 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -153,10 +153,12 @@
 }
 
 .has-text-align-left {
+	/*rtl:ignore*/
 	text-align: left;
 }
 
 .has-text-align-right {
+	/*rtl:ignore*/
 	text-align: right;
 }
 
diff --git a/packages/block-library/src/verse/deprecated.js b/packages/block-library/src/verse/deprecated.js
new file mode 100644
index 00000000000000..f26ac103c226b6
--- /dev/null
+++ b/packages/block-library/src/verse/deprecated.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+const blockAttributes = {
+	content: {
+		type: 'string',
+		source: 'html',
+		selector: 'pre',
+		default: '',
+	},
+	textAlign: {
+		type: 'string',
+	},
+};
+
+const deprecated = [
+	{
+		attributes: blockAttributes,
+		save( { attributes } ) {
+			const { textAlign, content } = attributes;
+
+			return (
+				<RichText.Content
+					tagName="pre"
+					style={ { textAlign } }
+					value={ content }
+				/>
+			);
+		},
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js
index edb17517d5f093..ff0beac6622fc1 100644
--- a/packages/block-library/src/verse/edit.js
+++ b/packages/block-library/src/verse/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -29,9 +34,11 @@ export default function VerseEdit( { attributes, setAttributes, className, merge
 						content: nextContent,
 					} );
 				} }
-				style={ { textAlign } }
 				placeholder={ __( 'Write…' ) }
 				wrapperClassName={ className }
+				className={ classnames( {
+					[ `has-text-align-${ textAlign }` ]: textAlign,
+				} ) }
 				onMerge={ mergeBlocks }
 			/>
 		</>
diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js
index 5752f15efb7d20..ffabff1dba480a 100644
--- a/packages/block-library/src/verse/index.js
+++ b/packages/block-library/src/verse/index.js
@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
@@ -22,11 +23,12 @@ export const settings = {
 	icon,
 	keywords: [ __( 'poetry' ) ],
 	transforms,
-	edit,
-	save,
+	deprecated,
 	merge( attributes, attributesToMerge ) {
 		return {
 			content: attributes.content + attributesToMerge.content,
 		};
 	},
+	edit,
+	save,
 };
diff --git a/packages/block-library/src/verse/save.js b/packages/block-library/src/verse/save.js
index ea9de0abcc8f0c..59bb8557462699 100644
--- a/packages/block-library/src/verse/save.js
+++ b/packages/block-library/src/verse/save.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,10 +11,14 @@ import { RichText } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { textAlign, content } = attributes;
 
+	const className = classnames( {
+		[ `has-text-align-${ textAlign }` ]: textAlign,
+	} );
+
 	return (
 		<RichText.Content
 			tagName="pre"
-			style={ { textAlign } }
+			className={ className }
 			value={ content }
 		/>
 	);
diff --git a/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.html b/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.html
new file mode 100644
index 00000000000000..65fd8787b921c7
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.html
@@ -0,0 +1,3 @@
+<!-- wp:verse {"textAlign":"left"} -->
+<pre style="text-align:left" class="wp-block-verse">A <em>verse</em>…<br>And more!</pre>
+<!-- /wp:core/verse -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.json
new file mode 100644
index 00000000000000..002e26a7da88b9
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.json
@@ -0,0 +1,13 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/verse",
+        "isValid": true,
+        "attributes": {
+            "content": "A <em>verse</em>…<br>And more!",
+            "textAlign": "left"
+        },
+        "innerBlocks": [],
+        "originalContent": "<pre style=\"text-align:left\" class=\"wp-block-verse\">A <em>verse</em>…<br>And more!</pre>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.parsed.json b/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.parsed.json
new file mode 100644
index 00000000000000..2e703ee0d855ea
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.parsed.json
@@ -0,0 +1,22 @@
+[
+    {
+        "blockName": "core/verse",
+        "attrs": {
+            "textAlign": "left"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<pre style=\"text-align:left\" class=\"wp-block-verse\">A <em>verse</em>…<br>And more!</pre>\n",
+        "innerContent": [
+            "\n<pre style=\"text-align:left\" class=\"wp-block-verse\">A <em>verse</em>…<br>And more!</pre>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.serialized.html
new file mode 100644
index 00000000000000..a1075252bbc83c
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__verse__deprecated.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:verse {"textAlign":"left"} -->
+<pre class="wp-block-verse has-text-align-left">A <em>verse</em>…<br>And more!</pre>
+<!-- /wp:verse -->