Twenty Eleven: Table cells font appearance does not change with block settings

[sainathpoojary]

In the Twenty Eleven theme, when applying font appearance or weight to table cells via the block editor, the styles render correctly in the editor interface but do not apply on the frontend.

Steps to Reproduce :

1. Activate the Twenty Eleven theme.
2. Create a new post or edit an existing one.
3. Insert a Table Block in the Gutenberg editor.
4. Add multiple columns and rows.
5. Apply a font appearance to the table.
6. Save the post and view it on the frontend.

Expected Behavior:
Styles applied to table cells in the editor should display consistently on both the editor and frontend.

Trac ticket: #63034

Removes font-weight: normal; from caption, th, td in style.css to ensure font weight set in the editor is correctly applied on the frontend.

Before:

​https://github.com/user-attachments/assets/374c5cf1-835a-4bc2-9afb-72705bb96a6c

After:

​https://github.com/user-attachments/assets/5fcdd072-4fa2-403e-a91b-39bfb4c5c8fd

[navi161]

Test Report

This report validates that the indicated patch addresses the issue.

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

Environment

• OS: macOS 14.6.1
• Web Server: PHP.wasm
• PHP: 7.4.31-dev
• WordPress: 6.8-alpha-20250228.070543
• Browser: Chrome Version 133.0.6943.142
• Theme: Twenty Eleven
• Active Plugins:
  • Twenty Eleven

Actual Results

• ✅ Issue resolved with patch.

• Reference video and screenshots attached in the attachment section.

[navi161]

Font Fix on FE

[navi161]

Font as selected on WP Admin

[navi161]

Font on frontend

[saurabh.dhariwal]

Test Report: Font Appearance & Weight Not Applying to Table Cells in Twenty Eleven Theme

Title: Font Styling in Table Block Not Applying on Frontend in Twenty Eleven Theme

1. Test Overview

This test evaluates an issue where font appearance and weight applied to table cells in the Gutenberg editor are not reflected on the frontend when using the Twenty Eleven theme. The expected behavior is that the styles should be consistently applied in both the editor and the frontend.

After identifying the issue, a patch was applied to resolve the problem. This report includes test steps, observations, and the final result.

2. Test Environment

WordPress Version: 6.7
Theme: Twenty Eleven
Editor: Gutenberg (Block Editor)
PHP Version: 8.1
Database: MySQL / MariaDB
Browser(s) Tested: Chrome, Firefox, Edge
Plugins Active: None (Tested on a clean installation)
Debug Mode: Enabled (WP_DEBUG, WP_DEBUG_LOG)

3. Test Scenario

When applying font appearance (weight, style) to table cells via the block editor, the styles render correctly in the editor interface but do not appear on the frontend.

4. Steps to Reproduce

Activate the Twenty Eleven theme.
Navigate to Posts > Add New in the WordPress admin panel.
Insert a Table Block in the Gutenberg editor.
Add multiple columns and rows.
Apply font styling (bold, italic, font weight) to the table cells.
Save the post and preview it on the frontend.
Observe whether the styles applied in the editor appear correctly on the frontend.

5. Expected Behavior

Font appearance (weight, style) should apply consistently to table cells in both the editor interface and the frontend.

6. Actual Behavior (Before Patch)

✅ Font appearance applies correctly inside the editor.
❌ Font styles do not reflect on the frontend.
❌ Table block styles are missing in the Twenty Eleven theme’s CSS.
❌ Gutenberg-generated styles are not inherited by the frontend.

7. Root Cause Analysis

The Twenty Eleven theme lacks proper CSS rules for table cells in Gutenberg’s Table Block.
The theme’s default styling overrides Gutenberg styles, preventing the applied font settings from being displayed correctly.
The frontend does not load the editor's inline styling for tables by default.

8. Resolution & Patch Verification

Patch Applied: ✅ A fix was implemented by adding proper CSS rules to ensure that table block styles are correctly inherited on the frontend.
Steps to Verify the Fix

Apply the patch to the Twenty Eleven theme.
Clear cache and refresh the page.
Repeat the test steps mentioned earlier.
Observe whether the table styling now appears correctly on the frontend.

9. Test Results

Before Patch (Issue Identified)

✅ Font appearance (weight, style) applies correctly in the editor.
❌ Font appearance does not apply on the frontend.
❌ Table block styles missing in the Twenty Eleven theme’s CSS.
❌ Gutenberg-generated styles not fully inherited on the frontend.
After Patch (Fix Applied & Verified)

✅ Font appearance and weight now apply correctly on the frontend.
✅ Table block styling is consistent between the editor and frontend.
✅ No additional issues found after applying the fix.

10. Conclusion

The issue was confirmed and successfully resolved after applying the patch. The Twenty Eleven theme was missing necessary CSS rules for table block styles, which caused font appearance settings to not apply correctly on the frontend. The fix ensures that table cells now inherit the correct styles from Gutenberg on both the editor and the frontend.

11. Recommendations

Consider updating the Twenty Eleven theme's default CSS to fully support Gutenberg block styles.
Include frontend style syncing mechanisms in future theme updates.
Conduct additional testing on other block elements to ensure consistency across the site.

12 Screen shoot : before patch apply : admin side: ​https://prnt.sc/UA_AjyfTlyNd

frontend side: ​https://prnt.sc/eBdy1DSTsvFh

After Patch Apply: ​https://prnt.sc/BipJKMWkZW7j