Custom rich text format type should be highlighted when active, but it isn't

[davilera]

Description

Custom format types from the Rich Text package are not working properly. When a format is applied, it should be highlighted in the toolbar menu (and it sometimes isn't). Moreover, when it's not highlighted (and it should), it's not possible to remove the format (and it should).

Step-by-step reproduction instructions

Register the following format type in the browser's JS console:

wp.richText.registerFormatType( 'test/bold', {
  title: 'Bold Test',
  tagName: 'b',
  className: null,
  edit: ( { isActive, value, onChange } ) => wp.element.createElement(
    wp.blockEditor.RichTextToolbarButton,
    {
       icon: 'editor-bold',
       isActive,
       title: "Aaa Bold",
       onClick: () => onChange( wp.richText.toggleFormat( value, { type: 'test/bold' } ) ),
    },
    null
  ),
});

It should now be available under the "More block tools" menu:

If you apply this new format, the "More block tools" menu should be highlighted when the cursor is on a piece of text that uses said format. This works as expected at first:

Issue 1

Unfortunately, it doesn't after saving the post, refreshing the editor, and repeating the process:

Apparently, entering and exiting the "Code Editor" seems to fix the issue... until, of course, Gutenberg is reloaded.

Issue 2

I've also noticed that built-in format types are properly highlighted in the UI, both in the "More block tools" and the format type itself in the dropdown menu (in this case, the "Superscript" format):

but our custom format type isn't. When it works, it does so partially (as in, the "More block tools" is indeed highlighted, but the menu item itself isn't):

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 5.9.3
• With and without Gutenberg 12.9.0
• No other plugins
• Twenty Twenty-One 1.5
• Firefox and Chrome on both Windows and Linux

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[flmuel]

same here...

[t-hamano]

The icon prop of RichTextToolbarButton component can accept svg elements, dashicon names, etc.
For example, in the core format type, the button includes the icon as SVG since the icon is specified from the @wordpress/icons package:

<button type="button" aria-checked="true" role="menuitemcheckbox" class="components-button components-dropdown-menu__menu-item is-active has-text has-icon">
  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> 
    <path d="..."></path>
  </svg>
  Inline code
</button>

The style as a drop-down icon and the active format style are then applied, as shown below.

On the other hand, if a dash icon name is specified, the button includes span tag with the class name as shown below:

<button type="button" role="menuitem" class="components-button components-dropdown-menu__menu-item is-active has-text has-icon">
  <span class="dashicon dashicons dashicons-editor-bold"></span>
  Aaa Bold
</button>

There is no style applied to this span tag, so the active state is not shown and there is a text misalignment as reported in #29376:

We can solve this problem by using SVG icons instead of Dashicon, but fundamentally, I think we should apply the same style to dashicon.