Can I add a custom data-attribute tag to a gutenberg element

Question

I have a richtext element in a block, and want to create my own 'my-data-attribute' and have it included in the output, but I can't seem to find anyway to do this. I already have my attribute working with SelectControl and all that, I just can't seem to get the data-attr to work.

I have found how to add it to the block wrapper, but I need to add it to elements, so I can control some animation scroll triggers.

pretty much, something like this;

<RichText
    tagName="h2"
    value={ heading }
    className="bm2-card__title"
    my-data-attribute={ [animationControl]:animationControl}
    onChange={ text => setAttributes( { heading: text } ) }
    style={ {
        color: headingColor,
        textAlign: contentAlign,
    } }
    placeholder={ __( 'Title for This Block', i18n ) }
    keepPlaceholderOnFocus
/>

score 0 · Answer 1 · answered Oct 09 '19 at 18:23

ok, I was able to solve it by wrapping it in a div like this;

<div
    className={ animationControl ? 'aniview' : undefined }
    data-av-animation={ animationControl }
>
<RichText
    tagName="h2"
    value={ heading }
    className="bm2-card__title"
    onChange={ text => setAttributes( { heading: text } ) }
    style={ {
        color: headingColor,
        textAlign: contentAlign,
    } }
    placeholder={ __( 'Title for This Block', i18n ) }
    keepPlaceholderOnFocus
/>
</div>

Can I add a custom data-attribute tag to a gutenberg element

1 Answers1