Amp-wp: Parent/child relationship: it should be easier to select and identify an individual block within a layer.

[alcurrie]

As an AMP stories author, I want it to be be easier to select and identify an individual block within a layer
_Acceptance Criteria_

• [x] _AC 1:_ - Monitor the progress of this PR https://github.com/WordPress/gutenberg/pull/10545 and watch for it to be merged into Gutenberg.
• [x] _AC 2:_ - When https://github.com/WordPress/gutenberg/pull/10545 is merged into the Gutenberg plugin re-evaluate/confirm the user experience to validate an improved user experience in AMP Stories for selecting individual elements.
  
  
  
  • [x] _AC 3:_ Based on the impact of https://github.com/WordPress/gutenberg/pull/10545 re-evaluate/update the approach and/or UX improvements still needed for selecting for selecting individual elements
  
  
• [x] _AC 4:_ - Update the AMP Stories interface to show the block navigation expanded by default, to the left of the active AMP story.
• [x] _AC 5:_ - Based on existing Gutenberg implementation of block navigation the user will be able to easily see the parent/child relationship and click/tap to select the the story page, layer, or block in the block navigation
• [x] _AC 6:_ - The selected story page, layer, or block will be highlighted in the block navigation, and in the story page. Changing the selected element in either the story page or the block navigation will update the selected/highlighted element in both places. (See related issue: #1524 which covers the outline box and block selector)
  
  
  
  • [x] _AC 7:_ - In the story page, selected blocks, or layers will show with the blue line around the block or layer, and the move up/down arrows visible by default (Resolved in #1564 Arrows display by default, and #1524 Outline box)
  
  
• [x] _AC 8:_ - For additional clarity for the user addition, 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. (Resolved in #1564 See @jwold 's clarification of this functionality here: https://github.com/Automattic/amp-wp/issues/1564#issuecomment-438758558)
• [x] _AC 9:_ The user can view the complete current state of the whole story page (with nothing blurred or hidden) by clicking/tapping on the Story page in the Block Navigation
• [x] _AC 10:_ User can click/tap on the (+) Add Layer interface to add a new layer, and select the layer type (ie. Image fill layer) to be added to the Block navigation and to the story page
  
  - NB: This will require moving the Layer inserter to the new location shown above and removing it as well as the existing Icons from where it currently exists on the right of the active story page. See screen shot below showing the icons and (+) to be removed from the bottom right:
  
• [x] _AC 11:_ - Icons and names for the Layer types ie. image fill layer, video fill layer, Vertical Layer etc.. will be updated in the Block Navigation and in the 'add layer' interface. The 'add layer interface' will only include the AMP stories layers, and show the correct layer name and icons.

Related to: #1564 #1524 #1559 #1560 #1562

[jwold]

At this point the UX feedback is to look at the changes that have been made in Gutenberg and see if we still need to make improvements, or rather things might be fine.

The only question is if we want to replace the custom controls we have (choosing layers), and replace with default navigation that shows all blocks.

[jwold]

It may make sense to search issues in Gutenberg repo to identify ways to improve parent/child relationship.

[miina]

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

[jwold]

After a discussion over the possibilities of ways to improve selectability, we're thinking it could make sense to actually remove the layer icons beside the page itself (see screenshot) and instead rely on the new block navigator (see screenshot).

In doing so we could also look at ways to improve the block navigators use, such as persistantly showing, or showing the text of blocks within it, as shown on https://github.com/WordPress/gutenberg/issues/11010.

---

One additional thing, that we didn't quite settle on was, the plus icon directly above the amp story page seems to only add new layers, that's kind of useful, but it's a bit weird. We might want to look at ways to improve that experience.

[jwold]

Another idea we just discussed was, what if we were to move the block navigator down into context for each page, and remove the existing layer cards. That could solve several problems at once, and allow us to follow along development of Gutenberg as the block navigator gets improved over time. Here's a quick sketching showing some possibilities:

@westonruter and @miina ^

[cathibosco]

I am doing a little mock up to support this version... This layout makes the most sense so far based on the navigation options everywhere on this page...

[cathibosco]

[cathibosco]

[cathibosco]

Updated: The pink areas are navigational ot tool bar areas where users are looking to "do stuff".

[alcurrie]

@cathibosco / @jwold - My initial thought was that the block navigation 'visible by default' would make sense on the right of the main AMP stories interface, but, reading further down I see how it makes much more sense your way Nav still on the left and document/block interface on the right. :) My only recommendation, assuming it's not a big ask technically, is that the AMP story interface block should be centered between the two (flagged in pink) tool bar areas. What do you think? @miina - are there any technical blocks/issues that we should be aware of making this change?

[alcurrie]

@cathibosco / @jwold / @miina I've updated the AC to reflect Cathi's recommendation. Are there any other elements that need to be included in the AC for this issue?

[miina]

@alcurrie: Thanks for the updates to ACs.

There are no technical issues for making this change, that would be styling only. One thing here is to consider that it's possible to hide the right sidebar and also the mobile view.

Are there any technical blocks/issues that we should be aware of making this change?

One additional thing to note here is that this would cancel the AC2 of #1559, otherwise looks good to me at this moment unless there are additional UX changes / behaviors that haven't been discussed yet.

I've updated the AC to reflect Cathi's recommendation. Are there any other elements that need to be included in the AC for this issue?

[jwold]

We just had a further discussion on this. A few takeaways:

1. The block navigator should display persistently on the left side of the page, and should look like the right sidebar.
2. We need to add Story Page numbers to the block navigator, as well as to the individual pages in the middle of the screen.
3. When we're done we should create an issue in Gutenberg to propose this new change for the block navigator.

[miina]

Thanks for logging that @jwold.

On point 2.: Lets look into this but it's possible that for doing that we'd have to replace the whole block navigator with a custom one since the navigator is pulling the names directly from blocks' names. If that would be the case then not sure if this would make sense. Thoughts?
cc @alcurrie @westonruter

[jwold]

1. That makes sense. If it requires custom work it's likely unfeasible for our upcoming deadline.

[cathibosco]

For conversation on our next workshop...

[alcurrie]

@miina I've included the updates to the dropdown for the Layer navigation in this issue (AC-10 and AC-11, but think it might make sense to move those requirements/AC to a separate issue. Also, I'm making the assumption that the dropdown should only include available AMP stories Layers. Since we are building on the Gutenberg framework, I want to confirm that this is not a blocker technically.

[miina]

@alcurrie On AC-10 and AC-11: We would essentially be moving this Layer inserter here to a new location:

This means that the issue including removing the currently existing Layer cards and moving the Layer inserter to a new location could also include AC-10 / AC-11, so it might make sense to keep it here, too. Thoughts?

The dropdown can include only AMP Stories Layers without issues.

[alcurrie]

@miina - I've updated AC10 and AC11 based on your clarifications above.

@cathibosco - you may have already provided this, but could you make sure that @mehigh or @miina have access to the new layer icons?

Based on these clarification/updates, and discussion at backlog grooming Friday, I'm moving this into To Do

[mehigh]

AC 4: _Update the AMP Stories interface to show the block navigation expanded by default, to the left of the active AMP story._ - handled
This was implemented to work from screen widths larger than 961px
On screens <960px the sidebar is automatically folded (that's how core works), and here toying with the layers is behind the top button here: http://cloud.urldocs.com/5f0c99fd0046

At the minimum supported width things are a bit crowded (in the 960-1000 realm): http://cloud.urldocs.com/3784999fa0df
Collapsing the sidebar helps things heaps: http://cloud.urldocs.com/da9aff43f12a
Just as well collapsing the settings helps: http://cloud.urldocs.com/afd27d321345
With both sidebar folded & the settings hidden there's plenty of space: http://cloud.urldocs.com/7758d50abd5d
This looks great with both the sidebar expanded & the settings shown at screens >1024px in width: http://cloud.urldocs.com/c023b3289ed8

AC 5: _click/tap to select the the story page, layer, or block in the block navigation_ - one bug present
@miina - here's the glitch I encounter where I can't select from the navigator the other pages. Selecting them works when clicking on the page itself, but not from the navigator.
http://cloud.urldocs.com/44ba250af237

AC 6: _block will be highlighted in the block navigation, and in the story page_ - same bug from ^^
Mostly works with the exception of selecting a page from the block navigator highlighted with the video above video.

AC 9: _The user can view the complete current state of the whole story page (with nothing blurred or hidden_ - handled

AC 10: _User can click/tap on the (+) Add Layer interface to add a new layer_ - handled
The add layer button shows the pop-out with the correct options: http://cloud.urldocs.com/3734d025e95e
The root add button shows just the Page option: http://cloud.urldocs.com/12df1fea9bce
And that's the same with the options presented when clicking the ghosted page: http://cloud.urldocs.com/f2da178ba36a
The old right hand side options of the layers and add button are now removed.

AC 11: _Icons and names for the Layer types ie. image fill layer, video fill layer, Vertical Layer etc.. will be updated in the Block Navigation and in the 'add layer' interface_ - handled
The same icons & labels are visible in the block navigator http://cloud.urldocs.com/f5ab5a3c73e6 as they are visible in the add layer pop-out: http://cloud.urldocs.com/3734d025e95e

[alcurrie]

Confirmed working as specified in the AC: https://cl.ly/10fb41172e80