WordPress / gutenberg

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

Post content block: iterate on placeholder to help prevent removal and convey block's purpose #58136

Open annezazu opened 10 months ago

annezazu commented 10 months ago

As part of the broader discussion around the post content block removal warning https://github.com/WordPress/gutenberg/issues/52392, the post content block placeholder came up as something to improve to help address the problem of folks removing this block without understanding the impact. This ties into an effort a few years ago around block previews and placeholders for site editor blocks https://github.com/WordPress/gutenberg/issues/30029.

Pulling from the feedback in the post content block removal issue:

Add more visual distinction to the Content Block to indicate that it is a special block. this could be done by:

  • Using a special accent color, similar to how Template Parts and Patterns have a purple border and purple icons. Dynamic blocks like Content, Featured Image, Query Loop and Post Template Blocks could have the same accent color to distinguish them from “regular” blocks.
  • Add other visual cues like different background color/border or placeholder iconography to indicate that is a placeholder/dynamic block, similar to how the Featured Image block has a crossed-out grey background
  • Make the text inside the placeholder not selectable with a text cursor, so that it's clearer that is it not editable. This also applies to the Title Block. (h/t @supernovia)
  • If a user tries to highlight, delete, or type over the placeholder text, a modal can pop up with instructions on how to edit that section for individual posts/pages/CPTs. This also applies to the Title Block. (h/t @supernovia)

Curious what else folks have in mind and what we can do to continue to iterate cc @WordPress/gutenberg-design

jasmussen commented 10 months ago

Tiny PR for disabling text selection in #58169.

mrfoxtalbot commented 10 months ago

Yesterday alone, I encountered three different users who were struggling with this.

As well as adding visual queues, I would also suggest we lock the Query by default, as discussed in https://github.com/WordPress/gutenberg/issues/28779

I noticed that the Content block is already blocked by default. The Query block should do the same.

Locking these blocks will add one extra check/hurdle to prevent accidental removal as well as give a visual queue that these blocks are different from other blocks.

Experienced users would be able to unlock it, it would only take them a moment.

tanjoymor commented 2 months ago

I do think the warning is ineffective for some people. We are still running into regular, consistent issues with this.

An explanation I use often is along the lines of:

The Pages template is a multi-use template. It pairs by default with all your regular pages. Whatever content you have in this template will display on all your pages that are using this template.

The same applies to the Single Posts template for posts and any Custom Templates you create.

Your content merges with a template, through the use of the Content block in the template, to display on the front end of your site.

Every user I’ve explained this to has fully grasped the concept once they understand it.

But this is generally felt to be “too wordy” in-product, so the information gets distilled down to a few words that lose their meaning, importance, nuance, and impact.

If we’re going to try to properly educate in-product and make things easier to use, I think we need to be willing to provide clear details when they’re needed.

annezazu commented 2 months ago

There are a few things to solve: the pathways that lead folks to land here (and ensuring it's what they are intending) and offering clarity when folks do land here around what this block does. Important to keep both in mind as we look to improve this situation.