[wp-trac] [WordPress Trac] #61845: Twenty Twenty theme: The code block font-size not same on editor & front-end sides.

[WordPress Trac]

#61845: Twenty Twenty theme: The code block font-size not same on editor & front-
end sides.
---------------------------------------------+-----------------------------
 Reporter:  viralsampat                      |       Owner:  (none)
     Type:  defect (bug)                     |      Status:  new
 Priority:  normal                           |   Milestone:  Awaiting
                                             |  Review
Component:  Bundled Theme                    |     Version:  6.6.1
 Severity:  normal                           |  Resolution:
 Keywords:  needs-testing reporter-feedback  |     Focuses:  css
---------------------------------------------+-----------------------------

Comment (by 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><?php echo ('Hello World'); ?></code>
 </pre>
 }}}

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

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