Gutenlypso: add convert to blocks dialog

[vindl]

Changes proposed in this Pull Request

This will display convert to block dialog for old posts created in the Classic editor, once they are opened in Gutenlypso.

Testing instructions

1. Create a post in Classic editor that contains a couple of paragraphs and images for example.
2. Opt in to Gutenberg editor.
3. Open the post from step 1 and verify that dialog is shown.
4. Click on Cancel and verify that the dialog is no longer showing.
5. Reload the page.
6. Click on Convert to Blocks and verify that Classic block content has been properly converted.

Note 1: One known issue is that if you start writing a new post in Gutenberg and you add the Classic block first, the dialog will pop up. This won't happen if some other block is inserted first (e.g. paragraph).

Note 2: We might want to request editorial review if you think the messages could be improved.

Note 3: Since I'll be AFK in the following period, feel free to update this PR and land it as you see fit.

Fixes #26594

[matticbot]

Test live: https://calypso.live/?branch=add/gutenlypso-convert-blocks

[Copons]

Note 1: One known issue is that if you start writing a new post in Gutenberg and you add the Classic block first, the dialog will pop up. This won't happen if some other block is inserted first (e.g. paragraph).

I took the liberty of adding an isDirty check, and avoiding rendering this component altogether if the post is dirty.
The idea is that we only want to show the "Convert to blocks" dialog when we open a post created with the Classic editor, or in other words: when the editor first loads it.

Adding a Classic block even as first thing, it would make the post dirty, automatically preventing the dialog to show.

[Copons]

@Automattic/editorial I've pinged you for suggestions regarding the message of this dialog:

This post uses content from the old editor

For the best editing experience we suggest that you convert old content to blocks.

[michelleweber]

Suggested update -- I'd also recommend adding a little instruction to help people get started:

This post contains content you created using the older editor. For the best editing experience, we recommend converting this content to blocks -- instructions here.

(The instruction could be something like "click the X to get started" or "try adding a text block" or whatever makes the most sense given what's on the screen.)

[gwwar]

@michelleweber For context we want them to click the CTA button which looks like this:

[gwwar]

I wonder if we should help preview what the convert looks like, or make it really easy to undo changes. I'm going to ask for more design feedback and testing. Waiting on feedback in p7jreA-22i-p2

[michelleweber]

Got it. That's super clear, thanks. So:

Ready to try blocks?

This post contains content you created using the older editor. For the best editing experience, we recommend converting this content to blocks.

[Copons]

I've updated the copy (and the screen in the PR description as well).

@gwwar re: your comment in p7jreA-22i-p2

make it easy to undo this

This already is the case: the conversion consist of a single action, so folks can just hit the undo button (once) to fully restore the Classic block.

Though, I've added a little enhancement so that clicking on Convert too dismisses the dialog (as opposed to just closing it temporarily).
Without this enhancement, undoing the conversion would have displayed the dialog again.

The dismissal is not stored, so reopening the editor on the same post will display the dialog again, which imho is the correct behaviour.

[mmtr]

LGTM 👍

[gwwar]

Sounds like folks think this is a good idea 👍

Let's maybe try getting this in, and following up in other PRs on:

• Documentation that opens in a new tab: https://en.support.wordpress.com/wordpress-editor/
• A tracks event on the "Convert to Blocks" so we can keep an eye on how this might affect flows