Add more advanced formatting documentation

[mahnunchik]

What problem does this address?

It is not clear how to show Popover on RichTextToolbarButton click?

• gutenberg/packages/block-editor/src/components/rich-text/toolbar-button.js

  Line 7 in e3d64f5

  export function RichTextToolbarButton( {

• https://developer.wordpress.org/block-editor/components/popover/

What is your proposed solution?

It would be useful to have sample here: https://developer.wordpress.org/block-editor/tutorials/format-api/2-toolbar-button/

[talldan]

@mahnunchik the RichTextToolbarButton is a shortcut for adding simple formatting, but the edit function when registering a format can be any react component.

The easiest option is to implement a component that uses a Dropdown or DropdownMenu component and make the renderToggle prop return a ToolbarButton.

The Link format is probably the only one in the gutenberg codebase that's a bit more advanced:
https://github.com/WordPress/gutenberg/blob/master/packages/format-library/src/link/index.js

Agree that this is something the docs could expand on, so will leave this ticket open as a documentation enhancement.

[mahnunchik]

There are issues related to RichTextToolbarButton position in the Toolbar:

• How to add a toolbar button in toolbar but not in dropdown menu How to add a toolbar button in toolbar but not in dropdown menu #14881
• Add filter to allow other formats to be placed outside the dropdown menu in RichTextToolbarButton Add filter to allow other formats to be placed outside the dropdown menu in RichTextToolbarButton #22663

[talldan]

Right, I see, the formats that appear on the main toolbar are hard-coded.

And a dropdown in a dropdown may be undesirable.

[ryanwelcher]

This looks to have been addressed with #43581 so I'll close it. If there are further issues, please feel free to open a new issue.