From 2e30d21d50812d69046e5c87f4b93370c1fd8a69 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 10 Dec 2021 18:10:22 +0100 Subject: [PATCH 01/19] Add sort attribute to the editor --- .../src/comment-template/block.json | 2 +- .../src/comment-template/edit.js | 6 +-- .../comments-pagination-numbers/block.json | 2 +- .../src/comments-query-loop/block.json | 7 +++- .../src/comments-query-loop/edit.js | 7 +++- .../src/comments-query-loop/order-controls.js | 37 +++++++++++++++++++ 6 files changed, 54 insertions(+), 7 deletions(-) create mode 100644 packages/block-library/src/comments-query-loop/order-controls.js diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json index 04576ee655e9ca..5e2309ab3141a3 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 21a88d20c85c2e..317546af009d41 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -114,7 +114,7 @@ const CommentsList = ( { export default function CommentTemplateEdit( { clientId, - context: { postId, 'comments/perPage': perPage }, + context: { postId, 'comments/perPage': perPage, 'comments/order': order }, } ) { const blockProps = useBlockProps(); @@ -129,13 +129,13 @@ export default function CommentTemplateEdit( { rawComments: getEntityRecords( 'root', 'comment', { post: postId, status: 'approve', - order: 'asc', + order, context: 'embed', } ), blocks: getBlocks( clientId ), }; }, - [ postId, clientId ] + [ postId, clientId, order ] ); // TODO: Replicate the logic used on the server. diff --git a/packages/block-library/src/comments-pagination-numbers/block.json b/packages/block-library/src/comments-pagination-numbers/block.json index 449d9962b274c6..c2b322e15366c8 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 aa6689a12e6d76..630172c99c2951 100644 --- a/packages/block-library/src/comments-query-loop/block.json +++ b/packages/block-library/src/comments-query-loop/block.json @@ -14,10 +14,15 @@ "tagName": { "type": "string", "default": "div" + }, + "queryOrder": { + "type": "string", + "default": "desc" } }, "providesContext": { - "comments/perPage": "perPage" + "comments/perPage": "perPage", + "comments/order": "order" }, "supports": { "align": [ "wide", "full" ], diff --git a/packages/block-library/src/comments-query-loop/edit.js b/packages/block-library/src/comments-query-loop/edit.js index 649bb6a2094c5b..54bf445f782b41 100644 --- a/packages/block-library/src/comments-query-loop/edit.js +++ b/packages/block-library/src/comments-query-loop/edit.js @@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import QueryToolbar from './toolbar'; +import QueryOrderControls from './order-controls'; const TEMPLATE = [ [ 'core/comment-template' ], @@ -21,7 +22,7 @@ const TEMPLATE = [ ]; export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) { - const { perPage, tagName: TagName } = attributes; + const { perPage, tagName: TagName, order } = attributes; const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { @@ -46,6 +47,10 @@ export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) { setAttributes( { tagName: value } ) } /> + setAttributes( { order: value } ) } + /> diff --git a/packages/block-library/src/comments-query-loop/order-controls.js b/packages/block-library/src/comments-query-loop/order-controls.js new file mode 100644 index 00000000000000..54760c7f00f371 --- /dev/null +++ b/packages/block-library/src/comments-query-loop/order-controls.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; +import { __, _x } from '@wordpress/i18n'; + +export default function CommentsQueryOrderControls( { value, onChange } ) { + return ( + + + + + ); +} From f76f29686bbad9637333a024e6334b94f99a6b06 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 10 Dec 2021 18:43:36 +0100 Subject: [PATCH 02/19] Update the fixtures with the new comment template --- .../blocks/core__comments-query-loop.html | 18 ++++- .../blocks/core__comments-query-loop.json | 71 ++++++++++++++++- .../core__comments-query-loop.parsed.json | 78 ++++++++++++++++++- .../core__comments-query-loop.serialized.html | 16 +++- 4 files changed, 173 insertions(+), 10 deletions(-) diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.html b/test/integration/fixtures/blocks/core__comments-query-loop.html index 1a8ae6a1788422..d3a6ad9d62b3de 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.html +++ b/test/integration/fixtures/blocks/core__comments-query-loop.html @@ -1,3 +1,15 @@ - -
- + +
+ + + + + + + + + + + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.json b/test/integration/fixtures/blocks/core__comments-query-loop.json index 43b62c700f0ad1..5cf530a2b4cf26 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.json +++ b/test/integration/fixtures/blocks/core__comments-query-loop.json @@ -4,10 +4,79 @@ "name": "core/comments-query-loop", "isValid": true, "attributes": { + "order": null, "perPage": null, "tagName": "div" }, - "innerBlocks": [], + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/comment-template", + "isValid": true, + "attributes": {}, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/comment-author-avatar", + "isValid": true, + "attributes": { + "width": 96, + "height": 96 + }, + "innerBlocks": [], + "originalContent": "" + }, + { + "clientId": "_clientId_1", + "name": "core/comment-author-name", + "isValid": true, + "attributes": { + "isLink": false, + "linkTarget": "_self" + }, + "innerBlocks": [], + "originalContent": "" + }, + { + "clientId": "_clientId_2", + "name": "core/comment-date", + "isValid": true, + "attributes": { + "isLink": false + }, + "innerBlocks": [], + "originalContent": "" + }, + { + "clientId": "_clientId_3", + "name": "core/comment-content", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + }, + { + "clientId": "_clientId_4", + "name": "core/comment-reply-link", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + }, + { + "clientId": "_clientId_5", + "name": "core/comment-edit-link", + "isValid": true, + "attributes": { + "linkTarget": "_self" + }, + "innerBlocks": [], + "originalContent": "" + } + ], + "originalContent": "" + } + ], "originalContent": "
" } ] diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json b/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json index bc4d5ef2db0251..2e7f8869b6c546 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json +++ b/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json @@ -1,11 +1,81 @@ [ { "blockName": "core/comments-query-loop", - "attrs": {}, - "innerBlocks": [], - "innerHTML": "\n
\n", + "attrs": { + "queryPerPage": 1, + "queryOrder": "asc" + }, + "innerBlocks": [ + { + "blockName": "core/comment-template", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/comment-author-avatar", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/comment-author-name", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/comment-date", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/comment-content", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/comment-reply-link", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": "core/comment-edit-link", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } + ], + "innerHTML": "\n \n \n \n \n \n \n \n \n \n \n \n ", + "innerContent": [ + "\n ", + null, + "\n \n ", + null, + "\n \n ", + null, + "\n \n ", + null, + "\n \n ", + null, + "\n \n ", + null, + "\n " + ] + } + ], + "innerHTML": "\n
\n ", "innerContent": [ - "\n
\n" + "\n
", + null, + "
\n " ] } ] diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html index 1a8ae6a1788422..02f33dfbc7e831 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html @@ -1,3 +1,15 @@ - -
+ +
+ + + + + + + + + + + +
From 9382c14f0cbe927a25398e228292884fdea53aba Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 15 Dec 2021 17:14:14 +0100 Subject: [PATCH 03/19] Update with default options from discussion --- .../src/comment-template/edit.js | 25 +++++++++---- .../src/comments-query-loop/block.json | 4 +- .../src/comments-query-loop/edit.js | 12 +++--- .../src/comments-query-loop/order-controls.js | 37 ------------------- .../src/comments-query-loop/toolbar.js | 27 ++++++++++++-- 5 files changed, 49 insertions(+), 56 deletions(-) delete mode 100644 packages/block-library/src/comments-query-loop/order-controls.js diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index 317546af009d41..9c0f0af552c340 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -124,14 +124,25 @@ export default function CommentTemplateEdit( { ( select ) => { const { getEntityRecords } = select( coreStore ); const { getBlocks } = select( blockEditorStore ); - + const commentQuery = { + post: postId, + status: 'approve', + context: 'embed', + }; + // We cannot get the order of the discussion settings page. + // Without the order defined, the default on the API is DESC + // with means show the newest comments first. + // By default, in discussion settings, the order is ASC. + // So the frontend is showing older comments first, while the editor is showing newer ones. + if ( order ) { + commentQuery.order = order; + } return { - rawComments: getEntityRecords( 'root', 'comment', { - post: postId, - status: 'approve', - order, - context: 'embed', - } ), + rawComments: getEntityRecords( + 'root', + 'comment', + commentQuery + ), blocks: getBlocks( clientId ), }; }, diff --git a/packages/block-library/src/comments-query-loop/block.json b/packages/block-library/src/comments-query-loop/block.json index 630172c99c2951..3b020e7ec41268 100644 --- a/packages/block-library/src/comments-query-loop/block.json +++ b/packages/block-library/src/comments-query-loop/block.json @@ -15,9 +15,9 @@ "type": "string", "default": "div" }, - "queryOrder": { + "order": { "type": "string", - "default": "desc" + "default": null } }, "providesContext": { diff --git a/packages/block-library/src/comments-query-loop/edit.js b/packages/block-library/src/comments-query-loop/edit.js index 54bf445f782b41..a7908beb3c85ec 100644 --- a/packages/block-library/src/comments-query-loop/edit.js +++ b/packages/block-library/src/comments-query-loop/edit.js @@ -14,7 +14,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import QueryToolbar from './toolbar'; -import QueryOrderControls from './order-controls'; const TEMPLATE = [ [ 'core/comment-template' ], @@ -22,7 +21,7 @@ const TEMPLATE = [ ]; export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) { - const { perPage, tagName: TagName, order } = attributes; + const { tagName: TagName } = attributes; const blockProps = useBlockProps(); const innerBlocksProps = useInnerBlocksProps( blockProps, { @@ -32,7 +31,10 @@ export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) { return ( <> - + - setAttributes( { order: value } ) } - /> diff --git a/packages/block-library/src/comments-query-loop/order-controls.js b/packages/block-library/src/comments-query-loop/order-controls.js deleted file mode 100644 index 54760c7f00f371..00000000000000 --- a/packages/block-library/src/comments-query-loop/order-controls.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * WordPress dependencies - */ -import { - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOption as ToggleGroupControlOption, -} from '@wordpress/components'; -import { __, _x } from '@wordpress/i18n'; - -export default function CommentsQueryOrderControls( { value, onChange } ) { - return ( - - - - - ); -} diff --git a/packages/block-library/src/comments-query-loop/toolbar.js b/packages/block-library/src/comments-query-loop/toolbar.js index fa383429349a6d..00641c01ab68ef 100644 --- a/packages/block-library/src/comments-query-loop/toolbar.js +++ b/packages/block-library/src/comments-query-loop/toolbar.js @@ -7,18 +7,23 @@ import { ToolbarButton, BaseControl, __experimentalNumberControl as NumberControl, + ToggleControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { settings } from '@wordpress/icons'; -export default function CommentsQueryLoopToolbar( { perPage, setQuery } ) { +export default function CommentsQueryLoopToolbar( { + attributes, + setAttributes, +} ) { + const { perPage, order } = attributes; return ( ( ) } @@ -40,7 +45,8 @@ export default function CommentsQueryLoopToolbar( { perPage, setQuery } ) { ) { return; } - setQuery( { + setAttributes( { + ...attributes, perPage: num, } ); } } @@ -49,6 +55,21 @@ export default function CommentsQueryLoopToolbar( { perPage, setQuery } ) { isDragEnabled={ false } /> + + { + setAttributes( { + ...attributes, + order: + order === 'desc' || order === null + ? 'asc' + : 'desc', + } ); + } } + /> + ) } /> From 39d9dd2df07384d5e41799243ab0e228ad031f5b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 15 Dec 2021 17:39:36 +0100 Subject: [PATCH 04/19] Update fixtures --- .../fixtures/blocks/core__comments-query-loop.html | 2 +- .../fixtures/blocks/core__comments-query-loop.json | 6 +++--- .../fixtures/blocks/core__comments-query-loop.parsed.json | 4 ++-- .../blocks/core__comments-query-loop.serialized.html | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.html b/test/integration/fixtures/blocks/core__comments-query-loop.html index d3a6ad9d62b3de..90ba70e04ff03b 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.html +++ b/test/integration/fixtures/blocks/core__comments-query-loop.html @@ -1,4 +1,4 @@ - +
diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.json b/test/integration/fixtures/blocks/core__comments-query-loop.json index 5cf530a2b4cf26..ba34acfefcd073 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.json +++ b/test/integration/fixtures/blocks/core__comments-query-loop.json @@ -4,9 +4,9 @@ "name": "core/comments-query-loop", "isValid": true, "attributes": { - "order": null, - "perPage": null, - "tagName": "div" + "perPage": 2, + "tagName": "div", + "order": "desc" }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json b/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json index 2e7f8869b6c546..e45d5f6448f1a3 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json +++ b/test/integration/fixtures/blocks/core__comments-query-loop.parsed.json @@ -2,8 +2,8 @@ { "blockName": "core/comments-query-loop", "attrs": { - "queryPerPage": 1, - "queryOrder": "asc" + "perPage": 2, + "order": "desc" }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html index 02f33dfbc7e831..9d0e86d17422b6 100644 --- a/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html +++ b/test/integration/fixtures/blocks/core__comments-query-loop.serialized.html @@ -1,4 +1,4 @@ - +
From 18b99ddfa5a6161208ebe0d3b9bfe9733dc01b15 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 17 Dec 2021 11:10:13 +0100 Subject: [PATCH 05/19] Update with order options --- lib/compat/experimental/blocks.php | 12 +++++++- .../src/comments-query-loop/toolbar.js | 28 +++++++++---------- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/lib/compat/experimental/blocks.php b/lib/compat/experimental/blocks.php index 4112bc1dca9eec..a951f1cba8d4ca 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. @@ -34,6 +34,11 @@ function build_comment_query_vars_from_block( $block ) { $comment_args['hierarchical'] = false; } + // With the fallback option enabled. By default the render won't coincide with the editor. + if ( get_option( 'comment_order' ) ) { + $comment_args['order'] = get_option( 'comment_order' ); + } + $per_page = ! empty( $block->context['comments/perPage'] ) ? (int) $block->context['comments/perPage'] : 0; if ( 0 === $per_page && get_option( 'page_comments' ) ) { $per_page = (int) get_query_var( 'comments_per_page' ); @@ -52,6 +57,11 @@ function build_comment_query_vars_from_block( $block ) { } } + $order = ! empty( $block->context['comments/order'] ) ? $block->context['comments/order'] : null; + if ( $order ) { + $comment_args['order'] = $order; + } + return $comment_args; } } diff --git a/packages/block-library/src/comments-query-loop/toolbar.js b/packages/block-library/src/comments-query-loop/toolbar.js index 00641c01ab68ef..0e91dd94302d5b 100644 --- a/packages/block-library/src/comments-query-loop/toolbar.js +++ b/packages/block-library/src/comments-query-loop/toolbar.js @@ -55,21 +55,19 @@ export default function CommentsQueryLoopToolbar( { isDragEnabled={ false } /> - - { - setAttributes( { - ...attributes, - order: - order === 'desc' || order === null - ? 'asc' - : 'desc', - } ); - } } - /> - + { + setAttributes( { + ...attributes, + order: + order === 'desc' || order === null + ? 'asc' + : 'desc', + } ); + } } + /> ) } /> From 5b946071ddd9a071440c1d0c81399212ad69744a Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 17 Dec 2021 14:43:51 +0100 Subject: [PATCH 06/19] Move settings to inspector controls --- .../src/comments-query-loop/block.json | 3 +- .../src/comments-query-loop/edit.js | 26 ++----- .../edit/comments-inspector-controls.js | 68 +++++++++++++++++++ .../src/comments-query-loop/edit/toolbar.js | 62 +++++++++++++++++ 4 files changed, 139 insertions(+), 20 deletions(-) create mode 100644 packages/block-library/src/comments-query-loop/edit/comments-inspector-controls.js create mode 100644 packages/block-library/src/comments-query-loop/edit/toolbar.js diff --git a/packages/block-library/src/comments-query-loop/block.json b/packages/block-library/src/comments-query-loop/block.json index 3b020e7ec41268..b8d59f6a72705a 100644 --- a/packages/block-library/src/comments-query-loop/block.json +++ b/packages/block-library/src/comments-query-loop/block.json @@ -22,7 +22,8 @@ }, "providesContext": { "comments/perPage": "perPage", - "comments/order": "order" + "comments/order": "order", + "comments/inherit": "inherit" }, "supports": { "align": [ "wide", "full" ], diff --git a/packages/block-library/src/comments-query-loop/edit.js b/packages/block-library/src/comments-query-loop/edit.js index a7908beb3c85ec..a6bd7b37c122e3 100644 --- a/packages/block-library/src/comments-query-loop/edit.js +++ b/packages/block-library/src/comments-query-loop/edit.js @@ -3,17 +3,15 @@ */ import { BlockControls, - InspectorControls, useBlockProps, useInnerBlocksProps, } from '@wordpress/block-editor'; -import { SelectControl } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import QueryToolbar from './toolbar'; +import CommentsToolbar from './edit/toolbar'; +import CommentsInspectorControls from './edit/comments-inspector-controls'; const TEMPLATE = [ [ 'core/comment-template' ], @@ -30,26 +28,16 @@ export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) { return ( <> + - - - )' ), value: 'div' }, - { label: '
', value: 'section' }, - { label: '