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 block: Support nested comments settings in the comments blocks #44351

Merged
merged 2 commits into from
Sep 26, 2022

Conversation

SantosGuillamot
Copy link
Contributor

Fixes #44257

What?

Add support for the setting to "Enable threaded (nested) comments" and define the deep level in the recently create Comments block.

Why?

As described in the issue, they aren't respected right now in the new Comments block, while in the legacy one it does. As we can see there are mainly two problems:

  • When the "Enable threaded (nested) comments" setting is disabled but there are nested comments, they still appear as different levels and they are repeated.
  • When the levels deep is surpassed, it should respect the setting, and right now it is not happening.

How?

I added some variables to read the global settings and change the conditionals to respect them.

Testing Instructions

  1. Open a Post with many levels of nested comments.
  2. Change the "Enable threaded (nested) comments X levels deep" with different possibilities and ensure everything works fine. Some options to review: Enable/Disable the option and change the levels deep to a lower number.
  3. You can compare the legacy block and the new Comments block switching between Twenty Twenty Two theme (using legacy block) and Twenty Twenty Three theme (using the new Comments block).

More detailed instructions can be seen in the issue.

@cbravobernal cbravobernal added the [Type] Bug An existing feature does not function as intended label Sep 22, 2022
Copy link
Contributor

@cbravobernal cbravobernal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Working as expected.

Trunk branch:
trunk_not_respecting_thread_level

PR branch:
fix_respecting_thread_level

@SantosGuillamot SantosGuillamot merged commit df7cdc9 into trunk Sep 26, 2022
@SantosGuillamot SantosGuillamot deleted the fix/nested-comments-levels-not-working branch September 26, 2022 06:51
@github-actions github-actions bot added this to the Gutenberg 14.3 milestone Sep 26, 2022
@carolinan
Copy link
Contributor

carolinan commented Sep 26, 2022

I have not tested the PR -Looking at the after screenshot, the comments are still nested -just not as deep? Does the PR also solve the layout issues when the nested comments option is turned off?

@SantosGuillamot
Copy link
Contributor Author

I have not tested the PR -Looking at the after screenshot, the comments are still nested -just not as deep?

Yes, it is nested until the level you define in that setting. It seemed to be the current behavior if I install the Twenty Twenty theme (not using the new block) for example.

Does the PR also solve the layout issues when the nested comments option is turned off?

Yes, it should solve this use case as well. I attach some screenshots of both cases to show what I mean:

Use case 1: Nested comments option is turned off

Settings
Screenshot 2022-09-26 at 10 52 37

Twenty Twenty theme (with the old block)
Screenshot 2022-09-26 at 10 56 33

Twenty Twenty-Three theme (with the new block)
Screenshot 2022-09-26 at 10 53 19

Use case 2: Nested comments option is turned on and levels deep is 2

Settings
Screenshot 2022-09-26 at 10 54 38

Twenty Twenty theme (with the old block)
Screenshot 2022-09-26 at 10 56 13

Twenty Twenty-Three theme (with the new block)
Screenshot 2022-09-26 at 10 53 56

Use case 3: Nested comments option is turned on and levels deep is 3

Settings
Screenshot 2022-09-26 at 10 54 30

Twenty Twenty theme (with the old block)
Screenshot 2022-09-26 at 10 55 40

Twenty Twenty-Three theme (with the new block)
Screenshot 2022-09-26 at 10 54 17

We can see that the levels deep option is always respected and only the comments in that range admit a reply in all the cases.

Hope this helps 🙂

@ockham
Copy link
Contributor

ockham commented Sep 26, 2022

Thanks all! ❤️ I think this qualifies as a bugfix, so I'll add the "Backport to WP Beta/RC" label so it'll be included with WP 6.1.

Some notes:

  1. A bit of test coverage would be great. Since we're more or less testing the output of the dynamic block, I think the best fit for test coverage would be here.
  2. We probably also want the editor representation of the block to respect the threaded comments setting -- especially when used in the post editor (where we fetch existing comments for the current post and display them to better match the frontend output).

@SantosGuillamot @c4rl0sbr4v0 If you have some time to spare, could y'all maybe take care of that? For the editor representation (item 2.), ideally we can get it fixed by 16:00 UTC today so we can get it into Beta 2 😊

@ockham ockham added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 26, 2022
@SantosGuillamot
Copy link
Contributor Author

I have just created this Pull Request to improve the UX in the Site Editor. However, as I point out there, making it work in the Post Editor is trickier as it gets real data from the REST API and it is not easy to handle nested comments. Anyway, the Comments block should be handled almost always from the Site Editor, so I believe that the way it is right now should be enough.

ockham pushed a commit that referenced this pull request Sep 26, 2022
…ks (#44351)

* Support nested comments settings in the new blocks
@ockham
Copy link
Contributor

ockham commented Sep 26, 2022

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: 93d7c76

@ockham ockham removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 26, 2022
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Sep 27, 2022
Package updates for bug and regression fixes:

* @wordpress/block-directory: 3.15.3
* @wordpress/block-editor: 10.0.3
* @wordpress/block-library: 7.14.3
* @wordpress/block-serialization-default-parser: 4.17.1
* @wordpress/blocks: 11.16.3
* @wordpress/components: 21.0.3
* @wordpress/compose: 5.15.2
* @wordpress/core-data: 5.0.3
* @wordpress/customize-widgets: 3.14.3
* @wordpress/edit-post: 6.14.3
* @wordpress/edit-site: 4.14.4
* @wordpress/edit-widgets: 4.14.3
* @wordpress/editor: 12.16.3
* @wordpress/format-library: 3.15.3
* @wordpress/interface: 4.16.3
* @wordpress/list-reusable-blocks: 3.15.3
* @wordpress/nux: 5.15.3
* @wordpress/preferences: 2.9.3
* @wordpress/reusable-blocks: 3.15.3
* @wordpress/server-side-render: 3.15.3
* @wordpress/style-engine: 1.0.2
* @wordpress/widgets: 2.15.3

References:
* [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string
* [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks
* [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes
* [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks
* [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords
* [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash
* [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type.
* [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe
* [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor
* [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled
* [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter)
* [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty
* [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA
* [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus
* [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor
* [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels
* [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core
* [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template
* [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks
* [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts
* [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers
* [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header

Props bernhard-reiter, cbravobernal.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54335 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Sep 27, 2022
Package updates for bug and regression fixes:

* @wordpress/block-directory: 3.15.3
* @wordpress/block-editor: 10.0.3
* @wordpress/block-library: 7.14.3
* @wordpress/block-serialization-default-parser: 4.17.1
* @wordpress/blocks: 11.16.3
* @wordpress/components: 21.0.3
* @wordpress/compose: 5.15.2
* @wordpress/core-data: 5.0.3
* @wordpress/customize-widgets: 3.14.3
* @wordpress/edit-post: 6.14.3
* @wordpress/edit-site: 4.14.4
* @wordpress/edit-widgets: 4.14.3
* @wordpress/editor: 12.16.3
* @wordpress/format-library: 3.15.3
* @wordpress/interface: 4.16.3
* @wordpress/list-reusable-blocks: 3.15.3
* @wordpress/nux: 5.15.3
* @wordpress/preferences: 2.9.3
* @wordpress/reusable-blocks: 3.15.3
* @wordpress/server-side-render: 3.15.3
* @wordpress/style-engine: 1.0.2
* @wordpress/widgets: 2.15.3

References:
* [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string
* [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks
* [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes
* [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks
* [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords
* [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash
* [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type.
* [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe
* [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor
* [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled
* [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter)
* [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty
* [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA
* [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus
* [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor
* [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels
* [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core
* [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template
* [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks
* [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts
* [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers
* [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header

Props bernhard-reiter, cbravobernal.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54335


git-svn-id: http://core.svn.wordpress.org/trunk@53894 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Sep 27, 2022
Package updates for bug and regression fixes:

* @wordpress/block-directory: 3.15.3
* @wordpress/block-editor: 10.0.3
* @wordpress/block-library: 7.14.3
* @wordpress/block-serialization-default-parser: 4.17.1
* @wordpress/blocks: 11.16.3
* @wordpress/components: 21.0.3
* @wordpress/compose: 5.15.2
* @wordpress/core-data: 5.0.3
* @wordpress/customize-widgets: 3.14.3
* @wordpress/edit-post: 6.14.3
* @wordpress/edit-site: 4.14.4
* @wordpress/edit-widgets: 4.14.3
* @wordpress/editor: 12.16.3
* @wordpress/format-library: 3.15.3
* @wordpress/interface: 4.16.3
* @wordpress/list-reusable-blocks: 3.15.3
* @wordpress/nux: 5.15.3
* @wordpress/preferences: 2.9.3
* @wordpress/reusable-blocks: 3.15.3
* @wordpress/server-side-render: 3.15.3
* @wordpress/style-engine: 1.0.2
* @wordpress/widgets: 2.15.3

References:
* [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string
* [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks
* [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes
* [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks
* [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords
* [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash
* [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type.
* [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe
* [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor
* [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled
* [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter)
* [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty
* [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA
* [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus
* [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor
* [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels
* [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core
* [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template
* [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks
* [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts
* [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers
* [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header

Props bernhard-reiter, cbravobernal.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54335


git-svn-id: https://core.svn.wordpress.org/trunk@53894 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
Package updates for bug and regression fixes:

* @wordpress/block-directory: 3.15.3
* @wordpress/block-editor: 10.0.3
* @wordpress/block-library: 7.14.3
* @wordpress/block-serialization-default-parser: 4.17.1
* @wordpress/blocks: 11.16.3
* @wordpress/components: 21.0.3
* @wordpress/compose: 5.15.2
* @wordpress/core-data: 5.0.3
* @wordpress/customize-widgets: 3.14.3
* @wordpress/edit-post: 6.14.3
* @wordpress/edit-site: 4.14.4
* @wordpress/edit-widgets: 4.14.3
* @wordpress/editor: 12.16.3
* @wordpress/format-library: 3.15.3
* @wordpress/interface: 4.16.3
* @wordpress/list-reusable-blocks: 3.15.3
* @wordpress/nux: 5.15.3
* @wordpress/preferences: 2.9.3
* @wordpress/reusable-blocks: 3.15.3
* @wordpress/server-side-render: 3.15.3
* @wordpress/style-engine: 1.0.2
* @wordpress/widgets: 2.15.3

References:
* [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string
* [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks
* [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes
* [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks
* [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords
* [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash
* [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type.
* [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe
* [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor
* [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled
* [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter)
* [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty
* [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA
* [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus
* [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor
* [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels
* [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core
* [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template
* [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks
* [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts
* [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers
* [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header

Props bernhard-reiter, cbravobernal.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54335 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Comments Affects the Comments Block - formerly known as Comments Query Loop [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Comments block: The setting for "Enable threaded (nested) comments" is ignored
4 participants