Latest Comment block having issue with typography in editor side.

[NidhiDhandhukiya74]

Description

Latest Comment block having issue with typography in editor side.
I have checked this in Twenty Twenty three and in Twenty Twenty theme.

Step-by-step reproduction instructions

1. Use Latest Comment block.
2. Change font size from the typography.

Expected behaviour

When we change the font size then it should be applied to the Latest comment block font size.

Actual behaviour

When we change the font size then it should not be applied to the Latest comment block font size.
when we refresh the page then come back so the previous applied font size is worked but not working on change.

WordPress information

• WordPress version: Version 6.7.1
• Are all plugins except Gutenberg deactivated? - Yes

[t-hamano]

I can't reproduce this issue, am I missing some step?

f5717e94dad03194d5c8c29fe6db59ad.mp4

[Rishit30G]

Thanks for sharing the issue,

But even I couldn't see the issue on my local, everything seems to be working fine, sharing the screencast for the same:

Theme: Twenty Twenty
WordPress: 6.7.1

Screen.Recording.2025-01-27.at.10.08.36.AM.mov

[shail-mehta]

@NidhiDhandhukiya74 Could you please share a screen recording here? Also, could you please check with different default themes and let us know?

Based on the comments above, the issue cannot be reproduced in Gutenberg.

[NidhiDhandhukiya74]

Hello everyone,

I missed one important step to reproduce the issue: apply alignment first. The font-size setting doesn’t work when alignment is used.
I’ve attached a video for better understanding.

Edit.Page.guteberg.test.woodward-exersie.WordPress.mp4

[t-hamano]

Thank you, I was able to reproduce this issue.

The underlying problem is likely the same as the following issues:

• Latest Comments text color issue. #66536
• Calendar Block Color options are not working properly #61346
• Latest Comments : Line Height is not reflecting in editor #61890

This issue probably needs to be fixed in the ServerSideRender component itself, not in each block.

See #64986 (review) for more details.

[coder-rancho]

Hey @t-hamano, I was debugging the issue. Here are my findings:

1. The changes in attributes are only reflected for the first time when block is added to the editor. Once we save the post and refresh the page, the changes in attributes are still saved in backend but not reflected on UI in real time. Demo:

Screen.Recording.2025-02-10.at.9.01.59.PM.mov

2. Here at #64986 (review), you've mentioned that the fetchData() function is not called from debouncedFetchData() function. This is happening because fetchData() is redefined for each render. Every render created a new fetchData function, causing useDebounce to reset its timer continuously. The debounced callback was therefore never allowed to fire. To fix this, we can define fetchData inside useCallback. But this will not fix the problem as I tried already.

3. The behaviour of ServerSideRender component was almost identical for both blocks ( i.e. The block that was added for the first time in the editor and the block that was added before we refresh the editor ). All the logs, all the function calls were identical.

One more thing that I noticed while using useCallback with fetchData function is that the attributes value in fetchResponse was not updated. But when I use fetchData without debounce or useCallback, the fetchResponse receives updated attributes value.

[t-hamano]

I have abstracted this problem and submitted it as #69220. Therefore, let's close this issue.