Unsupported Block: Improve messaging to convey the block can be edited using UBE

[fluiddot]

Description

When a block is not supported in the native mobile version, it's rendered as unsupported but it can still be edited using the Unsupported Block Editor (UBE). However, the message displayed in the block ("Unsupported") doesn't really convey that if you tap two times on it, an alternative edit option will be presented.

Step-by-step reproduction instructions

1. In the browser, create/open a post and add a block that is not supported on native mobile (e.g. Table block).
2. Save the post.
3. Open the post in the app.
4. Observe the block is rendered as unsupported.
5. Observe the message doesn't convey that the block can be edited using UBE.

Expected behaviour

The unsupported block's message conveys that the block can be edited using UBE.

Actual behaviour

The unsupported block's message doesn't convey that the block can be edited using UBE.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: N/A
• Gutenberg version: N/A
• Are all plugins except Gutenberg deactivated? N/A
• Are you using a default theme (e.g. Twenty Twenty-One)? N/A

Device information

• Device: N/A
• Operating system: Android and iOS
• WordPress app version: 24.8.0.4

[fluiddot]

Following @SiobhyB proposal: A potential approach for the enhancement would be to directly add an Edit button to the block. When tapping on it, it will open the Unsupported Block Editor. This way we'd avoid adding the step of presenting the modal, which might imply confusion to users. The only case where the modal would be needed is for Jetpack-connected sites that need to update its configuration to give access.