Gutenberg: Hide the Font Size picker on Paragraph blocks when there is only one size defined

Created on 8 Nov 2018  路  9Comments  路  Source: WordPress/gutenberg

Is your feature request related to a problem? Please describe.
When the editor-font-sizes array has been limited to a single item, paragraphs only have one size. If custom font sizes are also disabled, the font size picker becomes a redundant control. See below screenshot:
image

Describe the solution you'd like
When custom font sizes are disabled, and only a single editor-font-size is set, the font size picker should not be displayed.

For instance, given the following code:

<?php
    add_theme_support( 'editor-font-sizes', array(
        array(
            'name' => __( 'Normal', 'gutenberg-test' ),
            'shortName' => __( 'N', 'gutenberg-test' ),
            'size' => 16,
            'slug' => 'normal'
        ),
    ) );
    add_theme_support('disable-custom-font-sizes');

I would expect to see the following:
image

Describe alternatives you've considered
This could potentially be solved on a case-by-case basis with some custom JS, or by creating a custom block. However, these are not particularly good solutions compared to a simple conditional statement in the original block definition.

Good First Issue Needs Technical Feedback Needs Testing [Block] Paragraph [Feature] UI Components [Type] Enhancement

Most helpful comment

In #5570 color palette can be disabled altogether with this code:

add_theme_support( 'editor-color-palette' );
add_theme_support( 'disable-custom-colors' );

The same should work for font sizes:

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

But this leads to an error:

The editor has encountered an unexpected error.

I also tried with empty array: add_theme_support( 'editor-font-sizes' [ [] ] );

But this gives default font sizes like noted in previous comments. Anything we can do to move this forward?

All 9 comments

Agreed. I just noticed this today. Shouldn't be difficult to fix this.

I'm not sure I would remove it in the case there's only one size defined but what about if you explicitly register an empty array?

add_theme_support( 'editor-font-sizes', array() );

@chrisvanpatten That was actually the first thing I tried, but it fell back to the default settings. I'm not sure if it needs at least one font size for general usage. If not, then that seems like a good solution too.

What about disabling the dropdown instead of removing it?

@swissspidy I'm no UX guru, but a disabled dropdown without much informational value just seems like visual noise to me. Since it's probably just as easy and reliable to simply not render it, that's a preferred route IMO.

The suggestion to not render if there aren't any options to choose sounds like a good decisions-not-options route, however, would it be confusing for someone if they were expecting to see the option there and it's missing? Or would that be fine as an edge case and worth it for the simplicity? What about displaying as plain text if choosing an option isn't available?

Might be a good "Needs Design Feedback" ticket too.

To clarify, the feedback we need:

If no font sizes are registered, and custom sizes are disabled, should we hide the font size picker entirely?

We can decide on the implementation after deciding how to handle it visually!

I think this makes sense if no font sizes registered, showing would be not a good experience.

In #5570 color palette can be disabled altogether with this code:

add_theme_support( 'editor-color-palette' );
add_theme_support( 'disable-custom-colors' );

The same should work for font sizes:

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

But this leads to an error:

The editor has encountered an unexpected error.

I also tried with empty array: add_theme_support( 'editor-font-sizes' [ [] ] );

But this gives default font sizes like noted in previous comments. Anything we can do to move this forward?

Was this page helpful?
0 / 5 - 0 ratings