Skip to content

Add preview example for comments-count and comments-link #71016

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Aug 5, 2025
Merged

Add preview example for comments-count and comments-link #71016

merged 1 commit into from
Aug 5, 2025

Conversation

Infinite-Null
Copy link
Contributor

Part of #64707

What?

This PR adds example attributes to the Post Comments Count and Post Comments Link blocks to provide block previews in the inserter with optimized viewport width.

Testing Instructions

  1. Open a post or page in the WordPress block editor.
  2. Open the block inserter by clicking the "+" button.
  3. Search for "Post Comments Count" and "Post Comments Link" blocks in the inserter.
  4. Hover over these blocks in the inserter to see the previews with the new viewport width setting.

Screenshots

Before After
Screenshot 2025-08-01 at 4 26 56 PMimage imageScreenshot 2025-08-01 at 4 25 22 PM

While working on this issue, I noticed a minor warning that appears briefly on reload:
Post Comments Link block: post not found.

This is not issue for preview example but as per my understanding it is related to the fact that this:

const hasPostAndComments = postId && commentsCount !== undefined;

takes a moment to load. As a result, the warning gets triggered by the code at the following locations:

gutenberg/packages/block-library/src/post-comments-link/edit.js

Line 104 in 94af11b

{ __( 'Post Comments Link block: post not found.' ) }

gutenberg/packages/block-library/src/post-comments-count/edit.js

Line 75 in 94af11b

{ __( 'Post Comments Count block: post not found.' ) }

Screencast:

Screen.Recording.2025-08-01.at.4.34.13.PM.mov

@github-actions GitHub Actions
Copy link

github-actions bot commented Aug 1, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@yogeshbhutkar yogeshbhutkar added [Type] Enhancement A suggestion for improvement. [Block] Comments Count Affects the Post Comments Count Block [Block] Comment Link Affects the Comment Link Block labels Aug 1, 2025
yogeshbhutkar
yogeshbhutkar approved these changes Aug 1, 2025
View reviewed changes
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar left a comment •
edited
Loading

Choose a reason for hiding this comment

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

LGTM 👍

Edit: As this is my first time, I’d like to wait for a second review to confirm everything is in order before proceeding with a merge.

@yogeshbhutkar yogeshbhutkar mentioned this pull request Aug 4, 2025
Closed
@yogeshbhutkar
Copy link
Contributor

While working on this issue, I noticed a minor warning that appears briefly on reload.

The current behaviour occurs because the value is set asynchronously following an apiFetch call. This results in a warning being shown before the data loads.

Ref:

gutenberg/packages/block-library/src/post-comments-count/edit.js

Line 39 in a9e3fda

apiFetch( {

Typically, other blocks display a reasonable default while fetching data; for instance, the post-author-name block shows “Author Name” during loading.

Ref:

gutenberg/packages/block-library/src/post-author-name/edit.js

Line 59 in a9e3fda

const displayName = authorName?.name || __( 'Author Name' );

This can be addressed separately as a follow-up, so it doesn’t need to block this PR.

I'll be requesting a confidence review to move this PR forward.

@yogeshbhutkar yogeshbhutkar requested a review from Mamaduka August 5, 2025 10:13
Mamaduka
Mamaduka approved these changes Aug 5, 2025
View reviewed changes
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Looks good! Thanks, @Infinite-Null!

@Mamaduka Mamaduka added the props-bot Manually triggers Props Bot to ensure the list of props is up to date. label Aug 5, 2025
@github-actions github-actions bot removed the props-bot Manually triggers Props Bot to ensure the list of props is up to date. label Aug 5, 2025
@Mamaduka Mamaduka merged commit 8470c8b into WordPress:trunk Aug 5, 2025
72 of 74 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.4 milestone Aug 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Mamaduka Mamaduka Mamaduka approved these changes

@yogeshbhutkar yogeshbhutkar yogeshbhutkar approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees
No one assigned
Labels
[Block] Comment Link Affects the Comment Link Block [Block] Comments Count Affects the Post Comments Count Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 21.4
Development

Successfully merging this pull request may close these issues.
3 participants
@Infinite-Null @yogeshbhutkar @Mamaduka