Skip to content

Commit 12e68af

Browse files
shimotmkshimotmkt-hamano
authored
Heading: Migrate to text-align block support (#74383)
Co-authored-by: shimotmk <shimotomoki@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
1 parent 1224502 commit 12e68af

23 files changed

Lines changed: 324 additions & 83 deletions

‎docs/reference-guides/core-blocks.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -408,8 +408,8 @@ Introduce new sections and organize content to help visitors (and search engines
408408

409409
- **Name:** core/heading
410410
- **Category:** text
411-
- **Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fitText, fontSize, lineHeight)
412-
- **Attributes:** content, level, levelOptions, placeholder, textAlign
411+
- **Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fitText, fontSize, lineHeight, textAlign)
412+
- **Attributes:** content, level, levelOptions, placeholder
413413

414414
## Home Link
415415

‎packages/block-library/src/block-keyboard-shortcuts/index.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,12 @@ function BlockKeyboardShortcuts() {
5454
const sourceTextAlign =
5555
attributes.textAlign || attributes.style?.typography?.textAlign;
5656

57-
// When destination is heading, preserve heading format (textAlign attribute + level)
58-
// When destination is paragraph, use block support format (style.typography.textAlign)
57+
// When destination is heading, set the level
5958
if ( destinationBlockName === 'core/heading' ) {
6059
newAttributes.level = level;
61-
if ( sourceTextAlign ) {
62-
newAttributes.textAlign = sourceTextAlign;
63-
}
64-
} else if ( sourceTextAlign ) {
65-
// Destination is paragraph
60+
}
61+
62+
if ( sourceTextAlign ) {
6663
newAttributes.style = {
6764
typography: {
6865
textAlign: sourceTextAlign,

‎packages/block-library/src/heading/block.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@
88
"keywords": [ "title", "subtitle" ],
99
"textdomain": "default",
1010
"attributes": {
11-
"textAlign": {
12-
"type": "string"
13-
},
1411
"content": {
1512
"type": "rich-text",
1613
"source": "rich-text",
@@ -58,6 +55,7 @@
5855
"typography": {
5956
"fontSize": true,
6057
"lineHeight": true,
58+
"textAlign": true,
6159
"__experimentalFontFamily": true,
6260
"__experimentalFontStyle": true,
6361
"__experimentalFontWeight": true,

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

Lines changed: 118 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ import {
1212
useBlockProps,
1313
} from '@wordpress/block-editor';
1414

15+
/**
16+
* Internal dependencies
17+
*/
18+
import migrateTextAlignAttributeToBlockSupport from '../utils/migrate-text-align';
19+
1520
const blockSupports = {
1621
className: false,
1722
anchor: true,
@@ -75,7 +80,9 @@ const v1 = {
7580
},
7681
},
7782
migrate: ( attributes ) =>
78-
migrateCustomColors( migrateTextAlign( attributes ) ),
83+
migrateTextAlignAttributeToBlockSupport(
84+
migrateCustomColors( migrateTextAlign( attributes ) )
85+
),
7986
save( { attributes } ) {
8087
const { align, level, content, textColor, customTextColor } =
8188
attributes;
@@ -111,7 +118,9 @@ const v2 = {
111118
},
112119
},
113120
migrate: ( attributes ) =>
114-
migrateCustomColors( migrateTextAlign( attributes ) ),
121+
migrateTextAlignAttributeToBlockSupport(
122+
migrateCustomColors( migrateTextAlign( attributes ) )
123+
),
115124
save( { attributes } ) {
116125
const { align, content, customTextColor, level, textColor } =
117126
attributes;
@@ -149,7 +158,9 @@ const v3 = {
149158
},
150159
},
151160
migrate: ( attributes ) =>
152-
migrateCustomColors( migrateTextAlign( attributes ) ),
161+
migrateTextAlignAttributeToBlockSupport(
162+
migrateCustomColors( migrateTextAlign( attributes ) )
163+
),
153164
save( { attributes } ) {
154165
const { align, content, customTextColor, level, textColor } =
155166
attributes;
@@ -195,7 +206,10 @@ const v4 = {
195206
},
196207
attributes: blockAttributes,
197208
isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
198-
migrate: migrateTextAlign,
209+
migrate: ( attributes ) =>
210+
migrateTextAlignAttributeToBlockSupport(
211+
migrateCustomColors( migrateTextAlign( attributes ) )
212+
),
199213
save( { attributes } ) {
200214
const { align, content, level } = attributes;
201215
const TagName = 'h' + level;
@@ -283,8 +297,107 @@ const v5 = {
283297
</TagName>
284298
);
285299
},
300+
migrate: ( attributes ) =>
301+
migrateTextAlignAttributeToBlockSupport(
302+
migrateCustomColors( migrateTextAlign( attributes ) )
303+
),
304+
};
305+
306+
const v6 = {
307+
supports: {
308+
align: [ 'wide', 'full' ],
309+
anchor: true,
310+
className: true,
311+
splitting: true,
312+
__experimentalBorder: {
313+
color: true,
314+
radius: true,
315+
style: true,
316+
width: true,
317+
},
318+
color: {
319+
gradients: true,
320+
link: true,
321+
__experimentalDefaultControls: {
322+
background: true,
323+
text: true,
324+
},
325+
},
326+
spacing: {
327+
margin: true,
328+
padding: true,
329+
},
330+
typography: {
331+
fontSize: true,
332+
lineHeight: true,
333+
__experimentalFontFamily: true,
334+
__experimentalFontStyle: true,
335+
__experimentalFontWeight: true,
336+
__experimentalLetterSpacing: true,
337+
__experimentalTextTransform: true,
338+
__experimentalTextDecoration: true,
339+
__experimentalWritingMode: true,
340+
fitText: true,
341+
__experimentalDefaultControls: {
342+
fontSize: true,
343+
},
344+
},
345+
__unstablePasteTextInline: true,
346+
__experimentalSlashInserter: true,
347+
interactivity: {
348+
clientNavigation: true,
349+
},
350+
},
351+
attributes: {
352+
textAlign: {
353+
type: 'string',
354+
},
355+
content: {
356+
type: 'string',
357+
source: 'html',
358+
selector: 'h1,h2,h3,h4,h5,h6',
359+
default: '',
360+
role: 'content',
361+
},
362+
level: {
363+
type: 'number',
364+
default: 2,
365+
},
366+
levelOptions: {
367+
type: 'array',
368+
},
369+
placeholder: {
370+
type: 'string',
371+
},
372+
},
373+
save( { attributes } ) {
374+
const { textAlign, content, level } = attributes;
375+
const TagName = 'h' + level;
376+
377+
const className = clsx( {
378+
[ `has-text-align-${ textAlign }` ]: textAlign,
379+
} );
380+
381+
return (
382+
<TagName { ...useBlockProps.save( { className } ) }>
383+
<RichText.Content value={ content } />
384+
</TagName>
385+
);
386+
},
387+
migrate: ( attributes ) =>
388+
migrateTextAlignAttributeToBlockSupport(
389+
migrateCustomColors( migrateTextAlign( attributes ) )
390+
),
391+
isEligible( attributes ) {
392+
return (
393+
!! attributes.textAlign ||
394+
!! attributes.className?.match(
395+
/\bhas-text-align-(left|center|right)\b/
396+
)
397+
);
398+
},
286399
};
287400

288-
const deprecated = [ v5, v4, v3, v2, v1 ];
401+
const deprecated = [ v6, v5, v4, v3, v2, v1 ];
289402

290403
export default deprecated;

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

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,30 @@
1-
/**
2-
* External dependencies
3-
*/
4-
import clsx from 'clsx';
5-
61
/**
72
* WordPress dependencies
83
*/
94
import { __ } from '@wordpress/i18n';
105
import { useEffect, Platform } from '@wordpress/element';
116
import { useDispatch, useSelect } from '@wordpress/data';
127
import {
13-
AlignmentControl,
14-
BlockControls,
158
RichText,
169
useBlockProps,
1710
store as blockEditorStore,
18-
useBlockEditingMode,
1911
} from '@wordpress/block-editor';
2012

2113
/**
2214
* Internal dependencies
2315
*/
2416
import { generateAnchor, setAnchor } from './autogenerate-anchors';
17+
import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
2518

26-
function HeadingEdit( {
27-
attributes,
28-
setAttributes,
29-
mergeBlocks,
30-
onReplace,
31-
style,
32-
clientId,
33-
} ) {
34-
const { textAlign, content, level, placeholder, anchor } = attributes;
19+
function HeadingEdit( props ) {
20+
const { attributes, setAttributes, mergeBlocks, onReplace, clientId } =
21+
props;
22+
useDeprecatedTextAlign( props );
23+
const { style, content, level, placeholder, anchor } = attributes;
3524
const tagName = 'h' + level;
3625
const blockProps = useBlockProps( {
37-
className: clsx( {
38-
[ `has-text-align-${ textAlign }` ]: textAlign,
39-
} ),
4026
style,
4127
} );
42-
const blockEditingMode = useBlockEditingMode();
4328

4429
const { canGenerateAnchors } = useSelect( ( select ) => {
4530
const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
@@ -90,16 +75,6 @@ function HeadingEdit( {
9075

9176
return (
9277
<>
93-
{ blockEditingMode === 'default' && (
94-
<BlockControls group="block">
95-
<AlignmentControl
96-
value={ textAlign }
97-
onChange={ ( nextAlign ) => {
98-
setAttributes( { textAlign: nextAlign } );
99-
} }
100-
/>
101-
</BlockControls>
102-
) }
10378
<RichText
10479
identifier="content"
10580
tagName={ tagName }
@@ -109,7 +84,6 @@ function HeadingEdit( {
10984
onReplace={ onReplace }
11085
onRemove={ () => onReplace( [] ) }
11186
placeholder={ placeholder || __( 'Heading' ) }
112-
textAlign={ textAlign }
11387
{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
11488
{ ...blockProps }
11589
/>

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,14 @@ function HeadingEdit( {
3232
style,
3333
clientId,
3434
} ) {
35-
const { textAlign, content, level, placeholder, anchor } = attributes;
35+
const {
36+
content,
37+
level,
38+
placeholder,
39+
anchor,
40+
style: attributesStyle,
41+
} = attributes;
42+
const textAlign = attributesStyle?.typography?.textAlign;
3643
const tagName = 'h' + level;
3744
const blockProps = useBlockProps( {
3845
className: clsx( {
@@ -100,7 +107,15 @@ function HeadingEdit( {
100107
<AlignmentControl
101108
value={ textAlign }
102109
onChange={ ( nextAlign ) => {
103-
setAttributes( { textAlign: nextAlign } );
110+
setAttributes( {
111+
style: {
112+
...attributesStyle,
113+
typography: {
114+
...attributesStyle?.typography,
115+
textAlign: nextAlign,
116+
},
117+
},
118+
} );
104119
} }
105120
/>
106121
</BlockControls>

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

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
1-
/**
2-
* External dependencies
3-
*/
4-
import clsx from 'clsx';
5-
61
/**
72
* WordPress dependencies
83
*/
94
import { RichText, useBlockProps } from '@wordpress/block-editor';
105

116
export default function save( { attributes } ) {
12-
const { textAlign, content, level } = attributes;
7+
const { content, level } = attributes;
138
const TagName = 'h' + level;
149

15-
const className = clsx( {
16-
[ `has-text-align-${ textAlign }` ]: textAlign,
17-
} );
18-
1910
return (
20-
<TagName { ...useBlockProps.save( { className } ) }>
11+
<TagName { ...useBlockProps.save() }>
2112
<RichText.Content value={ content } />
2213
</TagName>
2314
);

‎packages/block-library/src/heading/transforms.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,13 @@ const transforms = {
2929
),
3030
content,
3131
anchor,
32-
textAlign,
32+
...( textAlign && {
33+
style: {
34+
typography: {
35+
textAlign,
36+
},
37+
},
38+
} ),
3339
} );
3440
} ),
3541
},
@@ -64,7 +70,13 @@ const transforms = {
6470
textAlign === 'center' ||
6571
textAlign === 'right'
6672
) {
67-
attributes.align = textAlign;
73+
attributes.style = {
74+
...attributes.style,
75+
typography: {
76+
...attributes.style?.typography,
77+
textAlign,
78+
},
79+
};
6880
}
6981

7082
return createBlock( 'core/heading', attributes );
@@ -93,7 +105,8 @@ const transforms = {
93105
blocks: [ 'core/paragraph' ],
94106
transform: ( attributes ) =>
95107
attributes.map( ( _attributes ) => {
96-
const { content, textAlign } = _attributes;
108+
const { content, style } = _attributes;
109+
const textAlign = style?.typography?.textAlign;
97110
return createBlock( 'core/paragraph', {
98111
...getTransformedAttributes(
99112
_attributes,

0 commit comments

Comments
 (0)