HTML typography selector broken in the editor

[tomusborne]

WordPress replaces all body selector instances with .editor-styles-wrapper in the block editor.

They also replace all html selector instances with the same .editor-styles-wrapper selector, which can cause issues.

For example, this CSS:

html {
     font-size: 62.5%;
}

body {
     font-size: 2rem;
}

Becomes this:

.editor-styles-wrapper {
     font-size: 62.5%;
}

.editor-styles-wrapper {
     font-size: 2rem;
}

We need to implement a system that inserts the html CSS without WP changing it.

For now, users need to manually add their CSS to the editor:

add_action( 'enqueue_block_editor_assets', function() {
    $css = 'html {font-size: 62.5%;}';

    wp_add_inline_style( 'wp-edit-blocks', $css );
} );

For the above temporary solution, you must have the HTML typography entry added before the Body entry in the Typography manager.

[thisbit]

It had this selector for a long time. I have my typography in a css file (because i use clamps()) and i have both declarations, body for front and editor wrapper for the editor and updates are not breaking it.

[tomusborne]

Still an issue, but it seems like one WordPress should fix. html shouldn't be converted to .editor-styles-wrapper, as that should be for the body element.

After playing with a couple of hacky workarounds, I don't think this is something we can fix on our end right now.

[diggeddy]

It seems that WP does not replace the :root selector. As the themes global color styles remain intact ie.

:root {
    --contrast: #222222;
    --contrast-2: #575760;
    --contrast-3: #b2b2be;
    --base: #f0f0f0;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #1e73be;
}

so for the html font size we could write it to :root also

:root {
    font-size: 10px;
}