Block library: Refactor Heading block to use class names for text ali…

…gn (#16035)

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

* Fix Heading icon in the collapsed mode

* Add missing label for the level dropdown menu

* Block library: Revert attribute name change for text align

* Remove code which moves text alignment control to the block toolbar

packages/block-library/src/heading/deprecated.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	getColorClassName,
+	RichText,
+} from '@wordpress/block-editor';
+
+const blockSupports = {
+	className: false,
+	anchor: true,
+};
+
+const blockAttributes = {
+	align: {
+		type: 'string',
+	},
+	content: {
+		type: 'string',
+		source: 'html',
+		selector: 'h1,h2,h3,h4,h5,h6',
+		default: '',
+	},
+	level: {
+		type: 'number',
+		default: 2,
+	},
+	placeholder: {
+		type: 'string',
+	},
+	textColor: {
+		type: 'string',
+	},
+	customTextColor: {
+		type: 'string',
+	},
+};
+
+const deprecated = [
+	{
+		supports: blockSupports,
+		attributes: blockAttributes,
+		save( { attributes } ) {
+			const {
+				align,
+				level,
+				content,
+				textColor,
+				customTextColor,
+			} = attributes;
+			const tagName = 'h' + level;
+
+			const textClass = getColorClassName( 'color', textColor );
+
+			const className = classnames( {
+				[ textClass ]: textClass,
+			} );
+
+			return (
+				<RichText.Content
+					className={ className ? className : undefined }
+					tagName={ tagName }
+					style={ {
+						textAlign: align,
+						color: textClass ? undefined : customTextColor,
+					} }
+					value={ content }
+				/>
+			);
+		},
+	},
+];
+
+export default deprecated;

packages/block-library/src/heading/edit.js

@@ -100,13 +100,13 @@ function HeadingEdit( {
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
 				className={ classnames( className, {
+					[ `has-text-align-${ align }` ]: align,
 					'has-text-color': textColor.color,
 					[ textColor.class ]: textColor.class,
 				} ) }
 				placeholder={ placeholder || __( 'Write heading…' ) }
 				style={ {
 					color: textColor.color,
-					textAlign: align,
 				} }
 			/>
 		</>

packages/block-library/src/heading/index.js

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -25,6 +26,7 @@ export const settings = {
 		anchor: true,
 	},
 	transforms,
+	deprecated,
 	merge( attributes, attributesToMerge ) {
 		return {
 			content: ( attributes.content || '' ) + ( attributesToMerge.content || '' ),

packages/block-library/src/heading/save.js

@@ -14,25 +14,25 @@ import {
 export default function save( { attributes } ) {
 	const {
 		align,
-		level,
 		content,
-		textColor,
 		customTextColor,
+		level,
+		textColor,
 	} = attributes;
 	const tagName = 'h' + level;
 
 	const textClass = getColorClassName( 'color', textColor );
 
 	const className = classnames( {
 		[ textClass ]: textClass,
+		[ `has-text-align-${ align }` ]: align,
 	} );
 
 	return (
 		<RichText.Content
 			className={ className ? className : undefined }
 			tagName={ tagName }
 			style={ {
-				textAlign: align,
 				color: textClass ? undefined : customTextColor,
 			} }
 			value={ content }

packages/block-library/src/style.scss

@@ -147,6 +147,18 @@
 	font-size: 42px;
 }
 
+// Text alignments.
+.has-text-align-center {
+	text-align: center;
+}
+
+.has-text-align-left {
+	text-align: left;
+}
+
+.has-text-align-right {
+	text-align: right;
+}
 
 /**
  * Vanilla Block Styles

packages/e2e-tests/fixtures/block-transforms.js

@@ -168,7 +168,7 @@ export const EXPECTED_TRANSFORMS = {
 		originalBlock: 'Group',
 		availableTransforms: [],
 	},
-	'core__heading__h2-em': {
+	'core__heading__h4-em': {
 		originalBlock: 'Heading',
 		availableTransforms: [
 			'Quote',

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.html

@@ -0,0 +1,3 @@
+<!-- wp:core/heading {"align":"right","level":3} -->
+<h3 style="text-align:right">A picture is worth a thousand words, or so the saying goes</h3>
+<!-- /wp:core/heading -->

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.json

@@ -0,0 +1,14 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/heading",
+        "isValid": true,
+        "attributes": {
+            "align": "right",
+            "content": "A picture is worth a thousand words, or so the saying goes",
+            "level": 3
+        },
+        "innerBlocks": [],
+        "originalContent": "<h3 style=\"text-align:right\">A picture is worth a thousand words, or so the saying goes</h3>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.parsed.json

@@ -0,0 +1,23 @@
+[
+    {
+        "blockName": "core/heading",
+        "attrs": {
+            "align": "right",
+            "level": 3
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<h3 style=\"text-align:right\">A picture is worth a thousand words, or so the saying goes</h3>\n",
+        "innerContent": [
+            "\n<h3 style=\"text-align:right\">A picture is worth a thousand words, or so the saying goes</h3>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:heading {"align":"right","level":3} -->
+<h3 class="has-text-align-right">A picture is worth a thousand words, or so the saying goes</h3>
+<!-- /wp:heading -->

packages/e2e-tests/fixtures/blocks/core__heading__h4-em.html

@@ -0,0 +1,3 @@
+<!-- wp:core/heading {"level":4} -->
+<h4>The <em>Inserter</em> Tool</h4>
+<!-- /wp:core/heading -->

packages/e2e-tests/fixtures/blocks/core__heading__h2-em.json → packages/e2e-tests/fixtures/blocks/core__heading__h4-em.json

@@ -5,9 +5,9 @@
         "isValid": true,
         "attributes": {
             "content": "The <em>Inserter</em> Tool",
-            "level": 2
+            "level": 4
         },
         "innerBlocks": [],
-        "originalContent": "<h2>The <em>Inserter</em> Tool</h2>"
+        "originalContent": "<h4>The <em>Inserter</em> Tool</h4>"
     }
 ]

packages/e2e-tests/fixtures/blocks/core__heading__h2-em.parsed.json → packages/e2e-tests/fixtures/blocks/core__heading__h4-em.parsed.json

@@ -1,11 +1,13 @@
 [
     {
         "blockName": "core/heading",
-        "attrs": {},
+        "attrs": {
+            "level": 4
+        },
         "innerBlocks": [],
-        "innerHTML": "\n<h2>The <em>Inserter</em> Tool</h2>\n",
+        "innerHTML": "\n<h4>The <em>Inserter</em> Tool</h4>\n",
         "innerContent": [
-            "\n<h2>The <em>Inserter</em> Tool</h2>\n"
+            "\n<h4>The <em>Inserter</em> Tool</h4>\n"
         ]
     },
     {

packages/e2e-tests/fixtures/blocks/core__heading__h4-em.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:heading {"level":4} -->
+<h4>The <em>Inserter</em> Tool</h4>
+<!-- /wp:heading -->

packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap

@@ -64,13 +64,13 @@ exports[`Block transforms correctly transform block Heading in fixture core__hea
 <!-- /wp:quote -->"
 `;
 
-exports[`Block transforms correctly transform block Heading in fixture core__heading__h2-em into the Paragraph block 1`] = `
+exports[`Block transforms correctly transform block Heading in fixture core__heading__h4-em into the Paragraph block 1`] = `
 "<!-- wp:paragraph -->
 <p>The <em>Inserter</em> Tool</p>
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Block transforms correctly transform block Heading in fixture core__heading__h2-em into the Quote block 1`] = `
+exports[`Block transforms correctly transform block Heading in fixture core__heading__h4-em into the Quote block 1`] = `
 "<!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><p>The <em>Inserter</em> Tool</p></blockquote>
 <!-- /wp:quote -->"