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

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))

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;
 }
 

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;

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 }
 			/>
 		</>

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,
 };

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 }
 		/>
 	);

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 -->

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>"
+    }
+]

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"
+        ]
+    }
+]

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 -->