Cannot add Patterns to Page in Zoom Out when all Page Content is removed

[getdave]

Description

When a Page is completely empty of all content (including any default placeholder paragraph block) then it is impossible to add Patterns to a Page in Zoom Out.

Step-by-step reproduction instructions

1. Site Editor -> Pages
2. Edit a Page
3. Remove all content from the Page (including the default paragraph). You should only have the core/post-content block left.
4. Zoom Out
5. See that you cannot add Patterns

Screenshots, screen recording, code snippet

Screen.Capture.on.2024-12-04.at.10-58-54.mp4

Environment info

• Latest Gutenberg trunk
• Chrome

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[getdave]

cc @richtabor who discovered this bug

[Anuj-Rathore24]

I believe it is because there is no insertion point in an empty editor. As mentioned in the two pre-required conditions for pattern insertion in zoom out mode.

Reference -:

gutenberg/packages/block-editor/src/components/block-list/zoom-out-separator.js

Lines 81 to 83 in 88a3cef

	// We want to show the zoom out separator in either of these conditions:
	// 1. If the inserter has an insertion index set
	// 2. We are dragging a pattern over an insertion point

[getdave]

Thanks for looking that out 👍

The goal should be to always show some kind of insertion point so we need to amend that code.

[getdave]

We should also take a close look at this conditional which will stop the drop zone being rendered

gutenberg/packages/block-editor/src/components/block-list/zoom-out-separator.js

Lines 65 to 72 in f6c0334

	const isSectionBlock =
	rootClientId === sectionRootClientId &&
	sectionClientIds &&
	sectionClientIds.includes( clientId );
	if ( ! isSectionBlock ) {
	return null;
	}

[getdave]

Looked into this some more. It turns out the core/post-content block is acting as a dropzone. However, it has no height and thus no drop events are triggered when dragging over it.

I tested by adding a min-height: 100px to the element and the drag and drop works as expected, even if there is no visual indication that this will be the case.

I believe this is because in non-zoomed out, the in between inserter (i.e. the thin blue line that appears) acts as an indicator for the dropzone.

[getdave]

A part fix is in #68026 which improves visual affordances when dragging over the unmodified default paragraph.

[getdave]

Further to the above the solution will likely be as follows:

• add a min height to the post content block in Zoom Out - this allow for drag and drop operations to trigger.
• render a Zoom Out Separator only in the main "entry content" if/when the block list is empty.

[draganescu]

I am not sure this is a zoom out issue. One cannot drop blocks or patterns in the canvas if there is nowhere to drop them to. If the user managed to create a situation we should solve the problem globally and detect that situation, then decide on some heuristic (e.g. depending on the entity edited) to insert somewhere where it seems best.

Or we should let the user know there is nowhere to insert via some notification.