Gutenberg - editor-font-sizes in functions not working

Question

I'm adding theme support for editor-font-sizes in my functions.php but it doesn’t take affect. Any ideas why?

I’ve already added a custom color palette without issue, but having issues with this:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'extra small', 'platetheme' ),
        'shortName' => __( 'XS', 'platetheme' ),
        'size' => 11,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'regular', 'platetheme' ),
        'shortName' => __( 'M', 'platetheme' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => __( 'large', 'platetheme' ),
        'shortName' => __( 'L', 'platetheme' ),
        'size' => 36,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'larger', 'platetheme' ),
        'shortName' => __( 'XL', 'platetheme' ),
        'size' => 50,
        'slug' => 'larger'
    )
) );

I’ve tried to disable custom font sizes to see if that was a requirement (that code works just doesn’t help with the above)

add_theme_support('disable-custom-font-sizes');

Any idea why it isn’t working on the backend editor?

Answer 1

I believe to get this working I wasn't calling this at the correct time, and I wrapped it in a function after_setup_theme, like so:

add_action( 'after_setup_theme', 'ttp_custom_font_sizes' );

function ttp_custom_font_sizes() {

  // removes custom font sizes
  add_theme_support('disable-custom-font-sizes');

  // add my own custom sizes 
  add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'Small'),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'Normal'),
        'size' => 16,
        'slug' => 'normal'
    ),
    array(
        'name' => __( 'Large'),
        'size' => 36,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'Huge'),
        'size' => 50,
        'slug' => 'huge'
    )
    ) );
}