Inline - Text attribute

Open the live code editor

Edit this code to see the generated Gutenberg block files.

block.html

<section>
  <h2 class="text-2xl" data-attribute="title">
    Section title
  </h2>
</section>

<section>
  <h2 class="text-2xl" data-attribute="title">
    Section title
  </h2>
</section>

<section>
  <h2 class="text-2xl" data-attribute="title">
    Section title
  </h2>
</section>

edit.js

render.php

block.json

index.js

Single text attribute

block.html

block.html

<section>
  <h2 class="text-2xl" data-attribute="title">
    Section title
  </h2>
</section>

edit.js

render.php

block.json

index.js

Multiple text attributes

block.html

block.html

<section class="flex flex-col gap-y-4">
  <h2 data-attribute="title">Section title</h2>
  <p data-attribute="description">Section descriptoin</p>
</section>

edit.js

render.php

block.json

index.js

Single text attribute with formatted default content

block.html

block.html

<section>
  <h2 class="text-2xl" data-attribute="title">
    <strong>Default title</strong>
  </h2>
</section>

edit.js

render.php

block.json

index.js

Using InnerBlocks instead of inline editable text

block.html

block.html

<section>
  <blocks>
    <block name="core/heading" content="Default title"></block>
    <block name="core/paragraph"></block>
  </blocks>
</section>

edit.js

render.php

block.json

index.js