Different markup on the frontend and in the editor

To render and element based on the block context (frontend or editor), use the data-display attribute.

Supported values are:

• frontend: Only render this element on the frontend
• editor: Only render this element in the editor
• selected: Only render this element in the editor when the block is selected
• not-selected: Only render this element in the editor when the block is not selected

block.html

block.html

<section>
  <div>Visible everywhere</div>
  <div data-display="frontend">Visible on the frontend only</div>
  <div data-display="editor">Visible in the editor only</div>
  <div data-display="selected">
    Visible in the editor when the block is selected only
  </div>
  <div data-display="not-selected">
    Visible in the editor when the block is not selected only
  </div>
</section>

edit.js

render.php

block.json

index.js