search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

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

Open andrewserong opened 1 month ago

andrewserong commented 1 month ago

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?

image

Expected

Don't show paragraph block placeholder if

getdave commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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

I'm testing https://github.com/WordPress/gutenberg/pull/65702 here; it's still a rough case:

https://github.com/user-attachments/assets/e72c1c98-35b5-4e77-b884-058bdaec954d

draganescu commented 1 month ago

@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 commented 1 month ago

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

Testing videos https://github.com/user-attachments/assets/2b18196f-f477-4cd6-a549-9af118b0f699 https://github.com/user-attachments/assets/6d532ac9-3cf3-4364-aef5-f782599bf24b

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

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

richtabor commented 1 month ago

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 commented 1 month ago

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

LMK if that is not correct. Thanks 🙇

richtabor commented 1 month ago

Yup!

getdave commented 1 month ago

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 commented 1 month ago

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:

https://github.com/WordPress/gutenberg/blob/1a29c029e3e95556f0d0bd3c48e2a4e47b641f5d/packages/block-library/src/paragraph/editor.scss#L13-L19

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

I would vote to punt this to 6.8 👍

ndiego commented 1 month ago

Sounds good, thanks @getdave