Layout jumps when selecting an image

[jameskoster]

Most on-select layout shifts have been removed from the editor, but the image caption and quote citation fields still cause a jump. Let's move these field into a toolbar button, to avoid layout shifts.

The toolbar button should only show when the caption is empty.

---

Issue updated Oct 14.

Initial proposal


Blocks beneath Image will 'jump' when the image is selected, owing to the requirement for the 'Add caption' input to appear. This can be disorienting.

The same thing happens for the Citation element in the Blockquote block.

Let's explore ways we can mitigate this.

[mtias]

For images, I'd probably move "add caption" right after the alignment icon since it's pretty important. Would also be good to explore a caption button overlaid on top of the image canvas, just to exhaust all options.

[jasmussen]

Updated order of buttons in the image block toolbar:

Overlay buttons are tricky. Not just designwise, but mostly I feel like it just makes me wonder why it isn't in the block toolbar. Mainly tricky is that the button probably has to remain an icon button, as we can't know how small the image is, so that it would fit a text label:

[jameskoster]

I like it in the toolbar, where it can behave like a toggle.

[ntsekouras]

So if we have a toolbar button, will be a toggle to remove caption if exists? Also can you share the svg we want for this one? Thanks!

[jameskoster]

So if we have a toolbar button, will be a toggle to remove caption if exists

I think it would be toggled off by default. Toggling it on reveals the caption input.

It would be nice if the block could "remember" the caption if one was added. That way if you toggle it off by accident you can toggle it on again in one click rather than having to type the caption text again.

Here's the SVG:

<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5.5h12a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5ZM4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm4 10h2v-1.5H8V16Zm5 0h-2v-1.5h2V16Zm1 0h2v-1.5h-2V16Z" /></svg>```

[mtias]

I don't think it should be a toggle. If a caption is present, there should be no button. The toolbar button should only show when the caption is empty.

[jameskoster]

Won't it be a bit strange if the button just disappears when you click it? 🤔 I guess we can figure it out in the PR :)

[jasmussen]

Feels pretty good to me.

[jameskoster]

Ah, it's disabled on click and hidden thereafter. That works!