[wp-trac] [WordPress Trac] #61845: Twenty Twenty: correct font-size for Code block and other preformatted elements (was: Twenty Twenty theme: The code block font-size not same on editor & front-end sides.)

[WordPress Trac]

#61845: Twenty Twenty: correct font-size for Code block and other preformatted
elements
-------------------------------------+-----------------------------
 Reporter:  viralsampat              |       Owner:  (none)
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  Future Release
Component:  Bundled Theme            |     Version:  6.6.1
 Severity:  normal                   |  Resolution:
 Keywords:  needs-testing has-patch  |     Focuses:  css
-------------------------------------+-----------------------------
Changes (by sabernhardt):

 * keywords:  needs-testing reporter-feedback has-patch => needs-testing
     has-patch


Comment:

 [https://github.com/WordPress/twentytwenty/pull/259/files#diff-
 b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7aR548 PR
 259] purposely made the font size for `code` elements smaller than the
 body text. Regular `body` text is 1.8rem (or 18px in the editor) on small
 screens and 2.1rem (21px) from 700 pixels and wider.

 Setting a `rem` value for `code` and similar elements would require either
 1.5 or 1.6 on small screens and about 1.8 at the 700px breakpoint. Then
 when someone sets a font size with block settings in the sidebar, that
 selection would need to override the theme's default value.

 I think that keeping the `0.9em` value would be better than creating new
 `rem` and `px` measurements, but it should be consistent.
 - The Code block uses `code` inside a `pre` element, which causes the rule
 to multiply by 0.9 twice on the front end. Setting either `pre code` or
 `.wp-block-code code` to `1em` could make it the value of `0.9em` compared
 to the `body` size. (I prefer `1em` instead of `inherit`, which should
 work just as well.)
 - The elements `kbd`, `pre` and `samp` plus Verse blocks were set to
 `0.75em` in the editor styles at initial commit.
 - [https://github.com/WordPress/twentytwenty/pull/384 PR 384] introduced
 the `14px` and `16px` sizes for blocks in the editor, and
 [https://github.com/WordPress/twentytwenty/pull/890 PR 890] added `14px`
 for preformatted text in a Classic block.
 - [50358] corrected the Verse block `font-size` in the editor without
 changing the other blocks.

 [attachment:"61845.em.diff"]
 - Sets `1em` font size for `code` elements inside a `pre`, both on the
 front and in the editor, to match the `0.9em` size of the `pre` element.
 - Corrects `0.75em` value in editor to `0.9em` for preformatted elements.
 - Retains the pixel-based font size for Classic blocks in the non-framed
 editor and outdated selectors (backward compatibility), but uses the
 closer `16px` at any screen size.
 - Retains the `0.9em` ruleset for the Verse block, though it would be
 unnecessary with the proposed `.editor-styles-wrapper pre` selector and
 the latest WordPress. (If that ruleset is removed in another patch, the
 block would fall back to 16px with older WordPress.)
 - Adds the border and padding in the editor for `pre` elements, and the
 Code block has the same styles on `.wp-block-code` for older WordPress
 versions that used a `div`.

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