Format is already registered to handle class name error log

[phpbits]

Describe the bug
Custom formats are logging this error :

gutenberg/packages/rich-text/src/register-format-type.js

Line 95 in 01be7ac

`Format "${ formatTypeForBareElement.name }" is already registered to handle bare tag name "${ settings.tagName }".`

even when classNames were defined.

To Reproduce
Steps to reproduce the behavior:

1. Install https://wordpress.org/plugins/coblocks/
2. Load editor with 5.0
3. Uppercase and code formats are working perfectly but those errors were logging

Expected behavior
No error logs

Screenshots

[aduth]

Related Slack conversation (link requires registration):

https://wordpress.slack.com/archives/C02QB2JS7/p1549632859321200

The curious thing to me is that it gets this far under a condition of className === null, despite a class name being defined in the settings of the source format type:

https://github.com/thatplugincompany/coblocks/blob/ded312447bb9b0ab89f45f532d8c1580c87b5579/src/formats/code/index.js#L23

[phpbits]

@aduth Yeah, same here.

[gziolo]

gutenberg/packages/rich-text/src/store/selectors.js

Lines 42 to 46 in 2d5dec7

	export function getFormatTypeForBareElement( state, bareElementTagName ) {
	return find( getFormatTypes( state ), ( { tagName } ) => {
	return bareElementTagName === tagName;
	} );
	}

This might be an issue in the implementation, I see the following happening:

1. Format type with a class name A and tag name B gets registered.
2. Another format type without any class name but the same tag name B gets registered.

/cc @iseulde

[phpbits]

@gziolo Most of us will probably use span since it's easier to control inside divs and paragraphs. getFormatTypeForBareElement should check classNames too.

[phpbits]

@aduth @gziolo I hope it's fine to follow this up :) Thanks!

[pascalknecht]

I have the same issue while registering a custom format for links. Still does not work with the current version of gutenberg. Also the link toolbar button gets lost when registering this custom format. @aduth @gziolo
Example code:

const { registerFormatType } = window.wp.richText;
const { RichTextToolbarButton } = window.wp.editor;

registerFormatType( 'wk/no-icon', {
	edit( { isActive } ) {

		return (
			<RichTextToolbarButton
				icon={ 'editor-link' }
				title={ 'Link ohne Icon' }
				isActive={ isActive }
				/>
		);
	},
  	tagName: 'a',
  	className: 'without-icon',
  	title: 'Link ohne Icon'
} );

[gziolo]

I opened #15072 which tries to address this issue.