Improve Custom HTML Block so preview mode persists on save. by mauteri · Pull Request #46834 · WordPress/gutenberg (original) (raw)

Thanks for the ping again, thanks for the patience. Thanks also for trying the purple hover style. There's still something to that idea, around making editability clearer. However in trying the branch just now, it doesn't feel as consistent or similar with synced patterns and template parts, as I had hoped.

So I think we should remove those hover styles again.

I don't want to be the blocker for this PR, so I'll defer to others, including @carolinan, on whether this PR can land as-is without that hover style. But the remaining issue I found was with interactivity and links. Quick GIF:

Shown here, simple HTML markup in the preview state to show "Hello world". When you click to preview it, and then click the link, the website linked loads inside a tiny sliver of an iframe for rendering the code.

Visiting the link both feels a bit unexpected since you're in an editor where that's not what happens with other links, it's especially unexpected when the result loads in a tiny iframe. Finally you could write markup that's just one big link for the whole visible area, and then you wouldn't be able to click the block to select it, you'd instead click the link to go there.

The solution I could see here is to wrap the entire preview inside a Disabled component (docs). That would not only fix the issue with following links, it would let the block itself be selectable even if it was in a preview state.

The tradeoff would be that any interactivity you're building in the custom HTML would only be testable on the frontend. But maybe that would be fine? After all, if you want this feature so you can add a linked SVG logo, I suspect you'd want to be able to click it to select it.

Let me know what you think! And thanks for contributing.