[wp-trac] [WordPress Trac] #52763: Relative CSS units used in front-end, absolute in block editor

[WordPress Trac]

#52763: Relative CSS units used in front-end, absolute in block editor
-----------------------------+------------------------------
 Reporter:  andrejcremoznik  |       Owner:  (none)
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Editor           |     Version:  5.6.2
 Severity:  normal           |  Resolution:
 Keywords:                   |     Focuses:  css
-----------------------------+------------------------------

Comment (by andrejcremoznik):

 I am developing themes and of course I'm providing an editor stylesheet. I
 had cascade/specificity issues trying to fix the problem that shouldn't
 even exist. This is a WordPress core issue because it ships unmatching CSS
 for blocks in the editor and on the front-end. Ideally, WP wouldn't
 hardcode any values in stylesheets. You could output some defaults in
 sensibly named CSS variables which could be adjusted by devs via a filter
 hook. All font-size and color settings for core blocks could then go there
 and devs would be able to change them or add their own.

 Obviously I'm missing insight here as I haven't worked on core block
 editor, but if you use a class like `has-large-font-size` then its CSS
 value obviously should not ever be hardcoded anywhere. Either don't use a
 class and set the font-size in a style attribute or give developers the
 control over the class's value.

 The mentioned Github issue isn't related to this bug.

 Here's some simple instructions, how you can test this issue:

 1. on any theme find the element that wraps the output of `the_content()`
 and make sure the style `font-size: 16px` is set on that element.

 2. Create a new post with a Cover block, give it a background and type
 some text. The text by default will have the `has-large-font-size` class.
 Publish the post.

 3. Visually compare the Cover block on the front-end with the Cover block
 in the editor. They will be more or less identical.

 4. Now change the font-size on the element from step 1 and repeat step 4.
 The text will differ.

 You don't need any of the official themes for this. All you need is a
 wrapper for `the_content()` and block editor support enabled. No
 stylesheets are needed because it's all core WP.

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