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 ( + + ); + }, + }, +]; + +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 ( ); 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 @@ + +
A verse
And more!
+ 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 verse
And more!", + "textAlign": "left" + }, + "innerBlocks": [], + "originalContent": "
A verse
And more!
" + } +] 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
A verse
And more!
\n", + "innerContent": [ + "\n
A verse
And more!
\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 @@ + +
A verse
And more!
+