-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Comment Template block: Handle nested comments (#36065)
* Comments Query: Use discussion settings as a defult for queryPerPage * Comments Query: Make <ul> into <ol> * Comment Template: Add styles * Comment Template: Handle the discussion settings * Fix whitespace * Comments template: Stop using comments_per_page * Comments Template: Update the fixtures * Comments Template: Update JS-side implementation to fix bugs with focus and add tests * Comments Template: Update styles and tests * Comment Template: Add comments to imports because eslint * Comments Template: Add better comments * Coment Template: Refactor JS + add better comments * Comment Template: Fix JSDoc * Comment Template: Add nested comments on PHP side * Comment Template: Add css to block-library CSS file. * Comment Template: Generate correct attributes * Just reformat * Comment Template: Revert useless rename * Remove unnecesary isset() call Co-authored-by: Greg Ziółkowski <[email protected]> * Move RenderComments to inside CommentTemplateInnerBlocks * Fix typo * Comment Template: Simplify mapping over comments * Comment Template: Prefix functions with `block_core_comment_template` * Comment Template: Refactor Replace the custom convert_to_tree with calls to ::get_children() * Comment Template: Change how we destructure children in CommentTemplateInnerBlocks * Comment Template: Add PHP test cases * Comment Template: Rename RenderComments to CommentList * Comment Template: Refactor to make ConmmentTemplateInnerBlock more readable * Comment Template: Handle queryPerPage correctly on the JS side * Comment Template: Remove the `id` from the comment object * Comment Template: Remove tearDown() from PHP tests * Comment Template: Add comment to clarify that build step adds 'gutenberg_*' prefix to functions * Comment Template: Rename the blockContexts to comments * Comment Template: Add context `embed` * Fix code styling issues * Fix code styling issues * Improve JSDoc for `convertToTree` function Co-authored-by: Greg Ziółkowski <[email protected]>
- Loading branch information
1 parent
f3f980f
commit e629f5b
Showing
10 changed files
with
392 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,5 +12,6 @@ | |
"reusable": false, | ||
"html": false, | ||
"align": true | ||
} | ||
}, | ||
"style": "wp-block-comment-template" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
.wp-block-comment-template { | ||
margin-bottom: 0; | ||
max-width: 100%; | ||
list-style: none; | ||
padding: 0; | ||
|
||
li { | ||
clear: both; | ||
} | ||
|
||
ol { | ||
margin-bottom: 0; | ||
max-width: 100%; | ||
list-style: none; | ||
padding-left: 2rem; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/** | ||
* Internal dependencies | ||
*/ | ||
import { convertToTree } from '../util'; | ||
|
||
describe( 'Convert to tree', () => { | ||
it( 'Empty comments', () => { | ||
const comments = convertToTree( [] ); | ||
|
||
expect( comments ).toEqual( [] ); | ||
} ); | ||
|
||
it( 'Handle comments', () => { | ||
const comments = convertToTree( [ | ||
{ id: 1, parent: 0 }, | ||
{ id: 2, parent: 0 }, | ||
{ id: 3, parent: 2 }, | ||
{ id: 4, parent: 2 }, | ||
{ id: 5, parent: 4 }, | ||
{ id: 6, parent: 1 }, | ||
] ); | ||
|
||
expect( comments ).toEqual( [ | ||
{ | ||
commentId: 1, | ||
children: [ | ||
{ | ||
commentId: 6, | ||
children: [], | ||
}, | ||
], | ||
}, | ||
{ | ||
commentId: 2, | ||
children: [ | ||
{ commentId: 3, children: [] }, | ||
{ | ||
commentId: 4, | ||
children: [ { commentId: 5, children: [] } ], | ||
}, | ||
], | ||
}, | ||
] ); | ||
} ); | ||
} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
/** | ||
* | ||
* This function converts a flat list of comment objects with a `parent` property | ||
* to a nested list of comment objects with a `children` property. The `children` | ||
* property is itself a list of comment objects. | ||
* | ||
* @example | ||
* ``` | ||
* const comments = [ | ||
* { id: 1, parent: 0 }, | ||
* { id: 2, parent: 1 }, | ||
* { id: 3, parent: 2 }, | ||
* { id: 4, parent: 1 }, | ||
* ]; | ||
* expect( convertToTree( comments ) ).toEqual( [ | ||
* { | ||
* commentId: 1, | ||
* children: [ | ||
* { commentId: 2, children: [ { commentId: 3, children: [] } ] }, | ||
* { commentId: 4, children: [] }, | ||
* ], | ||
* }, | ||
* ] ); | ||
* ``` | ||
* @typedef {{id: number, parent: number}} Comment | ||
* @param {Comment[]} data - List of comment objects. | ||
* | ||
* @return {Object[]} Nested list of comment objects with a `children` property. | ||
*/ | ||
export const convertToTree = ( data ) => { | ||
const table = {}; | ||
if ( ! data ) return []; | ||
|
||
// First create a hash table of { [id]: { ...comment, children: [] }} | ||
data.forEach( ( item ) => { | ||
table[ item.id ] = { commentId: item.id, children: [] }; | ||
} ); | ||
|
||
const tree = []; | ||
|
||
// Iterate over the original comments again | ||
data.forEach( ( item ) => { | ||
if ( item.parent ) { | ||
// 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 ] ); | ||
} 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 | ||
// and push it to the final tree. | ||
tree.push( table[ item.id ] ); | ||
} | ||
} ); | ||
return tree; | ||
}; |
Oops, something went wrong.