Move adding background media to the toolbar, or a readily visible place.

[miina]

Based on testing, most of the users struggle with adding background media to a Page, most of the users try to do it via adding an image block. Also, the place for adding Background Media doesn't seem to be obvious.

Some potential improvement ideas so far from discussion with @swissspidy:

• Adding functionality to an Image block for converting it into the background image.
• Adding a button to the Page's Toolbar for adding a background image.
• Alternatively, we could use an icon for the Image / Background Image and this could potentially prompt the user to choose which to add.

Acceptance criteria based on backlog grooming, added by @MackenzieHartung on Aug 21:

As a user, I want an easier way to add background media to a page in my story.

AC1 - The existing image icon in the top tool bar will be the access point for a user to add media (video or image) to the page.
AC2 - If it is necessary for clarity, the icon can change to represent a broader media (video and image)
AC3 - When selecting the icon in the top tool bar the user will be presented with the option to add background image, inline image, background video and inline video.
AC4 - Selecting a specific option will take the user to the same location they would go today when making the selection to add background media or inline media today.
AC5 - Have the Background Color Panel open by default for the Page block.

[spacedmonkey]

Could the background image use the featured image? We could filter and change the name of the featured image to background image. Not sure if this would cause other issues with meta data for example.

This issue reminds me a little of this - WordPress/gutenberg#13795

[miina]

The Background Media is set per Page as the background of a single AMP Story Page, it can be either an image or a video.

For example 2 Pages, different background images:

It's not mandatory either, the reason for the issue was that the users did not find the place where to set the background image/video for a Page, they tried to do it via clicking on the icon which adds a regular Image block (and some other places)

[spacedmonkey]

Put some thought into this one. Here is my recommendation.

• Add a new Amp Story Background block.
  • User are only able to unable to insert one background block.
  • After background block is added and selected, all other blocks are not displayed. Background block will take the full page.
  • Block will have existing options from sidebar and will live reload.
  • Once background is deselected, UI for block is hidden.
• Change image icon in toolbar to media icon.
• When use clicks on add media button, they get a drop down of "insert image" and "insert background media".
  • If user has already inserted a background media block, this option will be disabled / greyed out.
• All sidebar background options are removed.

Pros
Everything is then a block.
No need for sidebar options.
Background displays a element in the element selector sidebar.

Cons
Some of the code to display inserting two of the same background blocks might be tricky.
Background data moves from block attribute of a page to background block. Existing content might will break.Migration will be required.
Background data being stored in a nested block, might be hard to manage in future.

[miina]

Add a new Amp Story Background block.

Q: What's the benefit of adding a new Background block instead of using the Page block for the background and just using the Media icon for the 4 options with the existing Page block? Wondering why would it be beneficial if background would be a separate block ("Everything is then a block.").

Displaying the background in the Sidebar does feel like a benefit but we could alternatively also add an item there that would just select the Page (name it sth else that suits better), without actually adding a separate block for it.

No need for sidebar options.

Q: How would changing the background media happen?

All sidebar background options are removed.

Q: Where would the opacity, background color and -gradient live?

After background block is added and selected, all other blocks are not displayed. Background block will take the full page.

Q: Wouldn't this make it more painful configuring the background? E.g. when modifying the opacity it's quite useful to see the top blocks as well for understanding which value is the best.

Thoughts?

[spacedmonkey]

just using the Media icon for the 4 options with the existing Page block

How would this work? What would happen on the media icon is selected? A dialog pops up? It force the sidebar to visable and background options expanded?

Displaying the background in the Sidebar does feel like a benefit

Isn't the point of this ticket, is users can't find the options in the sidebar? The benefit of that background is that is moves the background options into the page, making it more WYSIWYG and that the two things are connected.

Q: How would changing the background media happen?

All options to get the background, such as colour and media would be in that block.

Block will have existing options from sidebar and will live reload.

I would see how this might be confusing. Maybe a seperate background button should be added to the toolbar.

The key benefit of having the background as a block, as it would be listed elements and would be managed within the page area. However, they maybe too many options to do this in a way that scales to many screens.

I personally believe that the sidebar is the best place for these options. It keeps the background options inline with other similar blocks like the cover block.

Maybe the best options is just force the side to display when a page is selected, have background media expanded. Maybe even rename background media to background image / video to make it a little clearer.

[swissspidy]

I'm also wary of adding a separate block for the background, at least for the moment. As for the sidebar, there'd still need to be features like the focal point picker in it anyway.

---

I'd keep it simple for now:

• Add dropdown in the toolbar
• Better discovery for the background options when adding a page (placeholder)
• Optional: add button to image/video block's sidebar to transform it into background image/video

Change image icon in toolbar to media icon.

+1

When use clicks on add media button, they get a drop down of "insert image" and "insert background media".

Perhaps even four options:

• Insert image (inserts block)
• Insert video (inserts block)
• Insert background image (opens media modal)
• Insert background video (opens media modal)

If user has already inserted a background media block, this option will be disabled / greyed out.

It could still be shown, but it would just replace the existing image/video.

---

As for the better discovery, we could do this:

• Don't add a text block to a new page by default
• Add placeholder component to page block that gives you a few options:
  • Set background image / video
  • Set background color (perhaps even with a color picker)
  • Insert a text block

This placeholder would only be shown when these conditions are met:

• No inner blocks
• No background color, image, or video set yet.

Examples of placeholders:

See design guidelines for examples of placeholders and best practices: https://developer.wordpress.org/block-editor/designers/block-design/

[miina]

How would this work? What would happen on the media icon is selected? A dialog pops up? It force the sidebar to visable and background options expanded?

An example of popover when clicking on the icon (with the 4 Media options: background image, background video, video, image):

It could be something similar.

Additionally, we could add the "Background" link to the Block Navigation for testing it out, there is even an issue for it:
#2627

[miina]

(Note: added AC5 to the description, that was missing, added based on yesterday's discussion.)

[spacedmonkey]

• Don't add a text block to a new page by default

• Add placeholder component to page block that gives you a few options:

  • Set background image / video
  • Set background color (perhaps even with a color picker)
  • Insert a text block

This placeholder would only be shown when these conditions are met:

• No inner blocks
• No background color, image, or video set yet.

+1 This is basically what I discussed yesterday.

I think added toolbar is a little confusing. I personally wouldn't think to look there for a background option. Specially after using other places like the cover block. I think the issue is that in testing people were clicking on the image icon in the toolbar as they didn't know where click.

I think most people think about background as the first when creating a story. Like a painting, you paint the background and then paint foreground characters on top. This is a layering effect.

So how about this flow.

1. User creates new page.
2. New page is displayed to user.
3. User is given background options inside the page, including background colour, transparency and media.
4. User is required to select a background colour / media. If you wishes no background, they simply select white colour.
5. Background options are hidden.
6. Text placeholder is displayed (as current)
7. Sidebar options are now displayed. User is able to edit background options as currently.

[miina]

I think most people think about background as the first when creating a story.

That's what came out in the user testing as well.

I think the issue is that in testing people were clicking on the image icon in the toolbar as they didn't know where click.

The idea is that the user shouldn't need to know where to click, it should be intuitive. The best verification we have so far is user testing, if that's the place where the users are clicking then why not provide the actual functionality as well. A lot of the WP editor was built without real user testing (other than the engineers who aren't the main target users really) so the actual users might know better :)
There are currently some inline blocks as well that can be added from the Toolbar so perhaps it's not that uncommon either.

User is given background options inside the page, including background colour, transparency and media.

Background Media would be a good case for adding a placeholder, background color and opacity on the other hand don't feel like it. How would you implement that as a placeholder within the Page?

If the Background Colors Panel is open by default then this is quite visible, perhaps that would be enough?

[cathibosco]

Here is a journey map for an editor experience with some simple guidance tool tips like we are used to seeing in Gutenberg based on the points discussed above.
Here it is: updated...

[cathibosco]

@swissspidy - I am not sure we need the placeholder since this is a new user issue mostly. I fear it might clutter up the UX a tiny bit. So considered the NUX guidance instead. Because once you know, you can turn that off.

[spacedmonkey]

Background Media would be a good case for adding a placeholder, background color and opacity on the other hand don't feel like it. How would you implement that as a placeholder within the Page?

I would argue that users think of background as one thing. Splitting half the options for background into two is a little confusing IMO. If you just have a background image, you may not know / understand you can add an overlay as that option is in an unconnected sidebar.

I fear it might clutter up the UX a tiny bit

It is going to be a common behaviour for most users to change the background image for these rich stories. It is cluttering them up or is it putting commonly used options, front and centre.

[miina]

as that option is in an unconnected sidebar.

Just for clarification: All the Background Settings are Block Settings of the Page Block. So when a Page block is selected and Image added then the colors are visible on the right sidebar right away. It's quite connected sidebar :D

On having just the image as a placeholder: it's about what is suitable as a placeholder inside a Page. For example, if you think of about the Image block -- it's a placeholder when added but all the settings are in the block sidebar, it would be quite odd adding a setting from the block sidebar to the Image block placeholder as well.

Maybe we can start with what we agreed on yesterday, then we test it out and change/modify it if it feels that it's not the best option? Thoughts?

What we discussed yesterday in grooming:

• Have the Background Color Panel of the Page block open by default.
• Have the Media icon with 4 options (perhaps 4 options when the Page block is selected / no block is selected, and 2 when another block is selected?)
• Additionally, as @spacedmonkey recommended, add a link to the Block Navigation for selecting Background (aka Page block), which (as usually when selecting a block) would open the Page Block Sidebar with Background settings.

Then we could test it out and review with @cathibosco (UX) and adjust as necessary. If it feels like it's still confusing then we can add additional stuff and test out a placeholder.

WDYT?

[swissspidy]

Have the Background Color Panel of the Page block open by default.

+1. This is a no-brainer.

Have the Media icon with 4 options (perhaps 4 options when the Page block is selected / no block is selected, and 2 when another block is selected?)

Let's keep it simple for now, with 4 options all the time.

add a link to the Block Navigation for selecting Background (aka Page block), which (as usually when selecting a block) would open the Page Block Sidebar with Background settings.

Not sure if that would really grab the user's attention. On a large screen, I would probably hardly notice that the sidebar has changed and nothing else.

[miina]

On a large screen, I would probably hardly notice that the sidebar has changed and nothing else.

Don't have a large screen, wouldn't know :D However, I don't have a strong preference about this anyway.

[spacedmonkey]

Not sure if that would really grab the user's attention. On a large screen, I would probably hardly notice that the sidebar has changed and nothing else.

+1

I think these options are workabout.

Insert image (inserts block)
Insert video (inserts block)
Insert background image (opens media modal)
Insert background video (opens media modal)
I am going to have a pay around and see if I can get something working.

[swissspidy]

In the screenshot below, does "Insert background image" change to "Edit background image" if there is an existing background image?

Doesn't look like it, but I think it makes sense.

What did we decide on adding a button on the zero state (aka blank) page that says, "Add background image/video"? I think that helps people know they should add a background element; however, it doesn't teach them where to edit it, and we'd need a dismiss option in case they're not using a background image.

The conclusion from further discussion here on this issue was that we'd start with adding this dropdown first, to see how that works for users. And that for discovery a more general getting started wizard might be more suitable.

A wizard and a zero state placeholder are not mutually exclusive though, so I gave it a quick try in #3108 to see how it could work. Here's the result:

(just a proof-of-concept; still WIP)

[miina]

@cathibosco Thoughts on this?

There was also discussion that a placeholder on every empty Page might overload the interface. Probably especially for those who are not the first time users.

Since most of the users from testing tried to add the background from the Image button, and now it's actually possible, then perhaps it makes sense to test it out first. (I'm not a UX specialist though.)

In the screenshot below, does "Insert background image" change to "Edit background image" if there is an existing background image?

Agreed that it makes sense.

[swissspidy]

There was also discussion that a placeholder on every empty Page might overload the interface. Probably especially for those who are not the first time users.

FWIW, in my WIP PR the placeholder is only shown for the very first page when creating a new story.

[swissspidy]

In the screenshot below, does "Insert background image" change to "Edit background image" if there is an existing background image?

Agreed that it makes sense.

@spacedmonkey Could you address this in a new PR? That'd be great 🙂

[miina]

FWIW, in my WIP PR the placeholder is only shown for the very first page when creating a new story.

That makes more sense.
There would be some edge cases to think about as well, for example when reordering an empty page as the first. Also, if the user clicks "Skip" and sets some other settings but not media / background color, then upon page reload, how would we know that it was skipped, etc.

[spacedmonkey]

As originally discussed, the message was not to change. However, I go agree that this change makes sense. I think that the media picker as well should pre-select the existing image. I will open a new PR for this.

[cathibosco]

@miina I think the placeholder is a great addition to the start state after doing some mock ups for #3067
Users potentially find some confusion with Background Color and Background Media so I considered re-naming the Color Background section to Color Layer

Moving through the task of "set the background" - oh wait there are multiple backgrounds to set.. that feels confusing because we think of the background as one thing, the background.

Visually bringing together the Background Color to the Background Media is one option test. (like @swissspidy 's example placeholder - which also brings Paragraph Block to the start state)

In these mock ups I experimented with separating Background Media from a Color Layer (rather than telling an editor it is a "Background Color").

If an editor wishes to start with a Color Layer (we need to test the feasibility), the Background Media layer could be persistent as an editable Element. -this is similar to how Photoshop works for example.

If an editor wants a background media - it is the first step and useful to have the screensaver.

If an editor wants a Color Layer to start with - it covers the background media which lies in the background ready to be edited.

Plus - the screen saver is potentially very useful for each page if it is a persistent element.

Also, (just a proof-of-concept; still WIP)

[spacedmonkey]

I feel like this is a different piece of work than moving the media icon to the toolbar. I think we should open a new ticket and continue this discussion there.

[miina]

I feel like this is a different piece of work than moving the media icon to the toolbar. I think we should open a new ticket and continue this discussion there.

+1

[spacedmonkey]

@spacedmonkey Could you address this in a new PR? That'd be great

@swissspidy See #3109 for updated wording.

[spacedmonkey]

Steps to test:

1. Create a new story.

2. Click on media icon in top toolbar.

3. Dropdown should appear with following options.

   • Insert image (inserts block)
   • Insert video (inserts block)
   • Insert background image (opens media modal)
   • Insert background video (opens media modal)

4. Insert image / video should these blocks into the current page.

5. Insert background image / video, should open a media picker dialog and should allow for upload / setting of background.

One small update to tests, after uploading an image from either the sidebar on toolbar, the wording of the toolbar should change insert to update background image / video.

This is now merged and ready to test.

[csossi]

Verified in QA

[cathibosco]

https://youtu.be/iPytGWJpfIE