Twenty Sixteen: fix editor styles for Table and Calendar blocks and captions

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Sixteen Theme.
2. Choose Table block.
3. Add some text in table.
4. Now change the font size and check it both the side editor and user side.

You can able to see the change in front side but the editor side have no change even after applying the different style of font size.

I have attached video for better understanding.
Video URL:- ​https://share.cleanshot.com/7N69syB5q6GJX41f5WfS

[sheulyshila]

I also faced this in Twenty Sixteen theme table block font size issue on editor side. I think this issue need to be fixed.
Video url:​https://drive.google.com/file/d/1oJRJ_BHBydJmHbxQ7qSxyGAV-LXrzWGQ/view

[bijit027]

I am currently using twenty-fifteen themes and here I also faced the same issue. I think many themes have similar issues.
here is the video link: ​https://drive.google.com/file/d/1wgE8umFUKzidPu4MZK-rsorCCrOmnf0E/view?usp=share_link

PHP version: 8.1.13
WordPress: 6.2.1

[jannathsyeda]

Thank You @nidhidhandhukiya for this patch file. I've tasted your patch (in Twenty Sixteen theme) and now it's working perfectly from my side.

[pooja1210]

Hi,

Test report for - https://core.trac.wordpress.org/attachment/ticket/58355/58355.patch

Environment:
WordPress: v.6.2.2
Theme: Twenty Sixteen
Os: Mac
Browser: Chrome

Expected Result: The font should be visible and rendered in the editor ☑️

Screenshots:
Before: ​https://prnt.sc/qI1f7clq_Dw1
After: ​https://prnt.sc/vmOL_6XqWB3R

Thanks!

[sabernhardt]

The same change needs to be made for header cells (th).

[sabernhardt]

#58747 was marked as a duplicate.

[shailu25]

Patch Updated

[shailu25]

Updated Patch as per suggested in above comment.

[sabernhardt]

removes redundant font size rules for table elements, corrects font-weight for table caption elements, updates figcaption selector, edits text alignment, and adds RTL font

[sabernhardt]

#59912 was marked as a duplicate. Add props for pitamdey, viralsampat, karmatosed, darshitrajyaguru97

[sabernhardt]

As the patch for #59602 addresses more editor issues now, 58355.2.diff​ makes some similar changes for Twenty Sixteen:

• Removes the redundant font size rules for table elements (th, td, caption) as 59912.2.patch proposed. When a user does not select a special font size for a Table or Calendar block, the table cells continue to appear at 16px, inheriting from the body.
• Corrects the font-weight for table caption elements.
• Updates [class^="wp-block-"] figcaption to figure[class*="wp-block-"] > figcaption because the class lists do not begin with a wp-block- class anymore.
• Changes text-align to start so it works the same way in RTL without needing to update the extra .rtl rule to a [dir="rtl"] selector to apply within the iframe. Anyone using the editor should have a browser that supports start (it's not worth changing on the front end). These changes apply to table elements plus figure captions.
• Removes the RTL text-align rulesets because start makes them unnecessary.
• Adds the RTL font selection in editor-style.css for the iframe editor and Classic Editor. The non-framed editor would be more difficult to correct (because it adds .editor-styles-wrapper to the selector), but this font has not worked in any editor context for a long time (if ever). It is easy enough to add it to both editor-style.css and editor-blocks.css (patch incoming).

[sabernhardt]

includes RTL font selection in editor-blocks.css (plus changes from 58355.2.diff)

[hmbashar]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58355/58355.3.diff

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.8
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.8)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Sixteen 3.2
• MU Plugins: None activated
• Plugins:
  • FakerPress 0.6.6
  • Test Reports 1.1.0

Actual Results

The issue hasn't been resolved with the patch. After applying the patch, no changes are made.

Frontend ​https://prnt.sc/AWIM65aWeAbq
Editor ​https://prnt.sc/lsejXqCX4fg3

[sabernhardt]

The patch has more than ten changes to the editor styles, so you should have noticed some difference.

I'm moving the ticket out of the milestone, though. The patch affects several blocks now, and it's very late in the cycle for enough testing to feel confident about it.

[karmatosed]

I can confirm I see the patch resolving the issues so moving this to commit, thank you.

[karmatosed]

In 58635:

Twenty Sixteen: Fixes editor styles for table and calendar blocks and captions.

The table and calendar block font sizes were not as expected on front end within editor. This includes changes for header cells (th), removes redundant font size rules, corrects font-weight and updates figcaption selector along with editing text alignment and adding RTL font selection.

Props nidhidhandhukiya, sabernhardt, sheulyshila, iamfarhan09, bijit027, jannathsyeda, pooja1210, shailu25, hmbashar.
Fixes #58355.