Twenty Fifteen: typography issues in the editor with Table and Calendar blocks and captions

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Fifteen theme.
2. Choose Table block.
3. Add some text.
4. Change the font-size from the given option in.

You can able to see that the applied font is not affect in editor side while if you check the front end side you can able to see the difference in the font size.

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

[shailu25]

Updated Patch

[shailu25]

Added font-size:inherit; when font size is selected In Editor.

[karmatosed]

@shailu25 Unfortunately, in testing this, I am unable to get the latest patch to work. Can you confirm that your latest patch resolves the issue and provide steps, perhaps?

[shailu25]

Patch Updated.

[shailu25]

@karmatosed Thanks for the feedback. There was an issue with table class in My Previous Patch. So I have Updated Patch with correct class.

Updated Patch will fix font size issue in editor.

[karmatosed]

Thank you @shailu25. Presuming testing goes well we could look to get this into the next release so let's do that with the keywords and milestone reflecting.

[poena]

Unfortunately, there is a bug with the font size control in 6.6-alpha-57778-src, unrelated to this patch.
So I could only test it on WordPress 6.5.3 on top of theme version 3.7.

I tested https://core.trac.wordpress.org/attachment/ticket/59602/59602.diff
I was not able to apply the patch using the grunt:patch command. I needed to download the file and use git apply.

The table header, table footer, and table cell font sizes updates correctly when the font size option is changed.

But there needs to be a decision about the table caption.
Without the patch:

• The table caption in the editor is 13px.
• The table caption on the front is 16px.
• In both the editor and front, the caption is smaller than the table text size.

When you change the table block font size option:

• The table caption in the editor is 13px.
• The table caption on the front is 16px.

With the patch:

• The table caption in the editor is 13px.
• The table caption on the front is 16px.
• In both the editor and front, the caption is smaller than the table text size.

When you change the table block font size option:

• The table caption in the editor is the same size as the rest of the table text.
• The table caption on the front is 16px.

I believe the intention is for the caption to be smaller than the rest of the table text.
It is difficult to know what the user expects, but I think the size of the caption should change in proportion to the table text?
And ideally, all captions in a theme should have the same sizes.

Trac Ticket: 59602

[shailu25]

@poena Thanks for the feedback.

I have Created PR: ​6761 to address an issue with the patch application.

In this PR, I have added table font size inherit, when font size is selected in editor & also I have set the default font size of table captions to 100%. This ensures that, by default, the table caption will have the same font size as the table content (th, td) in both frontend & editor side.

Additionally, if a specific font size is selected in the editor, then the table caption will display in the chosen font size.

[hmbashar]

Test Report

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

Environment

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

Actual Results

1. didn't solve the issue and showing errors in the console check screenshots ​https://i.ibb.co/8XhQK34/fontsize-issue.png

Screenshots

[shailu25]

Steps to Reproduce the issue :-

• Activate Twenty Fifteen theme.
• Choose Table block.
• Add some text.
• Change the font-size from the given option in Editor.
• You will able to see table block's selected font size is not applied in editor side but it's working in Frontend.

Testing Instructions:-

• Now Apply PR ​6761.
• Hard reload both Editor and Frontned side.
• Now again change font size in editor side and check in Editor side and Frontend side.
• Also need to check font size of table caption when custom font size seleted and custom font size is not seleted in Editor (Default font size is Applied). In Both case table text and caption text's font size should same.

[sabernhardt]

#59989 was marked as a duplicate. Add props for pranitdugad, viralsampat and darshitrajyaguru97

[sabernhardt]

removes font size from table elements, updates selectors for figcaption styles, edits font-weight for table caption elements

[sabernhardt]

Twenty Fifteen sets the same font size for table elements as it does for the body text. Removing it from the table elements would fix the custom font size selection for both the Table and Calendar blocks. The default size would remain unchanged.

Twenty Fifteen also has specific font sizes for the figcaption element from 12 to 16 pixels (depending on screen size), but the [class^="wp-block-"] figcaption selector has not worked in the editor for several WordPress versions. Fixing that increases the scope of this ticket, but I updated the selectors to use figure[class*="wp-block-"] > figcaption (and .editor-styles-wrapper instead of the obsolete .editor-block-list__block). At least WordPress 5.9 needed the extra figure in the selector to override styles at the same specificity later in the theme.scss stylesheet.

For classic tables with a caption element (not figcaption), the caption is normal font-weight on the front, and the editor can reflect that too.

Testing

1. Activate Twenty Fifteen as your theme.
2. Add or edit a post.
3. Add a ​set of Table and Calendar blocks, with various font sizes selected, plus a Classic block with other tables. Note that you may need to paste the sample into a text editor first and copy/paste from there into an empty Paragraph block.
4. Add other blocks with figure captions: Image, Gallery (with captions for the gallery and individual images), Audio, Video, and any of the Embed blocks.
5. Save the post and preview it (open in a new tab).
6. Compare the font sizes within the editor to how they appear on the front end. Also compare styling for each of the figure captions and font-weight for the classic table caption elements.
7. Apply 59602.3.patch​ and refresh both browser tabs (editor and front-end).
8. Again, compare the font sizes, etc. in the editor to how they appear on the front.

[sabernhardt]

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

[kafleg]

Once I try to change the font size, I see this error.

I used WordPress playground for testing.