Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Heading Block] Fix double alignment controls in toolbar #26492

Merged
merged 10 commits into from
Oct 28, 2020
Merged

[Heading Block] Fix double alignment controls in toolbar #26492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
152bc2b
fix heading alignments
ntsekouras Oct 27, 2020
b00ef91
add proper supports in deprecation
ntsekouras Oct 27, 2020
dc851d6
update all previous deprecations
ntsekouras Oct 27, 2020
27af8c3
regenerate fixtures for heading
ntsekouras Oct 27, 2020
20012f6
change migration call
ntsekouras Oct 27, 2020
9f3ecd6
remove previous className + revert saves
ntsekouras Oct 27, 2020
f7b240f
Revert "regenerate fixtures for heading"
ntsekouras Oct 27, 2020
1817082
change fixtures
ntsekouras Oct 27, 2020
77bb0d4
create new fixtures + fix deprecation save
ntsekouras Oct 27, 2020
468c54a
address review feedback
ntsekouras Oct 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/heading/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"name": "core/heading",
"category": "text",
"attributes": {
"align": {
"textAlign": {
"type": "string"
},
"content": {
Expand Down
60 changes: 56 additions & 4 deletions packages/block-library/src/heading/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ import { omit } from 'lodash';
/**
* WordPress dependencies
*/
import { getColorClassName, RichText } from '@wordpress/block-editor';
import {
getColorClassName,
RichText,
useBlockProps,
} from '@wordpress/block-editor';

const blockSupports = {
className: false,
Expand Down Expand Up @@ -48,7 +52,52 @@ const migrateCustomColors = ( attributes ) => {
};
};

const TEXT_ALIGN_OPTIONS = [ 'left', 'right', 'center' ];

const migrateTextAlign = ( attributes ) => {
const { align, ...rest } = attributes;
return TEXT_ALIGN_OPTIONS.includes( align )
? { ...rest, textAlign: align }
: attributes;
};

const deprecated = [
{
supports: {
align: [ 'wide', 'full' ],
anchor: true,
className: false,
color: { link: true },
fontSize: true,
lineHeight: true,
__experimentalSelector: {
'core/heading/h1': 'h1',
'core/heading/h2': 'h2',
'core/heading/h3': 'h3',
'core/heading/h4': 'h4',
'core/heading/h5': 'h5',
'core/heading/h6': 'h6',
},
__unstablePasteTextInline: true,
},
attributes: blockAttributes,
isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
migrate: migrateTextAlign,
save( { attributes } ) {
const { align, content, level } = attributes;
const TagName = 'h' + level;

const className = classnames( {
[ `has-text-align-${ align }` ]: align,
} );

return (
<TagName { ...useBlockProps.save( { className } ) }>
<RichText.Content value={ content } />
</TagName>
);
},
},
{
supports: blockSupports,
attributes: {
Expand All @@ -60,7 +109,8 @@ const deprecated = [
type: 'string',
},
},
migrate: migrateCustomColors,
migrate: ( attributes ) =>
migrateCustomColors( migrateTextAlign( attributes ) ),
save( { attributes } ) {
const {
align,
Expand Down Expand Up @@ -101,7 +151,8 @@ const deprecated = [
type: 'string',
},
},
migrate: migrateCustomColors,
migrate: ( attributes ) =>
migrateCustomColors( migrateTextAlign( attributes ) ),
save( { attributes } ) {
const {
align,
Expand Down Expand Up @@ -143,7 +194,8 @@ const deprecated = [
type: 'string',
},
},
migrate: migrateCustomColors,
migrate: ( attributes ) =>
migrateCustomColors( migrateTextAlign( attributes ) ),
save( { attributes } ) {
const {
align,
Expand Down
10 changes: 5 additions & 5 deletions packages/block-library/src/heading/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ function HeadingEdit( {
onReplace,
mergedStyle,
} ) {
const { align, content, level, placeholder } = attributes;
const { textAlign, content, level, placeholder } = attributes;
const tagName = 'h' + level;
const blockProps = useBlockProps( {
className: classnames( {
[ `has-text-align-${ align }` ]: align,
[ `has-text-align-${ textAlign }` ]: textAlign,
} ),
style: mergedStyle,
} );
Expand All @@ -49,9 +49,9 @@ function HeadingEdit( {
/>
</ToolbarGroup>
<AlignmentToolbar
value={ align }
value={ textAlign }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
setAttributes( { textAlign: nextAlign } );
} }
/>
</BlockControls>
Expand All @@ -74,7 +74,7 @@ function HeadingEdit( {
onReplace={ onReplace }
onRemove={ () => onReplace( [] ) }
placeholder={ placeholder || __( 'Write heading…' ) }
textAlign={ align }
textAlign={ textAlign }
{ ...blockProps }
/>
</>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/heading/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import classnames from 'classnames';
import { RichText, useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
const { align, content, level } = attributes;
const { textAlign, content, level } = attributes;
const TagName = 'h' + level;

const className = classnames( {
[ `has-text-align-${ align }` ]: align,
[ `has-text-align-${ textAlign }` ]: textAlign,
} );

return (
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"name": "core/heading",
"isValid": true,
"attributes": {
"align": "right",
"content": "A picture is worth a thousand words, or so the saying goes",
"level": 3
"level": 3,
"textAlign": "right"
},
"innerBlocks": [],
"originalContent": "<h3 style=\"text-align:right\">A picture is worth a thousand words, or so the saying goes</h3>"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:heading {"align":"right","level":3} -->
<!-- wp:heading {"textAlign":"right","level":3} -->
<h3 class="has-text-align-right">A picture is worth a thousand words, or so the saying goes</h3>
<!-- /wp:heading -->
4 changes: 4 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<!-- wp:heading {"textColor":"accent","align":"center"} -->
<h2 class="has-accent-color has-text-color has-text-align-center">Text</h2>
<!-- /wp:heading -->

15 changes: 15 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
[
{
"clientId": "_clientId_0",
"name": "core/heading",
"isValid": true,
"attributes": {
"content": "Text",
"level": 2,
"textColor": "accent",
"textAlign": "center"
},
"innerBlocks": [],
"originalContent": "<h2 class=\"has-accent-color has-text-color has-text-align-center\">Text</h2>"
}
]
23 changes: 23 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
[
{
"blockName": "core/heading",
"attrs": {
"textColor": "accent",
"align": "center"
},
"innerBlocks": [],
"innerHTML": "\n<h2 class=\"has-accent-color has-text-color has-text-align-center\">Text</h2>\n",
"innerContent": [
"\n<h2 class=\"has-accent-color has-text-color has-text-align-center\">Text</h2>\n"
]
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\n",
"innerContent": [
"\n\n"
]
}
]
3 changes: 3 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:heading {"textAlign":"center","textColor":"accent"} -->
<h2 class="has-text-align-center has-accent-color has-text-color">Text</h2>
<!-- /wp:heading -->
3 changes: 3 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:heading {"textAlign":"center","align":"wide"} -->
<h2 class="alignwide has-text-align-center">Text</h2>
<!-- /wp:heading -->
15 changes: 15 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
[
{
"clientId": "_clientId_0",
"name": "core/heading",
"isValid": true,
"attributes": {
"textAlign": "center",
"content": "Text",
"level": 2,
"align": "wide"
},
"innerBlocks": [],
"originalContent": "<h2 class=\"alignwide has-text-align-center\">Text</h2>"
}
]
23 changes: 23 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
[
{
"blockName": "core/heading",
"attrs": {
"textAlign": "center",
"align": "wide"
},
"innerBlocks": [],
"innerHTML": "\n<h2 class=\"alignwide has-text-align-center\">Text</h2>\n",
"innerContent": [
"\n<h2 class=\"alignwide has-text-align-center\">Text</h2>\n"
]
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n",
"innerContent": [
"\n"
]
}
]
3 changes: 3 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:heading {"textAlign":"center","align":"wide"} -->
<h2 class="alignwide has-text-align-center">Text</h2>
<!-- /wp:heading -->