Blocks settings unavailable within the Unsupported Block Editor

[dcalhoun]

Description

When editing a block with the mobile app's Unsupported Block Editor (UBE), the "Show more settings" option is not available.

The source of this issue is likely similar to #33592 and related to the inherent brittleness of the foundational implementation referenced in #21874. There may have been a change the web editor's DOM hierarchy/class names or a browser-specific issue introduced.

Step-by-step reproduction instructions

1. Create a post in the web editor and add a block that is not supported by the mobile app, e.g. Archives.
2. Open the same post with the mobile app.
3. Select the block.
4. Tap the ? button.
5. Tap "Edit using web editor."
6. Tap the three-dot menu in the block toolbar.

Expected behaviour

The "Show more settings" option is available.

Actual behaviour

The "Copy block" option is available.

Screenshots or screen recording (optional)

Screenshot

WordPress information

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

Device information

• Device: iPhone SE
• Operating system: iOS 16.3
• WordPress app version: 21.8.0.0

[geriux]

This is a tricky one because it looks like the "Show more options" that was supposed to show as the first item after tapping the three-dots button is no longer there:

The option to open the block options is now in the header navigation which we don't display within the UBE:

Tapping that button opens a sidebar:

I'm now sure how to workaround that 🤔

[dcalhoun]

I'm now sure how to workaround that 🤔

My initial reaction without looking at the code is that we would need to use JavaScript to manually construct and inject a "Show more settings" button where we need it inside of packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js — a file we solely control. That feels very bad and brittle, but one might argue it is less brittle than previous approach of relying upon the existence of the button being there — which this very issue demonstrates the risk of that approach.

[dcalhoun]

From my research, it appears the "Show more settings" button was removed in #46709.

[dcalhoun]

The option to open the block options is now in the header navigation which we don't display within the UBE:

I am wondering if merely displaying the edit post header is the simplest and most stable approach to resolving this. I.e. remove the following lines that currently hide the edit post header.

gutenberg/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css

Lines 20 to 45 in 2f294e1

	/*
	Hiddes the top bar header by setting its height to 0
	We can\'t remove it since the block toolbar is a child of it.
	*/
	.edit-post-header {
	height: 0px;
	padding: 0px;
	overflow: hidden;
	}
	/* Move the block toolbar to the top */
	.edit-post-header-toolbar__block-toolbar {
	top: 0px;
	}
	.interface-interface-skeleton {
	top: 0px;
	}
	/*
	Moves the whole editor to the top.
	There was an extra top margin after removing the WP Admin bar.
	*/
	.block-editor-editor-skeleton {
	top: 0px;
	}

Yes, it occupies more vertical space — possibly an annoying amount of space on small displays — but it would further align the UBE with the default web editor and likely make the UBE less brittle. We would likely need to hide individual menu items, e.g. navigating away from the post editor.

[geriux]

I am wondering if merely displaying the edit post header is the simplest and most stable approach to resolving this. I.e. remove the following lines that currently hide the edit post header.

I think we should explore that and like you said just hide the options we don't need there, it is true about the vertical space but nowadays mobile phones are quite big so it might not be an issue, especially if you're just editing one block.

[dcalhoun]

I explored the idea of displaying the Edit Post Header. Unfortunately, it does expose the ability to perform actions outside of the scope of modifying a single block and potential confusion for users.

Specifically, it is very easy to access Post Settings in the sidebar, rather than just Block Settings. When a block is not selected, tapping the Sidebar toggle button opens the Post Settings, which is confusing and undesired for the scope of the UBE.

I am now exploring displaying the Sidebar toggle button only when a block is selected to avoid this.

Visible Edit Post Header	Post Settings	Block Settings

[geriux]

I am now exploring displaying the Sidebar toggle button only when a block is selected to avoid this.

That looks like the best approach 👍