Skip to content

Commit e80cc35

Browse files
shail-mehtashail-mehtat-hamano
authored
Post Comments Count: Migrate to text-align block support (WordPress#75321)
* Post Comments Count: Migrate to text-align block support * Post Comments Count: Migrate to text-align block support * added feedback changes * added feedback changes Co-authored-by: shail-mehta <shailu25@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
1 parent 7acb0c1 commit e80cc35

File tree

10 files changed

+167
-42
lines changed

10 files changed

+167
-42
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -674,8 +674,7 @@ Display a post's comments count. ([Source](https://github.com/WordPress/gutenber
674674

675675
- **Name:** core/post-comments-count
676676
- **Category:** theme
677-
- **Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
678-
- **Attributes:** textAlign
677+
- **Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight, textAlign), ~~html~~
679678

680679
## Comments Form
681680

‎packages/block-library/src/post-comments-count/block.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@
66
"category": "theme",
77
"description": "Display a post's comments count.",
88
"textdomain": "default",
9-
"attributes": {
10-
"textAlign": {
11-
"type": "string"
12-
}
13-
},
149
"usesContext": [ "postId" ],
1510
"example": {
1611
"viewportWidth": 350
@@ -32,6 +27,7 @@
3227
"typography": {
3328
"fontSize": true,
3429
"lineHeight": true,
30+
"textAlign": true,
3531
"__experimentalFontFamily": true,
3632
"__experimentalFontWeight": true,
3733
"__experimentalFontStyle": true,

‎packages/block-library/src/post-comments-count/deprecated.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/**
2+
* Internal dependencies
3+
*/
4+
import migrateTextAlign from '../utils/migrate-text-align';
5+
6+
const v1 = {
7+
attributes: {
8+
textAlign: {
9+
type: 'string',
10+
},
11+
},
12+
supports: {
13+
anchor: true,
14+
html: false,
15+
spacing: {
16+
margin: true,
17+
padding: true,
18+
},
19+
color: {
20+
gradients: true,
21+
__experimentalDefaultControls: {
22+
background: true,
23+
text: true,
24+
},
25+
},
26+
typography: {
27+
fontSize: true,
28+
lineHeight: true,
29+
__experimentalFontFamily: true,
30+
__experimentalFontWeight: true,
31+
__experimentalFontStyle: true,
32+
__experimentalTextTransform: true,
33+
__experimentalTextDecoration: true,
34+
__experimentalLetterSpacing: true,
35+
__experimentalDefaultControls: {
36+
fontSize: true,
37+
},
38+
},
39+
interactivity: {
40+
clientNavigation: true,
41+
},
42+
__experimentalBorder: {
43+
radius: true,
44+
color: true,
45+
width: true,
46+
style: true,
47+
},
48+
},
49+
migrate: migrateTextAlign,
50+
isEligible( attributes ) {
51+
return (
52+
!! attributes.textAlign ||
53+
!! attributes.className?.match(
54+
/\bhas-text-align-(left|center|right)\b/
55+
)
56+
);
57+
},
58+
save: () => null,
59+
};
60+
61+
export default [ v1 ];

‎packages/block-library/src/post-comments-count/edit.js‎

Lines changed: 10 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,24 @@
1-
/**
2-
* External dependencies
3-
*/
4-
import clsx from 'clsx';
5-
61
/**
72
* WordPress dependencies
83
*/
9-
import {
10-
AlignmentControl,
11-
BlockControls,
12-
useBlockProps,
13-
} from '@wordpress/block-editor';
4+
import { useBlockProps } from '@wordpress/block-editor';
145
import { useState, useEffect } from '@wordpress/element';
156
import apiFetch from '@wordpress/api-fetch';
167
import { addQueryArgs } from '@wordpress/url';
178

18-
export default function PostCommentsCountEdit( {
19-
attributes,
20-
context,
21-
setAttributes,
22-
} ) {
23-
const { textAlign } = attributes;
9+
export default function PostCommentsCountEdit( { context } ) {
2410
const { postId } = context;
2511
const [ commentsCount, setCommentsCount ] = useState();
26-
const blockProps = useBlockProps( {
27-
className: clsx( {
28-
[ `has-text-align-${ textAlign }` ]: textAlign,
29-
} ),
30-
} );
12+
13+
const blockProps = useBlockProps();
3114

3215
useEffect( () => {
3316
if ( ! postId ) {
3417
return;
3518
}
19+
3620
const currentPostId = postId;
21+
3722
apiFetch( {
3823
path: addQueryArgs( '/wp/v2/comments', {
3924
post: postId,
@@ -48,6 +33,7 @@ export default function PostCommentsCountEdit( {
4833
}, [ postId ] );
4934

5035
const hasPostAndComments = postId && commentsCount !== undefined;
36+
5137
const blockStyles = {
5238
...blockProps.style,
5339
textDecoration: hasPostAndComments
@@ -56,18 +42,8 @@ export default function PostCommentsCountEdit( {
5642
};
5743

5844
return (
59-
<>
60-
<BlockControls group="block">
61-
<AlignmentControl
62-
value={ textAlign }
63-
onChange={ ( nextAlign ) => {
64-
setAttributes( { textAlign: nextAlign } );
65-
} }
66-
/>
67-
</BlockControls>
68-
<div { ...blockProps } style={ blockStyles }>
69-
{ hasPostAndComments ? commentsCount : '0' }
70-
</div>
71-
</>
45+
<div { ...blockProps } style={ blockStyles }>
46+
{ hasPostAndComments ? commentsCount : '0' }
47+
</div>
7248
);
7349
}

‎packages/block-library/src/post-comments-count/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
1010
import metadata from './block.json';
1111
import edit from './edit';
1212
import transforms from './transforms';
13+
import deprecated from './deprecated';
1314

1415
const { name } = metadata;
1516
export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
1819
icon,
1920
edit,
2021
transforms,
22+
deprecated,
2123
};
2224

2325
export const init = () => initBlock( { name, metadata, settings } );

‎packages/block-library/src/post-comments-link/transforms.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const transforms = {
1010
blocks: [ 'core/post-comments-count' ],
1111
transform: ( { textAlign } ) => {
1212
return createBlock( 'core/post-comments-count', {
13-
textAlign,
13+
style: { typography: { textAlign } },
1414
} );
1515
},
1616
},

‎test/integration/fixtures/blocks/core__post-comments-count__deprecated-v1.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- wp:post-comments-count {"textAlign":"left"} /-->
2+
3+
<!-- wp:post-comments-count {"textAlign":"center"} /-->
4+
5+
<!-- wp:post-comments-count {"textAlign":"right"} /-->

‎test/integration/fixtures/blocks/core__post-comments-count__deprecated-v1.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
[
2+
{
3+
"name": "core/post-comments-count",
4+
"isValid": true,
5+
"attributes": {
6+
"style": {
7+
"typography": {
8+
"textAlign": "left"
9+
}
10+
}
11+
},
12+
"innerBlocks": []
13+
},
14+
{
15+
"name": "core/post-comments-count",
16+
"isValid": true,
17+
"attributes": {
18+
"style": {
19+
"typography": {
20+
"textAlign": "center"
21+
}
22+
}
23+
},
24+
"innerBlocks": []
25+
},
26+
{
27+
"name": "core/post-comments-count",
28+
"isValid": true,
29+
"attributes": {
30+
"style": {
31+
"typography": {
32+
"textAlign": "right"
33+
}
34+
}
35+
},
36+
"innerBlocks": []
37+
}
38+
]

‎test/integration/fixtures/blocks/core__post-comments-count__deprecated-v1.parsed.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
[
2+
{
3+
"blockName": "core/post-comments-count",
4+
"attrs": {
5+
"textAlign": "left"
6+
},
7+
"innerBlocks": [],
8+
"innerHTML": "",
9+
"innerContent": []
10+
},
11+
{
12+
"blockName": null,
13+
"attrs": {},
14+
"innerBlocks": [],
15+
"innerHTML": "\n\n",
16+
"innerContent": [ "\n\n" ]
17+
},
18+
{
19+
"blockName": "core/post-comments-count",
20+
"attrs": {
21+
"textAlign": "center"
22+
},
23+
"innerBlocks": [],
24+
"innerHTML": "",
25+
"innerContent": []
26+
},
27+
{
28+
"blockName": null,
29+
"attrs": {},
30+
"innerBlocks": [],
31+
"innerHTML": "\n\n",
32+
"innerContent": [ "\n\n" ]
33+
},
34+
{
35+
"blockName": "core/post-comments-count",
36+
"attrs": {
37+
"textAlign": "right"
38+
},
39+
"innerBlocks": [],
40+
"innerHTML": "",
41+
"innerContent": []
42+
}
43+
]

‎test/integration/fixtures/blocks/core__post-comments-count__deprecated-v1.serialized.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!-- wp:post-comments-count {"style":{"typography":{"textAlign":"left"}}} /-->
2+
3+
<!-- wp:post-comments-count {"style":{"typography":{"textAlign":"center"}}} /-->
4+
5+
<!-- wp:post-comments-count {"style":{"typography":{"textAlign":"right"}}} /-->

0 commit comments

Comments
 (0)