diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js index a2acb7c6d38d94..3d33428f6f4585 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,53 @@ 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 ); + // Limit commentsDepth to 3 + const commentsDepth = ! threadComments + ? 1 + : Math.min( threadCommentsDepth, 3 ); - // 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, 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, and there aren't nested comments + if ( ( ! pageComments || perPage >= 3 ) && commentsDepth < 2 ) { + 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 +126,11 @@ 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 +294,7 @@ export default function CommentTemplateEdit( { if ( ! postId ) { commentTree = getCommentsPlaceholder( { perPage: commentsPerPage, + pageComments, threadComments, threadCommentsDepth, } ); diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js index 1c4e69b45e75c3..7f4660d5735b27 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,30 @@ 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 nestedCommentsNumber = threadComments + ? Math.min( threadCommentsDepth, 3 ) - 1 + : 0; + const topLevelCommentsNumber = pageComments ? commentsPerPage : 3; + + const commentsNumber = + parseInt( nestedCommentsNumber ) + + parseInt( topLevelCommentsNumber ); + + setCommentsCount( Math.min( commentsNumber, 3 ) ); return; } const currentPostId = postId;