Repository navigation
Images with/without link are visually indistinguishable and have the same code #45154
Description
Dear developers,
it's currently impossible to see if a image is linked or not without clicking on it. It's also impossible to create editor-styles CSS to address this problem, because the editor code is exactly the same for image with or without link.
This was tested in Gutenberg v. 14.3.1
Example code:
<figure tabindex="0" class="block-editor-block-list__block wp-block size-large wp-block-image" id="block-9941f019-bf15-4e59-a74c-b24c5869fa67" role="document" aria-label="Block: Slika" data-block="9941f019-bf15-4e59-a74c-b24c5869fa67" data-type="core/image" data-title="Slika">
<div style="position: relative; user-select: auto; width: auto; height: auto; max-width: 1450px; max-height: 966.667px; min-width: 30px; min-height: 20px; box-sizing: border-box; flex-shrink: 0;" class="components-resizable-box__container"><img src="http://example.com/wp-content/uploads/2022/09/cat-1200x800.jpg" alt="This image has an empty alt attribute; its file name is cat-1200x800.jpg">
<div>
<div class="components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-right" style="position: absolute; user-select: none; cursor: col-resize;"></div>
<div class="components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-bottom" style="position: absolute; user-select: none; cursor: row-resize;"></div>
</div>
</div>
<figcaption role="textbox" aria-multiline="true" aria-label="Image caption text" class="block-editor-rich-text__editable wp-element-caption rich-text" style="white-space: pre-wrap; min-width: 1px;" contenteditable="true">Link</figcaption>
<div class="components-drop-zone" data-is-drop-zone="true"></div>
</figure><figure tabindex="0" class="block-editor-block-list__block wp-block size-large wp-block-image" id="block-59ae806c-1569-4f3b-989f-ced271e3f71b" role="document" aria-label="Block: Slika" data-block="59ae806c-1569-4f3b-989f-ced271e3f71b" data-type="core/image" data-title="Slika">
<div style="position: relative; user-select: auto; width: auto; height: auto; max-width: 1450px; max-height: 966.667px; min-width: 30px; min-height: 20px; box-sizing: border-box; flex-shrink: 0;" class="components-resizable-box__container"><img src="http://example.com/wp-content/uploads/2022/09/cat-1200x800.jpg" alt="This image has an empty alt attribute; its file name is cat-1200x800.jpg">
<div>
<div class="components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-right" style="position: absolute; user-select: none; cursor: col-resize;"></div>
<div class="components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-bottom" style="position: absolute; user-select: none; cursor: row-resize;"></div>
</div>
</div>
<figcaption role="textbox" aria-multiline="true" aria-label="Image caption text" class="block-editor-rich-text__editable wp-element-caption rich-text" style="white-space: pre-wrap; min-width: 1px;" contenteditable="true">Nolink</figcaption>
<div class="components-drop-zone" data-is-drop-zone="true"></div>
</figure>This problem is hugely annoying. Please add a attribute to the link element (for example: data-link) as soon as possible.
Thanks and best regards,
Andrej
Activity
priethor commentedon Aug 7, 2026
Looks like #55470 took care of this. Linked Image blocks now render an
<a>wrapper in the editor, so linked and unlinked markup is different and can be styled separately. That implementation is still in trunk, so let's close this one. Please reopen if the editor still doesn't provide a useful visual distinction.