Theme support for editor font sizes

Whilst it is useful to have the theme support for setting custom editor font sizes for the Gutenberg editor, I find it could be improved considerably with a small modification.

Currently, adding an editor font size requires code in the theme’s function file, such as:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'themeLangDomain' ),
        'shortName' => __( 'S', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    )
);

This will set the small font size to 12px.

In my theme, and I would say many many others, font sizes are set using em units, not absolute px sizes. So, I see this editor font size as restrictive and would like to see the font size units added, something like this:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'themeLangDomain' ),
        'shortName' => __( 'S', 'themeLangDomain' ),
        'size' => 0.75,
        'unit' => 'em', // or 'px', 'pt', 'rem'
        'slug' => 'small'
    )
);

This would provide a far more flexible editor font size setting for theme developers for just a tiny change to your code.

Even further, when an element has its font size changed in Gutenberg, a style=”font-size: …” attribute is added to that element. This is fine for the visual editor appearance, but to output this in the final markup is for me, a backward step considering the modern design philosophy for the web is to separate css styling from html markup. So, in addition to being able to add editor font size as above, it would also be very useful to have something like this:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'themeLangDomain' ),
        'shortName' => __( 'S', 'themeLangDomain' ),
        'class' => 'my-small-font',
        'size' => 12,
        'unit' => 'em', // or 'px', 'pt', 'rem'
        'slug' => 'small'
    )
);

If an editor-font-sizes entry has the ‘class’ entry, the font-size style can still be used for rendering Gutenberg’s visual editor, but add the ‘class’ to the markup instead of the font-size style, i.e. for a paragraph, output <p class=”my-small-font”> rather than <p style=”font-size: 0.75em;”>. Then the developer can add the appropriate style for the class in their style.css file. This is a bit more involved to implement, but I’m sure it wouldn’t be too difficult and in the long run, would be far better for theme developers and produce cleaner markup.

Please consider.