Transforms between Heading & Cover Image

[mcsf]

Issue Overview

This issue seeks to ask:

1. Does it conceptually make sense to offer transforms between Heading and Cover Image blocks?
2. If so, what does that exactly look like?

To better frame question 2, it's worth noting that Cover Image currently only has two visual states:

• No background image URL has been provided and we get the placeholder state prompting us to pick an image from the media library.
• An image has been picked, and we see it in the background, with an Editable placed over it.

I gave this a quick try. Merely transforming from Heading to Cover Image with default attributes (only providing the text) was quite awkward because of the points above: transforming would result in a Cover Image in placeholder state, and only after picking the image would you see the original Heading's text had been ported too:

So my next try was to support a state where we have text but no image. With that, this is how the transformations look like, both ways:

Obviously, the gray background looks clunky, but it may hint at how to provide a better alternative to the former behavior.

Related Issues and/or PRs

Todos

• Tests
• Documentation

[karmatosed]

I like this. We probably want to work out if the grey background as you say, I do like it as an option though. Transitioning between blocks should be easy and this helps a lot avoid a visual hitch.

What about this?

[mcsf]

Yeah, I like that better. What could it look like if we wanted to preserve the style of the normal placeholder state?

[karmatosed]

What about the above @mcsf ?

[mcsf]

Looks good to me! :)