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

Block Library: Add a Post Comments block. #19581

Merged
merged 6 commits into from
Mar 18, 2020
Merged

Block Library: Add a Post Comments block. #19581

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
321afe6
Block Library: Add a Post Comments block.
epiqueras Jan 11, 2020
1e21623
Lint
epiqueras Feb 24, 2020
cede9bc
Add "no comment" placeholder.
noahtallen Mar 17, 2020
16710f8
Add TODOs for followup tasks
noahtallen Mar 17, 2020
33c6aa0
Check for length in no comments check
noahtallen Mar 17, 2020
d16c938
Add e2e test fixtures for post comments block
noahtallen Mar 18, 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
1 change: 1 addition & 0 deletions lib/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function gutenberg_reregister_core_block_types() {
'post-title.php' => 'core/post-title',
'post-content.php' => 'core/post-content',
'post-author.php' => 'core/post-author',
'post-comments.php' => 'core/post-comments',
'post-comments-count.php' => 'core/post-comments-count',
'post-comments-form.php' => 'core/post-comments-form',
'post-date.php' => 'core/post-date',
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ import * as templatePart from './template-part';
import * as postTitle from './post-title';
import * as postContent from './post-content';
import * as postAuthor from './post-author';
import * as postComments from './post-comments';
import * as postCommentsCount from './post-comments-count';
import * as postCommentsForm from './post-comments-form';
import * as postDate from './post-date';
Expand Down Expand Up @@ -199,6 +200,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
postTitle,
postContent,
postAuthor,
postComments,
postCommentsCount,
postCommentsForm,
postDate,
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/post-comments/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "core/post-comments",
"category": "layout"
}
36 changes: 36 additions & 0 deletions packages/block-library/src/post-comments/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { useEntityId } from '@wordpress/core-data';
import { __ } from '@wordpress/i18n';

function PostCommentsDisplay( { postId } ) {
return useSelect(
( select ) => {
const comments = select( 'core' ).getEntityRecords(
'root',
'comment',
{
post: postId,
}
);
// TODO: "No Comments" placeholder should be editable.
return comments
? comments.map( ( comment ) => (
<p key={ comment.id }>{ comment.content.raw }</p>
) )
: __( 'No comments.' );
},
[ postId ]
);
}

export default function PostCommentsEdit() {
// TODO: Update to handle multiple post types.
const postId = useEntityId( 'postType', 'post' );
Copy link
Member

@jorgefilipecosta jorgefilipecosta Jan 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

We may have other post types that support comments, for all these post types we are rendering 'Post Comments Placeholder' while I think we should render the same we render for posts (the comments in that post).

For post types that don't support comments but are not templates or template parts, I think we should not show the block on the inserter e.g: remove it from the allowed blocks or if we show in the inserter we should say in the block that comments are not supported. The block should handle the condition and show this message even if hidden from the inserter because a CPT may have supported comments in the past and then the user may disable the comments.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This makes sense, but we'll have to handle it at another level in the code.

It will likely require changes to core-data to get post type capabilities and have CPTs act as posts under certain conditions.

Copy link
Contributor

Choose a reason for hiding this comment

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

This is actually a very good remark and one that should lead to some rethinking in how the context EntityProvider and useEntityProp/useEntityId works.

Ideally, these hooks should just work no matter the CPT (all CPTs can have all properties) and should not have "post" hard-coded.

My first thinking here is that we should be able to do something like:

const entityId = useEntityId( 'postType' );
const entityContent = useEntityProp( 'postType', null, 'content' );
``
`

And these should basically return the first entity in the tree with the "kind" (postType)

We could even imagine a use-case for a post where we'd want any entity (less likely but why not)

const entityId = useEntityId();
const entityContent = useEntityProp( null, null, 'content' )


Too bad `useEntityProp` is a stable API now though cause "null" for  the first and second args is not great.

Copy link
Contributor

Choose a reason for hiding this comment

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

This is not the first block where it's specific to "post" so we need to solve this ASAP on a follow-up PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, this is what I suggested.

But, #19685 (comment) is my preferred alternative that also works on the server.

if ( ! postId ) {
return 'Post Comments Placeholder';
}
return <PostCommentsDisplay postId={ postId } />;
}
18 changes: 18 additions & 0 deletions packages/block-library/src/post-comments/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import metadata from './block.json';
import edit from './edit';

const { name } = metadata;
export { metadata, name };

export const settings = {
title: __( 'Post Comments' ),
edit,
};
42 changes: 42 additions & 0 deletions packages/block-library/src/post-comments/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?php
/**
* Server-side rendering of the `core/post-comments` block.
*
* @package WordPress
*/

/**
* Renders the `core/post-comments` block on the server.
*
* @return string Returns the filtered post comments for the current post wrapped inside "p" tags.
*/
function render_block_core_post_comments() {
$post = gutenberg_get_post_from_context();
epiqueras marked this conversation as resolved.
Show resolved Hide resolved
if ( ! $post ) {
return '';
}
$comments = get_comments(
array(
'post_id' => $post->ID,
)
);
$output = '';
// TODO: Handle nested comments.
foreach ( $comments as $comment ) {
noahtallen marked this conversation as resolved.
Show resolved Hide resolved
$output .= '<p>' . $comment->comment_author . '<br />' . $comment->comment_content . '</p>';
}
return $output;
}

/**
* Registers the `core/post-comments` block on the server.
*/
function register_block_core_post_comments() {
register_block_type(
'core/post-comments',
array(
'render_callback' => 'render_block_core_post_comments',
)
);
}
add_action( 'init', 'register_block_core_post_comments' );
7 changes: 7 additions & 0 deletions packages/core-data/src/entities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,13 @@ export const defaultEntities = [
baseURL: '/wp/v2/users',
plural: 'users',
},
{
name: 'comment',
kind: 'root',
baseURL: '/wp/v2/comments',
plural: 'comments',
label: __( 'Comment' ),
},
];

export const kinds = [
Expand Down