0

For the Gutenberg editor, is there a setting, a code-behind change or any other way (if necessary, a plugin, but I'd rather avoid that) to always show the "text color" menu item when editing a paragraph, just as the menu items for "bold", "italics" and "insert link" ?

If not, is there a way to configure a keyboard shortcut to bring up the selector?

4
  • are you asking for a plugin recommendation? This is a programming stack, recommending plugins is off topic here. You should ask on the software recommendations stack if you're looking for plugins
    – Tom J Nowell
    Nov 2, 2021 at 10:55
  • @TomJNowell No, I'm NOT looking for a plugin, but for a FEATURE of the Block Editor ! I'd be much happier if this is possible without plugin. I've edited the question accordingly
    – 1NN
    Nov 2, 2021 at 11:50
  • ok, just keep in mind even if it is possible without a feature that would not be acceptable here, recommendations for plugins are offtopic here. Any answer you get here will be code based or require programming to understand. If you're hoping there's a checkbox you can check or a user interface that lets you change this then that would be a user support question for the support forums on .org
    – Tom J Nowell
    Nov 2, 2021 at 15:15
  • I do not see a keyboard shortcut, and the text format in question is named highlight and background
    – Tom J Nowell
    Nov 2, 2021 at 15:26

1 Answer 1

1

No, this is not possible with the current implementation of the format library and FormatToolbar component.

Formats have no order other than the order they are registered in, and this cannot be changed once set, or influenced in core formats.

Notice here the format toolbar component being added to the inline toolbar control slot:

    // Render regular toolbar
    return (
        <BlockControls group="inline">
            <FormatToolbar />
        </BlockControls>
    );

https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/rich-text/format-toolbar-container.js#L32-L37

Inside Format Controls you can see that the text color has special hardcoded handling to force bold/italic/etc to always show:

            { [ 'bold', 'italic', 'link', 'text-color' ].map( ( format ) => (
                <Slot
                    name={ `RichText.ToolbarControls.${ format }` }
                    key={ format }
                />
            ) ) }

https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-editor/src/components/rich-text/format-toolbar/index.js#L23

Each is given a dedicated slot allowing them to show in predefined locations when active. The rest are rendered in a dropdown control. There are no flags or options to move items between these areas.

You could try to add your own button on the RichText.ToolbarControls.text-color slot, but implementing it would require very advanced proficiency in gutenberg internals, would be likely to break in the future, and would result in duplicate buttons if a format was applied.

The only remaining hopes you might have are to unregister the text-color format, then re-register it with modified code so that it always shows:

    const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
    if ( ! hasColorsToChoose && ! isActive ) {
        return null;
    }

https://github.com/WordPress/gutenberg/blob/6452d448c03c5c40e8b29ea322ae20a99a136dca/packages/format-library/src/text-color/index.js#L82

Note that comments indicate this is considered a temporary workaround in the code, expect it to change in a future update. Also note that unregistering and re-registering may cause problems. E.g. unregistering and re-registering a block will fail at the unregistering stage if the block is in use and crash the block editor.

1
  • Thank you. This is interesting and helpful. I can follow your explanations, but (as you mention) implementing something useful - if at all possible - would require me to dig deeper into the editor's way of functioning that I'm willing to do.
    – 1NN
    Nov 2, 2021 at 19:50

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.