Twenty Eleven: Table header cells' font size does not change with block settings

[truptikanzariya]

In the Twenty Eleven theme, the blog table header inside the Gutenberg editor does not resize properly, causing misalignment. Additionally, the text color settings applied in the editor are not reflected 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. Resize the table by adjusting column widths.
6. Apply a custom text color to the table.
7. Save the post and view it on the frontend.

Expected Behavior:

• The table header should resize dynamically along with the table columns.
• The text color applied in the editor should be reflected on the frontend.

Testing Environment

• Browser: Chrome Version 132.0.6834.159 (Official Build) (64-bit)
• WordPress Version: 6.7.2
• Theme: Twenty Eleven (Version 4.8)

[sainathpoojary]

Hey @truptikanzariya,

Thanks for raising this issue!

In my testing on the trunk version, I couldn’t replicate the color inconsistency. However, I did notice that changes to the font size were not being applied to the header in both the editor and the frontend.

This happens because the header font size is hardcoded in the ​frontend and ​editor

If this isn’t the expected behavior, I’d be happy to work on a fix. Let me know what you think!

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

[sabernhardt]

The color was fixed in [54340]. The video on this ticket seems to show the editor with Twenty Twenty-Five styles, and its color preset classes would not work with Twenty Eleven (or many other themes).

This PR removes the fixed font-size: 10px; rule applied to table header (<th>) elements in the Twenty Eleven theme. The issue caused table headers to ignore block editor font size settings, preventing proper scaling.

By removing this hardcoded font size from both editor-style.css and style.css, table headers will now inherit font sizes correctly based on block editor adjustments, improving theme flexibility and consistency.

Trac ticket: #62983

[sabernhardt]

In the post content area, header cells were set to 10px, and the other table cells inherit 15px from the body text.

1. Simply removing 10px from the th, as PR 8350 does, would increase the default size of header cells to 15px. Most unexpected changes to the default should be avoided; however, 10px is very small.
2. Using max(10px, 0.66666667em) would make the header cells scale up with larger font selections, at two-thirds the size of other cells, and it would keep a minimum th size of 10 pixels if someone decreases the table's font size. The max() function ​browser support is not perfect but probably good enough.
3. As a compromise between the first two options, the th font size could be 0.8em with a line-height of 2. That honors the theme's general design of smaller text in the header cells, but then the default size would be more readable at 12 pixels. This would be an unexpected change, like the first option, though less of a difference and somewhat less likely to create a problem with long words in narrow columns.

In widgets, all the table cells have a font size of 12 pixels by default, and the size scales up and down with the block setting (for Table or Calendar blocks).

[sainathpoojary]

Thanks for the detailed feedback @sabernhardt !
I’ve updated the PR to use the max() function for better scaling while keeping font-size: 10px; as a fallback for older browsers. This ensures header cells doesn't have unexpected change and adaptable to different font settings. Let me know if any further adjustments are needed!

Before:

​https://github.com/user-attachments/assets/f65049da-a6c7-4f55-9443-4dbbc6ffcc20

After:

​https://github.com/user-attachments/assets/c2211e12-c2b5-43ca-9225-f58f76d25deb