Allow custom HTML attributes to gutenberg elements

  • Rajat Das

    (@rajatdas)


    1 year, 4 months ago

    I can’t understand why wordpress gutenberg editor is not allowing me to add custom html attributes, Although It works just fine on the frontent but in the editor it throws an error saying

    "This block contains unexpected or invalid content."

    I have column block and I want to add some microdata to the div eg: itemscope=”” itemprop=”mainEntity” itemtype=”https://schema.org/Question”.

    <!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2>Question</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<!-- wp:paragraph -->
<p>Answer</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

    Please help to get rid of the attempt recovery message from the editor.

    • This topic was modified 1 year, 4 months ago by Rajat Das.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    1 year, 4 months ago

    The root cause may be the kses filtering. HTML tags are only allowed certain attributes. The block editor has its own validation scheme of which kses is only a part. Altering kses to allow your desired attributes may not totally resolve the issue, but you’d need to address kses filtering anyway. I’m not familiar with all of what the block editor does, kses is all I know of your issue.

    Use the ‘wp_kses_allowed_html’ filter hook to alter the passed array of allowed tags and attributes. Each array element is an HTML tag whose value is an array of allowed attributes. Add your attributes to the [‘div’] element’s array.

    5AMsan

    (@5amsan)

    1 year, 2 months ago

    I believe, since using Block editor, wp_kses_allowed_html filter will not do the trick, but hooking in block editor JS element would be a better path.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Allow custom HTML attributes to gutenberg elements’ is closed to new replies.