Twenty Fourteen: Latest Comments block font-size does not change with user settings

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Fourteen theme.
2. Choose Latest Comment block.
3. Change the font-size from the settings.

You can able to see there is no difference in font-size.
For Admin side if you can choose medium font-size save and reload than it will start working for admin side.
For user side the font-size not working.

[nidhidhandhukiya]

This patch will resolve the issue for front side.

[nidhidhandhukiya]

For admin side this issue is same for many other themes as well so need to find global solution for that in the latest comment block.

[karmatosed]

Thank you for this issue, let's look at getting this tested.

[sainathpoojary]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/62819/62819.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 135.0.0.0
• OS: macOS
• Theme: Twenty Fourteen 4.2
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

Actual Results

❌ Issue not resolved with patch.

Additional Notes

The patch is working on the frontend, but the font size in the editor still isn’t changing.

Supplemental Artifacts

Video: ​https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOanx0iaHJcb5UXrLqDIo97jZKdMWg8iplmysR

[abcd95]

I agree with you @sainathpoojary, the styles are not reflecting in the editor and only working in the frontend. I have created a patch for it to work in the editor as well.

Please feel free to test this for both in the editor and in the frontend.

[ankitkumarshah]

Hey @abcd95,
Thank you for the patch. I tested it, and now the font changes in real time in the editor, and it also works well on the front end.

Screencast:
​https://ppgtp1rtd3.ufs.sh/f/TnWMEUzoUd85yrODiK39bt6mVDfTXZ4K7aSCjk8s02xOeMrI

[sabernhardt]

1. Avoid !important (#26350).
2. [class$="-font-size"] will not apply styles if the element's class list ever includes another class after that.
3. I think this could use 1em instead of inherit.

[sabernhardt]

switching 16px to 1em, but setting the widget block to 16px

[sabernhardt]

[44144] set the Latest Comments block's elements to 16px for Twenty Fourteen (which matches the body font size).

In a widget, the block has been 16px since WordPress 5.8, but the legacy Latest Comments widget had a smaller font size:

.widget {
    font-size: 14px;
}
@media screen and (min-width: 1008px) {
    .footer-sidebar .widget,
    .primary-sidebar .widget {
        font-size: 12px;
    }
}

62819.2.patch​ adds a ruleset to honor the block's current default font size of 16px in widgets, not the legacy widget size.

Twenty Thirteen probably could have a similar change to 1em, including .wp-block-latest-comments__comment-date. Twenty Twelve and Twenty Eleven seem to need additional adjustments.

[densinakum]

​https://www.awesomescreenshot.com/video/39138586?key=b296f481897c599c5e0fc74f78f010a6

I tested this issue using the Twenty Fourteen theme and inserted the Latest Comments block. I selected a portion of text and applied the "XL" font size setting. The font size renders well on desktop and tablet previews, but it doesn't look good on mobile (phone) screens—the text appears oversized and breaks the layout.

📱 I recommend making the XL font size responsive, especially for smaller screens. A fluid or adaptive font sizing approach (e.g., using media queries) could help maintain visual consistency across devices.

I've also recorded a video demonstrating this behavior for reference.

[avinashbhosale]

Test Report for 2 Patches

Description

This report validates whether the indicated patches works as expected.

• Patch 1 tested: https://core.trac.wordpress.org/attachment/ticket/62819/62819-editor-and-frontend.patch

• Patch 2 tested: https://core.trac.wordpress.org/attachment/ticket/62819/62819.2.patch

Environment

• WordPress: 6.8.1
• PHP: 8.2.27
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.27)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Fourteen 4.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

• Patch 1 Results -
  • ✅ Issue is resolved with patch.

• Patch 2 Results -
  • ❌ Issue is not resolved with the patch.

Additional Notes

• Patch provided by @abcd95 works well. I can see the changes to the font sizes in both - the editor as well as the front end.

• For the patch provided by @sabernhardt, the font changes are not reflected in the editor, but are applied in the front end.

[SirLouen]

@sabernhardt something is going wrong with this patch. It seems it's not adapting to flexible changes from Gutenberg, probably some other styling is interfering.

[sabernhardt]

The font sizes adjusted for me in the editor with 62819.2.patch​ after I cleared browser cache.

[sabernhardt]

making the XL font size responsive

I do not think that the XL size is a good choice for the Latest Comments block at any screen size, especially with Twenty Fourteen.

• Both the Large (36px) and XL (42px) presets are larger than the post title's size of 33 pixels.
• The block is often used in a widget area, and those can be quite narrow on larger screens. When the Primary Sidebar is 162 pixels wide, even the Large preset is too big there (words such as "WordPress" and "Commenter" could break onto multiple lines). These are the measurements on screens larger than 1008 pixels:
  • Primary Sidebar: either 122 or 162 pixels wide
  • Footer Sidebar: 25%, or 192 to 255 pixels, wide
  • Content Sidebar: 29%, or 232 to 306 pixels, wide

---

Also, if the block displays avatars, increasing the font size (at all) can create an issue with the margin for the excerpts and comment meta. Twenty Fourteen defines a left margin of 60 pixels while the block-library styles assign relative measurements for the ​margin and the ​avatar dimensions. If the margin is worth fixing, I can think of two different directions.

1. Use a relative margin that is equal to 60 pixels with the default font size. This would continue allowing the image size to increase with the text, which can make the image blurry if it stretches beyond 48 pixels (with font size greater than 19.2 pixels).

   .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
   .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
   	margin-left: 3.75em;
   }
   

2. Insist that the avatar is a specific size, regardless of the block's font size. Setting a font size on the image would still use the relative measurements from block-library for width, height and margin.

   .wp-block-latest-comments .avatar,
   .wp-block-latest-comments__comment-avatar {
   	font-size: 16px;
   }
   

[sainathpoojary]

Hey @sabernhardt,

I tested the patch (62819.2.patch) and it seems to work, but only after saving and refreshing the page. The changes don’t appear to update in real time. I’ve attached a video for your reference, I hope this helps

Thank you!

[abcd95]

The changes don’t appear to update in real time.

The reason for creating this patch and taking this route 62819-editor-and-frontend.patch was that the editor styles were not appearing in real time. Manual refresh was needed every time a new size was picked.

[sabernhardt]

The changes don’t appear to update in real time.

The editor had a bug with ​changing typography options in real-time after saving a post with one of the options selected. Starting with Gutenberg 20.8, the plugin should have fixed that with any theme activated.

[sainathpoojary]

Thanks, @sabernhardt, for the insights! I tested 62819.2.patch with the Gutenberg plugin, and it’s working as expected.

[SirLouen]

Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/62819/62819.2.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Fourteen 4.2
• MU Plugins: None activated
• Plugins:
  • Gutenberg 20.9.0
  • Test Reports 1.2.0

Testing Instructions

1. Install Gutenberg plugin 20.9 (as suggested here)
2. Create a post
3. Add a comment to the post
4. Add the Latest Comments Block
5. Modify the size of the blocks' text
6. 🐞 Text size is not resized interactively

Expected Results

• Text resizes interactively when clicking the 4 preset sizes

Actual Results with the patch

1. ✅ Issue resolved with patch.

Additional Notes

• This patch is ready to ship and waiting for the Gutenberg update in core to fully be implemented.