diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index e1dd4b78dbb6e..50bf37cdaefa5 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -3,7 +3,7 @@
"name": "core/heading",
"category": "text",
"attributes": {
- "align": {
+ "textAlign": {
"type": "string"
},
"content": {
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index 7a43fc9d5b868..c4e456085b433 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -7,7 +7,11 @@ import { omit } from 'lodash';
/**
* WordPress dependencies
*/
-import { getColorClassName, RichText } from '@wordpress/block-editor';
+import {
+ getColorClassName,
+ RichText,
+ useBlockProps,
+} from '@wordpress/block-editor';
const blockSupports = {
className: false,
@@ -48,7 +52,52 @@ const migrateCustomColors = ( attributes ) => {
};
};
+const TEXT_ALIGN_OPTIONS = [ 'left', 'right', 'center' ];
+
+const migrateTextAlign = ( attributes ) => {
+ const { align, ...rest } = attributes;
+ return TEXT_ALIGN_OPTIONS.includes( align )
+ ? { ...rest, textAlign: align }
+ : attributes;
+};
+
const deprecated = [
+ {
+ supports: {
+ align: [ 'wide', 'full' ],
+ anchor: true,
+ className: false,
+ color: { link: true },
+ fontSize: true,
+ lineHeight: true,
+ __experimentalSelector: {
+ 'core/heading/h1': 'h1',
+ 'core/heading/h2': 'h2',
+ 'core/heading/h3': 'h3',
+ 'core/heading/h4': 'h4',
+ 'core/heading/h5': 'h5',
+ 'core/heading/h6': 'h6',
+ },
+ __unstablePasteTextInline: true,
+ },
+ attributes: blockAttributes,
+ isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+ migrate: migrateTextAlign,
+ save( { attributes } ) {
+ const { align, content, level } = attributes;
+ const TagName = 'h' + level;
+
+ const className = classnames( {
+ [ `has-text-align-${ align }` ]: align,
+ } );
+
+ return (
+
+
+
+ );
+ },
+ },
{
supports: blockSupports,
attributes: {
@@ -60,7 +109,8 @@ const deprecated = [
type: 'string',
},
},
- migrate: migrateCustomColors,
+ migrate: ( attributes ) =>
+ migrateCustomColors( migrateTextAlign( attributes ) ),
save( { attributes } ) {
const {
align,
@@ -101,7 +151,8 @@ const deprecated = [
type: 'string',
},
},
- migrate: migrateCustomColors,
+ migrate: ( attributes ) =>
+ migrateCustomColors( migrateTextAlign( attributes ) ),
save( { attributes } ) {
const {
align,
@@ -143,7 +194,8 @@ const deprecated = [
type: 'string',
},
},
- migrate: migrateCustomColors,
+ migrate: ( attributes ) =>
+ migrateCustomColors( migrateTextAlign( attributes ) ),
save( { attributes } ) {
const {
align,
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index b40f5333da87c..ed15802b0bb49 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -28,11 +28,11 @@ function HeadingEdit( {
onReplace,
mergedStyle,
} ) {
- const { align, content, level, placeholder } = attributes;
+ const { textAlign, content, level, placeholder } = attributes;
const tagName = 'h' + level;
const blockProps = useBlockProps( {
className: classnames( {
- [ `has-text-align-${ align }` ]: align,
+ [ `has-text-align-${ textAlign }` ]: textAlign,
} ),
style: mergedStyle,
} );
@@ -49,9 +49,9 @@ function HeadingEdit( {
/>
{
- setAttributes( { align: nextAlign } );
+ setAttributes( { textAlign: nextAlign } );
} }
/>
@@ -74,7 +74,7 @@ function HeadingEdit( {
onReplace={ onReplace }
onRemove={ () => onReplace( [] ) }
placeholder={ placeholder || __( 'Write heading…' ) }
- textAlign={ align }
+ textAlign={ textAlign }
{ ...blockProps }
/>
>
diff --git a/packages/block-library/src/heading/save.js b/packages/block-library/src/heading/save.js
index e2eae91f823eb..181f40234444e 100644
--- a/packages/block-library/src/heading/save.js
+++ b/packages/block-library/src/heading/save.js
@@ -9,11 +9,11 @@ import classnames from 'classnames';
import { RichText, useBlockProps } from '@wordpress/block-editor';
export default function save( { attributes } ) {
- const { align, content, level } = attributes;
+ const { textAlign, content, level } = attributes;
const TagName = 'h' + level;
const className = classnames( {
- [ `has-text-align-${ align }` ]: align,
+ [ `has-text-align-${ textAlign }` ]: textAlign,
} );
return (
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.json b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.json
index 0553075b8e24d..183cd4991f1d5 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.json
@@ -4,9 +4,9 @@
"name": "core/heading",
"isValid": true,
"attributes": {
- "align": "right",
"content": "A picture is worth a thousand words, or so the saying goes",
- "level": 3
+ "level": 3,
+ "textAlign": "right"
},
"innerBlocks": [],
"originalContent": "A picture is worth a thousand words, or so the saying goes
"
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.serialized.html
index 140a1929ad38c..0a2f890302c3f 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
-
+
A picture is worth a thousand words, or so the saying goes
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.html b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.html
new file mode 100644
index 0000000000000..a58b0045187c1
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.html
@@ -0,0 +1,4 @@
+
+Text
+
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.json b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.json
new file mode 100644
index 0000000000000..753db35b015b0
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.json
@@ -0,0 +1,15 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "core/heading",
+ "isValid": true,
+ "attributes": {
+ "content": "Text",
+ "level": 2,
+ "textColor": "accent",
+ "textAlign": "center"
+ },
+ "innerBlocks": [],
+ "originalContent": "Text
"
+ }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.parsed.json b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.parsed.json
new file mode 100644
index 0000000000000..4b21d1abf7244
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.parsed.json
@@ -0,0 +1,23 @@
+[
+ {
+ "blockName": "core/heading",
+ "attrs": {
+ "textColor": "accent",
+ "align": "center"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\nText
\n",
+ "innerContent": [
+ "\nText
\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.serialized.html
new file mode 100644
index 0000000000000..2e4f98cda15ff
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.serialized.html
@@ -0,0 +1,3 @@
+
+Text
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.html b/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.html
new file mode 100644
index 0000000000000..26c8041d1b97a
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.html
@@ -0,0 +1,3 @@
+
+Text
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.json b/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.json
new file mode 100644
index 0000000000000..9abe919872986
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.json
@@ -0,0 +1,15 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "core/heading",
+ "isValid": true,
+ "attributes": {
+ "textAlign": "center",
+ "content": "Text",
+ "level": 2,
+ "align": "wide"
+ },
+ "innerBlocks": [],
+ "originalContent": "Text
"
+ }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.parsed.json b/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.parsed.json
new file mode 100644
index 0000000000000..1fda665f95783
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.parsed.json
@@ -0,0 +1,23 @@
+[
+ {
+ "blockName": "core/heading",
+ "attrs": {
+ "textAlign": "center",
+ "align": "wide"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\nText
\n",
+ "innerContent": [
+ "\nText
\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n",
+ "innerContent": [
+ "\n"
+ ]
+ }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.serialized.html
new file mode 100644
index 0000000000000..26c8041d1b97a
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.serialized.html
@@ -0,0 +1,3 @@
+
+Text
+