Hide empty paragraph block placeholder when it’s the only block when zoomed-out

[andrewserong]

Description

When zoom out mode is active in the editor / site editor, empty paragraph blocks continue to display their Type / to choose a block placeholder state, even though they cannot be selected.

Should this be hidden in zoom out mode?

Step-by-step reproduction instructions

1. In a template, somewhere in the middle of the template, add an empty paragraph block
2. Click the Zoom out button at the top right of the site editor
3. Notice that the paragraph placeholder is still visible even though you can't click on it

Screenshots, screen recording, code snippet

In the following screenshot, the empty paragraph block there cannot be selected, but its placeholder is still visible. Should it be hidden?

Expected

Don't show paragraph block placeholder if

• It's the only block on the page.
• We're on an empty Page/Post.
• The editor is zoomed out.

[getdave]

the empty paragraph block there cannot be selected, but its placeholder is still visible. Should it be hidden?

The question at hand seems to be: if a block is in it's placeholder state / empty should it be displayed when contentOnly is disabled?

[andrewserong]

if a block is in it's placeholder state / empty should it be displayed

Good point, it's probably the same for a bunch of other blocks, too, e.g. the empty Tag line block that also nudges folks to start typing 🤔

[draganescu]

@getdave @andrewserong since we're eventually going to bring edit mode into zoom out view - see #65702 - then this would not be a problem since the content in placeholder mode is simply editable?

[richtabor]

then this would not be a problem since the content in placeholder mode is simply editable?

I'm testing #65702 here; it's still a rough case:

CleanShot.2024-09-30.at.10.17.17.mp4

[draganescu]

@richtabor I don't understand 😄 how is the roughness related to this issue. This issue is "should the placeholder still be visible if the paragraph is empty" with the implication arond other placeholders ... The poor UI in the recording is something else, am I wrong?

[getdave]

The original issue was:

When zoom out mode is active in the editor / site editor, empty paragraph blocks continue to display their Type / to choose a block placeholder state, even though they cannot be selected.

I re-tested this and found

• placeholder is still displayed (expected)
• block can be selected

Testing videos

Screen.Capture.on.2024-10-01.at.11-16-06.1.mp4

Screen.Capture.on.2024-10-01.at.11-16-44.mp4

---

Issues I noticed above in @richtabor's testing video:

• Accidental selection of core/post-content block. This is the "section root" and we've deliberately set this to be enabled but in contentOnly mode. What affordances do we want around this element or do we just want to hide it (including when it's a <main> tag in other scenarios?
• Alignment of vertical toolbar - being addressed in Make zoom out vertical toolbar consistent #65627

Anything else I missed? Can we close this one out or do we want to change the way the placeholder behaves?

[richtabor]

Anything else I missed? Can we close this one out or do we want to change the way the placeholder behaves?

I don’t think leaving the placeholder is a good idea if it’s the only block on the page (an empty page/post) while zoomed out. Otherwise, it’s easy to get into that odd experience I shared above. Does that empty paragraph stay in place when a pattern is inserted from this view?

[getdave]

I don’t think leaving the placeholder is a good idea if it’s the only block on the page (an empty page/post) while zoomed out.

Based on that I'd say this is the new requirement.

Don't show paragraph block placeholder if

• it's the only block on the page
• we're on an empty Page/Post
• we're Zoomed Out.

LMK if that is not correct. Thanks 🙇

[richtabor]

Yup!

[getdave]

Code-wise - placeholders are hard coded into the various blocks. Example:

placeholder={ placeholder || __( 'Heading' ) }

You can set the placeholder as an attribute to an empty string (I think) but that would cause a block modification and we'd have to restore the attribute when leaving Zoom Out.

Anyone else got a suggestion for how we could go about implementing this?

[andrewserong]

Anyone else got a suggestion for how we could go about implementing this?

Could one option be to use CSS to hide the placeholders, if that's all we need to do (rather than changing the wording)? There's already one case where we set opacity to 0 in some circumstances, so perhaps there's a precedent:

gutenberg/packages/block-library/src/paragraph/editor.scss

Lines 13 to 19 in 1a29c02

	.block-editor-block-list__block[data-empty="true"] + .block-editor-block-list__block[data-empty="true"] {
	&:not([data-custom-placeholder="true"]) {
	[data-rich-text-placeholder] {
	opacity: 0;
	}
	}
	}

I guess the challenge would be if we have the right selectors available for a CSS condition that matches the situation where we want the placeholder to be hidden?

[draganescu]

But will we also remove the block (the empty paragraph) or will the empty paragraph show up when we exit zoom out? I can see it as a source of frustration already.

I am really suspicious of these just in time tweaks that hide stuff. It seems there is an underlying UX issue to solve and we're obscuring it here.

[colorful-tones]

Could one option be to use CSS to hide the placeholders

This seems odd, and would advise against it.

I am really suspicious of these just in time tweaks that hide stuff. It seems there is an underlying UX issue to solve and we're obscuring it here.

I agree. It would be ideal to take a breath, step back, and re-assess Zoom Out in the context of its purpose and intent.

[getdave]

This Issue appears to be blocked with no clear consensus. We are rapidly approaching WP 6.7 Beta 3.

I'd say the underlying Issue is perhaps that we don't have a good initial state for Zoom Out when the editor is empty.

By default the paragraph blocks acts as the default placeholder for all editors. It's clearly designed with post content editing in mind which is why it doesn't play well in Zoom Out.

The solution seems to be that if the template is empty we should show a specific placeholder, perhaps with instructional text encouraging you to drag and drop content.

Given we are now in Beta we can't add new features to Zoom Out so we need a decision on whether this is sufficiently important to warrant the "fix" (as suggested above) or we defer a solution until 6.8.

What do you think @richtabor?

Also @kevin940726 @ndiego @colorful-tones as Editor Leads for 6.7.

[draganescu]

I would also like to add that this may be well not solved for 6.7 - it's not such a big problem that there is a placeholder there. Nothing else is editable in 6.7 when zoomed out. My 2 cents.

[ndiego]

The current placeholder situation is not great, but it is also not mission-critical, in my opinion. There are more pressing Zoom Out issues that need solving in this tight time window, so I don't recommend we spend time on this one.

[colorful-tones]

I'm adding this to the WP 6.7 project board. Although, it sounds like it'll just get the Punt to 6.8 status.

[getdave]

I would vote to punt this to 6.8 👍

[ndiego]

Sounds good, thanks @getdave