Inline - Image attribute
Open the live code editor
Edit this code to see the generated Gutenberg block files.
block.html
<div>
<img class="aspect-video object-cover" data-attribute="image" />
</div>
- edit.js
- render.php
- block.json
- index.js
Single image
- block.html
- edit.js
- render.php
- block.json
- index.js
block.html
<div>
<img class="aspect-video object-cover" data-attribute="image" />
</div>
Multiple images
- block.html
- edit.js
- render.php
- block.json
- index.js
block.html
<div class="flex flex-row gap-x-4">
<img class="aspect-video object-cover" data-attribute="image_1" />
<img class="aspect-video object-cover" data-attribute="image_2" />
</div>
Single image with image size
- block.html
- edit.js
- render.php
- block.json
- index.js
block.html
<div>
<img
class="aspect-video object-cover"
data-attribute="image"
data-image-size="medium"
/>
</div>