[wp-trac] [WordPress Trac] #59602: Twenty Fifteen: typography issues in the editor with Table and Calendar blocks and captions (was: Twenty Fifteen: Table block having issue with font-size in editor side.)

[WordPress Trac]

#59602: Twenty Fifteen: typography issues in the editor with Table and Calendar
blocks and captions
-------------------------------------+---------------------
 Reporter:  nidhidhandhukiya         |       Owner:  (none)
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  6.6
Component:  Bundled Theme            |     Version:  6.3.1
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  css
-------------------------------------+---------------------
Changes (by sabernhardt):

 * focuses:   => css


Comment:

 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
 [https://gist.github.com/sabernhardt/81181e21779d96af07a8cf362a2afba1 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 [attachment:"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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59602#comment:11>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform