[wp-trac] [WordPress Trac] #63034: Twenty Eleven: Table cells font appearance does not change with block settings

[WordPress Trac]

#63034: Twenty Eleven: Table cells font appearance does not change with block
settings
----------------------------------------+------------------------------
 Reporter:  sainathpoojary              |       Owner:  (none)
     Type:  defect (bug)                |      Status:  closed
 Priority:  normal                      |   Milestone:  Awaiting Review
Component:  Bundled Theme               |     Version:  trunk
 Severity:  minor                       |  Resolution:  worksforme
 Keywords:  has-patch has-testing-info  |     Focuses:  css
----------------------------------------+------------------------------
Changes (by saurabh.dhariwal):

 * keywords:  has-patch => has-patch has-testing-info
 * status:  new => closed
 * resolution:   => worksforme


Comment:

 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63034#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform