Twenty Twenty: correct font-size for Code block and other preformatted elements

[viralsampat]

Hello Team,

I have checked the "Code" block and found that its font-size is not similar on editor & front-end sides.

I think that it should be same on both the sides( Editor & Front-end )

Here, I have attached its screenshots for reference.

Thanks,

[viralsampat]

Back-end

[viralsampat]

Front-end

[karmatosed]

Hi @viralsampat I see something different with the latest trunk of Twenty Twenty are you able to test using that please?

[mi5t4n]

@karmatosed

I tested with the latest trunk, and it seems the issue is with the units that is used for font-size: 0.9em

CSS style which is loaded on the block editor [Admin].

File: src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css
328: .editor-styles-wrapper kbd,
329: .editor-styles-wrapper pre,
330: .editor-styles-wrapper samp {
331: 	border-radius: 0;
332: 	font-size: 0.75em;
333: 	padding: 4px 6px;
334: }
335:

CSS styles which are loaded on the frontend [Public].

File: src/wp-content/themes/twentytwenty/style.css
575: code,
576: kbd,
577: pre,
578: samp {
579: 	font-family: monospace;
580: 	font-size: 0.9em;
581: 	padding: 0.4rem 0.6rem;
582: }

And at the backend and frontend the <code> is wrapped by <pre> tag. So, the acutal font of the code tag depends upon the <pre> tag whose font-size will depend upon it's parent, which is different in backend and frontend.

<pre class="wp-block-code">
   <code>&lt;?php echo ('Hello World'); ?&gt;</code>
</pre>

This can be fixed, if we use rem unit instead of em.

I've changed the base font size on the frontend because imho em font-size isn't preferred when the font size is defined like it is here. Hence it wasn't easy to convert this to the editor styles; this way both can font sizes can be the same.

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

[brobken]

In my opinion, it shouldn't be defined on the frontend CSS with 0.9em, but rather a definition in 1.8rem.
Resulting to being rendered from 17.01 px to 18px now.

This makes it easier to have it set also in the backend editor at this size. I don't know if that's a problem? In the meantime I've submitted a possible solution.

[sabernhardt]

Uses 0.9em for preformatted elements with latest WordPress, assigns 16px for older editor, adds border

[sabernhardt]

​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.
• ​PR 384 introduced the 14px and 16px sizes for blocks in the editor, and ​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.

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.

[karmatosed]

I am going to assign this to myself to test as agree it might be better to do this approach.

[karmatosed]

In 58960:

Twenty Twenty: Correct font-size for Code block and other preformatted elements.

The code block font-size was not the same in the editor and front. This sets it to 1em and corrects the value for preformatted elements along with adding border and padding in the editor for pre elements.

Props viralsampat, mi5t4n, brobken, sabernhardt.
Fixes #61845.