Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update copy of warning for block removal #52392

Closed
annezazu opened this issue Jul 6, 2023 · 17 comments · Fixed by #56869 or #58138
Closed

Update copy of warning for block removal #52392

annezazu opened this issue Jul 6, 2023 · 17 comments · Fixed by #56869 or #58138
Assignees
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") General Interface Parts of the UI which don't fall neatly under other labels. Needs Copy Review Needs review of user-facing copy (language, phrasing) [Status] In Progress Tracking issues with work in progress [Type] Copy Issues or PRs that need copy editing assistance

Comments

@annezazu
Copy link
Contributor

annezazu commented Jul 6, 2023

Looking over 6.3 beta 3 and the warning for block removal work #51145, the copy/layout feels like it can be iterated upon as there's a bit of awkward spacing otherwise with items being on two lines:

Screen Shot 2023-07-06 at 12 05 07 PM

Here's the text for Query Loop:

Are you sure?

Query Loop displays a list of posts or pages.

Removing this block is not advised.

Here's the text for Post Content:

Are you sure?

Post Content displays the content of a post or page.

Removing this block is not advised.

To start, let's not have two separate lines as it makes the spacing a bit awkward.

Idea for Query Loop

Are you sure?

The Query Loop block displays a list of posts or pages. Removing this block will cause your posts or pages to not be displayed in this template.

Idea for Post Content:

Are you sure?

The Post Content block displays the content of a post or page. Removing this block will cause the contents of your post or page to not show.

We could also perhaps keep the "Removing this block is not advised" text depending on how much space we want to use up/how much text we want to show. Keen to get copy help!

@annezazu annezazu added General Interface Parts of the UI which don't fall neatly under other labels. [Type] Copy Issues or PRs that need copy editing assistance Needs Copy Review Needs review of user-facing copy (language, phrasing) [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Jul 6, 2023
@provenself
Copy link

Totally agree on the spacing—I do think we could reinstate the "not advised" bit without affecting the overall length by much, though. How do you feel about these?

Query Loop

Are you sure?

The Query Loop block displays a list of posts or pages. Removing this block will prevent your posts or pages from appearing in this template, and is not advised.

Post Content

Are you sure?

The Post Content block displays the content of a post or page. Removing this block will prevent the content from displaying, and is not advised.

@annezazu
Copy link
Contributor Author

Sounds great. Let's roll with what you have!

@annezazu
Copy link
Contributor Author

With beta 4 tomorrow, I don't anticipate there being time to get this done alongside the large list of to dos. Removing from the 6.3 board for now.

@richtabor
Copy link
Member

I’m of the mind that folks won’t read this aside from the “Are you sure?” heading - so it can be less detailed.

I also think the text shouldn’t read it is “not advised”. We don’t have enough context to suggest whether or not it’s a good idea to remove.

For example, I use a Query Loop block within a template part on my blog and I keep getting this notice when removing. It’s irrelevant whether or not it’s removed from my single template, but the UI advises me not to.

@foosantos
Copy link
Member

foosantos commented Sep 22, 2023

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:

Screenshot 2023-09-22 at 00 31 46

In this case, I would suggest us to do the following:

  • 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."

@annezazu
Copy link
Contributor Author

annezazu commented Dec 6, 2023

While this PR is close to landing, I wanted to recap the feedback and discussion there:

  • Make the language direct (don't say "may", say "will")
  • Make the copy concise so folks are more likely to read it.
  • Make the heading more explicit ("be careful!" over "are you sure?")
  • Focus on the consequence of the action over describing what the blocks do.
  • Make sure to split the one line warning (if needed) into multiple lines rather than one long line.

Various options were thrown out as well:

  • Only proceed to remove this block if you're absolutely sure of what you're doing.
  • Be careful! Post or Page content will not be displayed after deleting.
  • Be careful! Deleting this block may affect how (or if) your content is displayed.
  • Be careful! Post or page content will not be displayed if you delete this block.
  • Some variations of the following depending on the block deleted: Deleting the Content block (bolded) removes the page/post content from the template.

We landed with the following for multiple blocks selected (and you can infer single blocks). This offers a clearer heading warning, more concise language, and clearer communication around the impact:

Screenshot 2023-12-06 at 10 56 57 AM

This is very likely to need iteration so, once this change ships to GB, please keep sharing feedback so we can get this right.

cc @foosantos @sethmclellana8c @donalirl @hanneslsm

@annezazu
Copy link
Contributor Author

annezazu commented Dec 9, 2023

Keeping this open for future feedback as I have a sense we can continue to iterate (quickly) here 👏🏼 Please keep sharing what's coming up and what anyone sees when working with the Site Editor or working with others to help them use the Site Editor.

@annezazu annezazu reopened this Dec 9, 2023
@tanjoymor
Copy link

Is the goal to have "one" warning for different types of blocks (such as Content block, Query Loop block, and Post Template block)?

If possible, I'd advise against that. I think specificity matters in this situation.

I'd also suggest that we get a "Learn more" added to this that links to documentation about the specific block, where the documentation can properly explain what the block is for, how it works, and what exactly is happening when it's deleted.

To steal from here and here, and add another tweak, another option to satisfy both of my suggestions above could be:

Post or page content will not be displayed if you delete the Content block, Query Loop block, or the Post Template block.

and link each of the block names to their respective user documentation. Or, maybe link to a tutorial in Learn WordPress that specifically digs into the function of these blocks and the consequences of deleting them from a template.

Yes, the text is longer and will likely wrap onto two lines (but only if we're trying to create one modal for all three use cases), and this feels clearer while giving the user the ability to easily learn why this matters.

@annezazu
Copy link
Contributor Author

Is the goal to have "one" warning for different types of blocks (such as Content block, Query Loop block, and Post Template block)?

Quick respsonse: No! The goal is to reduce folks deleting these blocks and breaking their site.

Keep the feedback coming as this lands in Gutenberg and we can hopefully help determine if this helps/hurts.

@liviopv
Copy link

liviopv commented Jan 23, 2024

Ideas for the removal warning copy

  • Use “you” language to personalize the information: “Your content will not be displayed on the posts and pages using this template if you delete this block”
  • Use "this block" instead of "Content Block" to make it unambiguous what block is being referenced (e.g. "This block dynamically displays content from Posts and Pages"). Low-code, casual users may not know or care what a block is called.
  • Whenever possible, include paths to clarify what content is being referenced (e.g "The Content Block displays all the content that is added to posts and pages under Pages → All Pages, and Posts → All Posts").
  • Include a link to core documentation: https://wordpress.org/documentation/article/post-content-block/

Ideas for the Content Block placeholder copy

Another aspect we should also aim to improve to reduce confusion is the copy and design of the placeholder text in the Content Block, and, possibly the Title Block, which touches on larger aspected being discussed on #55025

  • Use “you” language to personalize – “your content”, “your posts”, “your pages”
  • Use “content” instead of “block” when mentioning content (e.g. "it will display the content from your posts and pages", instead of "it will display the blocks")
  • Indicate that the block should not be removed – “It’s not advised to remove this block” or, in a more-direct, harsher option, “Do not delete this block or your posts and pages might not work”.
  • Consider shortening or removing paragraphs describing the block and indicating it works with other Custom Post Types. I'm guessing users who know what a Custom Post Type is will already know that the Content Block will be used for it.
  • Overall, reduce the amount of information being presented so it’s clearer and easier to deduct what it does at a glance.

Ideas for the Removal warning design

  • Switch focus between the “Cancel” and “Delete” buttons to indicate that “Cancel” is the most reasonable action, if this doesn't cause an accessibility issue.

Ideas for the Content Block placeholder design

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)

@annezazu
Copy link
Contributor Author

Thanks so much for gathering up this feedback! I'm getting some conflicting messages here between "reduce the amount of information" and recommendations to add in sentences. I err on the side of keeping it very concise based on prior feedback and appreciate the personalization angle along with not naming the block specifically. As for listing out where the pages and posts are, that won't quite hold up considering you can also add pages in the Site Editor itself :).

Use "this block" instead of "Content Block"

We do this right now with the updated copy.

Include a link to core documentation: https://wordpress.org/documentation/article/post-content-block/

I like this! The issue is that when deleting multiple blocks, we'd have to link to all of the docs/get the docs right. I don't think we can do this elegantly, unless we created a dedicated to doc to this topic.

Switch focus between the “Cancel” and “Delete” buttons to indicate that “Cancel” is the most reasonable action, if this doesn't cause an accessibility issue.

To me, this is a no go based on what the primary action is and it goes against every other use of cancel in the interface in terms of a design pattern.

For the post content placeholder, I've opened this issue to make sure we don't lose that feedback in the midst of this broader discussion: #58136

As a next step, let's try a PR that adds in "you" language and brings back the "Removing this block is not advised." that was originally there. We tried super concise and perhaps that's still needed:

  • "Your post or page content will not be displayed if you delete this block. Removing this block is not advised."
  • "Your post or page content will not be displayed if you delete these blocks. Removing these blocks is not advised."

@annezazu
Copy link
Contributor Author

Opened a PR to kick this off: #58138

@richtabor
Copy link
Member

What about this; a bit more direct and succinct:

Deleting these blocks will remove your post or page content. It is not recommended.

Plugged the previous suggestion into chatGPT for something more readable/understandable.

@richtabor
Copy link
Member

alternate:
Deleting these blocks will stop your post or page content from displaying on this template. It is not recommended.

@annezazu
Copy link
Contributor Author

Deleting these blocks will remove your post or page content. It is not recommended.

This reads like my posts/pages will be deleted to me.

Deleting these blocks will stop your post or page content from displaying on this template. It is not recommended.

This is a fine alternative! I don't see it as materially better but I don't feel strongly. @liviopv in case you have any strong feelings :)

annezazu added a commit that referenced this issue Jan 23, 2024
…t content (#58138)

* Iterate on warning text for block removal for query/post template/post content

Addresses continued feedback on #52392

* Adjust string

* Update block-removal.spec.js

* Update e2e test

* Give the modal a max-width to be consistent with block lock modal

* Use modal size prop

---------

Co-authored-by: Rich Tabor <[email protected]>
Co-authored-by: Andrew Serong <[email protected]>
@annezazu
Copy link
Contributor Author

With this PR merged, let's take a look at this next iteration:

  • Adds in more personal language ("your posts and pages").
  • Adds in an additional sentence to discourage ("It is not recommended").
  • Updates the language based on @richtabor suggestion, helping give a focus on the impact: "Deleting these blocks will stop your post or page content from displaying on this template"

Here's where we are at visually:

299122431-bc549039-6ecb-466f-98cc-40ddb6fd258a

As before, let's keep feedback coming here and see what sort of iterations might be needed.

Thank you to everyone for the help here. @liviopv for the feedback, @richtabor for wordsmithing/diving into the PR, @andrewserong for bringing it across the finish line.

@foosantos foosantos removed their assignment Jan 23, 2024
@richtabor
Copy link
Member

Looks good; closing for now as #58138 is in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") General Interface Parts of the UI which don't fall neatly under other labels. Needs Copy Review Needs review of user-facing copy (language, phrasing) [Status] In Progress Tracking issues with work in progress [Type] Copy Issues or PRs that need copy editing assistance
Projects
None yet
7 participants