From 5c97b6e31264e9670567bcfe026f4f83930fc1c3 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Mon, 26 Sep 2022 14:09:20 +0200 Subject: [PATCH 1/6] Follow discussion settings in comments block edit --- .../src/comment-template/edit.js | 79 +++++++++++-------- 1 file changed, 45 insertions(+), 34 deletions(-) diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index a2acb7c6d38d94..eb30e0eb4c641c 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -37,6 +37,7 @@ const TEMPLATE = [ * * @param {Object} settings Discussion Settings. * @param {number} [settings.perPage] - Comments per page setting or block attribute. + * @param {boolean} [settings.pageComments] - Enable break comments into pages setting. * @param {boolean} [settings.threadComments] - Enable threaded (nested) comments setting. * @param {number} [settings.threadCommentsDepth] - Level deep of threaded comments. * @@ -45,42 +46,50 @@ const TEMPLATE = [ */ const getCommentsPlaceholder = ( { perPage, + pageComments, threadComments, threadCommentsDepth, } ) => { - // In case that `threadCommentsDepth` is falsy, we default to a somewhat - // arbitrary value of 3. - // In case that the value is set but larger than 3 we truncate it to 3. - const commentsDepth = Math.min( threadCommentsDepth || 3, 3 ); + const commentsDepth = ! threadComments ? 1 : threadCommentsDepth; - // We set a limit in order not to overload the editor of empty comments. - const defaultCommentsToShow = - perPage <= commentsDepth ? perPage : commentsDepth; - if ( ! threadComments || defaultCommentsToShow === 1 ) { - // If displaying threaded comments is disabled, we only show one comment - // A commentId is negative in order to avoid conflicts with the actual comments. - return [ { commentId: -1, children: [] } ]; - } else if ( defaultCommentsToShow === 2 ) { - return [ - { - commentId: -1, - children: [ { commentId: -2, children: [] } ], - }, - ]; - } + const buildChildrenComment = ( commentsLevel ) => { + // Render children comments until commentsDepth is reached + if ( commentsLevel < commentsDepth ) { + const nextLevel = commentsLevel + 1; - // In case that the value is set but larger than 3 we truncate it to 3. - return [ - { - commentId: -1, - children: [ + return [ { - commentId: -2, - children: [ { commentId: -3, children: [] } ], + commentId: -( commentsLevel + 3 ), + children: buildChildrenComment( nextLevel ), }, - ], - }, + ]; + } + return []; + }; + + // Add the first comment and its children + const placeholderComments = [ + { commentId: -1, children: buildChildrenComment( 1 ) }, ]; + + // Add a second comment unless the break comments setting is active and set to less than 2 + if ( ! pageComments || perPage >= 2 ) { + placeholderComments.push( { + commentId: -2, + children: [], + } ); + } + + // Add a third comment unless the break comments setting is active and set to less than 3 + if ( ! pageComments || perPage >= 3 ) { + placeholderComments.push( { + commentId: -3, + children: [], + } ); + } + + // In case that the value is set but larger than 3 we truncate it to 3. + return placeholderComments; }; /** @@ -114,12 +123,12 @@ function CommentTemplateInnerBlocks( { : null } { /* To avoid flicker when switching active block contexts, a preview - is ALWAYS rendered and the preview for the active block is hidden. - This ensures that when switching the active block, the component is not - mounted again but rather it only toggles the `isHidden` prop. - - The same strategy is used for preventing the flicker in the Post Template - block. */ } + is ALWAYS rendered and the preview for the active block is hidden. + This ensures that when switching the active block, the component is not + mounted again but rather it only toggles the `isHidden` prop. + + The same strategy is used for preventing the flicker in the Post Template + block. */ } { const { getSettings } = select( blockEditorStore ); return getSettings().__experimentalDiscussionSettings; @@ -282,6 +292,7 @@ export default function CommentTemplateEdit( { if ( ! postId ) { commentTree = getCommentsPlaceholder( { perPage: commentsPerPage, + pageComments, threadComments, threadCommentsDepth, } ); From de18bd8b3f3ccf03845d413e12b3ec9462708276 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Sep 2022 09:02:47 +0200 Subject: [PATCH 2/6] Limit nested comments in Site editor placeholder --- packages/block-library/src/comment-template/edit.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index eb30e0eb4c641c..52001f503703d1 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -50,7 +50,9 @@ const getCommentsPlaceholder = ( { threadComments, threadCommentsDepth, } ) => { - const commentsDepth = ! threadComments ? 1 : threadCommentsDepth; + const commentsDepth = ! threadComments + ? 1 + : Math.min( threadCommentsDepth, 3 ); const buildChildrenComment = ( commentsLevel ) => { // Render children comments until commentsDepth is reached From 7be0644df0cb93c946ca63200db141f718fb3828 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Sep 2022 09:29:31 +0200 Subject: [PATCH 3/6] Change comments count depending on settings --- .../block-library/src/comments-title/edit.js | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js index 1c4e69b45e75c3..48e885582f4656 100644 --- a/packages/block-library/src/comments-title/edit.js +++ b/packages/block-library/src/comments-title/edit.js @@ -11,11 +11,13 @@ import { BlockControls, useBlockProps, InspectorControls, + store as blockEditorStore, } from '@wordpress/block-editor'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useEntityProp } from '@wordpress/core-data'; import { PanelBody, ToggleControl } from '@wordpress/components'; import { useState, useEffect } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; @@ -39,9 +41,38 @@ export default function Edit( { } ), } ); + const { + threadCommentsDepth, + threadComments, + commentsPerPage, + pageComments, + } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return getSettings().__experimentalDiscussionSettings; + } ); + useEffect( () => { if ( isSiteEditor ) { - setCommentsCount( 3 ); + // Match the number of comments that will be shown in the comment-template/edit.js placeholder + + const commentsDepth = ! threadComments + ? 1 + : Math.min( threadCommentsDepth, 3 ); + + // Number of nested comments + let commentsNumber = commentsDepth; + + // Sum one comment unless the break comments setting is active and set to less than 2 + if ( ! pageComments || commentsPerPage >= 2 ) { + commentsNumber++; + } + + // Sum one comment unless the break comments setting is active and set to less than 3 + if ( ! pageComments || commentsPerPage >= 3 ) { + commentsNumber++; + } + + setCommentsCount( commentsNumber ); return; } const currentPostId = postId; From 992a56edfae94197c735abdda508e3578ca75f1c Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 27 Sep 2022 16:54:25 +0200 Subject: [PATCH 4/6] Limit comments placeholder to 3 --- .../src/comment-template/edit.js | 9 +++---- .../block-library/src/comments-title/edit.js | 24 +++++++------------ 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index 52001f503703d1..966be26b1b72e5 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -50,6 +50,7 @@ const getCommentsPlaceholder = ( { threadComments, threadCommentsDepth, } ) => { + // Limit commentsDepth to 3 const commentsDepth = ! threadComments ? 1 : Math.min( threadCommentsDepth, 3 ); @@ -74,16 +75,16 @@ const getCommentsPlaceholder = ( { { commentId: -1, children: buildChildrenComment( 1 ) }, ]; - // Add a second comment unless the break comments setting is active and set to less than 2 - if ( ! pageComments || perPage >= 2 ) { + // Add a second comment unless the break comments setting is active and set to less than 2, and there is one nested comment max + if ( ( ! pageComments || perPage >= 2 ) && commentsDepth < 3 ) { placeholderComments.push( { commentId: -2, children: [], } ); } - // Add a third comment unless the break comments setting is active and set to less than 3 - if ( ! pageComments || perPage >= 3 ) { + // Add a third comment unless the break comments setting is active and set to less than 3, and there aren't nested comments + if ( ( ! pageComments || perPage >= 3 ) && commentsDepth < 2 ) { placeholderComments.push( { commentId: -3, children: [], diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js index 48e885582f4656..7f4660d5735b27 100644 --- a/packages/block-library/src/comments-title/edit.js +++ b/packages/block-library/src/comments-title/edit.js @@ -55,24 +55,16 @@ export default function Edit( { if ( isSiteEditor ) { // Match the number of comments that will be shown in the comment-template/edit.js placeholder - const commentsDepth = ! threadComments - ? 1 - : Math.min( threadCommentsDepth, 3 ); + const nestedCommentsNumber = threadComments + ? Math.min( threadCommentsDepth, 3 ) - 1 + : 0; + const topLevelCommentsNumber = pageComments ? commentsPerPage : 3; - // Number of nested comments - let commentsNumber = commentsDepth; + const commentsNumber = + parseInt( nestedCommentsNumber ) + + parseInt( topLevelCommentsNumber ); - // Sum one comment unless the break comments setting is active and set to less than 2 - if ( ! pageComments || commentsPerPage >= 2 ) { - commentsNumber++; - } - - // Sum one comment unless the break comments setting is active and set to less than 3 - if ( ! pageComments || commentsPerPage >= 3 ) { - commentsNumber++; - } - - setCommentsCount( commentsNumber ); + setCommentsCount( Math.min( commentsNumber, 3 ) ); return; } const currentPostId = postId; From 1136c4d22ee045b04e29210b444ebf938927e0a6 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 5 Oct 2022 12:44:52 +0200 Subject: [PATCH 5/6] JSDoc whitespace --- packages/block-library/src/comment-template/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index 966be26b1b72e5..309a4b81606da4 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -37,7 +37,7 @@ const TEMPLATE = [ * * @param {Object} settings Discussion Settings. * @param {number} [settings.perPage] - Comments per page setting or block attribute. - * @param {boolean} [settings.pageComments] - Enable break comments into pages setting. + * @param {boolean} [settings.pageComments] - Enable break comments into pages setting. * @param {boolean} [settings.threadComments] - Enable threaded (nested) comments setting. * @param {number} [settings.threadCommentsDepth] - Level deep of threaded comments. * From c768d5163061e39cd3ca5f76044ac2f61268dddf Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 5 Oct 2022 12:45:03 +0200 Subject: [PATCH 6/6] Whitespace --- packages/block-library/src/comment-template/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index 309a4b81606da4..3d33428f6f4585 100644 --- a/packages/block-library/src/comment-template/edit.js +++ b/packages/block-library/src/comment-template/edit.js @@ -129,7 +129,6 @@ function CommentTemplateInnerBlocks( { is ALWAYS rendered and the preview for the active block is hidden. This ensures that when switching the active block, the component is not mounted again but rather it only toggles the `isHidden` prop. - The same strategy is used for preventing the flicker in the Post Template block. */ }