Gutenberg-mobile: Block type conversion v1 for paragraph

[Tug]

We should be supporting block transforms in gutenberg-mobile.

Block transforms is already built in gutenberg core api and documented so most of the work here is going to be focused on building a mobile UI for it.

We could start by supporting the most common transforms which are all the Paragraph ones:

• Paragraph to Heading
• Paragraph to Group
• Paragraph to Pullquote
• Paragraph to Columns
• Paragraph to Verse
• Paragraph to List
• Paragraph to Quote
• Paragraph to Preformatted

In this first iteration I suggest we just add this as a new entry in the block options menu:

Tapping "Transform Block" would open up the bottom sheet with a selection of block to transform to (we can reuse the Inserter UI).
It would be ideal if the bottom sheet could have the title "Transform Paragraph block to..."
Moreover we should filter out unsupported blocks.

cc @iamthomasbishop

[iamthomasbishop]

@Tug I'm planning on doing some design discovery work on transforms starting next week, but this sounds good start for a very basic first iteration.

A couple of quick notes on your proposal:

• Do you think we should support all of those transforms? Columns and Group seem a little odd to me, and I think we might avoid some complexity on the v1 if we implement these separately
• If we exclude a couple of the options initially, we will only have 5 or 6 transformable options, so I think just displaying a subsequent ActionSheet when Transform block... is tapped
• I agree that we'll want a clear title on the transform action, and I think Transform block... or Transform block to... would be nice titles for both the action item in the initial sheet and title of the subsequent sheet.
• I think we should probably display a compact notice under the navigation bar upon successful transformation with a message like Transformed to [new block type]

Here's a quick mock of the sequence:

I'll be starting to dig a bit deeper next week but in the meantime let me know if you have any thoughts or if you're seeing any additional complexity that needs some consideration!

[Tug]

Do you think we should support all of those transforms? Columns and Group seem a little odd to me, and I think we might avoid some complexity on the v1 if we implement these separately

We don't have to. However those are already defined as part of each block definition, so we'd be reusing the logic already existing on the web, not creating new ones. There is no risk on our side in running those transforms as long as the blocks we transform to are supported.

If we exclude a couple of the options initially, we will only have 5 or 6 transformable options, so I think just displaying a subsequent ActionSheet when Transform block... is tapped

ActionSheet seems fine to me as well. As you said if we show more than 5 or 6 it might be too limited though

I think we should probably display a compact notice under the navigation bar upon successful transformation with a message like Transformed to [new block type]

I like that 👍

[iamthomasbishop]

We don't have to. However those are already defined as part of each block definition, so we'd be reusing the logic already existing on the web, not creating new ones. There is no risk on our side in running those transforms as long as the blocks we transform to are supported.

@Tug Fair enough. My concern would mostly be end-user confusion. Personally, I find the flow of transforming a Paragraph into a Columns block on web to be a little unclear. It's worth a try though, to see if it feels weird in practice.

ActionSheet seems fine to me as well. As you said if we show more than 5 or 6 it might be too limited though

Agreed, it might get a bit unwieldy on blocks that offer a lot of options, but this should be a good starting point.

[blixt-io]

(Hello! I'll be working on the "transform a paragraph to a heading" piece of this as a part of my trial. @chipsnyder is my trial-buddy for this - excited to dig in!)

[blixt-io]

(Hey, just spent the evening poking around - that is a draft PR, and I dunno who-is-working-on-what-part-of-this-change so far, so please let me know if I'm stepping on toes with work that others have planned! 👋)

[Tug]

No worry @blixt-io nobody else is working on this at the moment, it's yours! Please reach out to @iamthomasbishop if you have questions regarding design   

[blixt-io]

Alright, I think I'm done building out the functionality here! I'll update the later-two PRs to point at Wordpress/gutenberg once the first one lands. (Lemme know if there's another way you all would prefer I handle the stacked changes.)

In the last PR on this list, I went ahead and enabled all block-to-block transformations. It was so straightforward to do (yay shared code!) that I figured I should put it up for review, just in case that's something you all were interested in! @iamthomasbishop, let me know what you'd prefer from a design-standpoint.

Here's a little peek at what the "all blocks are transformable" situation feels like:

[blixt-io]

@iamthomasbishop @Tug There are two options here:

1. I'm 100% willing-and-able to just restrict my change here to be "enabling paragraph to transform to a select set of other blocks" - following the letter-of-the-law of this ticket.
2. However, thanks to the excellent getPossibleBlockTransformations function, it's trivial to enable all block transformations! I've got that implemented in this PR. I think this is the "larger-scope, spirit-of-the-law" version of this ticket, but I'd love to know your thoughts on it!

Let me know what you prefer!

[chipsnyder]

Hey @blixt-io

@iamthomasbishop will have some limited availability this week so jumping in here. The web support for blocks and the mobile support are pretty out of sync right now so I think having an allow list for supported transformations would still be a good a plan. Having a framework in place to maintain this list would be helpful as well in case we find any problematic transformations.

Maybe we can build off the work you have in https://github.com/blixt-io/gutenberg/pull/2 and modify that helper function with a few allow-lists to indicate which blocks Mobile is ready to support and what transformations are supported on mobile. I think if we start with the list in this ticket we could use that framework to expand from there.