className not populating in custom block

Question

I'm creating a custom block plugin and I've had a bit of trouble getting the class name to appear on a tag output from the save function.

My edit function uses return() and passes in this:

<>
    <div className={className}>
        <RichText
            tagName="a"
            //
            placeholder={__("Add text…", plugin.slug)}
            value={text}
            //
            formattingControls={["bold", "italic", "strikethrough"]}
            //
            onChange={this.onChangeContent}
            //
        />
    </div>
</>

And in my save function I also use return() and have tried passing in a number of variations described below.

Passing RichText.Content directly:

<RichText.Content
    tagName="a"
    value={text}
    className={className}
/>

With or without the className line, it saves <a class="…">Demo Text</a> to the database. This is expect, however, I need to wrap the anchor tag in something else.

Using a wrapper shortcut:

<>
    <RichText.Content
        tagName="a"
        value={text}
        className={className}
    />
</>

Above, I have wrapped the a tag in <> and </> but with or without the className line, the class name isn't populated in the save function. <a>Demo text</a> is always saved to the database.

Using a div:

<div>
    <RichText.Content
        tagName="a"
        value={text}
        className={className}
    />
</div>

Above, I have wrapped the a tag in <div> and </div> but with or without the className line in the RichText tag, the class name is only ever populated in the div tag when saving tot the database. <div class="…"><a>Demo Text</a></div> is always saved to the database.

The same thing happens when I switch from an a tag to a p tag.

• Is there a way to get the className to populate tags wrapped in other tags?
• Or does anyone have a link to more information about how className works?

Thankyou! Dale.

Answer 1

I was trying to figure this out all afternoon as well and figured out as well that the className is passed along by default in the save function for the root of certain elements.

e.g. in the following code example where className is warning

return (
<div className="other-class-name" value={ props.attributes.content } />;

will return an element on the front end of

<div class="wp-block-block-name is-warning other-class-name">

https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#supports-optional has some more information