Transform Blocks

[illusaen]

Description

Fixes #2814
Allow users to transform blocks that are:

1. Not explicity disallowed (from block -> to block, i.e. paragraph to group)
2. Explicitly allowed to be transformed from/to (i.e. paragraph)
3. Not unsupported.

NOTE: Mobile supports a subset of the web transformations; i.e. we don't support any that the web doesn't, and we don't support all of the web's transformations. Thus, when following the diagram below, the transformations don't match exactly as the web doesn't support all of the transformations on the diagram.

Transformation Category Diagram

How has this been tested?

Paragraph (allowed)

1. Click paragraph block.
2. Type text in paragraph block.
3. Open block options menu.
4. See that 'Transform block' option exists, and click it.
5. Confirm that 'Heading' exists.
6. Click the 'Heading' button.
7. Confirm that paragraph block has changed to heading block with content preserved.
8. Confirm that there is a banner on top of screen that shows 'Paragraph transformed to Heading'.

RSS (not allowed)

1. Click RSS block.
2. Open block options menu.
3. See that 'Transform block' option does not exist.

Screenshots

New:

Screen.Recording.2021-03-30.at.3.49.43.PM.mov

Old GIFs

iOS	Android

Types of changes

• This code adds transform block functionality to gutenberg-mobile (new feature).

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[chipsnyder]

This seems to be working great already! Nice work @illusaen. I had a follow-up question above but I think this is on a good path.

[illusaen]

Moving white/blacklist to transforms.native.js is taking longer than expected; will come back to this after Simplenote/groundskeeping rotations.

[illusaen]

Note: this is an unrelated (bug?) I found that doesn't seem to change anything when changed. However, contentstyle (original with no caps) ONLY appears in this one case, while contentStyle appears everywhere else (and is the actual prop for the RN View).

[illusaen]

NOTE: When transforming a group -> column, contentStyle is undefined, which leads to a crash. I added this little kludge and the transformation magically works as the web does, meaning that the width in contentStyle doesn't actually matter/is reset?

I'm 100% open to ideas as to WHY contentStyle is undefined when passing through createBlock even though my debugging shows that creating a new column (which somehow gives a contentStyle to column/edit.native.js) doesn't set contentStyle anywhere in its props/attributes/etc either.

However, I'm not sure that this is a bug that should be something fixed in this PR.

[iamthomasbishop]

@illusaen This is looking pretty solid and should set us up nicely for the next iteration of the UI, nice work!

I tested out the latest test build on iOS and broke my feedback down into 2 sections (plus one indirectly-related “bonus” bug that I discovered while testing): things that are mobile-specific and things that aren’t really “bugs” because behavior matches that of the web UI.

Mobile-specific things

• On the initial block options sheet (shown after user taps •••), can we append ellipses to the ”Transform block” action label? eg. “Transform block…”?
• I don’t think this is possible, at least on iOS with the current ActionSheet component, but I wanted to ask just to be sure: Would it be possible to add block icons in the “Transform X to” Action/BottomSheet? (Example 1, Example 2)

Not mobile specific

These are things that also apply to the web editor, so I wouldn’t necessarily consider them ”bugs”:

• It’d be great if we could retain some of the text-based blocks’ alignment properties, but I’m not sure how realistic this is. For example, when I tried to transform a center-aligned Paragraph block to a Heading, I expected the alignment setting to be retained.
• Should we allow More and Page Break to be transformed between one another?
• The behavior of transforming a Pullquote into a Heading feels a bit off. It essentially just pulls the quote part into a separate/new Heading block (which is added above the Pullquote block) and the citation part stays in place. Again, same behavior on web, so not a “bug“ per se (Example)
• I found it a bit odd that when transforming a media block like Image or Video to File that the title of the file wasn’t applied in the “File name” input, but this is also the case on web. The one diff on the web is that when you do this, the “File name” input is auto-focused. Any chance we can also focus that input upon successful transform? Relatedly, would it be possible to attach the same auto-focus behavior on the caption input after a Cover block is transformed to an Image, Video, etc?
• I found it odd that (even on web) Video and Audio blocks weren’t options when transforming from a File block, but I don’t necessarily see this as something we should fork off on mobile to support
• In some cases (List, Quote, Pullquote, etc.) transforming a block results in breaking the contents into separate blocks. Would it make sense to append “blocks” to the labels on the ActionSheet? i.e. Transform List to: “Paragraph blocks” and “Heading blocks” in these cases?

Unrelated

• I also found one unrelated issue where Cover blocks with a video background seem to be throwing an error in the UI (“problem displaying block” on the block). Regular ol’ Video blocks seem to be fine.
• Did we lose a separator on the Heading block’s block toolbar? (Example)

[chipsnyder]

Very nice work on this @illusaen 👍

I like how you handled the supportedMobileTransforms and grouped them in the transformationCategories.

The code looks good and I didn't have anything to add in addition to @iamthomasbishop's design review.

[illusaen]

@iamthomasbishop Thanks! :)

* On the initial block options sheet (shown after user taps •••), can we append ellipses to the ”Transform block” action label? eg. “Transform block…”?

Done, see new GIF attached below :)

* I don’t think this is possible, at least on iOS with the current ActionSheet component, but I wanted to ask just to be sure: Would it be possible to add block icons in the “Transform X to” Action/BottomSheet? ([Example 1](https://cloudup.com/cqy0mdTBew6), [Example 2](https://cloudup.com/cf2qmq7lnYf))

Unfortunately not possible to add images to ActionSheetIOS on RN.

Not mobile specific

* It’d be great if we could retain some of the text-based blocks’ alignment properties, but I’m not sure how realistic this is. For example, when I tried to transform a center-aligned Paragraph block to a Heading, I expected the alignment setting to be retained.
* Should we allow More and Page Break to be transformed between one another?
* The behavior of transforming a Pullquote into a Heading feels a bit off. It essentially just pulls the quote part into a separate/new Heading block (which is added above the Pullquote block) and the citation part stays in place. Again, same behavior on web, so not a “bug“ per se ([Example](https://cloudup.com/c_GBVMdmzmL))
* I found it odd that (even on web) Video and Audio blocks weren’t options when transforming from a File block, but I don’t necessarily see this as something we should fork off on mobile to support

So for the items above, I'm using directly web's transformation functions. I could add the functionality but it would require kludging it, so I'm not sure if we should discuss just changing the behaviour for both platforms on a separate thread?

Edit: I 100% agree with these ideas on UX btw. I also found it weird that transforming Group -> Column results in that group wrapped in a column instead of turning each item in the group into a column.

* I found it a bit odd that when transforming a media block like Image or Video to File that the title of the file wasn’t applied in the “File name” input, but this is also the case on web. The one diff on the web is that when you do this, the “File name” input is auto-focused. Any chance we can also focus that input upon successful transform? Relatedly, would it be possible to attach the same auto-focus behavior on the caption input after a Cover block is transformed to an Image, Video, etc?

Looking into this now!

* In some cases (List, Quote, Pullquote, etc.) transforming a block results in breaking the contents into separate blocks. Would it make sense to append “blocks” to the labels on the ActionSheet? i.e. Transform List to: “Paragraph blocks” and “Heading blocks” in these cases?

Framework for this added; just need list of items to add to it :) In new GIF (attached below) should be able to see the one I added for testing purposes, List > Paragraph.

Unrelated

* I also found one unrelated issue where Cover blocks with a video background seem to be throwing an error in the UI (“problem displaying block” on the block). Regular ol’ Video blocks seem to be fine.

Added as bug.

* Did we lose a separator on the Heading block’s block toolbar? ([Example](https://cloudup.com/cIVDCEPSD4k))

Added as bug.

GIF of ellipses + added "blocks" word

[illusaen]

@iamthomasbishop I think I've gotten the changes in; planning to merge at EOD today. If you see something please feel free to tell me and I'll make a separate PR for it!