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": "\n

Text

\n", + "innerContent": [ + "\n

Text

\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": "\n

Text

\n", + "innerContent": [ + "\n

Text

\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

+