Make WordPress Core

Opened 14 months ago

Closed 3 weeks ago

#58355 closed defect (bug) (fixed)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by: karmatosed's profile karmatosed
Milestone: 6.7 Priority: normal
Severity: normal Version: 6.2.1
Component: Bundled Theme Keywords: has-patch needs-testing commit
Focuses: css Cc:

Description

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

Attachments (4)

58355.patch (444 bytes) - added by nidhidhandhukiya 14 months ago.
58355.diff (606 bytes) - added by shailu25 4 months ago.
Patch Updated
58355.2.diff (1.8 KB) - added by sabernhardt 6 weeks ago.
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
58355.3.diff (2.0 KB) - added by sabernhardt 6 weeks ago.
includes RTL font selection in editor-blocks.css (plus changes from 58355.2.diff)

Download all attachments as: .zip

Change History (19)

#1 @sheulyshila
14 months ago

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

Last edited 14 months ago by sheulyshila (previous) (diff)

#2 @iamfarhan09
14 months ago

  • Keywords has-patch added

#3 @bijit027
14 months ago

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

#4 @jannathsyeda
14 months ago

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.

#5 @pooja1210
14 months ago

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!

#6 @sabernhardt
13 months ago

  • Focuses css added
  • Keywords changes-requested added
  • Summary changed from Twenty Sixteen - Table block having issue with font color on editor side. to Twenty Sixteen: Table block does not show selected font size in editor

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

#7 @sabernhardt
13 months ago

#58747 was marked as a duplicate.

@shailu25
4 months ago

Patch Updated

#8 @shailu25
4 months ago

  • Keywords changes-requested removed

Updated Patch as per suggested in above comment.

@sabernhardt
6 weeks ago

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

#9 @sabernhardt
6 weeks ago

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

Last edited 6 weeks ago by sabernhardt (previous) (diff)

#10 @sabernhardt
6 weeks ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.6
  • Summary changed from Twenty Sixteen: Table block does not show selected font size in editor to Twenty Sixteen: fix editor styles for Table and Calendar blocks and captions

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).
Last edited 6 weeks ago by sabernhardt (previous) (diff)

@sabernhardt
6 weeks ago

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

#11 @hmbashar
6 weeks ago

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

#12 @sabernhardt
6 weeks ago

  • Milestone changed from 6.6 to 6.7

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.

#13 @karmatosed
3 weeks ago

  • Owner set to karmatosed
  • Status changed from new to assigned

#14 @karmatosed
3 weeks ago

  • Keywords commit added

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

#15 @karmatosed
3 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.