Make UX for adding new blocks consistent

[alcurrie]

As an AMP story author, I want consistent a UX for adding new block, so I can more easily understand the process for adding new blocks

• AC 1: Make UX for adding new blocks consistent: See screencast showing in consistencies between the process for adding a new block that varies depending on where the user clicks in the interface, or what template is being used: https://v.usetapes.com/UuAPuIg3YV (Blocks g)
• Updates to make UX more consistent are in Fix the outline box and block selector to make it clearer what block has been selected.  #1524, Improve Layer Manipulation  #1564 Parent/child relationship: it should be easier to select and identify an individual block within a layer.  #1563. See notes below the specific screencast being expected behavior)
• AC 2: Make the custom inserter for the Layer blocks match the behavior of the default/general inserter (Blocks h) Blocked by Gutenberg - see Note below. Related work for block navigation is documented in Parent/child relationship: it should be easier to select and identify an individual block within a layer.  #1563
• AC 3: Harden the ability to restrict the types of blocks that can be inserted at a given point. (Blocks i) Blocked by Gutenberg - see Note below.
  • AC 3a: User can add a new block using a [+] interface (existing functionality) as shown in the mockup here:
    https://cl.ly/8e44e4958beb
    but the insert block should not allow the user to add layers within layers. Update to Gutenberg has created a new bug that allows adding layers to inside layers, which needs to be resolved, to keep this interface consistent.
• AC 4: Make it possible to add a new page without having to click outside of the page and then click the inserter (Blocks j) (Resolved in Improve the flow for adding new page blocks below existing stories #1532)

Related: #1541

[jwold]

Regarding AC 1:

Miina: This is an invalid AC and expected behavior.

When you have "Fill" as the layer template then the block inside it fills the whole layer -- that's why in case of Fill wherever you click you actually click on an INNER block. However in case of vertical you click on a LAYER itself so it selects the layer block.

To see which block is selected you can check the right sidebar -- you can see that in case of vertical you are selecting the Layer, however in case of Fill you are selecting an inner block.

Probably the real issue here will be resolved when we make it clear which block has been selected. So it should be clear that the block within Fill Layer is filling the whole layer.

Regarding AC 2 and 3:

Miina: These may be blocked by Gutenberg.

Regarding AC 4:

Now that we have the larger plus block below the page, we may not need this.

[miina]

@alcurrie It looks like we can close this issue for the following reasons:
AC1: This is expected behavior within Gutenberg editor and thus we wouldn't change that;
AC2: This is now invalid since we're going to remove the Layer Inserter within #1563;
AC3: This is blocked by Gutenberg (also see #1541);
AC4: Now that we have a larger plus icon below the page and also after we'll implement the ghosted Page block for adding a new Page the issue will get resolved (#1532).

Let me know if you have any concerns with closing the issue.

[alcurrie]

@miina - Based on your notes, I agree that it makes sense to close this, but as we're working on interface change recommendations that will likely address the 'reasons behind' these requirements, I'm going to leave assigned to me pending finalizing #1563, #1541, and #1532

[miina]

Sounds good, thank you, @alcurrie!

[alcurrie]

@miina - as discussed I've added/re-opened AC 3 (or in this case a sub-issue AC 3a) in relation to the block inserter. A recent Gutenberg update created a bug for our work on AMP Stories, as it's now possible to to add a Thirds layer inside a Thirds layer; a Vertical Layer inside a Vertical layer, etc. I've updated the notes/screenshot above, and am re-assigning this to you for review.

[alcurrie]

@miina - for some reason my earlier comment was not saved (likely user error ;) ) I've new AC 3a) as discussed now.

[mehigh]

Lovely solution, Miina.
Closing as merged. Passing on to QA.

[alcurrie]

This is confirmed working consistently: https://cl.ly/85e573f27838