diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index aaa6a35e46970..b0f8b35ac1260 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -204,7 +204,7 @@ An advanced block that allows displaying post comments based on different query - **Name:** core/comments-query-loop - **Category:** theme - **Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~ -- **Attributes:** perPage, tagName +- **Attributes:** inherit, order, perPage, tagName ## Cover diff --git a/lib/compat/experimental/blocks.php b/lib/compat/experimental/blocks.php index 4112bc1dca9ee..a663e7a0897ad 100644 --- a/lib/compat/experimental/blocks.php +++ b/lib/compat/experimental/blocks.php @@ -16,9 +16,9 @@ * @return array Returns the comment query parameters to use with the WP_Comment_Query constructor. */ function build_comment_query_vars_from_block( $block ) { + $comment_args = array( 'orderby' => 'comment_date_gmt', - 'order' => 'ASC', 'status' => 'approve', 'no_found_rows' => false, 'update_comment_meta_cache' => false, // We lazy-load comment meta for performance. @@ -52,6 +52,11 @@ function build_comment_query_vars_from_block( $block ) { } } + $comment_args['order'] = ! empty( $block->context['comments/order'] ) ? $block->context['comments/order'] : null; + if ( empty( $comment_args['order'] ) && get_option( 'comment_order' ) ) { + $comment_args['order'] = get_option( 'comment_order' ); + } + return $comment_args; } } @@ -90,3 +95,24 @@ function get_comments_pagination_arrow( $block, $pagination_type = 'next' ) { return null; } } + +if ( ! function_exists( 'extend_block_editor_settings_with_discussion_settings' ) ) { + /** + * Workaround for getting discussion settings as block editor settings + * so any user can access to them without needing to be an admin. + * + * @param array $settings Default editor settings. + * + * @return array Filtered editor settings. + */ + function extend_block_editor_settings_with_discussion_settings( $settings ) { + $settings['__experimentalDiscussionSettings'] = array( + 'pageComments' => get_option( 'page_comments' ), + 'commentsPerPage' => get_option( 'comments_per_page' ), + 'defaultCommentsPage' => get_option( 'default_comments_page' ), + 'commentOrder' => get_option( 'comment_order' ), + ); + return $settings; + } +} +add_filter( 'block_editor_settings_all', 'extend_block_editor_settings_with_discussion_settings' ); diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json index 04576ee655e9c..5e2309ab3141a 100644 --- a/packages/block-library/src/comment-template/block.json +++ b/packages/block-library/src/comment-template/block.json @@ -7,7 +7,7 @@ "parent": [ "core/comments-query-loop" ], "description": "Contains the block elements used to render a comment, like the title, date, author, avatar and more.", "textdomain": "default", - "usesContext": [ "comments/perPage", "postId" ], + "usesContext": [ "comments/perPage", "postId", "comments/order" ], "supports": { "reusable": false, "html": false, diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index 21a88d20c85c2..1cbb2fa0d98ed 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -114,33 +114,44 @@ const CommentsList = ( { export default function CommentTemplateEdit( { clientId, - context: { postId, 'comments/perPage': perPage }, + context: { postId, 'comments/perPage': perPage, 'comments/order': order }, } ) { const blockProps = useBlockProps(); const [ activeComment, setActiveComment ] = useState(); - + const { commentOrder, commentsPerPage } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return getSettings().__experimentalDiscussionSettings; + } ); const { rawComments, blocks } = useSelect( ( select ) => { const { getEntityRecords } = select( coreStore ); const { getBlocks } = select( blockEditorStore ); + const commentQuery = { + post: postId, + status: 'approve', + context: 'embed', + order: order || commentOrder, + }; + + if ( order ) { + commentQuery.order = order; + } return { - rawComments: getEntityRecords( 'root', 'comment', { - post: postId, - status: 'approve', - order: 'asc', - context: 'embed', - } ), + rawComments: getEntityRecords( + 'root', + 'comment', + commentQuery + ), blocks: getBlocks( clientId ), }; }, - [ postId, clientId ] + [ postId, clientId, order ] ); // TODO: Replicate the logic used on the server. - perPage = perPage || 50; - + perPage = perPage || commentsPerPage; // We convert the flat list of comments to tree. // Then, we show only a maximum of `perPage` number of comments. // This is because passing `per_page` to `getEntityRecords()` does not diff --git a/packages/block-library/src/comment-template/util.js b/packages/block-library/src/comment-template/util.js index 0c10c817df1a9..5bc825bb78c45 100644 --- a/packages/block-library/src/comment-template/util.js +++ b/packages/block-library/src/comment-template/util.js @@ -44,7 +44,7 @@ export const convertToTree = ( data ) => { // If the comment has a "parent", then find that parent in the table that // we have created above and push the current comment to the array of its // children. - table[ item.parent ].children.push( table[ item.id ] ); + table[ item.parent ]?.children.push( table[ item.id ] ); } else { // Otherwise, if the comment has no parent (also works if parent is 0) // that means that it's a top-level comment so we can find it in the table diff --git a/packages/block-library/src/comments-pagination-numbers/block.json b/packages/block-library/src/comments-pagination-numbers/block.json index 449d9962b274c..c2b322e15366c 100644 --- a/packages/block-library/src/comments-pagination-numbers/block.json +++ b/packages/block-library/src/comments-pagination-numbers/block.json @@ -7,7 +7,7 @@ "parent": [ "core/comments-pagination" ], "description": "Displays a list of page numbers for comments pagination.", "textdomain": "default", - "usesContext": [ "comments/perPage", "postId" ], + "usesContext": [ "comments/perPage", "postId", "comments/order" ], "supports": { "reusable": false, "html": false diff --git a/packages/block-library/src/comments-query-loop/block.json b/packages/block-library/src/comments-query-loop/block.json index aa6689a12e6d7..8206974f72aca 100644 --- a/packages/block-library/src/comments-query-loop/block.json +++ b/packages/block-library/src/comments-query-loop/block.json @@ -7,6 +7,14 @@ "description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.", "textdomain": "default", "attributes": { + "inherit": { + "type": "boolean", + "default": true + }, + "order": { + "type": "string", + "default": null + }, "perPage": { "type": "number", "default": null @@ -17,7 +25,9 @@ } }, "providesContext": { - "comments/perPage": "perPage" + "comments/perPage": "perPage", + "comments/order": "order", + "comments/inherit": "inherit" }, "supports": { "align": [ "wide", "full" ], @@ -26,5 +36,6 @@ "gradients": true, "link": true } - } + }, + "editorStyle": "wp-block-comments-editor" } diff --git a/packages/block-library/src/comments-query-loop/edit.js b/packages/block-library/src/comments-query-loop/edit.js index 649bb6a2094c5..032fcc5649cf8 100644 --- a/packages/block-library/src/comments-query-loop/edit.js +++ b/packages/block-library/src/comments-query-loop/edit.js @@ -2,18 +2,16 @@ * WordPress dependencies */ import { - BlockControls, - InspectorControls, useBlockProps, useInnerBlocksProps, + store as blockEditorStore, } from '@wordpress/block-editor'; -import { SelectControl } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import QueryToolbar from './toolbar'; +import CommentsInspectorControls from './edit/comments-inspector-controls'; +import { useSelect } from '@wordpress/data'; const TEMPLATE = [ [ 'core/comment-template' ], @@ -21,32 +19,29 @@ const TEMPLATE = [ ]; export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) { - const { perPage, tagName: TagName } = attributes; + const { tagName: TagName } = attributes; const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { template: TEMPLATE, } ); + const { commentOrder, commentsPerPage } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + const { __experimentalDiscussionSettings } = getSettings(); + return __experimentalDiscussionSettings; + } ); + return ( <> - - - - - )' ), value: 'div' }, - { label: '
', value: 'section' }, - { label: '