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.

[shraddhagore]

Test Report

---

Patch: https://core.trac.wordpress.org/attachment/ticket/59602/59602.3.patch

Environment:
WordPress: 6.8-alpha-59274-src
Theme: Twenty Fifteen, 3.9
Browser: Google Chrome
OS: Windows 11

Media:
Before: ​https://prnt.sc/OGG9eIMviwuY
After: ​https://prnt.sc/YsigIlUwYpPD

Comments:
The patch 3 is working as expected.

[imranhasanraaz]

Test Report

Description

This report validates whether the indicated patch works as expected. No console and editor errors found.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/59602/59602.3.patch

Environment

• WordPress: 6.8-beta1-59933-src
• PHP: 7.4.33
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 7.4.33)
• Browser: Chrome 133.0.0.0
• OS: Windows 10/11
• Theme: Twenty Fifteen 3.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Actual Results

Before Editor :
✅ After Editor :

Before Frontend :
✅ After Frontend :

Trac ticket: https://core.trac.wordpress.org/ticket/59602

---
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.

This PR fixes issue trac#59602 by:

1. Updating figcaption selectors to use figure[class*="wp-block-"] > instead of [class^="wp-block-"] for better specificity
2. Removing font-size from table elements in editor-style.css
3. Adding font-weight: normal to table caption elements

Also, this effectively ports 59602.3.patch by sabernhardt to GitHub to try and get a WP Playground link for testing purposes.

[JeffPaul]

Probably more accurate to say "Also, this attempts to port" as its worth validating the PR is "effectively" the same as patch 3.

[SirLouen]

Patch Test Report

Description

🟠 This report partially validates that the indicated patch works as expected

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

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 135.0.0.0
• OS: Windows 10/11
• Theme: Twenty Fifteen 4.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Reproduction Steps

• Followed sabernhardt steps and reporter steps, both.

Actual Results

1. 🟠 Issue partially resolved with patch, see notes.

Additional Notes

• The differences between editor and final result in 2015 are significant. I've noted that this is a dynamic in most of the old/non-block themes, 10+ year old themes, very difficult to keep them maintainable (and more 1:1 with how blocks are growing in speed).
• This patch partially solves the issues mostly oriented to text scaling, but not all scenarios commented in the report are being totally solved.
• Unless this report is converted into a blessed task to keep sending PR to solve all the differences, I think that this could be enough to call it a day, despite that only partially solves the original report (regarding differences in text sizes within tables).

Supplemental Artifacts

[sabernhardt]

With the patch, the figcaption for Table and other blocks should be in a sans-serif font and gray. (I needed to delete browser cache to see the updated styles in the editor.)

Additional changes:

1. 59602.3.patch removed the 17px font size for th and caption elements, which did not carry over to PR 8504.
2. To fix the alignment, editor-style.css could set all the table elements to text-align: start so that would work in both text directions.

table th,
.mce-item-table th,
table caption {
	border-width: 0 1px 1px 0;
	font-family: "Noto Serif", serif;
	font-weight: 700;
	padding: 7px;
	text-align: start;
	vertical-align: baseline;
}

table td,
.mce-item-table td {
	border-width: 0 1px 1px 0;
	font-family: "Noto Serif", serif;
	padding: 7px;
	text-align: start;
	vertical-align: baseline;
}

table caption {
	font-weight: normal;
}

Or less redundant:

table th,
.mce-item-table th,
table td,
.mce-item-table td,
table caption {
	border-width: 0 1px 1px 0;
	font-family: "Noto Serif", serif;
	padding: 7px;
	text-align: start;
	vertical-align: baseline;
}

table th,
.mce-item-table th {
	font-weight: 700;
}

[SirLouen]

Replying to sabernhardt:

With the patch, the figcaption for Table and other blocks should be in a sans-serif font and gray. (I needed to delete browser cache to see the updated styles in the editor.)

Additional changes:

1. 59602.3.patch removed the 17px font size for th and caption elements, which did not carry over to PR 8504.
2. To fix the alignment, editor-style.css could set all the table elements to text-align: start so that would work in both text directions.

I think that @JeffPaul patch sent is a refresh.
Are you going to send a new version to sort the last issues I mentioned?
Or do you believe we can just move this forward for now?

[JeffPaul]

I think that @JeffPaul patch sent is a refresh.
Are you going to send a new version to sort the last issues I mentioned?
Or do you believe we can just move this forward for now?

I set up that PR so folks could more easily test the patch, if we need updates to the approach then I suggest someone helps push those changes to that branch or opens a new PR.

[darshitrajyaguru97]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/59602/59602.3.patch

Environment:

OS: Windows
PHP: 8.2.28
WordPress: 6.9-alpha-60093-src
Browser: Chrome
Theme: Twenty Fifteen
Plugins: None activated

Actual Results:

✅ Before patch:
Backend: ​https://prnt.sc/5KU6Uj7O0TFz
Frontend: ​https://prnt.sc/ptegt3OSD5_x

✅ After patch:
Backend: ​https://prnt.sc/02KU6fcTeiEu
Frontend: ​https://prnt.sc/-9l94YCubRqA

✅ Patch is working well as per desire solution

[SirLouen]

Replying to darshitrajyaguru97:

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/59602/59602.3.patch

Nothing to test here, and no needs-testing tag.