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

Add placeholder to Post Comments block #40484

Merged
merged 6 commits into from
Apr 21, 2022
Merged

Add placeholder to Post Comments block #40484

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
15465be
Add placeholder to Post Comments block
luisherranz Apr 20, 2022
b3b2b6c
Use default avatar
luisherranz Apr 21, 2022
fe62c65
Remove logged-in as text from placeholder
luisherranz Apr 21, 2022
772549e
Add different warnings depending on the settings
luisherranz Apr 21, 2022
ff55b9b
Disable the placeholder
luisherranz Apr 21, 2022
ebb8b72
Remove pointer events in the placeholder
luisherranz Apr 21, 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
186 changes: 142 additions & 44 deletions packages/block-library/src/post-comments/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,66 +6,37 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import {
AlignmentControl,
BlockControls,
Warning,
useBlockProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { RawHTML } from '@wordpress/element';
import { store as coreStore } from '@wordpress/core-data';

function PostCommentsDisplay( { postId } ) {
return useSelect(
( select ) => {
const comments = select( coreStore ).getEntityRecords(
'root',
'comment',
{
post: postId,
}
);
// TODO: "No Comments" placeholder should be editable.
return comments && comments.length
? comments.map( ( comment ) => (
<RawHTML
className="wp-block-post-comments__comment"
key={ comment.id }
>
{ comment.content.rendered }
</RawHTML>
) )
: __( 'No comments.' );
},
[ postId ]
);
}
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';

export default function PostCommentsEdit( {
attributes,
attributes: { textAlign },
setAttributes,
context,
context: { postType, postId },
} ) {
const { postType, postId } = context;
const { textAlign } = attributes;
let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
postTitle = postTitle || __( 'Post Title' );

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

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

if ( ! postType || ! postId ) {
return (
<div { ...blockProps }>
<Warning>
{ __( 'Post comments block: no post found.' ) }
</Warning>
</div>
);
}

return (
<>
<BlockControls group="block">
Expand All @@ -78,7 +49,134 @@ export default function PostCommentsEdit( {
</BlockControls>

<div { ...blockProps }>
<PostCommentsDisplay postId={ postId } />
<Warning>
{ __(
'This 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 replacing this block with the "Comments Query Loop" block.'
) }
</Warning>

<h3>
{ __( 'One response to' ) } “{ 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>

<div className="comment-respond">
<h3 className="comment-reply-title">
{ __( 'Leave a Reply' ) }
</h3>

<form className="comment-form" noValidate={ true }>
<p className="comment-form-comment">
<label htmlFor="comment">
{ __( 'Comment' ) }{ ' ' }
<span className="required">*</span>
</label>
<textarea
name="comment"
cols="45"
rows="8"
required={ true }
/>
</p>
<p className="form-submit wp-block-button">
<input
name="submit"
type="submit"
disabled={ true }
className="submit wp-block-button__link"
value={ __( 'Post Comment' ) }
/>
</p>
</form>
</div>
</div>
</>
);
Expand Down
6 changes: 1 addition & 5 deletions packages/block-library/src/post-comments/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
.wp-block-post-comments {
// Remove extraneous top padding added to the first heading of the block.
> h3:first-of-type {
margin-top: 0;
}

.commentlist {
clear: both;
list-style: none;
margin: 0;
padding: 0;
Expand Down