wp kses - Adding data attributes to arbitrary elements in a block theme

I'm trying to add data attributes to elements in a block theme, not blocks themselves. It appears WordPress strips them out by default.

I've tried in the theme template parts and in patterns:

<article data-attribute-etc="value" class="etc"></article>

I'm unsure if I have to, or even can, first affect KSES to allow the specific data attributes I'm interested in and then add them to the theme. Any pointers would be useful, thanks.

I'm trying to add data attributes to elements in a block theme, not blocks themselves. It appears WordPress strips them out by default.

I've tried in the theme template parts and in patterns:

<article data-attribute-etc="value" class="etc"></article>

I'm unsure if I have to, or even can, first affect KSES to allow the specific data attributes I'm interested in and then add them to the theme. Any pointers would be useful, thanks.

• wp-kses
• block-themes

Share Improve this question asked May 21 at 18:53 jshwlkrjshwlkr 54411 gold badge66 silver badges2424 bronze badges 4

• How are you trying to add them? Are you using the UI to edit the block? A PHP filter? JS? Keep in mind that given a set of attributes, the block markup that gets generated should always be the same or block validation will fail, so unless you're converting it to a static HTML block I would expect new tags and attributes to not survive, not because it was stripped out, but because of the totally new block markup that was generated, the block attributes are the source of truth, not the HTML – Tom J Nowell ♦ Commented May 21 at 19:10
• Also wp_kses_post doesn't strip out data attributes, so that isn't the problem, though as I said in my previous comment it's not stripping out, it's overwriting the entire blocks HTML with fresh new HTML, no modifying is happening. '<article data-attribute-etc="value" class="etc"></article>' === wp_kses_post( '<article data-attribute-etc="value" class="etc"></article>' ) – Tom J Nowell ♦ Commented May 21 at 19:37
• I'm working in the block theme directly. – jshwlkr Commented May 22 at 17:10
• I would advise against that as well, the moment you try to modify things in the site editor it all gets stripped out and saved to the database, as well as prior to loading into the editor. That approach only works for non-dynamic blocks in a site that only modifies the theme using version control/direct file modifications, and no other method. Think of the .html files as post content as it's stored in the database, not raw HTML to be edited like any other HTML file – Tom J Nowell ♦ Commented May 22 at 21:05

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

If the element is not in a block then it can be added directly with HTML.

example :

<article data-attribute-etc="value" class="etc">
    <!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
    <div class="wp-block-group alignfull">
        <!-- wp:post-title /-->
    </div>
    <!-- /wp:group -->
</article>

If the element is in a block then use block custom html

example :

<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull">

    <!-- wp:html -->
    <article data-attribute-etc="value" class="etc">
    <!-- /wp:html -->

        <!-- wp:post-title /-->

    <!-- wp:html -->
    </article>
    <!-- /wp:html -->

</div>
<!-- /wp:group -->