Gutenberg: Theme support for editor-font-sizes doesn't work

[maddisondesigns]

Describe the bug
I'm trying to set the theme font sizes as per the documentation but it's not working.

I've added the following code into my functions.php file. The function containing this code also has all my other theme support calls and is hooked to after_setup_theme.

// Add support for custom font sizes in the Block Editor (Gutenberg)
add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'ephemeris' ),
        'shortName' => __( 'S', 'ephemeris' ),
        'size' => 13,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'regular', 'ephemeris' ),
        'shortName' => __( 'M', 'ephemeris' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => __( 'large', 'ephemeris' ),
        'shortName' => __( 'L', 'ephemeris' ),
        'size' => 24,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'extralarge', 'ephemeris' ),
        'shortName' => __( 'XL', 'ephemeris' ),
        'size' => 36,
        'slug' => 'extralarge'
    )
) );

When selecting the font size on a paragraph, it styles the text in the editor with the default font sizes, either 14, 16, 36, or 48px, instead of my custom sizes.

If I change the shortName value, which I presume is the text on the button in the editor, that's also ignored.

On the rendered page, the classes that are added to the paragraphs are using names from the default classes (small, medium, large, larger), instead of my own class names (small, medium, large, extralarge)

The site is a local site so there's no caching and browser cache was also cleared, just to be sure.

See also #8284 - Paragraph Blocks use incorrect classes for text sizes

_macOS Sierra 10.12.6
Firefox Quantum 61.0.1 (64-bit)
Gutenberg 3.3.0_

[chrisvanpatten]

@maddisondesigns This won't be in Gutenberg until 3.4; the Gutenberg handbook docs reflect what's in master, not the last release. See #6514 for more discussion.

[bgardner]

@chrisvanpatten Thanks for letting us know that it won't be in Gutenberg until 3.4, because I'm working on the Genesis Sample Theme and noticed the same thing @maddisondesigns did. (Thank God for Google, and for quick responses from the team.)

[chrisvanpatten]

@bgardner No problem! It’s a little confusing because the docs are built when master changes. Definitely leave a comment over at #6514; it got stalled but I think it’s worth revisiting having docs built with releases and the extra comments help.

[maddisondesigns]

@chrisvanpatten Thanks for letting me know. This is the first time that I've heard that.

A couple of recommendations:

1. Can you please put a big notice at the top of the Introduction page advising people of this. Something like "PLEASE NOTE: This Gutenberg handbook documentation reflects what's in master, not the current plugin release."
2. When a new section is added, such as "Block Font Sizes", also add what version it's available from. There is nothing in the docs at the moment that gives any indication as to what is available now or what is available in the next or following releases.

[chrisvanpatten]

@maddisondesigns I don't really have the power to do that (just a lowly third-party contributor), but I agree. I'd strongly suggest commenting on #6514 too.

[maddisondesigns]

@chrisvanpatten No probs. I've just left a comment on #6514. Thanks for your help with this.

[josephdickson]

I just updated to Gutenberg 3.4 and it appears to be working on my end. Thanks @maddisondesigns for submitting the bug report. I ran into the same problem last week and thought I had done something wrong on my end.

[designsimply]

Closing in favor of #6514.

[swinggraphics]

Using Gutenberg 4.0 here. editor-font-sizes and disable-custom-font-sizes are not working.

Update: Finally got editor-font-sizes to work after refreshing a dozen times. This is on localhost, mind you, so the stupid react framework is to blame here. disable-custom-font-sizes simply does not work at all, no matter how long I wait.

[designsimply]

@swinggraphics thanks for the note! I noticed this came up again 7 days ago at https://github.com/WordPress/gutenberg/issues/10940#issuecomment-438181299 and I'm wondering whether you've upgraded to Gutenberg 4.4 and if you're still having trouble with editor-font-sizes and disable-custom-font-sizes in that version?

[swinggraphics]

@designsimply I have updated to 4.4. disable-custom-font-sizes still does not work. editor-font-sizes is okay.

[apmeyer]

Adding another note that disable-custom-font-sizes does not work in 4.5.1.

Edit: Actually, maybe it is working. But it's confusing. I noticed the description:

When set, users will be restricted to the default sizes provided in Gutenberg or the sizes provided via the editor-font-sizes theme support setting.

documentation

Many theme authors (working on custom themes for clients) are going to want to just be able to straight up disable/hide this menu. My expectation is that disable-custom-font-sizes would do that.

[designsimply]

Is this problem still happening for you in WordPress 5.1?

[pasizdobrekuce]

@designsimply not only it was happening in 5.1, it's happening in 5.2.4.
add_theme_support( 'disable-custom-font-sizes' ); does absolutely nothing.