Unsupported block: Post title is displayed in UBE (Unsupported block editor) when editing an unsupported block

[fluiddot]

Description

When editing unsupported blocks in the app using UBE (Unsupported Block Editor), it should only display the block. However, I recently noticed that the Post title is also being shown which adds confusion to the experience.

Step-by-step reproduction instructions

1. Create a post in the web version of the editor.
2. Add an unsupported block like a Table block.
3. Save the post.
4. Open the same post in the app.
5. Observe that the block is unsupported.
6. Tap on the unsupported block and tap on Edit using web editor.
7. When the content is loaded, observe that the Post title is displayed.

NOTE: UBE (Unsupported Block Editor) is only available in WPCOM or self-hosted sites connected with Jetpack.

Expected behaviour

The Post title shouldn't be displayed when editing an unsupported block using UBE (Unsupported Block Editor).

Actual behaviour

The Post title is displayed when editing an unsupported block using UBE (Unsupported Block Editor).

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: iPhone 11
• Operating system: iOS 15.4
• WordPress app version: 21.7

[dcalhoun]

It appears the issue causing this is that the styles injected by the UBE are no longer applied to the editor because the editor is now rendered within an iframe after #46212, which is one portion of a larger goal outlined in #33346.

Since CSS cannot be applied from the parent context onto elements within the iframe, we will need to determine a different approach for modifying the editor in the UBE. E.g. using JavaScript (if the iframe permissions and origin allow it) or a first-party mechanism as described in #21874.

[fluiddot]

It appears the issue causing this is that the styles injected by the UBE are no longer applied to the editor because the editor is now rendered within an iframe after #46212, which is one portion of a larger goal outlined in #33346.

Since CSS cannot be applied from the parent context onto elements within the iframe, we will need to determine a different approach for modifying the editor in the UBE. E.g. using JavaScript (if the iframe permissions and origin allow it) or a first-party mechanism as described in #21874.

Good catch @dcalhoun 🙇 ! Definitely, we'd need to investigate how to inject styles into the iframe now that the content is served this way 🤔. Hopefully, the sandbox restrictions that we might encounter in a browser won't be in the app due to the use of WebViews, but we'd need to check this out.