Fix the outline box and block selector to make it clearer what block has been selected.

[alcurrie]

As a AMP Stories author, I want the interface for the outline box and the block selector improved so that I can easily understand what block has been selected

• AC 1: Fix/Improve the interface for the outline box and the block selector to make it clearer what block has been selected
  • AC 2: Add Blue outline with highlight around selected block
    Selected Block (ie text block)
    
    (NB: forward/back arrows show for selected block. See Improve Layer Manipulation  #1564)
  • AC 3: Add Blue outline what will show around Layer when the layer is selected *The blue line around the paragraph should not be displaying when the page is selected - mock up is incorrect.
    Selected Layer (ie thirds layer)
    
    (NB: forward/back arrows show for selected Layer. See Improve Layer Manipulation  #1564)
  • _AC 4:_Add Blue outline what will show around Story page when the story page is selected (NB: forward/back arrows show for selected story page. See Improve Layer Manipulation  #1564)
  • AC 5: Add Blur to all elements below the layer that contains the selected element. For additional clarity for the user, as well as visually highlighting the selected element on a layer, all elements on the layer below will be blurred, and any elements in the layers above the selected element will be hidden. See discussion in Improve Layer Manipulation  #1564
  • AC 6: Add White shadow below placeholder text so that placeholder text is more visible on darker backgrounds
  • AC 7: Ensure that there is a visible hover for block elements (similar to what is default for Gutenberg) and that goes around the whole element.
• AC 7: The interface change should be aligned with and work well with the other related interface changes.
  • Layer inserter will be moved to above the block navigation (Resolved in Parent/child relationship: it should be easier to select and identify an individual block within a layer.  #1563)
  • Forward/back arrows show for selected Block, Layer or AMP story (Resolved in Improve Layer Manipulation  #1564)
  • Highlight (bold) element selected in Block navigation. (Resolved in Parent/child relationship: it should be easier to select and identify an individual block within a layer.  #1563)
  • Blur all blocks/layers below not selected and hide layers above (Resolved in Fix the outline box and block selector to make it clearer what block has been selected.  #1524)

[jwold]

This one needs investigation to make sure the issue still exists with the new Gutenberg update, and posting some screenshots or a video showing what the problem is.

[miina]

Note for dev: Development is blocked by UX/design work.

[jwold]

In chatting with @alcurrie today here are a few issues we found:

1. https://v.usetapes.com/9JGJJu3uE7
2. https://d.pr/i/IG8PY3

There may be additional items to investigate, and there may be cross referenced items already called out in other issues, we'll circle back and validate what's unique to this ticket, and what might need to be added.

[jwold]

Discussion from Weston: Need to solve the problem of layer + paragraph on top of layer + paragraph. Maybe 50% background layer.

[cathibosco]

Will the blur effect as demonstrated on 1560 be a valid option?

It can be seen in Instagram on page loading.

https://canddstudios.d.pr/NZvofY

[cathibosco]

AC2 Here is a visual suggestion for highlighting the element we are actively editing....
Outline with a shadow for displaying on light or dark backgrounds....

[cathibosco]

AC2 We are moving the selector above the Page 1 editor so that should help resolve any overlapping with editing...
(if I am understanding these AC's correctly)

[alcurrie]

Per discussion at backlog grooming, I've updated the AC to reference the white shadow to be added behind the placeholder text (AC-6) and to reflect the requirement that in addition to the Blue selector, there should also be a hover indicator for blocks (AC-7) We discussed that the hover should be similar to the default hover functionality in Gutenberg. @cathibosco - can you review and provide design recommendations for how these elements should look.

I've also updated the AC to reference the forward/back arrows that display once element is selected.

cc. @westonruter @miina @mehigh

[mehigh]

On making the text visible even on top of dark backgrounds (with black text) I've found the best results with using multiple text shadows, like this:
http://cloud.urldocs.com/c0f19d803ace
This shows an extreme case where the background has both light & dark shades.
And here's the same effect on top of a light gray color I inserted just for testing purposes - http://cloud.urldocs.com/ab49a834d832 - the text is still fully legible.

Here you can also see the blue outline I've added around it:
http://cloud.urldocs.com/1a2dd23af774
Out of the box Gutenberg ads this blue border when hovering an element, gray for selected and gone when typing.
I've made it so the blue stays while the element is selected and even while typing.
The border accompanies the white shadow of the black text in the rich editors in there.

Here's another case of black text on black background: http://cloud.urldocs.com/6bda0fc852a5

[mehigh]

Addressed AC2 and AC6 in the referenced PR ^.

[mehigh]

@miina AC 3:Add Blue outline what will show around Layer when the layer is selected
Selected Layer (ie thirds layer) would work if we keep the is-selected class going or handling a similar class added by ourselves when we click one of the layers.

[miina]

@mehigh There should be a default selector for it and we should actually already have a border, it's just not very visible:

Here you can see the is-selected:

Do you think that is sufficient to add the outline for the selected layer?

[mehigh]

AC1's children:

AC2 - Text block selected border - Fixed in PR #1629 ( http://cloud.urldocs.com/7ec491663479 ).

AC3 - Layer selected border - Fixed in PR #1629 ( http://cloud.urldocs.com/7ec491663479 ).

AC4 - Story page selected border - Updated it to the same darker blue which is more visible - Fixed in PR #1629 ( http://cloud.urldocs.com/fed062238ec2 )

AC5 - Fixed with the already merged PR - this is available now on staging. ( http://cloud.urldocs.com/7ec491663479 )

AC6 - White shadow to placeholder text - Fixed in PR #1629 ( http://cloud.urldocs.com/47a76c9e79a5 ).

AC7 - The hover is visible on the other text blocks - Fixed in PR #1629 http://cloud.urldocs.com/c185bb2c62b4

So far AC2 (first level AC) is covered, as neither of these changes create any negative consequences with the other related work handled in other tickets.
Passing it on to code review and then it should be ready for QA.

[miina]

@mehigh Assigned you back for now (for the last change of removing blue outline from selected parent).

[mehigh]

Handled the last feedback of not applying the blue border to the parents of the selected item and merged the PR. Moving this on to QA.

[alcurrie]

Confirmed working as described in the AC: https://cl.ly/6f22f357812f