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.
className
coming from? It may help to include the entire function being passed to the edit property.