How to add button to Gutenberg Editing Toolbar in Wordress

Question

I'm looking any solutions how to add custom button to top toolbar in Gutenberg editor. I want to add button like "Design Library" in Kadence Blocks plugin. As far as I know there is no official way for that, but Kadence did it somehow.

Any advice?

Answer 1

Here’s how Kadence does it. I'd avoid hacks like that if possible but I'm not sure what your requirements are.

Some alternative ideas (not mutually exclusive):

• Use plugin sidebar
• Add a command to do whatever the button would
• Add a keyboard shortcut to do whatever the button would

On that third item I don't know of a good documentation example of how to do it but here’s the relevant parts in core of how it's done for the Keyboard Shortcut Help modal. It's a two-step of registerShortcut/useShortcut.