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