Twenty Twenty: Inconsistent caption styles between editor and front-end in Calendar block

[sukhendu2002]

In the Twenty Twenty theme, the calendar block styling differs between the editor and frontend views:

• The calendar header lacks padding in the editor but shows padding on the frontend.
• Font-weight is missing in the editor but appears on the frontend.

Trac ticket: https://core.trac.wordpress.org/ticket/62781

[gulamdastgir04]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8088.diff

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.27
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.4.3 / Client: mysqlnd 8.2.27)
• Browser: Chrome 131.0.0.0
• OS: Linux
• Theme: Twenty Twenty 2.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Editor:
​https://tinyurl.com/2yrpdng3

Frontend:
​https://tinyurl.com/226c8sd7

[poena]

Hi
PR 8088 ensures that the caption looks the same in the editor and front.

But when testing I found that the Typography > Appearance option which can be used to adjust the font weight of the block is not working.

It is not working to 100% with or without this PR, but the PR prevents the Typography > Appearance option from styling the caption in the editor.

Can we find a solution where the default font weight for the caption is 600 in both the editor and front, and where the Appearance option works in both the editor and front?

Trac ticket
Trac ticket: https://core.trac.wordpress.org/ticket/62781

I have addressed the issue and created a new PR to ensure the following:

1. The default font weight for the caption is set to 600 in both the editor and front end.
2. The Typography > Appearance option now correctly adjusts the font weight of the caption in both the editor and front.

[nidhidhandhukiya]

Hello @poena

I have added Pr as per your request.

This new PR resolves the inconsistencies and ensures the functionality works as expected. Please review the changes and let me know if any further adjustments are needed.

[poena]

With PR 8110, all the Typography settings are working.

I want to make the following change request:
The PR also removes a file from the theme Twenty Ten. That change is unrelated.

Also, unrelated to the PR, I am seeing one more problem.
The font family of the calendar table footer is wrong on the front. It should be Inter like the rest of the block.
font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;

(The footer is only visible if there are posts created in more than one month)

Should we solve this as part of this issue, or open new issues?

[nidhidhandhukiya]

Hello @poena
I have completed the changes in the Github PR as per your suggestion and aslo Fixed the calendar table footer font to match the rest of the block by setting it to Inter.

[shraddhagore]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8110

Environment

• WordPress: 6.8-alpha-20250214.111037
• PHP: 7.4.31-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 133.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with PR 8110.

Supplemental Artifacts

• Before Editor: https://core.trac.wordpress.org/attachment/ticket/62781/before-8110-editor.png
• Before Site: https://core.trac.wordpress.org/attachment/ticket/62781/before-8110-site.png
• After Editor: https://core.trac.wordpress.org/attachment/ticket/62781/after-8110-editor.png
• After Site: https://core.trac.wordpress.org/attachment/ticket/62781/after-8110-site.png

[sabernhardt]

PR 8110 would inherit the block's custom font-weight, but is inherit the best choice?

1. I think inherit would make the caption unexpectedly thin if someone selects an Appearance option of Regular 400 or lighter (with or without Italic).
2. The block-library styles set header cells to 400, and their weight does not change with the block setting.
3. For a ​relative value, the style override could use bolder on the caption. I think it could be better in some cases, but then selecting Semi Bold 600 would give the caption a weight of 900 (which is likely the most surprising result in this context).
4. If neither inherit nor bolder would fit all selections well enough, should the caption and/or header cells inherit the custom weight only when the block text is thicker than 600?

   .wp-block-calendar:where(
   	[style*="font-weight:700"],
   	[style*="font-weight:800"],
   	[style*="font-weight:900"],
   	[style*="font-weight:1000"],
   	) :is(caption, th) {
   	font-weight: inherit;
   }
   

[darshitrajyaguru97]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8110

Environment:

OS: Windows 11
PHP: 8.2.12
WordPress: 6.9.4
Browser: Chrome
Theme: Twenty Twenty
Plugins:

• Test Reports

Actual Results:

• Issue resolved

✅ Patch working well as desired solution

[gaisma22]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/8110

Environment

• WordPress: 7.0-beta6-62085-src
• PHP: 8.3.30
• Server: nginx/1.29.7
• Database: MySQL 8.4.8
• Browser: Brave
• OS: Ubuntu
• Theme: Twenty Twenty 3.0
• MU Plugins: None
• Plugins: None

Steps taken

1. Activated Twenty Twenty theme.
2. Created a new page and inserted a Calendar block.
3. Confirmed the bug - header padding and caption font weight differ between editor and front-end.
4. Applied patch from PR #8110
5. Hard refreshed the editor.
6. Header padding and caption font weight now consistent between editor and front-end.
7. Tested Typography > Appearance option - font weight updates correctly in both views.

✅ Patch is solving the problem

Expected result

Calendar block caption and header styling should match between editor and frontend in Twenty Twenty. Typography Appearance option should work in both.

Additional Notes

1. Bug confirmed on 7.0-beta6 before applying patch.
2. Patch applied with --exclude for src/wp-content/themes/twentyten/blocks.css as it could not apply to that file. Only Twenty Twenty changes were tested.
3. Four trailing whitespace warnings on apply.

Screenshots/Screencast with results

Before Patch:

After Patch: