0

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?

enter image description here

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'
    ),
));
4
  • 1
    if a user hasn't selected a custom font size then it is the default, if you remove that option then what gets shown when you select text before customising it's size? The dropdown is meant to show the current state, so it's likely that the removal of 'default' would be considered a bug by the maintainers of the block editor. It's likely you will need to remove this control and add a custom version in its place to achieve what you want. However, there's a very high chance the problem you're trying to solve has a different solution if you could shared the original problem I could help
    – Tom J Nowell
    May 5, 2021 at 13:34
  • Honestly, what's bugging me is that I could easily remove "Book 16px" and have "Default" take it's place. But doing that messes up how the other font sizes are named and then I start going into "naming things is hard" territory which is a pain as well. Ideally I'd like the editor to pick the first entry from the array and use that as "Default".
    – INT
    May 5, 2021 at 13:39
  • so technically, your original problem could also be solved by renaming default to Book 16px?
    – Tom J Nowell
    May 5, 2021 at 13:42
  • That is correct!
    – INT
    May 5, 2021 at 15:55

1 Answer 1

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.