Improve block placeholder styles to make it easier to see an empty element when it is added in a layer on top of another.

[alcurrie]

As an AMP Story author, I'd like improved styling/interface so that it's easier to see an empty element when it is added in a layer on top of another layer.

• AC 1: Improve block placeholder styles to make it easier to see an empty element when it is added in a layer on top of another.
  • Resolved in Parent/child relationship: it should be easier to select and identify an individual block within a layer.  #1563 AC-5 and AC-6 (block navigation), AC-7 and AC-8 (blue line selector), and in Fix the outline box and block selector to make it clearer what block has been selected.  #1524 (blur layers below)
• AC 2: Move layer inserter so that layer inserter is never over top of the Story page.
  • Instead of having the layer inserter overlapping the top of the AMP stories interface, move the (+) Add Layer to just above the block navigation and can click/tap on the (+) Add Layer interface to add a new layer, as shown in these mockups (This is resolved in Parent/child relationship: it should be easier to select and identify an individual block within a layer.  #1563 AC-10 and 11):
    
    
• AC 3: Resolve the issue shown here, where it is hard for a user to select a paragraph of text with an image next to it: https://v.usetapes.com/LTwvB612Ob
  • Issue will be resolved by the blur effect applying to all blocks not on the current layer, and the implementation of the blue border selector, and the block navigation interface. Resolved in Parent/child relationship: it should be easier to select and identify an individual block within a layer.  #1563 AC-5 and AC-6 (block navigation), AC-7 and AC-8 (blue line selector), and in Fix the outline box and block selector to make it clearer what block has been selected.  #1524 (blur layers below)

Related to #1563 #1564 #1541 #1559

[jwold]

AC 2: If we can start by just adding margin between elements, it should solve usability by spacing all elements out a tad. We'll let the dev team take a stab at this and see if it works.

[jwold]

There's a further issue, which may be for this ticket, where a layer has a paragraph, and another layer has a paragraph, and they're right on top of each other; in that case it's very hard to see the paragraph of text from one layer to the next, since they overlap.

One suggestion was to put a 50% white opacity between layers to make them less visible.

[cathibosco]

I mocked up a graphic to show what 50% opacity will do for us. It does help, but it seems like it is not enough. I am not sure how this would be done in terms of development but...

I included the 50% white opacity layer between the top and lower layer and then I also added a blur effect on the lower layer which in combination with the 50% white opacity made the top layer much better to work on... here is a .gif Does this seem possible? :)

This blur effect maintains the lower layer colors for ease of editing with different color fonts.

[cathibosco]

Here is a better visual of the blur effect...
I see this is used in Instagram on load.... as a placeholder and as the page loads..
It would be great if it was a valid option. Please take a look at the gif in this link:

https://canddstudios.d.pr/NZvofY

Here is a screenshot of Insta blur:

[cathibosco]

@miina Do you think the blur effect is viable? For ac2?

[miina]

@cathibosco Looks like blur possibly together with opacity 50% background could work well.

We could try it out and then see how it looks like! And then think of alternatives if it still feels like not clear enough. Thoughts?

[alcurrie]

@miina - I've updated the AC here and assumed that the all the items here are covered in other issues as referenced. However, it may be easier from a development perspective to leave the move of the add layer interface change in this issue and remove it from the AC for #1563 Ideally, we could close issues that are covered off in 'other' issues, to clear the board, but there might be a reason, to keep the functionality separated. Thoughts?

[miina]

@alcurrie Good point, the issues are quite related to each other and I think it makes sense to close this issue and resolve the AC-s within the tickets where they make sense. No reason to keep the functionality separated, it makes more sense to develop the issues together that are very closely related.

[alcurrie]

Thanks @miina Per discussion above, we are closing this as the Acceptance criteria for this issue will be resolved by #1563 and #1524

cc. @westonruter