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

Comments Query Loop: Always inherit from core Discussion settings #39664

Merged
merged 12 commits into from
Mar 24, 2022
Merged
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,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:** defaultPage, inherit, order, perPage, tagName
- **Attributes:** tagName

## Cover

Expand Down
15 changes: 1 addition & 14 deletions lib/compat/experimental/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,8 @@ function build_comment_query_vars_from_block( $block ) {
$comment_args['hierarchical'] = false;
}

$inherit = ! empty( $block->context['comments/inherit'] );

$per_page = 0;
if ( $inherit && get_option( 'page_comments' ) ) {
$per_page = get_option( 'comments_per_page' );
}

if ( ! $inherit && ! empty( $block->context['comments/perPage'] ) ) {
$per_page = (int) $block->context['comments/perPage'];
}

$per_page = get_option( 'comments_per_page' );
$default_page = get_option( 'default_comments_page' );
if ( ! $inherit && ! empty( $block->context['comments/defaultPage'] ) ) {
$default_page = $block->context['comments/defaultPage'];
}

if ( $per_page > 0 ) {
$comment_args['number'] = $per_page;
Expand Down
8 changes: 1 addition & 7 deletions packages/block-library/src/comment-template/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +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/defaultPage",
"comments/inherit",
"comments/order",
"comments/perPage",
"postId"
],
"usesContext": [ "postId" ],
"supports": {
"reusable": false,
"html": false,
Expand Down
32 changes: 12 additions & 20 deletions packages/block-library/src/comment-template/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -229,29 +229,23 @@ const CommentsList = ( {

export default function CommentTemplateEdit( {
clientId,
context: {
postId,
'comments/perPage': perPage,
'comments/order': order,
'comments/defaultPage': defaultPage,
'comments/inherit': inherit,
},
context: { postId },
} ) {
const blockProps = useBlockProps();

const [ activeCommentId, setActiveCommentId ] = useState();
const { commentOrder, threadCommentsDepth, threadComments } = useSelect(
( select ) => {
const { getSettings } = select( blockEditorStore );
return getSettings().__experimentalDiscussionSettings;
}
);
const {
commentOrder,
threadCommentsDepth,
threadComments,
commentsPerPage,
} = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
return getSettings().__experimentalDiscussionSettings;
} );

const commentQuery = useCommentQueryArgs( {
postId,
perPage,
defaultPage,
inherit,
} );

const { topLevelComments, blocks } = useSelect(
Expand All @@ -270,12 +264,10 @@ export default function CommentTemplateEdit( {
[ clientId, commentQuery ]
);

order = inherit || ! order ? commentOrder : order;

// Generate a tree structure of comment IDs.
let commentTree = useCommentTree(
// Reverse the order of top comments if needed.
order === 'desc' && topLevelComments
commentOrder === 'desc' && topLevelComments
? [ ...topLevelComments ].reverse()
: topLevelComments
);
Expand All @@ -290,7 +282,7 @@ export default function CommentTemplateEdit( {

if ( ! postId ) {
commentTree = getCommentsPlaceholder( {
perPage,
perPage: commentsPerPage,
threadComments,
threadCommentsDepth,
} );
Expand Down
32 changes: 8 additions & 24 deletions packages/block-library/src/comment-template/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,13 @@ import apiFetch from '@wordpress/api-fetch';
* Return an object with the query args needed to fetch the default page of
* comments.
*
* @param {Object} props Hook props.
* @param {number} props.postId ID of the post that contains the comments.
* @param {number} props.perPage The number of comments included per page.
* @param {string} props.defaultPage Page shown by default (newest/oldest).
* @param {boolean} props.inherit Overwrite props with values from WP
* discussion settings.
* @param {Object} props Hook props.
* @param {number} props.postId ID of the post that contains the comments.
* discussion settings.
*
* @return {Object} Query args to retrieve the comments.
*/
export const useCommentQueryArgs = ( {
postId,
perPage,
defaultPage,
inherit,
} ) => {
export const useCommentQueryArgs = ( { postId } ) => {
// Initialize the query args that are not going to change.
const queryArgs = {
status: 'approve',
Expand All @@ -36,23 +28,15 @@ export const useCommentQueryArgs = ( {
};

// Get the Discussion settings that may be needed to query the comments.
const { commentsPerPage, defaultCommentsPage } = useSelect( ( select ) => {
const {
commentsPerPage: perPage,
defaultCommentsPage: defaultPage,
} = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
const { __experimentalDiscussionSettings } = getSettings();
return __experimentalDiscussionSettings;
} );

// Overwrite the received attributes if `inherit` is true.
if ( inherit ) {
perPage = commentsPerPage;
defaultPage = defaultCommentsPage;
}

// If a block props is not set, use the settings value to generate the
// appropriate query arg.
perPage = perPage || commentsPerPage;
defaultPage = defaultPage || defaultCommentsPage;

// Get the number of the default page.
const page = useDefaultPageIndex( {
defaultPage,
Expand Down
4 changes: 1 addition & 3 deletions packages/block-library/src/comment-template/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,7 @@ function render_block_core_comment_template( $attributes, $content, $block ) {
return '';
}

$comment_order = empty( $block->context['comments/inherit'] ) && ! empty( $block->context['comments/order'] )
? $block->context['comments/order']
: get_option( 'comment_order' );
$comment_order = get_option( 'comment_order' );

if ( 'desc' === $comment_order ) {
$comments = array_reverse( $comments );
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,7 @@
"type": "string"
}
},
"usesContext": [
"postId",
"comments/perPage",
"comments/order",
"comments/inherit",
"comments/defaultPage",
"comments/paginationArrow"
],
"usesContext": [ "postId", "comments/paginationArrow" ],
"supports": {
"reusable": false,
"html": false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,11 @@
"apiVersion": 2,
"name": "core/comments-pagination-numbers",
"title": "Page Numbers",
"category": "theme",
"category": "theme",
"parent": [ "core/comments-pagination" ],
"description": "Displays a list of page numbers for comments pagination.",
"textdomain": "default",
"usesContext": [
"postId",
"comments/perPage",
"comments/order",
"comments/inherit",
"comments/defaultPage"
],
"usesContext": [ "postId" ],
"supports": {
"reusable": false,
"html": false
Expand Down
22 changes: 0 additions & 22 deletions packages/block-library/src/comments-query-loop/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,11 @@
"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
},
"tagName": {
"type": "string",
"default": "div"
},
"defaultPage": {
"type": "string",
"default": "oldest"
}
},
"providesContext": {
"comments/perPage": "perPage",
"comments/order": "order",
"comments/defaultPage": "defaultPage",
"comments/inherit": "inherit"
},
"supports": {
"align": [ "wide", "full" ],
"html": false,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,97 +1,16 @@
/**
* WordPress dependencies
*/
import {
PanelBody,
SelectControl,
ToggleControl,
__experimentalNumberControl as NumberControl,
} from '@wordpress/components';
import { SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';

const orderOptions = [
{
label: __( 'Newest to oldest' ),
value: 'desc',
},
{
label: __( 'Oldest to newest' ),
value: 'asc',
},
];

const defaultPageOptions = [
{
label: __( 'Newest' ),
value: 'newest',
},
{
label: __( 'Oldest' ),
value: 'oldest',
},
];

export default function CommentsInspectorControls( {
attributes: { TagName, perPage, order, inherit, defaultPage },
attributes: { TagName },
setAttributes,
} ) {
return (
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToggleControl
label={ __( 'Inherit from Discussion Settings' ) }
checked={ inherit }
onChange={ () => {
setAttributes( {
inherit: ! inherit,
} );
} }
/>
{ ! inherit && (
<>
<SelectControl
label={ __( 'Order by' ) }
value={ order }
options={ orderOptions }
onChange={ ( value ) => {
setAttributes( {
order: value,
} );
} }
/>
<SelectControl
label={ __( 'Default page' ) }
value={ defaultPage }
options={ defaultPageOptions }
onChange={ ( value ) => {
setAttributes( {
defaultPage: value,
} );
} }
/>
<NumberControl
__unstableInputWidth="60px"
label={ __( 'Items per Page' ) }
labelPosition="edge"
min={ 1 }
max={ 100 }
onChange={ ( value ) => {
const num = parseInt( value, 10 );
if ( isNaN( num ) || num < 1 || num > 100 ) {
return;
}
setAttributes( {
perPage: num,
} );
} }
step="1"
value={ perPage }
isDragEnabled={ false }
/>
</>
) }
</PanelBody>
<InspectorControls __experimentalGroup="advanced">
<SelectControl
label={ __( 'HTML element' ) }
Expand Down
Loading