diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php index d839257a6ff643..ae44b6dd82698a 100644 --- a/lib/compat/wordpress-6.0/blocks.php +++ b/lib/compat/wordpress-6.0/blocks.php @@ -228,13 +228,14 @@ function get_comments_pagination_arrow( $block, $pagination_type = 'next' ) { function gutenberg_extend_block_editor_settings_with_discussion_settings( $settings ) { $settings['__experimentalDiscussionSettings'] = array( - 'commentOrder' => get_option( 'comment_order' ), - 'commentsPerPage' => get_option( 'comments_per_page' ), - 'defaultCommentsPage' => get_option( 'default_comments_page' ), - 'pageComments' => get_option( 'page_comments' ), - 'threadComments' => get_option( 'thread_comments' ), - 'threadCommentsDepth' => get_option( 'thread_comments_depth' ), - 'avatarURL' => get_avatar_url( + 'commentOrder' => get_option( 'comment_order' ), + 'commentsPerPage' => get_option( 'comments_per_page' ), + 'defaultCommentsPage' => get_option( 'default_comments_page' ), + 'pageComments' => get_option( 'page_comments' ), + 'threadComments' => get_option( 'thread_comments' ), + 'threadCommentsDepth' => get_option( 'thread_comments_depth' ), + 'defaultCommentStatus' => get_option( 'default_comment_status' ), + 'avatarURL' => get_avatar_url( '', array( 'size' => 96, diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index ff322e97d467f4..dcc9e6e165abd5 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -49,6 +49,7 @@ @import "./query-pagination/editor.scss"; @import "./query-pagination-numbers/editor.scss"; @import "./post-featured-image/editor.scss"; +@import "./post-comments/editor.scss"; :root .editor-styles-wrapper { @include background-colors-deprecated(); diff --git a/packages/block-library/src/post-comments/block.json b/packages/block-library/src/post-comments/block.json index c3b569f5981544..6c5c4e16b8f748 100644 --- a/packages/block-library/src/post-comments/block.json +++ b/packages/block-library/src/post-comments/block.json @@ -40,5 +40,6 @@ "wp-block-post-comments", "wp-block-buttons", "wp-block-button" - ] + ], + "editorStyle": "wp-block-post-comments-editor" } diff --git a/packages/block-library/src/post-comments/edit.js b/packages/block-library/src/post-comments/edit.js index 237569227c61e7..9ed717a2865acd 100644 --- a/packages/block-library/src/post-comments/edit.js +++ b/packages/block-library/src/post-comments/edit.js @@ -6,65 +6,84 @@ 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 ) => ( - - { comment.content.rendered } - - ) ) - : __( 'No comments.' ); - }, - [ postId ] - ); -} +import { __, sprintf } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; +import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose'; 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 [ commentStatus ] = useEntityProp( + 'postType', + postType, + 'comment_status', + postId + ); + + const { avatarURL, defaultCommentStatus } = useSelect( + ( select ) => + select( blockEditorStore ).getSettings() + .__experimentalDiscussionSettings + ); + + const isSiteEditor = postType === undefined || postId === undefined; + + const postTypeSupportsComments = useSelect( ( select ) => + postType + ? !! select( coreStore ).getPostType( postType )?.supports.comments + : false + ); + + let warning = __( + 'Post Comments block: 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.' + ); + let showPlacholder = true; + + if ( ! isSiteEditor && 'open' !== commentStatus ) { + if ( 'closed' === commentStatus ) { + warning = sprintf( + /* translators: 1: Post type (i.e. "post", "page") */ + __( + 'Post Comments block: Comments to this %s are not allowed.' + ), + postType + ); + showPlacholder = false; + } else if ( ! postTypeSupportsComments ) { + warning = sprintf( + /* translators: 1: Post type (i.e. "post", "page") */ + __( + 'Post Comments block: Comments for this post type (%s) are not enabled.' + ), + postType + ); + showPlacholder = false; + } else if ( 'open' !== defaultCommentStatus ) { + warning = __( 'Post Comments block: Comments are not enabled.' ); + showPlacholder = false; + } + } + const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, } ), } ); - if ( ! postType || ! postId ) { - return ( -
- - { __( 'Post comments block: no post found.' ) } - -
- ); - } + const disabledRef = useDisabled(); return ( <> @@ -78,7 +97,140 @@ export default function PostCommentsEdit( {
- + { warning } + + { showPlacholder && ( +
+

+ { __( 'One response to' ) } “{ postTitle }” +

+ +
+
+ « { __( 'Older Comments' ) } +
+
+ { __( 'Newer Comments' ) } » +
+
+ +
    +
  1. + +
    2. +
+ +
+
+ « { __( 'Older Comments' ) } +
+
+ { __( 'Newer Comments' ) } » +
+
+ +
+

+ { __( 'Leave a Reply' ) } +

+ +
+

+ +