Using inline attributes

HTML To Gutenberg allows defining inline editable fields using the special data-attribute attribute directly in your HTML template.

By default, it uses the RichText component for text-based elements. For images (<img>), it uses Media from @wordpress/block-editor along with MediaUpload from @10up/block-components, enabling image selection and editing.

Open the live code editor

Edit this code to see the generated Gutenberg block files.

block.html

<section>
  <h2 data-attribute="title">Section Title</h2>
  <p data-attribute="description">Section description</p>

  <img data-attribute="image" />

</section>

<section>
  <h2 data-attribute="title">Section Title</h2>
  <p data-attribute="description">Section description</p>

  <img data-attribute="image" />

</section>

<section>
  <h2 data-attribute="title">Section Title</h2>
  <p data-attribute="description">Section description</p>

  <img data-attribute="image" />

</section>

edit.js

render.php

block.json

index.js

Making text editable

To make a text element editable in Gutenberg, add data-attribute="name" to it — where name is the name of the attribute that will be saved by Gutenberg.

block.html

block.html

<section>
  <h2 data-attribute="title">Section Title</h2>
  <p data-attribute="description">Section description</p>
</section>

edit.js

render.php

block.json

index.js

This will define a title and description attribute on your block.

If the element contains content, that content will be used as the default value for the attribute in block.json.

For example:

<p data-attribute="content"><strong>Default content</strong></p>

block.json

{
  "attributes": {
    "content": {
      "type": "string",
      "default": "<strong>Default content</strong>"
    }
  }
}

On the editor side, a placeholder is automatically added to the RichText field based on the attribute name in sentence case (sectionTitle becomes Section title).

Favor using InnerBlocks when possible

While inline attributes are handy for isolated text fields, they are limited to the tag you define. You can't insert additional elements inside or after them.

Prefer <blocks> (InnerBlocks) when you want full control over headings, paragraphs, buttons, or flexible layout content.

It can be tempting to use this kind of inline editable fields for every text content inside your block.

Making images editable

You can make images editable using the same principle: add data-attribute="name" to an <img> element — where name is the attribute that will store the image ID.

block.html

block.html

<section>
  <img data-attribute="image" />
</section>

edit.js

render.php

block.json

index.js

The src and alt attributes will be removed automatically and replaced with correct values once an image is selected — no need to set them manually.

Setting image size

To control which image size is used in the editor and frontend, use data-image-size:

block.html

block.html

<section>
  <img data-attribute="image" data-image-size="medium" />
</section>

edit.js

render.php

block.json

index.js

• In the editor, the specified size is displayed.
• On the frontend, it's used with srcset for responsive behavior.

Favor using InnerBlocks when possible

As with text fields, editable images with data-attribute are limited in flexibility. For a richer, more native experience, use <blocks> (InnerBlocks) with the core/image block.

Secondary note: images defined this way can only be selected or changed by clicking them in the editor. If they’re hidden with CSS, they won’t be editable.