Improve text and design of the block removal warnings

[foosantos]

What?

It improves the text and design of the block removal warnings:

• When the user is trying to delete only one block, add the whole text in one line.
• Change the generic message from "Removing this block is not advised." to something more open, like "Only proceed to remove this block if you're absolutely sure of what you're doing."

Why?

The goal is to improve the UX and have a clearer message/copy.

Closes #52392.

How?

I checked how this was added technically, and "Removing this block is not advised." is added by default on all block removal warning models.

I believe that part of the reason that it was added in this more "generic" way is to be able to loop and show a list with all warnings in case the user tries to delete multiple blocks:

With that in mind, I kept a similar structure but added this text directly to its singular/plural versions.

Testing Instructions

1. Select the "protected" block that you would like to delete ("Query Loop" block would be an example of that).
2. Click on the Delete key to see the modal — you can compare the different versions.

Screenshots or screencast

One warning:

• Before (previous text and different lines)
  
• After (new text and using the same line)
  

Two or more warnings:

• Before (previous text)
  
• After (new text)
  

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @foosantos! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[apeatling]

Personally I find the one line warning too long to be comfortable to read, it would be easier split onto multiple lines.

[hanneslsm]

Only proceed to remove this block if you're absolutely sure of what you're doing.

I find this too dramatic. I'd expect such a warning when changing the PHP Version or renaming the table prefixes or something like this. The query loop can easily put into template again and revisions can be used to revert the change.

[foosantos]

I see your point, @apeatling — I personally have mixed feelings about adding one line instead of multiple lines and I am not really sure what would be ideal. Happy to change it as needed once we have a confirmation on what to do here.

@hanneslsm, that makes sense! How do you feel about "Only proceed to remove this block if you're sure of what you're doing." (without "absolutely")?

[hanneslsm]

@hanneslsm, that makes sense! How do you feel about "Only proceed to remove this block if you're sure of what you're doing." (without "absolutely")?

Possible. What about something like the following - it says in a easy language what the impact is, but not as serious as "if you're sure what you're doing"?

Are you sure?

• Query Loop displays a list of posts or pages.
• Post Template displays each post or page in a Query Loop.

Be careful! Deleting this block affects how or if your content is displayed.

or

Be careful! Post or Page content will not be displayed after deleting.

[hanneslsm]

I personally have mixed feelings about adding one line instead of multiple lines and I am not really sure what would be ideal. Happy to change it as needed once we have a confirmation on what to do here.

A rule of thumb is having 40-75 characters per line for good readability & design.

[foosantos]

@annezazu do you have any feedback as well on how do you think this could work here? I like @hanneslsm's suggestion above, but this would still keep in two lines and end up having the same issue.

[annezazu]

I don't think this current language matches the language we use elsewhere (in particular the "Only proceed to remove this block if you're absolutely sure of what you're doing."). I'm going to chase down a copy review on this to get some expert wordsmiths on it. I lean more towards @hanneslsm feedback either way.

[provenself]

Editorial checking in—I like @hanneslsm's suggestion as well. For readability, we could tweak a bit further, from

Be careful! Deleting this block affects how or if your content is displayed.

to

Be careful! Deleting this block may affect how (or if) your content is displayed.

[foosantos]

Thank you! Yes, @annezazu, how about adding both to the same line as you proposed initially? How do you feel about that?

I believe we need to confirm two things: The text of this window and if/when it should show in the same line.

[annezazu]

how about adding both to the same line as you proposed initially? How do you feel about that?

Meaning something like this? Yes!

The Post Content block displays the content of a post or page.
Be careful! Deleting this block may affect how (or if) your content is displayed.

[hanneslsm]

Thanks for chiming in!
I am a big advocate for precise language in modals, error messages, etc.
Therefore, two points bother me on the new sentence

Be careful! Deleting this block may affect how (or if) your content is displayed.

1. may it? It will. I know "may" sounds more polite, but let's focus on what will happen. Something will change, otherwise we won't need a dialogue.
2. the brackets indicates that the how is more important than the if . However, it's deleting a block. If we introduce such a hierachy, it'd go with "if (or how)".
   This can be confusing though - people might think "Why am I getting a warning dialogue (for deleting a block) if it will not delete the content anyway?"

[jameskoster]

Unless I'm missing something, deleting the content block doesn't affect how content is displayed?

Could the sentences be combined?

Be careful! Post or page content will not be displayed if you delete this block.

[hanneslsm]

Unless I'm missing something, deleting the content block doesn't affect how content is displayed?

You can have multiple post templates in one query loop. Deleting one doesn't mean necessarily that no content will be displayed at all.
But it's true, how is probably misleading here. I like your suggestion @jameskoster !

[jameskoster]

One potential amendment to account for the user deleting a container that includes the Content block:

Be careful! Post or page content will not be displayed if you delete the Content block.

[donalirl]

Chiming in from the perspective of a technical writer 👋

The line suggested by @jameskoster is closest to the ideal here because it's succinct and specific.

Wording like "may affect how (or if) your content is displayed" and "if you're absolutely sure of what you're doing" are on the vague side. As a user reading this, I wouldn't understand the specific consequence of my action. The latter could even be interpreted as condescending (if we're being sensitive about it.)

I understand the goals here are to:

• Communicate to the user the consequence of deleting the block.
• Do so in as few words as possible so the modal doesn't appear too wide.
• Avoid awkward spacing and multiple lines in the warning.

With that in mind, I propose the body text of the modal becomes:

Deleting the Content block removes the page/post content from the template.

Deleting the Query Loop removes the list of posts/pages from the template.

Deleting the Post Template removes the blocks used to display a post.

Notes on why this wording choice:

• I removed "Be careful!" because it repeats the same meaning as the "Are you sure?" text in the heading of the modal.
• I've intentionally bolded the block names to help users make the connection between the warning text and the block they're deleting.
• This copy eliminates the need for the generic "Removing this block is not advised" text underneath. Are these the only three blocks that show this warning? If there are more blocks, I can provide copy for those too.

One last thing is that I would suggest something a little stronger than "Are you sure?" to encourage users to stop and pay attention. We could go with the word "Warning" but that would be too harsh. I think "Be careful!" or "Caution" are nice because they're stronger than "Are you sure?" but not as strong as "Warning".

Happy to make any further revisions if needed. cc @mtias who asked me to offer my insight here.

[donalirl]

Mockups:

[sethmclellana8c]

I like all the suggestions so far and aim to get it as concise as possible.

I suggest something beyond just defining what the user is doing.

Deleting the Content block removes the page/post content from the template.

User: "Sure, I understand that's what I'm doing. Delete it."

Versus this statement that warns what results on the front-end.

Post or page content will not be displayed if you delete the Content block.

User: "That's not my intended result. I don't want to do this."

[annezazu]

Thanks for chiming in, folks. To keep this moving, we need to make a final call on phrasing while keeping in mind that we can always iterate. For now, let's move forward with the following:

Be careful! Post or page content will not be displayed if you delete this block.

I'm going to bring summarize all of the other suggestions tomorrow in a comment on the original issue for safekeeping: #52392

@scruffian can you implement this?

[foosantos]

@annezazu, my understanding is that we would need two texts/formats for having only one block being deleted vs. multiple blocks being deleted. Isn't that the case?

By the way, I have been busy with some other projects, so I appreciate Ben or someone else finishing the work on it — I might not be able to get back to this PR for at least two weeks.

[annezazu]

my understanding is that we would need two texts/formats for having only one block being deleted vs. multiple blocks being deleted. Isn't that the case?

Yes! Let me be clearer in that case. I would just use a plural of this for now:

"Be careful! Post or page content will not be displayed if you delete these blocks."

By the way, I have been busy with some other projects, so I appreciate Ben or someone else finishing the work on it — I might not be able to get back to this PR for at least two weeks.

❤️ Super appreciate that and want to be mindful of how much you've put in while balancing that this is something we need to iterate on. Hoping Ben or someone else can jump in and then we can see how that lands before (likely) iterating again on the language.

[scruffian]

Be careful! Post or page content will not be displayed if you delete this block.

@annezazu is that in addition to the per block messaging?

For example if I am removing a query block the moment it says:

Are you sure?
Query Loop displays a list of posts or pages.
Post Template displays each post or page in a Query Loop.
Be careful! Post or page content will not be displayed if you delete these blocks.

Do we still want those additional explanations?

[annezazu]

I think we should try to remove these for now and keep the messaging as concise as possible. It's less that we need to explain what these blocks do and more that we need to explain the impact of what happens upon removal. We likely will need to iterate on this though and @donalirl's approach might be the next thing to try with some light descriptions. In playing around with this more this morning, I also agree that we should try out changing "Are you sure?" to "Be careful!" both to save space and to communicate more severity.

That leaves us with the following for clarity:

Before:

After:

[scruffian]

I ended up moving this to a new PR so I could use the _n function: #56869

[richtabor]

Closed per #58138.