Rich Text: Update the regex to allow underscores in Format Type class name format

[alexandrebuffet]

What?

This allows underscores in Format Type class name format.

Why?

Currently, Format Types that apply a class containing underscores are not registered correctly and cause the following error in the console: A class name must begin with a letter, followed by any number of hyphens, letters, or numbers.

How?

This PR fixes #56571 by adding _ (underscore) character to the regular expression used when checking the className format in the registerFormatType function.

Testing Instructions

• Declare a new "My Format" Format Type via registerFormatType in a JS file a enqueue it in editor like so:

/**
 * WordPress dependencies
 */
import { __, _x } from "@wordpress/i18n";
import { toggleFormat, registerFormatType } from "@wordpress/rich-text";
import { RichTextToolbarButton } from "@wordpress/block-editor";
import { wordpress } from "@wordpress/icons";

const name = "test-format-type/my-format";
const title = __("My Format");

registerFormatType(name, {
    title: title,
    icon: wordpress,
    tagName: "span",
    className: "my-format-class__with-underscore",
    attributes: {
        class: "class"
    },
    edit({ isActive, value, onChange, onFocus }) {
        function onClick() {
            onChange(toggleFormat(value, { type: name }));
            onFocus();
        }

        return (
            <>
                <RichTextToolbarButton icon={wordpress} title={title} onClick={onClick} isActive={isActive} />
            </>
        );
    }
});

• In admin, open editor adding a page, apply "My Format" format to a text selection in a Paragraph for example
• Open the browser console and check for error
• Save the page and check for the <span class="my-format-class__with-underscore"> in the paragraph markup

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @alexandrebuffet! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ellatrix]

Could we follow the spec here? We should allow any class name that is allowed.

[ellatrix]

Actually this pretty much follows it https://www.w3.org/TR/CSS21/syndata.html#characters