Gutenberg baseline font size?

[mrleemon]

I'm trying to add Gutenberg support to one of my themes. My theme sets a font size percentage on the root:

html {
   font-size: 62.5%;
}

And this allows me to work with rem units in an understandable way since 1rem is essentially equal to 10px. But this is not working to set font sizes in Gutenberg blocks because I don't know which baseline font size the Gutenberg editor is using.

Any ideas?

[designsimply]

Apologies if this is a silly question, where exactly are you adding that CSS snippet?

[mrleemon]

In my theme. For example, Twenty Fifteen does this, too:
https://s2.wp.com/_static/??/wp-content/themes/pub/twentyfifteen/style.css

[ghost]

I have the same issue. My custom theme sets the following:

:root {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

These effectively cancel each other out, but allow me to easily calculate rem values from px, whilst respecting a user's browser font-size choice if it's set (less common these days with zoom, but if the user sets it, it should be respected)

I'm using the following to enqueue editor styles (which include the above rules):

add_theme_support('editor-styles');
add_editor_style( '/dist/css/style-editor.min.css' );

This results in all editor text being too large - so I assume the editor is ignoring the :root rule.

Is there a style rule I can apply to make this work? I've tried various, including .editor-styles-wrapper to no avail.

[ghost]

Temporarily hacked around this by adding the following to my editor.js:

document.getElementsByTagName("html")[0].style.fontSize = "62.5%";

Feels like this shouldn't be necessary though...

[designsimply]

This results in all editor text being too large - so I assume the editor is ignoring the :root rule.

Is there a style rule I can apply to make this work? I've tried various, including .editor-styles-wrapper to no avail.

The reason .editor-styles-wrapper is injected was done to try to make it easier for theme developers to target editor styles without needing to know complex or lengthy selectors and also to prevent specificity problems with the styles added affecting parts of the editor UI they should not. Wanting to target body classes further up in the DOM but not being able to get to them because of the .editor-styles-wrapper was also raised at #12874 (comment) and I wrote up an explanation and tried to come up with a workaround at #12874 (comment).

[designsimply]

In my theme. For example, Twenty Fifteen does this, too:
https://s2.wp.com/_static/??/wp-content/themes/pub/twentyfifteen/style.css

In terms of setting a font size in the default themes, I got curious as to what Twenty Nineteen does and I found this:

/* Typography */
html {
  font-size: 22px;
}

Source: https://s2.wp.com/_static/??/wp-content/themes/pub/twentynineteen/style.css

But that may not be the whole story because they also have added theme support for editor-font-sizes to reset the defaults:

https://github.com/WordPress/twentynineteen/blob/e74d348ab9cfc6ad46bdf33f691611930c39e944/functions.php#L111

I am not 100% sure it's what you need, so you might need to experiment a little. Have you tried adjusting the default set of font sizes using theme support for editor-font-sizes by chance? It's documented at https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#block-font-sizes but also says, "Themes are responsible for creating the classes that apply the correct font size styles."

[m-e-h]

I don't know of anything that can be done on the WP side to help out with this.

WP doesn't assign a font-size on the html element in the admin, so any value that you give it should work for your rem units.

The issue you all may be having is that your using the editor-styles feature by adding theme support. What that does is take any html or body CSS and reassign it to .editor-styles-wrapper. That's not going to help with rems since they look to the :root/html. (ems would work with the .editor-styles-wrapper though)

My advice: You should still take advantage of the editor-styles feature for most styles but anything you want to get into the admin directly, like for an html or :root element, you should enqueue separately with enqueue_block_editor_assets. https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/
:root selectors are actually broken by the editor-styles and don't even get reassigned

My long-term advice: Stop doing this. Retrain your brain for relative sizing units. 😃

[mrleemon]

I decided to scrap the html { font-size: 62.5%; } rule altogether and recalculate all the rem sizes using 16px (the browser default root size) as the base font size and now the sizes at the frontend and the backend are the same.

http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/

[designsimply]

Closing this issue in light of @m-e-h's advice to use enqueue_block_editor_assets for styling anything at the html or :root element level. Thank you @m-e-h!

[ghost]

Thanks @m-e-h, @designsimply - adding root styles via enqueue_block_editor_assets works fine.

@m-e-h thanks for your advice re. using a base 10 for rem units 😃 I'm interested in what the rational is.... I've used the normal base 16 for years, and just switched to base 10 and love it! I'm working solo on custom theme development, so generally speaking it's only me working on the code.

I know I can use a sass mixin to convert px > rem, but it's just slightly more typing/slightly harder to scan - particularly when using rem for margin, padding, borders etc as well as typography.

[RichardLindhout]

I've just created a node cli to fix this. It does replace all rem values in the editor-style.css so you can still keep using rem's in your theme stylesheet.

https://github.com/web-ridge/rem-to-px