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.

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

Merge Comments and Post Comments blocks #41807

Merged
merged 46 commits into from
Jul 22, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
26f6429
Merge the blocks and remove the old one
DAreRodz Jul 15, 2022
7d13993
Fix comments block type registration
DAreRodz Jul 8, 2022
c279c95
Remove gutenberg prefix
DAreRodz Jul 8, 2022
52162af
Fix a problem with multiple styles
DAreRodz Jul 8, 2022
5db0aff
Update some comments
DAreRodz Jul 8, 2022
e8631ad
Fix php-lint errors
DAreRodz Jul 9, 2022
dd167e3
Move legacy part in edit to its own component
DAreRodz Jul 9, 2022
5161e38
Fix typo
DAreRodz Jul 9, 2022
38a924e
Replace comments_query_loop with comments
DAreRodz Jul 10, 2022
8f84a2c
Improve the render callback's description
DAreRodz Jul 10, 2022
4e2cfed
Fix the HTML returned for the non-legacy version
DAreRodz Jul 10, 2022
378154c
Run npm run docs:build
ockham Jul 11, 2022
a190e91
Regenerate fixtures
ockham Jul 11, 2022
ff28b3d
Update warning message in the editor
DAreRodz Jul 11, 2022
0195ed5
Fix string closing marks
DAreRodz Jul 11, 2022
febc24b
Add a button to switch from legacy to default
DAreRodz Jul 11, 2022
3dfa5e0
Fix `useBlockProps` call after rebase
DAreRodz Jul 15, 2022
35fda82
Add tests for Post Comments block support
DAreRodz Jul 19, 2022
3db2eea
Simplify before/after functions
DAreRodz Jul 20, 2022
5e2893d
Move Post Comments tests into its own describe
DAreRodz Jul 20, 2022
249de8c
Move `createPost` to `requestUtils`
DAreRodz Jul 20, 2022
bb6d16b
Add missing newline
DAreRodz Jul 20, 2022
a2fcb4a
Add TS to playwright post utils
DAreRodz Jul 20, 2022
47f7ae6
Add test to switch button
DAreRodz Jul 20, 2022
64cc5b4
Update placeholder classname
DAreRodz Jul 20, 2022
ff8fe04
Use `setAttributes` to switch from legacy mode
DAreRodz Jul 21, 2022
0ac9b0f
Regenerate fixtures
DAreRodz Jul 21, 2022
dc7a11e
Move Warning logic into Post Comments Form component
ockham Jul 21, 2022
2360f68
Deduplicate
ockham Jul 21, 2022
0ed0317
Inline warning
ockham Jul 21, 2022
2afa3ec
Simplify
ockham Jul 21, 2022
6c1ede5
Nicer on the eye
ockham Jul 21, 2022
ce8a1b7
A bit nicer still
ockham Jul 21, 2022
dc07681
Inlining is fun
ockham Jul 21, 2022
03fbcff
i18n fix
ockham Jul 21, 2022
b9b69d2
Only count approved comments
DAreRodz Jul 21, 2022
1e38f4d
Remove unnecessary warning in PHP
DAreRodz Jul 21, 2022
f609c85
Add tests for the `legacy` attribute
DAreRodz Jul 21, 2022
8007e53
Fix the PHP render callback
DAreRodz Jul 21, 2022
81cfd7d
Move comment about `setOptions` inside `forEach`
DAreRodz Jul 21, 2022
cf790fd
Make `setOptions` util stateless
DAreRodz Jul 21, 2022
2007766
Remove `legacy: false`
DAreRodz Jul 21, 2022
3a23e9f
Clarify "block version"
DAreRodz Jul 21, 2022
a93d0c7
Replace unnecessary backticks with single quotes
DAreRodz Jul 21, 2022
bef407c
Use `getEditedPostContent`
DAreRodz Jul 22, 2022
85ec8d3
Slightly improve some comments
DAreRodz Jul 22, 2022
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
11 changes: 1 addition & 10 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ An advanced block that allows displaying post comments using different visual co
- **Name:** core/comments
- **Category:** theme
- **Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~
- **Attributes:** tagName
- **Attributes:** legacy, tagName

## Comments Pagination

Expand Down Expand Up @@ -485,15 +485,6 @@ This block is deprecated. Please use the Comments block instead. ([Source](https
- **Supports:** ~~html~~, ~~inserter~~
- **Attributes:** commentId

## Post Comments (deprecated)

This block is deprecated. Please use the Comments block instead. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments))

- **Name:** core/post-comments
- **Category:** theme
- **Supports:** align (full, wide), color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~
- **Attributes:** textAlign

## Post Comments Count

Display a post's comments count. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-count))
Expand Down
2 changes: 1 addition & 1 deletion lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ function gutenberg_reregister_core_block_types() {
'comments-pagination-numbers.php' => 'core/comments-pagination-numbers',
'comments-pagination-previous.php' => 'core/comments-pagination-previous',
'comments-title.php' => 'core/comments-title',
'comments.php' => 'core/comments',
'file.php' => 'core/file',
'home-link.php' => 'core/home-link',
'image.php' => 'core/image',
Expand All @@ -79,7 +80,6 @@ function gutenberg_reregister_core_block_types() {
'post-author-name.php' => 'core/post-author-name',
'post-author-biography.php' => 'core/post-author-biography',
'post-comment.php' => 'core/post-comment',
'post-comments.php' => 'core/post-comments',
'post-comments-count.php' => 'core/post-comments-count',
'post-comments-form.php' => 'core/post-comments-form',
'post-comments-link.php' => 'core/post-comments-link',
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/comments/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
"tagName": {
"type": "string",
"default": "div"
},
"legacy": {
"type": "boolean",
"default": false
}
},
"supports": {
Expand All @@ -25,5 +29,6 @@
}
}
},
"editorStyle": "wp-block-comments-editor"
"editorStyle": "wp-block-comments-editor",
"usesContext": [ "postId", "postType" ]
}
71 changes: 71 additions & 0 deletions packages/block-library/src/comments/edit/comments-legacy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import {
AlignmentControl,
BlockControls,
Warning,
useBlockProps,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';

/**
* Internal dependencies
*/
import Placeholder from './placeholder';

export default function CommentsLegacy( {
attributes,
setAttributes,
context: { postType, postId },
} ) {
const { textAlign } = attributes;

const actions = [
<Button
key="convert"
onClick={ () => void setAttributes( { legacy: false } ) }
variant="primary"
>
{ __( 'Switch to editable mode' ) }
</Button>,
];

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

return (
<>
<BlockControls group="block">
<AlignmentControl
value={ textAlign }
onChange={ ( nextAlign ) => {
setAttributes( { textAlign: nextAlign } );
} }
/>
</BlockControls>

<div { ...blockProps }>
<Warning actions={ actions }>
{ __(
"Comments block: You're currently using this block in legacy mode. " +
'The following is just a placeholder, not a real comment. ' +
'The final styling may differ because it also depends on the current theme. ' +
'For better compatibility with the Block Editor, ' +
'please consider switching the block to its editable mode.'
) }
Comment on lines +59 to +65
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think __() (or rather, our string extraction util) is smart enough to handle basic string literal concatenation. See e.g. this test.

</Warning>
<Placeholder postId={ postId } postType={ postType } />
</div>
</>
);
}
35 changes: 35 additions & 0 deletions packages/block-library/src/comments/edit/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* WordPress dependencies
*/
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import CommentsInspectorControls from './comments-inspector-controls';
import CommentsLegacy from './comments-legacy';
import TEMPLATE from './template';

export default function CommentsEdit( props ) {
const { attributes, setAttributes } = props;
const { tagName: TagName, legacy } = attributes;

const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps, {
template: TEMPLATE,
} );

if ( legacy ) {
return <CommentsLegacy { ...props } />;
}

return (
<>
<CommentsInspectorControls
attributes={ attributes }
setAttributes={ setAttributes }
/>
<TagName { ...innerBlocksProps } />
</>
);
}
124 changes: 124 additions & 0 deletions packages/block-library/src/comments/edit/placeholder.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/**
* WordPress dependencies
*/
import { store as blockEditorStore } from '@wordpress/block-editor';
import { __, sprintf } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { useDisabled } from '@wordpress/compose';

/**
* Internal dependencies
*/
import CommentsForm from '../../post-comments-form/form';

export default function PostCommentsPlaceholder( { postType, postId } ) {
let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
postTitle = postTitle || __( 'Post Title' );

const { avatarURL } = useSelect(
( select ) =>
select( blockEditorStore ).getSettings()
.__experimentalDiscussionSettings
);

const disabledRef = useDisabled();

return (
<div
className="wp-block-comments__legacy-placeholder"
ref={ disabledRef }
>
<h3>
{
/* translators: %s: Post title. */
sprintf( __( 'One response to %s' ), postTitle )
}
</h3>

<div className="navigation">
<div className="alignleft">
<a href="#top">« { __( 'Older Comments' ) }</a>
</div>
<div className="alignright">
<a href="#top">{ __( 'Newer Comments' ) } »</a>
</div>
</div>

<ol className="commentlist">
<li className="comment even thread-even depth-1">
<article className="comment-body">
<footer className="comment-meta">
<div className="comment-author vcard">
<img
alt="Commenter Avatar"
src={ avatarURL }
className="avatar avatar-32 photo"
height="32"
width="32"
loading="lazy"
/>
<b className="fn">
<a href="#top" className="url">
{ __( 'A WordPress Commenter' ) }
</a>
</b>{ ' ' }
<span className="says">{ __( 'says' ) }:</span>
</div>

<div className="comment-metadata">
<a href="#top">
<time dateTime="2000-01-01T00:00:00+00:00">
{ __( 'January 1, 2000 at 00:00 am' ) }
</time>
</a>{ ' ' }
<span className="edit-link">
<a
className="comment-edit-link"
href="#top"
>
{ __( 'Edit' ) }
</a>
</span>
</div>
</footer>

<div className="comment-content">
<p>
{ __( 'Hi, this is a comment.' ) }
<br />
{ __(
'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
) }
<br />
{ __( 'Commenter avatars come from' ) }{ ' ' }
<a href="https://gravatar.com/">Gravatar</a>.
</p>
</div>

<div className="reply">
<a
className="comment-reply-link"
href="#top"
aria-label="Reply to A WordPress Commenter"
>
{ __( 'Reply' ) }
</a>
</div>
</article>
</li>
</ol>

<div className="navigation">
<div className="alignleft">
<a href="#top">« { __( 'Older Comments' ) }</a>
</div>
<div className="alignright">
<a href="#top">{ __( 'Newer Comments' ) } »</a>
</div>
</div>

<CommentsForm postId={ postId } postType={ postType } />
</div>
);
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
/**
* WordPress dependencies
*/
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import CommentsInspectorControls from './edit/comments-inspector-controls';

const TEMPLATE = [
[ 'core/comments-title' ],
[
Expand Down Expand Up @@ -88,21 +78,4 @@ const TEMPLATE = [
[ 'core/post-comments-form' ],
];

export default function CommentsEdit( { attributes, setAttributes } ) {
const { tagName: TagName } = attributes;

const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps( blockProps, {
template: TEMPLATE,
} );

return (
<>
<CommentsInspectorControls
attributes={ attributes }
setAttributes={ setAttributes }
/>
<TagName { ...innerBlocksProps } />
</>
);
}
export default TEMPLATE;
9 changes: 9 additions & 0 deletions packages/block-library/src/comments/editor.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
@import "./style.scss";

.block-library-comments-toolbar__popover .components-popover__content {
min-width: 230px;
}

.wp-block-comments__legacy-placeholder {
@extend .wp-block-post-comments;
* {
pointer-events: none;
}
}
Loading