From 4091d649d005f1b5967a3993e0229abba6906fcb Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 3 Mar 2024 17:57:56 +0900 Subject: [PATCH 01/26] Try: Add new `textAlign` block support --- packages/block-editor/src/hooks/index.js | 4 + packages/block-editor/src/hooks/text-align.js | 198 ++++++++++++++++++ packages/block-library/src/common.scss | 4 + 3 files changed, 206 insertions(+) create mode 100644 packages/block-editor/src/hooks/text-align.js diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 36efe3dcf409b5..16a8d796a90cc4 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -8,6 +8,7 @@ import { } from './utils'; import './compat'; import align from './align'; +import textAlign from './text-align'; import './lock'; import anchor from './anchor'; import ariaLabel from './aria-label'; @@ -33,6 +34,7 @@ import './use-bindings-attributes'; createBlockEditFilter( [ align, + textAlign, anchor, customClassName, style, @@ -47,6 +49,7 @@ createBlockEditFilter( ); createBlockListBlockFilter( [ align, + textAlign, style, color, dimensions, @@ -59,6 +62,7 @@ createBlockListBlockFilter( [ ] ); createBlockSaveFilter( [ align, + textAlign, anchor, ariaLabel, customClassName, diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js new file mode 100644 index 00000000000000..88f57c83462d31 --- /dev/null +++ b/packages/block-editor/src/hooks/text-align.js @@ -0,0 +1,198 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { addFilter } from '@wordpress/hooks'; +import { + getBlockSupport, + getBlockType, + hasBlockSupport, +} from '@wordpress/blocks'; +import { + alignLeft, + alignRight, + alignCenter, + alignJustify, +} from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import { AlignmentControl, BlockControls } from '../components'; +import { useBlockEditingMode } from '../components/block-editing-mode'; + +const TEXT_ALIGNMENT_OPTIONS = [ + { + icon: alignLeft, + title: __( 'Align text left' ), + align: 'left', + }, + { + icon: alignCenter, + title: __( 'Align text center' ), + align: 'center', + }, + { + icon: alignRight, + title: __( 'Align text right' ), + align: 'right', + }, + { + icon: alignJustify, + title: __( 'Justify text' ), + align: 'justify', + }, +]; + +const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right', 'justify' ]; + +/** + * Returns the valid text alignments. + * Takes into consideration the text aligns supported by a block. + * Exported just for testing purposes, not exported outside the module. + * + * @param {?boolean|string[]} blockTextAlign Text aligns supported by the block. + * + * @return {string[]} Valid text alignments. + */ +export function getValidTextAlignments( blockTextAlign ) { + let validTextAlignments; + if ( Array.isArray( blockTextAlign ) ) { + validTextAlignments = VALID_TEXT_ALIGNMENTS.filter( ( textAlign ) => + blockTextAlign.includes( textAlign ) + ); + } else if ( blockTextAlign === true ) { + // `true` includes all alignments... + validTextAlignments = [ ...VALID_TEXT_ALIGNMENTS ]; + } else { + validTextAlignments = []; + } + + return validTextAlignments; +} + +/** + * Filters registered block settings, extending attributes to include `textAlign`. + * + * @param {Object} settings Original block settings. + * + * @return {Object} Filtered block settings. + */ +export function addAttribute( settings ) { + // Allow blocks to specify their own attribute definition with default values if needed. + if ( 'type' in ( settings.attributes?.textAlign ?? {} ) ) { + return settings; + } + if ( hasBlockSupport( settings, 'textAlign' ) ) { + // Gracefully handle if settings.attributes is undefined. + settings.attributes = { + ...settings.attributes, + textAlign: { + type: 'string', + // Allow for '' since it is used by the `updateTextAlignment` function + // in toolbar controls for special cases with defined default values. + enum: [ ...VALID_TEXT_ALIGNMENTS, '' ], + }, + }; + } + + return settings; +} + +function BlockEditTextAlignmentToolbarControlsPure( { + name: blockName, + textAlign, + setAttributes, +} ) { + const validTextAlignments = getValidTextAlignments( + getBlockSupport( blockName, 'textAlign' ) + ); + const blockEditingMode = useBlockEditingMode(); + if ( ! validTextAlignments.length || blockEditingMode !== 'default' ) { + return null; + } + + const textAlignmentControls = TEXT_ALIGNMENT_OPTIONS.filter( ( control ) => + validTextAlignments.includes( control.align ) + ); + + const updateTextAlignment = ( nextTextAlign ) => { + if ( ! nextTextAlign ) { + const blockType = getBlockType( blockName ); + const blockDefaultTextAlign = + blockType?.attributes?.textAlign?.default; + if ( blockDefaultTextAlign ) { + nextTextAlign = ''; + } + } + setAttributes( { textAlign: nextTextAlign } ); + }; + + return ( + + + + ); +} + +export default { + edit: BlockEditTextAlignmentToolbarControlsPure, + useBlockProps, + addSaveProps: addAssignedTextAlign, + attributeKeys: [ 'textAlign' ], + hasSupport( name ) { + return hasBlockSupport( name, 'textAlign', false ); + }, +}; + +function useBlockProps( { name, textAlign } ) { + const validTextAlignments = getValidTextAlignments( + getBlockSupport( name, 'textAlign' ) + ); + if ( ! validTextAlignments.length ) { + return null; + } + const className = classnames( { + [ `has-text-align-${ textAlign }` ]: textAlign, + } ); + return { className }; +} + +/** + * Override props assigned to save component to inject text alignment class + * name if block supports it. + * + * @param {Object} props Additional props applied to save element. + * @param {Object} blockType Block type. + * @param {Object} attributes Block attributes. + * + * @return {Object} Filtered props applied to save element. + */ +export function addAssignedTextAlign( props, blockType, attributes ) { + const { textAlign } = attributes; + const blockTextAlign = getBlockSupport( blockType, 'textAlign' ); + const isTextAlignValid = + getValidTextAlignments( blockTextAlign ).includes( textAlign ); + if ( isTextAlignValid ) { + props.className = classnames( + `has-text-align-${ textAlign }`, + props.className + ); + } + return props; +} + +addFilter( + 'blocks.registerBlockType', + 'core/editor/align/addAttribute', + addAttribute +); diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index 2e1c2b8b706bce..d809321af5254b 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -46,6 +46,10 @@ text-align: right; } +.has-text-align-justify { + text-align: justify; +} + // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. #end-resizable-editor-section { display: none; From a6818b5d737d6406057dc01080875208a4c21984 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 5 Mar 2024 12:47:49 +0900 Subject: [PATCH 02/26] Remove `justify` option --- packages/block-editor/src/hooks/text-align.js | 14 ++------------ packages/block-library/src/common.scss | 4 ---- 2 files changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js index 88f57c83462d31..3823f13408e963 100644 --- a/packages/block-editor/src/hooks/text-align.js +++ b/packages/block-editor/src/hooks/text-align.js @@ -13,12 +13,7 @@ import { getBlockType, hasBlockSupport, } from '@wordpress/blocks'; -import { - alignLeft, - alignRight, - alignCenter, - alignJustify, -} from '@wordpress/icons'; +import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; /** * Internal dependencies @@ -42,14 +37,9 @@ const TEXT_ALIGNMENT_OPTIONS = [ title: __( 'Align text right' ), align: 'right', }, - { - icon: alignJustify, - title: __( 'Justify text' ), - align: 'justify', - }, ]; -const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right', 'justify' ]; +const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right' ]; /** * Returns the valid text alignments. diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index d809321af5254b..2e1c2b8b706bce 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -46,10 +46,6 @@ text-align: right; } -.has-text-align-justify { - text-align: justify; -} - // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. #end-resizable-editor-section { display: none; From 7303bd1c426381ffbd30df84d3e7ed4500c37884 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 5 Mar 2024 12:54:48 +0900 Subject: [PATCH 03/26] Add unit test --- .../block-editor/src/hooks/test/text-align.js | 131 ++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 packages/block-editor/src/hooks/test/text-align.js diff --git a/packages/block-editor/src/hooks/test/text-align.js b/packages/block-editor/src/hooks/test/text-align.js new file mode 100644 index 00000000000000..86240906450fd1 --- /dev/null +++ b/packages/block-editor/src/hooks/test/text-align.js @@ -0,0 +1,131 @@ +/** + * WordPress dependencies + */ +import { applyFilters } from '@wordpress/hooks'; +import { + getBlockTypes, + registerBlockType, + unregisterBlockType, +} from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { getValidTextAlignments, addAssignedTextAlign } from '../text-align'; + +const noop = () => {}; + +describe( 'textAlign', () => { + const blockSettings = { + save: noop, + category: 'text', + title: 'block title', + edit: ( { children } ) => <>{ children }, + }; + + afterEach( () => { + getBlockTypes().forEach( ( block ) => { + unregisterBlockType( block.name ); + } ); + } ); + + describe( 'addAttribute()', () => { + const filterRegisterBlockType = applyFilters.bind( + null, + 'blocks.registerBlockType' + ); + + it( 'should do nothing if the block settings does not define text align support', () => { + const settings = filterRegisterBlockType( blockSettings ); + + expect( settings.attributes ).toBeUndefined(); + } ); + + it( 'should assign a new text align attribute', () => { + const settings = filterRegisterBlockType( { + ...blockSettings, + supports: { + textAlign: true, + }, + } ); + + expect( settings.attributes ).toHaveProperty( 'textAlign' ); + } ); + } ); + + describe( 'getValidTextAlignments()', () => { + it( 'should return an empty array if block does not define align support', () => { + expect( getValidTextAlignments() ).toEqual( [] ); + } ); + + it( 'should return all custom text aligns set', () => { + expect( getValidTextAlignments( [ 'left', 'right' ] ) ).toEqual( [ + 'left', + 'right', + ] ); + } ); + + it( 'should return all text aligns sorted when provided in the random order', () => { + expect( + getValidTextAlignments( [ 'right', 'center', 'left' ] ) + ).toEqual( [ 'left', 'center', 'right' ] ); + } ); + + it( 'should return all text aligns if block defines text align support as true', () => { + expect( getValidTextAlignments( true ) ).toEqual( [ + 'left', + 'center', + 'right', + ] ); + } ); + + it( 'should remove incorrect text aligns', () => { + expect( + getValidTextAlignments( [ 'left', 'right', 'justify' ] ) + ).toEqual( [ 'left', 'right' ] ); + } ); + } ); + + describe( 'addAssignedTextAlign', () => { + it( 'should do nothing if block does not support text align', () => { + registerBlockType( 'core/foo', blockSettings ); + + const props = addAssignedTextAlign( + { + className: 'foo', + }, + 'core/foo', + { + textAlign: 'center', + } + ); + + expect( props ).toEqual( { + className: 'foo', + } ); + } ); + + it( 'should do add text align classname if block supports text align', () => { + registerBlockType( 'core/foo', { + ...blockSettings, + supports: { + textAlign: true, + }, + } ); + + const props = addAssignedTextAlign( + { + className: 'foo', + }, + 'core/foo', + { + textAlign: 'center', + } + ); + + expect( props ).toEqual( { + className: 'has-text-align-center foo', + } ); + } ); + } ); +} ); From ff07c275ec0cb68731422b555b5fcdfb29c15f3c Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 5 Mar 2024 18:47:06 +0900 Subject: [PATCH 04/26] Move definition from `textAlign` to `typography.textAlign` --- lib/theme.json | 3 ++- packages/block-editor/src/hooks/test/text-align.js | 12 +++++++++--- packages/block-editor/src/hooks/text-align.js | 12 +++++++----- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index 5f261e2c120043..eab533a4d9d7a0 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -266,7 +266,8 @@ "textColumns": false, "textDecoration": true, "textTransform": true, - "writingMode": false + "writingMode": false, + "textAlign": false }, "blocks": { "core/button": { diff --git a/packages/block-editor/src/hooks/test/text-align.js b/packages/block-editor/src/hooks/test/text-align.js index 86240906450fd1..90539e51edbcb6 100644 --- a/packages/block-editor/src/hooks/test/text-align.js +++ b/packages/block-editor/src/hooks/test/text-align.js @@ -45,7 +45,9 @@ describe( 'textAlign', () => { const settings = filterRegisterBlockType( { ...blockSettings, supports: { - textAlign: true, + typography: { + textAlign: true, + }, }, } ); @@ -96,7 +98,9 @@ describe( 'textAlign', () => { }, 'core/foo', { - textAlign: 'center', + typography: { + textAlign: 'center', + }, } ); @@ -109,7 +113,9 @@ describe( 'textAlign', () => { registerBlockType( 'core/foo', { ...blockSettings, supports: { - textAlign: true, + typography: { + textAlign: true, + }, }, } ); diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js index 3823f13408e963..7911815c402d2a 100644 --- a/packages/block-editor/src/hooks/text-align.js +++ b/packages/block-editor/src/hooks/text-align.js @@ -21,6 +21,8 @@ import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; import { AlignmentControl, BlockControls } from '../components'; import { useBlockEditingMode } from '../components/block-editing-mode'; +const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign'; + const TEXT_ALIGNMENT_OPTIONS = [ { icon: alignLeft, @@ -78,7 +80,7 @@ export function addAttribute( settings ) { if ( 'type' in ( settings.attributes?.textAlign ?? {} ) ) { return settings; } - if ( hasBlockSupport( settings, 'textAlign' ) ) { + if ( hasBlockSupport( settings, TEXT_ALIGN_SUPPORT_KEY ) ) { // Gracefully handle if settings.attributes is undefined. settings.attributes = { ...settings.attributes, @@ -100,7 +102,7 @@ function BlockEditTextAlignmentToolbarControlsPure( { setAttributes, } ) { const validTextAlignments = getValidTextAlignments( - getBlockSupport( blockName, 'textAlign' ) + getBlockSupport( blockName, TEXT_ALIGN_SUPPORT_KEY ) ); const blockEditingMode = useBlockEditingMode(); if ( ! validTextAlignments.length || blockEditingMode !== 'default' ) { @@ -140,13 +142,13 @@ export default { addSaveProps: addAssignedTextAlign, attributeKeys: [ 'textAlign' ], hasSupport( name ) { - return hasBlockSupport( name, 'textAlign', false ); + return hasBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY, false ); }, }; function useBlockProps( { name, textAlign } ) { const validTextAlignments = getValidTextAlignments( - getBlockSupport( name, 'textAlign' ) + getBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY ) ); if ( ! validTextAlignments.length ) { return null; @@ -169,7 +171,7 @@ function useBlockProps( { name, textAlign } ) { */ export function addAssignedTextAlign( props, blockType, attributes ) { const { textAlign } = attributes; - const blockTextAlign = getBlockSupport( blockType, 'textAlign' ); + const blockTextAlign = getBlockSupport( blockType, TEXT_ALIGN_SUPPORT_KEY ); const isTextAlignValid = getValidTextAlignments( blockTextAlign ).includes( textAlign ); if ( isTextAlignValid ) { From f68e1f0c6e4ac6f3992deda661e7c5977bffed4d Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 5 Mar 2024 18:59:05 +0900 Subject: [PATCH 05/26] Update documentation --- .../block-api/block-supports.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index d4b23b100984fc..9eba13f3918dc6 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -764,6 +764,7 @@ supports: { - Subproperties: - `fontSize`: type `boolean`, default value `false` - `lineHeight`: type `boolean`, default value `false` + - `textAlign`: type `boolean` or `array`, default value `false` The presence of this object signals that a block supports some typography related properties. When it does, the block editor will show a typography UI allowing the user to control their values. @@ -774,6 +775,8 @@ supports: { fontSize: true, // Enable support and UI control for line-height. lineHeight: true, + // Enable support and UI control for text alignment. + textAlign: true, }, } ``` @@ -853,3 +856,43 @@ attributes: { } } ``` + +### typography.textAlign + +_**Note:** Since WordPress 6.6._ + +- Type: `boolean` or `array` +- Default value: `false` + +This property adds block toolbar controls which allow to change block's text alignment. + +```js +supports: { + typography: { + // Declare support for block's text alignment. + // This adds support for all the options: + // left, center, right. + textAlign: true + } +} +``` + +```js +supports: { + typography: { + // Declare support for specific text alignment options. + textAlign: [ 'left', 'right' ] + } +} +``` + +When the block declares support for `textAlign`, the attributes definition is extended to include a text align attribute with a `string` type. By default, no text alignment is assigned. The block can apply a default text alignment by specifying its own `textAlign` attribute with a default e.g.: + +```js +attributes: { + textAlign: { + type: 'string', + default: 'right' + } +} +``` From 3e676451d6b31aff79e702ee5c6954c835ebed09 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 5 Mar 2024 19:02:36 +0900 Subject: [PATCH 06/26] Update block.json schema --- schemas/json/block.json | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/schemas/json/block.json b/schemas/json/block.json index ca059291340cc4..9245197b70cfe0 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -592,6 +592,23 @@ "type": "boolean", "description": "This value signals that a block supports the line-height CSS style property. When it does, the block editor will show an UI control for the user to set its value if the theme declares support.\n\nWhen the block declares support for lineHeight, its attributes definition is extended to include a new attribute style of object type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own style attribute with a default", "default": false + }, + "textAlign": { + "description": "This property adds block toolbar controls which allow to change block's text alignment.", + "oneOf": [ + { + "type": "boolean" + }, + { + "type": "array", + "items": { + "type": "string", + "enum": [ "left", "center", "right" ] + } + } + ], + "type": "boolean", + "default": false } } }, From 59dc958a13b0837462875daf47c5c817e3c4f6c2 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 5 Mar 2024 19:18:38 +0900 Subject: [PATCH 07/26] Try to fix block.json schema unit test --- schemas/json/block.json | 1 - 1 file changed, 1 deletion(-) diff --git a/schemas/json/block.json b/schemas/json/block.json index 9245197b70cfe0..49723df1de6bed 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -607,7 +607,6 @@ } } ], - "type": "boolean", "default": false } } From ff9a5ea769c896c09a7a6e3e5d46395f05a1c37f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 19 Mar 2024 23:44:23 +0900 Subject: [PATCH 08/26] Add support for dynamic blocks --- lib/block-supports/typography.php | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 8fceda4d5daba0..d6b71ae02e6f60 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -26,6 +26,7 @@ function gutenberg_register_typography_support( $block_type ) { $has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false; $has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false; $has_line_height_support = $typography_supports['lineHeight'] ?? false; + $has_text_align_support = $typography_supports['textAlign'] ?? false; $has_text_columns_support = $typography_supports['textColumns'] ?? false; $has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false; $has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false; @@ -37,6 +38,7 @@ function gutenberg_register_typography_support( $block_type ) { || $has_font_weight_support || $has_letter_spacing_support || $has_line_height_support + || $has_text_align_support || $has_text_columns_support || $has_text_decoration_support || $has_text_transform_support @@ -63,6 +65,12 @@ function gutenberg_register_typography_support( $block_type ) { 'type' => 'string', ); } + + if ( $has_text_align_support && ! array_key_exists( 'textAlign', $block_type->attributes ) ) { + $block_type->attributes['textAlign'] = array( + 'type' => 'array', + ); + } } /** @@ -95,6 +103,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false; $has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false; $has_line_height_support = $typography_supports['lineHeight'] ?? false; + $has_text_align_support = $typography_supports['textAlign'] ?? false; $has_text_columns_support = $typography_supports['textColumns'] ?? false; $has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false; $has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false; @@ -106,6 +115,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $should_skip_font_style = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ); $should_skip_font_weight = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ); $should_skip_line_height = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ); + $should_skip_text_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' ); $should_skip_text_columns = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' ); $should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' ); $should_skip_text_transform = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' ); @@ -227,6 +237,19 @@ function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_ * @return string Filtered block content. */ function gutenberg_render_typography_support( $block_content, $block ) { + // Inject text align class name to the block wrapper. + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); + $has_text_align_support = block_has_support( $block_type, array( 'typography', 'textAlign' ), false ); + $should_skip_text_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' ); + + if ( $has_text_align_support && ! $should_skip_text_align && ! empty( $block_attributes['textAlign'] ) ) { + $content = new WP_HTML_Tag_Processor( $block_content ); + $content->next_tag(); + $content->add_class( 'has-text-align-' . $block_attributes['textAlign'] ); + $block_content = $content->get_updated_html(); + } + if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) { return $block_content; } From 7a2604cd82d62cf2dff87519eefd843d796ff734 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 20 Mar 2024 00:04:29 +0900 Subject: [PATCH 09/26] Add skipSerialization support --- lib/block-supports/typography.php | 14 ++++++++------ packages/block-editor/src/hooks/text-align.js | 19 ++++++++++++++++++- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index d6b71ae02e6f60..8777df0056c840 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -241,13 +241,15 @@ function gutenberg_render_typography_support( $block_content, $block ) { $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); $has_text_align_support = block_has_support( $block_type, array( 'typography', 'textAlign' ), false ); - $should_skip_text_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' ); - if ( $has_text_align_support && ! $should_skip_text_align && ! empty( $block_attributes['textAlign'] ) ) { - $content = new WP_HTML_Tag_Processor( $block_content ); - $content->next_tag(); - $content->add_class( 'has-text-align-' . $block_attributes['textAlign'] ); - $block_content = $content->get_updated_html(); + if ( $has_text_align_support && ! empty( $block_attributes['textAlign'] ) ) { + $should_skip_text_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' ); + if ( ! $should_skip_text_align && ! empty( $block_attributes['textAlign'] ) ) { + $content = new WP_HTML_Tag_Processor( $block_content ); + $content->next_tag(); + $content->add_class( 'has-text-align-' . $block_attributes['textAlign'] ); + $block_content = $content->get_updated_html(); + } } if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) { diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js index 7911815c402d2a..e43aa089e6eb1c 100644 --- a/packages/block-editor/src/hooks/text-align.js +++ b/packages/block-editor/src/hooks/text-align.js @@ -20,6 +20,8 @@ import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; */ import { AlignmentControl, BlockControls } from '../components'; import { useBlockEditingMode } from '../components/block-editing-mode'; +import { shouldSkipSerialization } from './utils'; +import { TYPOGRAPHY_SUPPORT_KEY } from './typography'; const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign'; @@ -150,9 +152,17 @@ function useBlockProps( { name, textAlign } ) { const validTextAlignments = getValidTextAlignments( getBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY ) ); + if ( ! validTextAlignments.length ) { return null; } + + if ( + shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'textAlign' ) + ) { + return null; + } + const className = classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, } ); @@ -174,7 +184,14 @@ export function addAssignedTextAlign( props, blockType, attributes ) { const blockTextAlign = getBlockSupport( blockType, TEXT_ALIGN_SUPPORT_KEY ); const isTextAlignValid = getValidTextAlignments( blockTextAlign ).includes( textAlign ); - if ( isTextAlignValid ) { + if ( + isTextAlignValid && + ! shouldSkipSerialization( + blockType, + TYPOGRAPHY_SUPPORT_KEY, + 'textAlign' + ) + ) { props.className = classnames( `has-text-align-${ textAlign }`, props.className From 3c6333729f09ea59f9facb728a1ac1e947d4c90f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 20 Mar 2024 12:52:19 +0900 Subject: [PATCH 10/26] Fix prop order in lib/theme.json --- lib/theme.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index eab533a4d9d7a0..40c2a6d2aed292 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -263,11 +263,11 @@ "fontWeight": true, "letterSpacing": true, "lineHeight": false, + "textAlign": false, "textColumns": false, "textDecoration": true, "textTransform": true, - "writingMode": false, - "textAlign": false + "writingMode": false }, "blocks": { "core/button": { From f968646a6f93d43d0d57dcaf923994fe0d2b02af Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 20 Mar 2024 12:57:54 +0900 Subject: [PATCH 11/26] Update useTypographyProps hook --- packages/block-editor/src/hooks/use-typography-props.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js index a63f77468c7233..43b6fe160814ed 100644 --- a/packages/block-editor/src/hooks/use-typography-props.js +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -46,8 +46,13 @@ export function getTypographyClassesAndStyles( attributes, settings ) { ? `has-${ kebabCase( attributes.fontFamily ) }-font-family` : ''; + const textAlignClassName = !! attributes?.textAlign + ? `has-text-align-${ attributes.textAlign }` + : ''; + const className = classnames( fontFamilyClassName, + textAlignClassName, getFontSizeClass( attributes?.fontSize ) ); From 28b655d8525867f68b08a85949aa3d8016bf1b92 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 20 Mar 2024 13:13:45 +0900 Subject: [PATCH 12/26] Fix PHPCS errors --- lib/block-supports/typography.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 8777df0056c840..75dba6d89a2e8e 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -103,7 +103,6 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false; $has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false; $has_line_height_support = $typography_supports['lineHeight'] ?? false; - $has_text_align_support = $typography_supports['textAlign'] ?? false; $has_text_columns_support = $typography_supports['textColumns'] ?? false; $has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false; $has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false; @@ -115,7 +114,6 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $should_skip_font_style = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ); $should_skip_font_weight = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ); $should_skip_line_height = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ); - $should_skip_text_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' ); $should_skip_text_columns = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' ); $should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' ); $should_skip_text_transform = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' ); From 7594e2b51b456b9544de973cf0f3d2adcebd1f1f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 20 Mar 2024 13:27:15 +0900 Subject: [PATCH 13/26] Update fixtures --- test/integration/fixtures/blocks/core__comment-edit-link.json | 2 +- .../fixtures/blocks/core__comment-edit-link.serialized.html | 2 +- .../fixtures/blocks/core__comments-pagination-previous.json | 2 +- .../blocks/core__comments-pagination-previous.serialized.html | 2 +- test/integration/fixtures/blocks/core__comments-title.json | 2 +- .../fixtures/blocks/core__comments-title.serialized.html | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.json b/test/integration/fixtures/blocks/core__comment-edit-link.json index 1584c46ac563bb..8c625436e5af48 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.json +++ b/test/integration/fixtures/blocks/core__comment-edit-link.json @@ -4,9 +4,9 @@ "isValid": true, "attributes": { "linkTarget": "_blank", - "backgroundColor": "recommended-color-03", "fontFamily": "system-monospace", "fontSize": "extra-large", + "backgroundColor": "recommended-color-03", "style": { "typography": { "fontStyle": "normal", diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html index 8492ea9b93dab1..7c48b107b2315c 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html +++ b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-pagination-previous.json b/test/integration/fixtures/blocks/core__comments-pagination-previous.json index 302d4a110dc212..91754fdc1bccd2 100644 --- a/test/integration/fixtures/blocks/core__comments-pagination-previous.json +++ b/test/integration/fixtures/blocks/core__comments-pagination-previous.json @@ -3,8 +3,8 @@ "name": "core/comments-pagination-previous", "isValid": true, "attributes": { - "backgroundColor": "foreground", "fontSize": "medium", + "backgroundColor": "foreground", "style": { "typography": { "textTransform": "uppercase" diff --git a/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html index c533cd82b5a4b9..5d9f75e2937226 100644 --- a/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-title.json b/test/integration/fixtures/blocks/core__comments-title.json index bb436b955cd9ca..e485a55de4022b 100644 --- a/test/integration/fixtures/blocks/core__comments-title.json +++ b/test/integration/fixtures/blocks/core__comments-title.json @@ -7,9 +7,9 @@ "showCommentsCount": true, "level": 4, "borderColor": "vivid-red", + "fontSize": "large", "backgroundColor": "primary", "textColor": "background", - "fontSize": "large", "style": { "spacing": { "padding": { diff --git a/test/integration/fixtures/blocks/core__comments-title.serialized.html b/test/integration/fixtures/blocks/core__comments-title.serialized.html index 6507dc669314d4..8b9796e990461e 100644 --- a/test/integration/fixtures/blocks/core__comments-title.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-title.serialized.html @@ -1 +1 @@ - + From 7293e8ae14ab9a47fad53db19a9599cbed3d6995 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 21 Mar 2024 14:40:19 +0900 Subject: [PATCH 14/26] Fix JS hok namespace and attribute definition --- lib/block-supports/typography.php | 3 ++- packages/block-editor/src/hooks/text-align.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 75dba6d89a2e8e..d28f2d59396ffe 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -68,7 +68,8 @@ function gutenberg_register_typography_support( $block_type ) { if ( $has_text_align_support && ! array_key_exists( 'textAlign', $block_type->attributes ) ) { $block_type->attributes['textAlign'] = array( - 'type' => 'array', + 'type' => 'string', + 'enum' => array( 'left', 'center', 'right', '' ), ); } } diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js index e43aa089e6eb1c..a76d2462dc6fd9 100644 --- a/packages/block-editor/src/hooks/text-align.js +++ b/packages/block-editor/src/hooks/text-align.js @@ -202,6 +202,6 @@ export function addAssignedTextAlign( props, blockType, attributes ) { addFilter( 'blocks.registerBlockType', - 'core/editor/align/addAttribute', + 'core/editor/text-align/addAttribute', addAttribute ); From f0838642be90bbcffd3fb201a65405de148e11c0 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 22 Mar 2024 12:59:15 +0900 Subject: [PATCH 15/26] Dont't use HTML_TAG_Processor to apply text-align class --- lib/block-supports/typography.php | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index d28f2d59396ffe..3a81e548d83dc6 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -104,6 +104,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false; $has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false; $has_line_height_support = $typography_supports['lineHeight'] ?? false; + $has_text_align_support = $typography_supports['textAlign'] ?? false; $has_text_columns_support = $typography_supports['textColumns'] ?? false; $has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false; $has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false; @@ -115,6 +116,7 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $should_skip_font_style = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ); $should_skip_font_weight = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ); $should_skip_line_height = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ); + $should_skip_text_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' ); $should_skip_text_columns = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' ); $should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' ); $should_skip_text_transform = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' ); @@ -176,13 +178,22 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } $attributes = array(); + $classnames = array(); $styles = gutenberg_style_engine_get_styles( array( 'typography' => $typography_block_styles ), array( 'convert_vars_to_classnames' => true ) ); if ( ! empty( $styles['classnames'] ) ) { - $attributes['class'] = $styles['classnames']; + $classnames[] = $styles['classnames']; + } + + if ( $has_text_align_support && ! $should_skip_text_align && isset( $block_attributes['textAlign'] ) ) { + $classnames[] = 'has-text-align-' . $block_attributes['textAlign']; + } + + if ( ! empty( $classnames ) ) { + $attributes['class'] = implode( ' ', $classnames ); } if ( ! empty( $styles['css'] ) ) { @@ -236,21 +247,6 @@ function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_ * @return string Filtered block content. */ function gutenberg_render_typography_support( $block_content, $block ) { - // Inject text align class name to the block wrapper. - $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); - $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array(); - $has_text_align_support = block_has_support( $block_type, array( 'typography', 'textAlign' ), false ); - - if ( $has_text_align_support && ! empty( $block_attributes['textAlign'] ) ) { - $should_skip_text_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' ); - if ( ! $should_skip_text_align && ! empty( $block_attributes['textAlign'] ) ) { - $content = new WP_HTML_Tag_Processor( $block_content ); - $content->next_tag(); - $content->add_class( 'has-text-align-' . $block_attributes['textAlign'] ); - $block_content = $content->get_updated_html(); - } - } - if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) { return $block_content; } From 697b6704271af7e0f9d0e7cf2641773564ef409b Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 28 Mar 2024 01:30:46 +0900 Subject: [PATCH 16/26] Apply support as inline style instead of class name --- .../block-api/block-supports.md | 12 +- lib/block-supports/typography.php | 15 +- packages/block-editor/src/hooks/index.js | 2 - .../block-editor/src/hooks/test/text-align.js | 137 ------------------ .../src/hooks/test/use-typography-props.js | 2 + packages/block-editor/src/hooks/text-align.js | 131 ++--------------- .../src/hooks/use-typography-props.js | 5 - .../style-engine/class-wp-style-engine.php | 6 + .../src/styles/typography/index.ts | 13 ++ .../blocks/core__comment-edit-link.json | 2 +- .../core__comment-edit-link.serialized.html | 2 +- .../core__comments-pagination-previous.json | 2 +- ...mments-pagination-previous.serialized.html | 2 +- .../fixtures/blocks/core__comments-title.json | 2 +- .../core__comments-title.serialized.html | 2 +- 15 files changed, 56 insertions(+), 279 deletions(-) delete mode 100644 packages/block-editor/src/hooks/test/text-align.js diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 74ed37a2ff6a8c..b327cd0c03a9ee 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -1096,13 +1096,17 @@ supports: { } ``` -When the block declares support for `textAlign`, the attributes definition is extended to include a text align attribute with a `string` type. By default, no text alignment is assigned. The block can apply a default text alignment by specifying its own `textAlign` attribute with a default e.g.: +When the block declares support for `textAlign`, the attributes definition is extended to include a new attribute `style` of `object` type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own `style` attribute with a default. For example: ```js attributes: { - textAlign: { - type: 'string', - default: 'right' + style: { + type: 'object', + default: { + typography: { + textAlign: 'value' + } + } } } ``` diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 3a81e548d83dc6..ecdc0a67bbd2ea 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -154,6 +154,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { $typography_block_styles['lineHeight'] = $block_attributes['style']['typography']['lineHeight'] ?? null; } + if ( $has_text_align_support && ! $should_skip_text_align ) { + $typography_block_styles['textAlign'] = $block_attributes['style']['typography']['textAlign'] ?? null; + } + if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) { $typography_block_styles['textColumns'] = $block_attributes['style']['typography']['textColumns'] ?? null; } @@ -178,22 +182,13 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } $attributes = array(); - $classnames = array(); $styles = gutenberg_style_engine_get_styles( array( 'typography' => $typography_block_styles ), array( 'convert_vars_to_classnames' => true ) ); if ( ! empty( $styles['classnames'] ) ) { - $classnames[] = $styles['classnames']; - } - - if ( $has_text_align_support && ! $should_skip_text_align && isset( $block_attributes['textAlign'] ) ) { - $classnames[] = 'has-text-align-' . $block_attributes['textAlign']; - } - - if ( ! empty( $classnames ) ) { - $attributes['class'] = implode( ' ', $classnames ); + $attributes['class'] = $styles['classnames']; } if ( ! empty( $styles['css'] ) ) { diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index e556b242085d44..054c48a5faec1a 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -50,7 +50,6 @@ createBlockEditFilter( ); createBlockListBlockFilter( [ align, - textAlign, background, style, color, @@ -64,7 +63,6 @@ createBlockListBlockFilter( [ ] ); createBlockSaveFilter( [ align, - textAlign, anchor, ariaLabel, customClassName, diff --git a/packages/block-editor/src/hooks/test/text-align.js b/packages/block-editor/src/hooks/test/text-align.js deleted file mode 100644 index 90539e51edbcb6..00000000000000 --- a/packages/block-editor/src/hooks/test/text-align.js +++ /dev/null @@ -1,137 +0,0 @@ -/** - * WordPress dependencies - */ -import { applyFilters } from '@wordpress/hooks'; -import { - getBlockTypes, - registerBlockType, - unregisterBlockType, -} from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import { getValidTextAlignments, addAssignedTextAlign } from '../text-align'; - -const noop = () => {}; - -describe( 'textAlign', () => { - const blockSettings = { - save: noop, - category: 'text', - title: 'block title', - edit: ( { children } ) => <>{ children }, - }; - - afterEach( () => { - getBlockTypes().forEach( ( block ) => { - unregisterBlockType( block.name ); - } ); - } ); - - describe( 'addAttribute()', () => { - const filterRegisterBlockType = applyFilters.bind( - null, - 'blocks.registerBlockType' - ); - - it( 'should do nothing if the block settings does not define text align support', () => { - const settings = filterRegisterBlockType( blockSettings ); - - expect( settings.attributes ).toBeUndefined(); - } ); - - it( 'should assign a new text align attribute', () => { - const settings = filterRegisterBlockType( { - ...blockSettings, - supports: { - typography: { - textAlign: true, - }, - }, - } ); - - expect( settings.attributes ).toHaveProperty( 'textAlign' ); - } ); - } ); - - describe( 'getValidTextAlignments()', () => { - it( 'should return an empty array if block does not define align support', () => { - expect( getValidTextAlignments() ).toEqual( [] ); - } ); - - it( 'should return all custom text aligns set', () => { - expect( getValidTextAlignments( [ 'left', 'right' ] ) ).toEqual( [ - 'left', - 'right', - ] ); - } ); - - it( 'should return all text aligns sorted when provided in the random order', () => { - expect( - getValidTextAlignments( [ 'right', 'center', 'left' ] ) - ).toEqual( [ 'left', 'center', 'right' ] ); - } ); - - it( 'should return all text aligns if block defines text align support as true', () => { - expect( getValidTextAlignments( true ) ).toEqual( [ - 'left', - 'center', - 'right', - ] ); - } ); - - it( 'should remove incorrect text aligns', () => { - expect( - getValidTextAlignments( [ 'left', 'right', 'justify' ] ) - ).toEqual( [ 'left', 'right' ] ); - } ); - } ); - - describe( 'addAssignedTextAlign', () => { - it( 'should do nothing if block does not support text align', () => { - registerBlockType( 'core/foo', blockSettings ); - - const props = addAssignedTextAlign( - { - className: 'foo', - }, - 'core/foo', - { - typography: { - textAlign: 'center', - }, - } - ); - - expect( props ).toEqual( { - className: 'foo', - } ); - } ); - - it( 'should do add text align classname if block supports text align', () => { - registerBlockType( 'core/foo', { - ...blockSettings, - supports: { - typography: { - textAlign: true, - }, - }, - } ); - - const props = addAssignedTextAlign( - { - className: 'foo', - }, - 'core/foo', - { - textAlign: 'center', - } - ); - - expect( props ).toEqual( { - className: 'has-text-align-center foo', - } ); - } ); - } ); -} ); diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js index 77b2e0cdf33cb7..6dc553863b0995 100644 --- a/packages/block-editor/src/hooks/test/use-typography-props.js +++ b/packages/block-editor/src/hooks/test/use-typography-props.js @@ -12,6 +12,7 @@ describe( 'getTypographyClassesAndStyles', () => { typography: { letterSpacing: '22px', fontSize: '2rem', + textAlign: 'center', textColumns: 3, textTransform: 'uppercase', }, @@ -23,6 +24,7 @@ describe( 'getTypographyClassesAndStyles', () => { columnCount: 3, letterSpacing: '22px', fontSize: '2rem', + textAlign: 'center', textTransform: 'uppercase', }, } ); diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js index a76d2462dc6fd9..1675323d6e25c1 100644 --- a/packages/block-editor/src/hooks/text-align.js +++ b/packages/block-editor/src/hooks/text-align.js @@ -1,18 +1,8 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { addFilter } from '@wordpress/hooks'; -import { - getBlockSupport, - getBlockType, - hasBlockSupport, -} from '@wordpress/blocks'; +import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; /** @@ -20,8 +10,7 @@ import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; */ import { AlignmentControl, BlockControls } from '../components'; import { useBlockEditingMode } from '../components/block-editing-mode'; -import { shouldSkipSerialization } from './utils'; -import { TYPOGRAPHY_SUPPORT_KEY } from './typography'; +import { cleanEmptyObject } from './utils'; const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign'; @@ -70,37 +59,9 @@ export function getValidTextAlignments( blockTextAlign ) { return validTextAlignments; } -/** - * Filters registered block settings, extending attributes to include `textAlign`. - * - * @param {Object} settings Original block settings. - * - * @return {Object} Filtered block settings. - */ -export function addAttribute( settings ) { - // Allow blocks to specify their own attribute definition with default values if needed. - if ( 'type' in ( settings.attributes?.textAlign ?? {} ) ) { - return settings; - } - if ( hasBlockSupport( settings, TEXT_ALIGN_SUPPORT_KEY ) ) { - // Gracefully handle if settings.attributes is undefined. - settings.attributes = { - ...settings.attributes, - textAlign: { - type: 'string', - // Allow for '' since it is used by the `updateTextAlignment` function - // in toolbar controls for special cases with defined default values. - enum: [ ...VALID_TEXT_ALIGNMENTS, '' ], - }, - }; - } - - return settings; -} - function BlockEditTextAlignmentToolbarControlsPure( { + style, name: blockName, - textAlign, setAttributes, } ) { const validTextAlignments = getValidTextAlignments( @@ -115,23 +76,23 @@ function BlockEditTextAlignmentToolbarControlsPure( { validTextAlignments.includes( control.align ) ); - const updateTextAlignment = ( nextTextAlign ) => { - if ( ! nextTextAlign ) { - const blockType = getBlockType( blockName ); - const blockDefaultTextAlign = - blockType?.attributes?.textAlign?.default; - if ( blockDefaultTextAlign ) { - nextTextAlign = ''; - } - } - setAttributes( { textAlign: nextTextAlign } ); + const onChange = ( newTextAlignValue ) => { + const newStyle = { + ...style, + typography: { + ...style?.typography, + textAlign: newTextAlignValue, + }, + }; + + setAttributes( { style: cleanEmptyObject( newStyle ) } ); }; return ( @@ -140,68 +101,8 @@ function BlockEditTextAlignmentToolbarControlsPure( { export default { edit: BlockEditTextAlignmentToolbarControlsPure, - useBlockProps, - addSaveProps: addAssignedTextAlign, - attributeKeys: [ 'textAlign' ], + attributeKeys: [ 'style' ], hasSupport( name ) { return hasBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY, false ); }, }; - -function useBlockProps( { name, textAlign } ) { - const validTextAlignments = getValidTextAlignments( - getBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY ) - ); - - if ( ! validTextAlignments.length ) { - return null; - } - - if ( - shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'textAlign' ) - ) { - return null; - } - - const className = classnames( { - [ `has-text-align-${ textAlign }` ]: textAlign, - } ); - return { className }; -} - -/** - * Override props assigned to save component to inject text alignment class - * name if block supports it. - * - * @param {Object} props Additional props applied to save element. - * @param {Object} blockType Block type. - * @param {Object} attributes Block attributes. - * - * @return {Object} Filtered props applied to save element. - */ -export function addAssignedTextAlign( props, blockType, attributes ) { - const { textAlign } = attributes; - const blockTextAlign = getBlockSupport( blockType, TEXT_ALIGN_SUPPORT_KEY ); - const isTextAlignValid = - getValidTextAlignments( blockTextAlign ).includes( textAlign ); - if ( - isTextAlignValid && - ! shouldSkipSerialization( - blockType, - TYPOGRAPHY_SUPPORT_KEY, - 'textAlign' - ) - ) { - props.className = classnames( - `has-text-align-${ textAlign }`, - props.className - ); - } - return props; -} - -addFilter( - 'blocks.registerBlockType', - 'core/editor/text-align/addAttribute', - addAttribute -); diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js index 43b6fe160814ed..a63f77468c7233 100644 --- a/packages/block-editor/src/hooks/use-typography-props.js +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -46,13 +46,8 @@ export function getTypographyClassesAndStyles( attributes, settings ) { ? `has-${ kebabCase( attributes.fontFamily ) }-font-family` : ''; - const textAlignClassName = !! attributes?.textAlign - ? `has-text-align-${ attributes.textAlign }` - : ''; - const className = classnames( fontFamilyClassName, - textAlignClassName, getFontSizeClass( attributes?.fontSize ) ); diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 272c12705bf880..fba3b549d7e0b4 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -267,6 +267,12 @@ final class WP_Style_Engine { ), 'path' => array( 'typography', 'lineHeight' ), ), + 'textAlign' => array( + 'property_keys' => array( + 'default' => 'text-align', + ), + 'path' => array( 'typography', 'textAlign' ), + ), 'textColumns' => array( 'property_keys' => array( 'default' => 'column-count', diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts index 92c40d2e156198..63b038afef97a5 100644 --- a/packages/style-engine/src/styles/typography/index.ts +++ b/packages/style-engine/src/styles/typography/index.ts @@ -76,6 +76,18 @@ const lineHeight = { }, }; +const textAlign = { + name: 'textAlign', + generate: ( style: Style, options: StyleOptions ) => { + return generateRule( + style, + options, + [ 'typography', 'textAlign' ], + 'textAlign' + ); + }, +}; + const textColumns = { name: 'textColumns', generate: ( style: Style, options: StyleOptions ) => { @@ -131,6 +143,7 @@ export default [ fontWeight, letterSpacing, lineHeight, + textAlign, textColumns, textDecoration, textTransform, diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.json b/test/integration/fixtures/blocks/core__comment-edit-link.json index 8c625436e5af48..1584c46ac563bb 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.json +++ b/test/integration/fixtures/blocks/core__comment-edit-link.json @@ -4,9 +4,9 @@ "isValid": true, "attributes": { "linkTarget": "_blank", + "backgroundColor": "recommended-color-03", "fontFamily": "system-monospace", "fontSize": "extra-large", - "backgroundColor": "recommended-color-03", "style": { "typography": { "fontStyle": "normal", diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html index 7c48b107b2315c..8492ea9b93dab1 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html +++ b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-pagination-previous.json b/test/integration/fixtures/blocks/core__comments-pagination-previous.json index 91754fdc1bccd2..302d4a110dc212 100644 --- a/test/integration/fixtures/blocks/core__comments-pagination-previous.json +++ b/test/integration/fixtures/blocks/core__comments-pagination-previous.json @@ -3,8 +3,8 @@ "name": "core/comments-pagination-previous", "isValid": true, "attributes": { - "fontSize": "medium", "backgroundColor": "foreground", + "fontSize": "medium", "style": { "typography": { "textTransform": "uppercase" diff --git a/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html index 5d9f75e2937226..c533cd82b5a4b9 100644 --- a/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-title.json b/test/integration/fixtures/blocks/core__comments-title.json index e485a55de4022b..bb436b955cd9ca 100644 --- a/test/integration/fixtures/blocks/core__comments-title.json +++ b/test/integration/fixtures/blocks/core__comments-title.json @@ -7,9 +7,9 @@ "showCommentsCount": true, "level": 4, "borderColor": "vivid-red", - "fontSize": "large", "backgroundColor": "primary", "textColor": "background", + "fontSize": "large", "style": { "spacing": { "padding": { diff --git a/test/integration/fixtures/blocks/core__comments-title.serialized.html b/test/integration/fixtures/blocks/core__comments-title.serialized.html index 8b9796e990461e..6507dc669314d4 100644 --- a/test/integration/fixtures/blocks/core__comments-title.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-title.serialized.html @@ -1 +1 @@ - + From d07af765a155e2ca4d0d1a5704ca801b5cdc6a56 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 28 Mar 2024 16:48:47 +0900 Subject: [PATCH 17/26] Remove unnecessary code --- lib/block-supports/typography.php | 7 ------- 1 file changed, 7 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index ecdc0a67bbd2ea..9e3a989adbf7c3 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -65,13 +65,6 @@ function gutenberg_register_typography_support( $block_type ) { 'type' => 'string', ); } - - if ( $has_text_align_support && ! array_key_exists( 'textAlign', $block_type->attributes ) ) { - $block_type->attributes['textAlign'] = array( - 'type' => 'string', - 'enum' => array( 'left', 'center', 'right', '' ), - ); - } } /** From 36575d5487bbbbce346b75981af2bb473c701979 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 3 Apr 2024 13:33:18 +0900 Subject: [PATCH 18/26] Output as class name instead of inline style --- lib/block-supports/typography.php | 11 +- packages/block-editor/src/hooks/index.js | 2 + .../block-editor/src/hooks/test/text-align.js | 143 ++++++++++++++++++ .../src/hooks/test/use-typography-props.js | 4 +- packages/block-editor/src/hooks/text-align.js | 108 ++++++++++++- .../src/hooks/use-typography-props.js | 5 +- .../style-engine/class-wp-style-engine.php | 6 - .../src/styles/typography/index.ts | 13 -- 8 files changed, 268 insertions(+), 24 deletions(-) create mode 100644 packages/block-editor/src/hooks/test/text-align.js diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 9e3a989adbf7c3..fa2a7b81e94e21 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -175,13 +175,22 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) { } $attributes = array(); + $classnames = array(); $styles = gutenberg_style_engine_get_styles( array( 'typography' => $typography_block_styles ), array( 'convert_vars_to_classnames' => true ) ); if ( ! empty( $styles['classnames'] ) ) { - $attributes['class'] = $styles['classnames']; + $classnames[] = $styles['classnames']; + } + + if ( $has_text_align_support && ! $should_skip_text_align && isset( $block_attributes['style']['typography']['textAlign'] ) ) { + $classnames[] = 'has-text-align-' . $block_attributes['style']['typography']['textAlign']; + } + + if ( ! empty( $classnames ) ) { + $attributes['class'] = implode( ' ', $classnames ); } if ( ! empty( $styles['css'] ) ) { diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 054c48a5faec1a..e556b242085d44 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -50,6 +50,7 @@ createBlockEditFilter( ); createBlockListBlockFilter( [ align, + textAlign, background, style, color, @@ -63,6 +64,7 @@ createBlockListBlockFilter( [ ] ); createBlockSaveFilter( [ align, + textAlign, anchor, ariaLabel, customClassName, diff --git a/packages/block-editor/src/hooks/test/text-align.js b/packages/block-editor/src/hooks/test/text-align.js new file mode 100644 index 00000000000000..5501c7cca8d64d --- /dev/null +++ b/packages/block-editor/src/hooks/test/text-align.js @@ -0,0 +1,143 @@ +/** + * WordPress dependencies + */ +import { applyFilters } from '@wordpress/hooks'; +import { + getBlockTypes, + registerBlockType, + unregisterBlockType, +} from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { getValidTextAlignments, addAssignedTextAlign } from '../text-align'; + +const noop = () => {}; + +describe( 'textAlign', () => { + const blockSettings = { + save: noop, + category: 'text', + title: 'block title', + edit: ( { children } ) => <>{ children }, + }; + + afterEach( () => { + getBlockTypes().forEach( ( block ) => { + unregisterBlockType( block.name ); + } ); + } ); + + describe( 'addAttribute()', () => { + const filterRegisterBlockType = applyFilters.bind( + null, + 'blocks.registerBlockType' + ); + + it( 'should do nothing if the block settings does not define text align support', () => { + const settings = filterRegisterBlockType( blockSettings ); + + expect( settings.attributes ).toBeUndefined(); + } ); + + it( 'should assign a new text align attribute', () => { + const settings = filterRegisterBlockType( { + ...blockSettings, + supports: { + typography: { + textAlign: true, + }, + }, + } ); + + expect( settings.attributes.style.typography ).toHaveProperty( + 'textAlign' + ); + } ); + } ); + + describe( 'getValidTextAlignments()', () => { + it( 'should return an empty array if block does not define align support', () => { + expect( getValidTextAlignments() ).toEqual( [] ); + } ); + + it( 'should return all custom text aligns set', () => { + expect( getValidTextAlignments( [ 'left', 'right' ] ) ).toEqual( [ + 'left', + 'right', + ] ); + } ); + + it( 'should return all text aligns sorted when provided in the random order', () => { + expect( + getValidTextAlignments( [ 'right', 'center', 'left' ] ) + ).toEqual( [ 'left', 'center', 'right' ] ); + } ); + + it( 'should return all text aligns if block defines text align support as true', () => { + expect( getValidTextAlignments( true ) ).toEqual( [ + 'left', + 'center', + 'right', + ] ); + } ); + + it( 'should remove incorrect text aligns', () => { + expect( + getValidTextAlignments( [ 'left', 'right', 'justify' ] ) + ).toEqual( [ 'left', 'right' ] ); + } ); + } ); + + describe( 'addAssignedTextAlign', () => { + it( 'should do nothing if block does not support text align', () => { + registerBlockType( 'core/foo', blockSettings ); + + const props = addAssignedTextAlign( + { + className: 'foo', + }, + 'core/foo', + { + typography: { + textAlign: 'center', + }, + } + ); + + expect( props ).toEqual( { + className: 'foo', + } ); + } ); + + it( 'should do add text align classname if block supports text align', () => { + registerBlockType( 'core/foo', { + ...blockSettings, + supports: { + typography: { + textAlign: true, + }, + }, + } ); + + const props = addAssignedTextAlign( + { + className: 'foo', + }, + 'core/foo', + { + style: { + typography: { + textAlign: 'center', + }, + }, + } + ); + + expect( props ).toEqual( { + className: 'has-text-align-center foo', + } ); + } ); + } ); +} ); diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js index 6dc553863b0995..c226b7f8199b9f 100644 --- a/packages/block-editor/src/hooks/test/use-typography-props.js +++ b/packages/block-editor/src/hooks/test/use-typography-props.js @@ -19,12 +19,12 @@ describe( 'getTypographyClassesAndStyles', () => { }, }; expect( getTypographyClassesAndStyles( attributes ) ).toEqual( { - className: 'has-tofu-font-family has-large-font-size', + className: + 'has-tofu-font-family has-text-align-center has-large-font-size', style: { columnCount: 3, letterSpacing: '22px', fontSize: '2rem', - textAlign: 'center', textTransform: 'uppercase', }, } ); diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js index 1675323d6e25c1..c132361ec1195a 100644 --- a/packages/block-editor/src/hooks/text-align.js +++ b/packages/block-editor/src/hooks/text-align.js @@ -1,7 +1,13 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { addFilter } from '@wordpress/hooks'; import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; @@ -10,7 +16,8 @@ import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; */ import { AlignmentControl, BlockControls } from '../components'; import { useBlockEditingMode } from '../components/block-editing-mode'; -import { cleanEmptyObject } from './utils'; +import { cleanEmptyObject, shouldSkipSerialization } from './utils'; +import { TYPOGRAPHY_SUPPORT_KEY } from './typography'; const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign'; @@ -59,6 +66,35 @@ export function getValidTextAlignments( blockTextAlign ) { return validTextAlignments; } +/** + * Filters registered block settings, extending attributes to include `textAlign`. + * + * @param {Object} settings Original block settings. + * + * @return {Object} Filtered block settings. + */ +export function addAttribute( settings ) { + // Allow blocks to specify their default style if needed. + if ( settings.attributes?.style?.default?.typography?.textAlign ) { + return settings; + } + if ( hasBlockSupport( settings, TEXT_ALIGN_SUPPORT_KEY ) ) { + // Gracefully handle if settings.attributes is undefined. + settings.attributes = { + ...settings.attributes, + style: { + ...settings.attributes?.style, + typography: { + ...settings.attributes?.style?.typography, + textAlign: undefined, + }, + }, + }; + } + + return settings; +} + function BlockEditTextAlignmentToolbarControlsPure( { style, name: blockName, @@ -101,8 +137,78 @@ function BlockEditTextAlignmentToolbarControlsPure( { export default { edit: BlockEditTextAlignmentToolbarControlsPure, + useBlockProps, + addSaveProps: addAssignedTextAlign, attributeKeys: [ 'style' ], hasSupport( name ) { return hasBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY, false ); }, }; + +function useBlockProps( { name, style } ) { + if ( ! style?.typography?.textAlign ) { + return null; + } + + const validTextAlignments = getValidTextAlignments( + getBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY ) + ); + + if ( ! validTextAlignments.length ) { + return null; + } + + if ( + shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'textAlign' ) + ) { + return null; + } + + const textAlign = style.typography.textAlign; + + const className = classnames( { + [ `has-text-align-${ textAlign }` ]: textAlign, + } ); + return { className }; +} + +/** + * Override props assigned to save component to inject text alignment class + * name if block supports it. + * + * @param {Object} props Additional props applied to save element. + * @param {Object} blockType Block type. + * @param {Object} attributes Block attributes. + * + * @return {Object} Filtered props applied to save element. + */ +export function addAssignedTextAlign( props, blockType, attributes ) { + if ( ! attributes?.style?.typography?.textAlign ) { + return props; + } + + const { textAlign } = attributes.style.typography; + const blockTextAlign = getBlockSupport( blockType, TEXT_ALIGN_SUPPORT_KEY ); + const isTextAlignValid = + getValidTextAlignments( blockTextAlign ).includes( textAlign ); + if ( + isTextAlignValid && + ! shouldSkipSerialization( + blockType, + TYPOGRAPHY_SUPPORT_KEY, + 'textAlign' + ) + ) { + props.className = classnames( + `has-text-align-${ textAlign }`, + props.className + ); + } + return props; +} + +addFilter( + 'blocks.registerBlockType', + 'core/editor/text-align/addAttribute', + addAttribute +); diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js index a63f77468c7233..3986bbf7cfe17e 100644 --- a/packages/block-editor/src/hooks/use-typography-props.js +++ b/packages/block-editor/src/hooks/use-typography-props.js @@ -45,9 +45,12 @@ export function getTypographyClassesAndStyles( attributes, settings ) { const fontFamilyClassName = !! attributes?.fontFamily ? `has-${ kebabCase( attributes.fontFamily ) }-font-family` : ''; - + const textAlignClassName = !! attributes?.style?.typography?.textAlign + ? `has-text-align-${ attributes?.style?.typography?.textAlign }` + : ''; const className = classnames( fontFamilyClassName, + textAlignClassName, getFontSizeClass( attributes?.fontSize ) ); diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index fba3b549d7e0b4..272c12705bf880 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -267,12 +267,6 @@ final class WP_Style_Engine { ), 'path' => array( 'typography', 'lineHeight' ), ), - 'textAlign' => array( - 'property_keys' => array( - 'default' => 'text-align', - ), - 'path' => array( 'typography', 'textAlign' ), - ), 'textColumns' => array( 'property_keys' => array( 'default' => 'column-count', diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts index 63b038afef97a5..92c40d2e156198 100644 --- a/packages/style-engine/src/styles/typography/index.ts +++ b/packages/style-engine/src/styles/typography/index.ts @@ -76,18 +76,6 @@ const lineHeight = { }, }; -const textAlign = { - name: 'textAlign', - generate: ( style: Style, options: StyleOptions ) => { - return generateRule( - style, - options, - [ 'typography', 'textAlign' ], - 'textAlign' - ); - }, -}; - const textColumns = { name: 'textColumns', generate: ( style: Style, options: StyleOptions ) => { @@ -143,7 +131,6 @@ export default [ fontWeight, letterSpacing, lineHeight, - textAlign, textColumns, textDecoration, textTransform, From 125639e1f6ef902fe87d280f1e34457ceda7dcb3 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 3 Apr 2024 14:02:47 +0900 Subject: [PATCH 19/26] Update fixtures --- test/integration/fixtures/blocks/core__comment-edit-link.json | 2 +- .../fixtures/blocks/core__comment-edit-link.serialized.html | 2 +- .../fixtures/blocks/core__comments-pagination-previous.json | 2 +- .../blocks/core__comments-pagination-previous.serialized.html | 2 +- test/integration/fixtures/blocks/core__comments-title.json | 2 +- .../fixtures/blocks/core__comments-title.serialized.html | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.json b/test/integration/fixtures/blocks/core__comment-edit-link.json index 1584c46ac563bb..8c625436e5af48 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.json +++ b/test/integration/fixtures/blocks/core__comment-edit-link.json @@ -4,9 +4,9 @@ "isValid": true, "attributes": { "linkTarget": "_blank", - "backgroundColor": "recommended-color-03", "fontFamily": "system-monospace", "fontSize": "extra-large", + "backgroundColor": "recommended-color-03", "style": { "typography": { "fontStyle": "normal", diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html index 8492ea9b93dab1..7c48b107b2315c 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html +++ b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-pagination-previous.json b/test/integration/fixtures/blocks/core__comments-pagination-previous.json index 302d4a110dc212..91754fdc1bccd2 100644 --- a/test/integration/fixtures/blocks/core__comments-pagination-previous.json +++ b/test/integration/fixtures/blocks/core__comments-pagination-previous.json @@ -3,8 +3,8 @@ "name": "core/comments-pagination-previous", "isValid": true, "attributes": { - "backgroundColor": "foreground", "fontSize": "medium", + "backgroundColor": "foreground", "style": { "typography": { "textTransform": "uppercase" diff --git a/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html index c533cd82b5a4b9..5d9f75e2937226 100644 --- a/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-title.json b/test/integration/fixtures/blocks/core__comments-title.json index bb436b955cd9ca..e485a55de4022b 100644 --- a/test/integration/fixtures/blocks/core__comments-title.json +++ b/test/integration/fixtures/blocks/core__comments-title.json @@ -7,9 +7,9 @@ "showCommentsCount": true, "level": 4, "borderColor": "vivid-red", + "fontSize": "large", "backgroundColor": "primary", "textColor": "background", - "fontSize": "large", "style": { "spacing": { "padding": { diff --git a/test/integration/fixtures/blocks/core__comments-title.serialized.html b/test/integration/fixtures/blocks/core__comments-title.serialized.html index 6507dc669314d4..8b9796e990461e 100644 --- a/test/integration/fixtures/blocks/core__comments-title.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-title.serialized.html @@ -1 +1 @@ - + From e1edff4770aedeccf8a6a262717c94c2a73a75ac Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 5 Apr 2024 22:07:02 +0900 Subject: [PATCH 20/26] Add `TEXT_ALIGN_SUPPORT_KEY` to `TYPOGRAPHY_SUPPORT_KEYS` and remove `addAttribute` filter --- packages/block-editor/src/hooks/index.js | 2 +- .../block-editor/src/hooks/test/text-align.js | 29 -------------- packages/block-editor/src/hooks/text-align.js | 38 +------------------ packages/block-editor/src/hooks/typography.js | 2 + 4 files changed, 4 insertions(+), 67 deletions(-) diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index d96eb7c741f96f..ec5cf29b49c5a6 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -8,7 +8,6 @@ import { } from './utils'; import './compat'; import align from './align'; -import textAlign from './text-align'; import background from './background'; import './lock'; import anchor from './anchor'; @@ -22,6 +21,7 @@ import dimensions from './dimensions'; import duotone from './duotone'; import fontFamily from './font-family'; import fontSize from './font-size'; +import textAlign from './text-align'; import border from './border'; import position from './position'; import layout from './layout'; diff --git a/packages/block-editor/src/hooks/test/text-align.js b/packages/block-editor/src/hooks/test/text-align.js index 5501c7cca8d64d..3b7d338193b30b 100644 --- a/packages/block-editor/src/hooks/test/text-align.js +++ b/packages/block-editor/src/hooks/test/text-align.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { applyFilters } from '@wordpress/hooks'; import { getBlockTypes, registerBlockType, @@ -29,34 +28,6 @@ describe( 'textAlign', () => { } ); } ); - describe( 'addAttribute()', () => { - const filterRegisterBlockType = applyFilters.bind( - null, - 'blocks.registerBlockType' - ); - - it( 'should do nothing if the block settings does not define text align support', () => { - const settings = filterRegisterBlockType( blockSettings ); - - expect( settings.attributes ).toBeUndefined(); - } ); - - it( 'should assign a new text align attribute', () => { - const settings = filterRegisterBlockType( { - ...blockSettings, - supports: { - typography: { - textAlign: true, - }, - }, - } ); - - expect( settings.attributes.style.typography ).toHaveProperty( - 'textAlign' - ); - } ); - } ); - describe( 'getValidTextAlignments()', () => { it( 'should return an empty array if block does not define align support', () => { expect( getValidTextAlignments() ).toEqual( [] ); diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js index c132361ec1195a..daa8df6cc82106 100644 --- a/packages/block-editor/src/hooks/text-align.js +++ b/packages/block-editor/src/hooks/text-align.js @@ -7,7 +7,6 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { addFilter } from '@wordpress/hooks'; import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks'; import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; @@ -19,7 +18,7 @@ import { useBlockEditingMode } from '../components/block-editing-mode'; import { cleanEmptyObject, shouldSkipSerialization } from './utils'; import { TYPOGRAPHY_SUPPORT_KEY } from './typography'; -const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign'; +export const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign'; const TEXT_ALIGNMENT_OPTIONS = [ { @@ -66,35 +65,6 @@ export function getValidTextAlignments( blockTextAlign ) { return validTextAlignments; } -/** - * Filters registered block settings, extending attributes to include `textAlign`. - * - * @param {Object} settings Original block settings. - * - * @return {Object} Filtered block settings. - */ -export function addAttribute( settings ) { - // Allow blocks to specify their default style if needed. - if ( settings.attributes?.style?.default?.typography?.textAlign ) { - return settings; - } - if ( hasBlockSupport( settings, TEXT_ALIGN_SUPPORT_KEY ) ) { - // Gracefully handle if settings.attributes is undefined. - settings.attributes = { - ...settings.attributes, - style: { - ...settings.attributes?.style, - typography: { - ...settings.attributes?.style?.typography, - textAlign: undefined, - }, - }, - }; - } - - return settings; -} - function BlockEditTextAlignmentToolbarControlsPure( { style, name: blockName, @@ -206,9 +176,3 @@ export function addAssignedTextAlign( props, blockType, attributes ) { } return props; } - -addFilter( - 'blocks.registerBlockType', - 'core/editor/text-align/addAttribute', - addAttribute -); diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 12d0075527bec5..cf3f4327c8f034 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -17,6 +17,7 @@ import { import { LINE_HEIGHT_SUPPORT_KEY } from './line-height'; import { FONT_FAMILY_SUPPORT_KEY } from './font-family'; import { FONT_SIZE_SUPPORT_KEY } from './font-size'; +import { TEXT_ALIGN_SUPPORT_KEY } from './text-align'; import { cleanEmptyObject } from './utils'; import { store as blockEditorStore } from '../store'; @@ -40,6 +41,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ FONT_STYLE_SUPPORT_KEY, FONT_WEIGHT_SUPPORT_KEY, FONT_FAMILY_SUPPORT_KEY, + TEXT_ALIGN_SUPPORT_KEY, TEXT_COLUMNS_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, WRITING_MODE_SUPPORT_KEY, From c38bcc936a6b04c56e2ae674c7d83c22226b6bcd Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 5 Apr 2024 22:22:33 +0900 Subject: [PATCH 21/26] Include `text-align` when pasting styles --- .../src/components/use-paste-styles/index.js | 2 ++ packages/block-editor/src/hooks/supports.js | 24 +++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/packages/block-editor/src/components/use-paste-styles/index.js b/packages/block-editor/src/components/use-paste-styles/index.js index 9150776ad1158b..1c2a844488b862 100644 --- a/packages/block-editor/src/components/use-paste-styles/index.js +++ b/packages/block-editor/src/components/use-paste-styles/index.js @@ -15,6 +15,7 @@ import { hasAlignSupport, hasBorderSupport, hasBackgroundColorSupport, + hasTextAlignSupport, hasTextColorSupport, hasGradientSupport, hasCustomClassNameSupport, @@ -59,6 +60,7 @@ const STYLE_ATTRIBUTES = { align: hasAlignSupport, borderColor: ( nameOrType ) => hasBorderSupport( nameOrType, 'color' ), backgroundColor: hasBackgroundColorSupport, + textAlign: hasTextAlignSupport, textColor: hasTextColorSupport, gradient: hasGradientSupport, className: hasCustomClassNameSupport, diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js index 4e116494029bf1..75f2bdf2dc219e 100644 --- a/packages/block-editor/src/hooks/supports.js +++ b/packages/block-editor/src/hooks/supports.js @@ -20,6 +20,11 @@ const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle'; * Key within block settings' support array indicating support for font weight. */ const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight'; +/** + * Key within block settings' supports array indicating support for text + * align e.g. settings found in `block.json`. + */ +const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign'; /** * Key within block settings' supports array indicating support for text * columns e.g. settings found in `block.json`. @@ -53,6 +58,7 @@ const TYPOGRAPHY_SUPPORT_KEYS = [ FONT_STYLE_SUPPORT_KEY, FONT_WEIGHT_SUPPORT_KEY, FONT_FAMILY_SUPPORT_KEY, + TEXT_ALIGN_SUPPORT_KEY, TEXT_COLUMNS_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, @@ -212,6 +218,24 @@ export const hasBackgroundColorSupport = ( nameOrType ) => { return colorSupport && colorSupport.background !== false; }; +/** + * Returns true if the block defines support for text-align. + * + * @param {string|Object} nameOrType Block name or type object. + * @return {boolean} Whether the block supports the feature. + */ +export const hasTextAlignSupport = ( nameOrType ) => + hasBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY ); + +/** + * Returns the block support value for text-align, if defined. + * + * @param {string|Object} nameOrType Block name or type object. + * @return {unknown} The block support value. + */ +export const getTextAlignSupport = ( nameOrType ) => + getBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY ); + /** * Returns true if the block defines support for background color. * From c1b5a439ece508169a7190fbc9e5b1692e82a7b5 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 5 Apr 2024 22:27:10 +0900 Subject: [PATCH 22/26] Update theme.json schema --- .../theme-json-reference/theme-json-living.md | 2 ++ schemas/json/theme.json | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 00b1f7971f3d91..0377f6a3c3e05d 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -185,6 +185,7 @@ Settings related to typography. | fluid | undefined | false | | | letterSpacing | boolean | true | | | lineHeight | boolean | false | | +| textAlign | boolean | true | | | textColumns | boolean | false | | | textDecoration | boolean | true | | | writingMode | boolean | false | | @@ -268,6 +269,7 @@ Typography styles. | fontWeight | string, object | | | letterSpacing | string, object | | | lineHeight | string, object | | +| textAlign | string | | | textColumns | string | | | textDecoration | string, object | | | writingMode | string, object | | diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 63889366b7bd40..7cb34945b56810 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -551,6 +551,11 @@ "type": "boolean", "default": false }, + "textAlign": { + "description": "Allow users to set the text align.", + "type": "boolean", + "default": true + }, "textColumns": { "description": "Allow users to set the number of text columns.", "type": "boolean", @@ -1629,6 +1634,10 @@ } ] }, + "textAlign": { + "description": "Sets the `text-align` CSS property.", + "type": "string" + }, "textColumns": { "description": "Sets the `column-count` CSS property.", "type": "string" From 6a8ecaabcbfd08588cf273f5b6307e5cec45249b Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 5 Apr 2024 22:34:31 +0900 Subject: [PATCH 23/26] Update Global Settings & Styles documentation --- docs/how-to-guides/themes/global-settings-and-styles.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md index cd5557d40e55c6..37f0ee8951c3c9 100644 --- a/docs/how-to-guides/themes/global-settings-and-styles.md +++ b/docs/how-to-guides/themes/global-settings-and-styles.md @@ -265,6 +265,7 @@ The settings section has the following structure: "fontWeight": true, "letterSpacing": true, "lineHeight": false, + "textAlign": true, "textColumns": false, "textDecoration": true, "textTransform": true From 6c31e6dfc1da2caf36e56032462d3750f04fc8db Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 5 Apr 2024 22:37:08 +0900 Subject: [PATCH 24/26] Update fixtures --- test/integration/fixtures/blocks/core__comment-edit-link.json | 2 +- .../fixtures/blocks/core__comment-edit-link.serialized.html | 2 +- .../fixtures/blocks/core__comments-pagination-previous.json | 2 +- .../blocks/core__comments-pagination-previous.serialized.html | 2 +- test/integration/fixtures/blocks/core__comments-title.json | 2 +- .../fixtures/blocks/core__comments-title.serialized.html | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.json b/test/integration/fixtures/blocks/core__comment-edit-link.json index 8c625436e5af48..1584c46ac563bb 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.json +++ b/test/integration/fixtures/blocks/core__comment-edit-link.json @@ -4,9 +4,9 @@ "isValid": true, "attributes": { "linkTarget": "_blank", + "backgroundColor": "recommended-color-03", "fontFamily": "system-monospace", "fontSize": "extra-large", - "backgroundColor": "recommended-color-03", "style": { "typography": { "fontStyle": "normal", diff --git a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html index 7c48b107b2315c..8492ea9b93dab1 100644 --- a/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html +++ b/test/integration/fixtures/blocks/core__comment-edit-link.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-pagination-previous.json b/test/integration/fixtures/blocks/core__comments-pagination-previous.json index 91754fdc1bccd2..302d4a110dc212 100644 --- a/test/integration/fixtures/blocks/core__comments-pagination-previous.json +++ b/test/integration/fixtures/blocks/core__comments-pagination-previous.json @@ -3,8 +3,8 @@ "name": "core/comments-pagination-previous", "isValid": true, "attributes": { - "fontSize": "medium", "backgroundColor": "foreground", + "fontSize": "medium", "style": { "typography": { "textTransform": "uppercase" diff --git a/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html index 5d9f75e2937226..c533cd82b5a4b9 100644 --- a/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-pagination-previous.serialized.html @@ -1 +1 @@ - + diff --git a/test/integration/fixtures/blocks/core__comments-title.json b/test/integration/fixtures/blocks/core__comments-title.json index e485a55de4022b..bb436b955cd9ca 100644 --- a/test/integration/fixtures/blocks/core__comments-title.json +++ b/test/integration/fixtures/blocks/core__comments-title.json @@ -7,9 +7,9 @@ "showCommentsCount": true, "level": 4, "borderColor": "vivid-red", - "fontSize": "large", "backgroundColor": "primary", "textColor": "background", + "fontSize": "large", "style": { "spacing": { "padding": { diff --git a/test/integration/fixtures/blocks/core__comments-title.serialized.html b/test/integration/fixtures/blocks/core__comments-title.serialized.html index 8b9796e990461e..6507dc669314d4 100644 --- a/test/integration/fixtures/blocks/core__comments-title.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-title.serialized.html @@ -1 +1 @@ - + From 787658bbd98bc3c1bee75c1fa9d852d5f734ff90 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 5 Apr 2024 23:22:21 +0900 Subject: [PATCH 25/26] Add `textAlign` to `useBlockSettings` --- lib/class-wp-theme-json-gutenberg.php | 3 +++ packages/block-editor/src/hooks/utils.js | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index aafc20a2debd51..a665235d7e774e 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -244,6 +244,7 @@ class WP_Theme_JSON_Gutenberg { 'border-left-width' => array( 'border', 'left', 'width' ), 'border-left-style' => array( 'border', 'left', 'style' ), 'color' => array( 'color', 'text' ), + 'text-align' => array( 'typography', 'textAlign' ), 'column-count' => array( 'typography', 'textColumns' ), 'font-family' => array( 'typography', 'fontFamily' ), 'font-size' => array( 'typography', 'fontSize' ), @@ -436,6 +437,7 @@ class WP_Theme_JSON_Gutenberg { 'fontWeight' => null, 'letterSpacing' => null, 'lineHeight' => null, + 'textAlign' => null, 'textColumns' => null, 'textDecoration' => null, 'textTransform' => null, @@ -531,6 +533,7 @@ class WP_Theme_JSON_Gutenberg { 'fontWeight' => null, 'letterSpacing' => null, 'lineHeight' => null, + 'textAlign' => null, 'textColumns' => null, 'textDecoration' => null, 'textTransform' => null, diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 6d75f2c2a686d2..2148b2bb8e5ce7 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -220,6 +220,7 @@ export function useBlockSettings( name, parentLayout ) { fontStyle, fontWeight, lineHeight, + textAlign, textColumns, textDecoration, writingMode, @@ -271,6 +272,7 @@ export function useBlockSettings( name, parentLayout ) { 'typography.fontStyle', 'typography.fontWeight', 'typography.lineHeight', + 'typography.textAlign', 'typography.textColumns', 'typography.textDecoration', 'typography.writingMode', @@ -360,6 +362,7 @@ export function useBlockSettings( name, parentLayout ) { fontStyle, fontWeight, lineHeight, + textAlign, textColumns, textDecoration, textTransform, @@ -402,6 +405,7 @@ export function useBlockSettings( name, parentLayout ) { fontStyle, fontWeight, lineHeight, + textAlign, textColumns, textDecoration, textTransform, From 611a0b2ad27d7407431aa081cb872718aff7315f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sat, 13 Apr 2024 14:26:36 +0900 Subject: [PATCH 26/26] Make styles work in the Site Editor --- packages/blocks/src/api/constants.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 62933d69d764f4..08b4e084e2ec9b 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -228,6 +228,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, useEngine: true, }, + textAlign: { + value: [ 'typography', 'textAlign' ], + support: [ 'typography', 'textAlign' ], + useEngine: false, + }, textDecoration: { value: [ 'typography', 'textDecoration' ], support: [ 'typography', '__experimentalTextDecoration' ],