Remove or rename "Default" from Gutenberg typography settings

Question

Remove or rename "Default" from Gutenberg typography settings

INT

2021年5月5日 15:58

I've added my own font sizes to the theme I'm working on, but the value Default persists in the dropdown. With the name scheme needed for this particular site I cannot just reformat Default to fit with my baseline typography. Can Default be removed or renamed somehow?

Code:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' = esc_attr__( 'Book 16px', 'wav' ),
        'size' = 16,
        'slug' = 'book16px'
    ),
    array(
        'name' = esc_attr__( 'Book 20px', 'wav' ),
        'size' = 20,
        'slug' = 'book20px'
    ),
    array(
        'name' = esc_attr__( 'Book 24px', 'wav' ),
        'size' = 24,
        'slug' = 'book24px'
    ),
    array(
        'name' = esc_attr__( 'Book 32px', 'wav' ),
        'size' = 32,
        'slug' = 'book32px'
    ),
    array(
        'name' = esc_attr__( 'Book 36px', 'wav' ),
        'size' = 36,
        'slug' = 'book36px'
    ),
    array(
        'name' = esc_attr__( 'Book 48px', 'wav' ),
        'size' = 48,
        'slug' = 'book48px'
    ),
    array(
        'name' = esc_attr__( 'Book 64px', 'wav' ),
        'size' = 64,
        'slug' = 'book64px'
    ),
    array(
        'name' = esc_attr__( 'Book 96px', 'wav' ),
        'size' = 96,
        'slug' = 'book96px'
    ),
    array(
        'name' = esc_attr__( 'Book 144px', 'wav' ),
        'size' = 144,
        'slug' = 'book144px'
    ),
));

Topic block-editor add-theme-support Wordpress

Category Web

Tom J Nowell · Accepted Answer · 2021年5月5日 13:57

Future readers: I will update this answer based on further research if I find a better way to do it, but this represents the current best effort. If you are reading this, and curious if I found a better solution, look below, if I found it i updated this answer, if I didn't.. then I didn't.

Currently the Font size picker component inserts the default font size internally:

https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/font-size-picker/index.js#L57

function getSelectOptions( optionsArray, disableCustomFontSizes ) {
    if ( disableCustomFontSizes && ! optionsArray.length ) {
        return null;
    }
    optionsArray = [
        { slug: DEFAULT_FONT_SIZE, name: __( 'Default' ) },
        ...optionsArray,
        ...( disableCustomFontSizes
            ? []
            : [ { slug: CUSTOM_FONT_SIZE, name: __( 'Custom' ) } ] ),
    ];

So default is always the first option, and there is no prop or filter to remove it. You could try to intercept it via the localisation API to rename it, but this would also change other controls.

To eliminate, move, or rename this option, you will need to do a hard fork of the FontSizePicker and TypographyPanel components, aka remove them and replace them with your own version. You can do this by disabling typography support in the editors data store via useIsFontSizeDisabled:

https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/hooks/font-size.js#L145-L152

const fontSizes = useEditorFeature( 'typography.fontSizes' );

Turning off that feature then registering your own panel that has your version may work. However you will need to update it as new releases appear, it will need more work for Global styles when they arrive in WP 5.8, and you may need to fork other components to get around them self-disabling or changed functionality due to editor features being turned off at runtime.

Remove or rename "Default" from Gutenberg typography settings

About