Improve the flow for adding new page blocks below existing stories

[alcurrie]

As a AMP story author, I want a better user flow for adding new page blocks below existing stories, so I'm able to easily understand how to add new pages to my AMP story

• AC 1: Identify interface changes from what is currently available for blocks in AMP stores, that would improve the flow to add new story pages below existing story pages (i.e. show 'ghosted' page with icon)
  - [x] Display ghosted Story page by default on a new AMP story or below the last AMP story page as shown in this mockup: https://cl.ly/4840a3512886
  - [x] On tap/click anywhere on the 'ghosted story' page a new story page is created
  - [x] When a new story page is created, the block navigation with the (+) Add Layer icon above the Block Navigation (heading) and the Story page top level on the block navigation selected
  
• AC 2: Add page number to the AMP stories page interface to represent what story page the user currently editing. (Based on the new, easier story page/layer manipulation Improve Layer Manipulation  #1564 consider not numbering story pages in order to not cause confusion when pages are 'reordered'.)
• AC 3: Update the page icon in the block navigation active story to be aligned with/match the updated ‘add a new page’ icon https://cl.ly/24a5c2e8ab6e

[westonruter]

Note: The big plus icon now seems to be part of Gutenberg itself, although it is not shown in a ghosted page:

[alcurrie]

@westonruter Thanks for the call out on the plus already being available. I've updated AC1 to take into account that this task maybe partially done, though may need some additional improvements to meet the overall 'goal' in this ticket.

@jwold - Based on Weston's screen shot, this looks like we'll need to take this into account when making this interface change to make adding pages easier.
From the screen shot Weston shared, as a user, I'd assume the plus at the top of (inside) the card would add a new layer, and the plus below the card would add a new page. Assuming the plus below the card adds a new page (i.e. already does part of what we're asking for) that would affect the specifics of the approach. We wouldn't need to add a + icon, but I still think there could be improvements in styling and interface to make the process clearer. I've update AC1 and added a UX-feedback label as it would be good if you could weigh in on this.

[mehigh]

We could get inspired from the standard photo editors new layer icon:

Or maybe something like this:
https://thenounproject.com/term/add-layer/340550/

This provides more information than a regular plus sign.

The plus at the bottom would make sense to add another page in the story, the layers was the only one I felt needed an improvement.

[jwold]

Dev is currently blocked by design as we need a UX suggestion for what it will look like.

[jwold]

@miina howdy! @alcurrie and I spent a bit of time going over this, and I'd love your feedback, as well as letting me know if you need anything more.

Here is the graphic with suggested changes:

And here is the Figma file: https://www.figma.com/file/fJFUvAKJGNjH2wCzgj5ke4PF/Untitled?node-id=1%3A127

Should I get you the new icons as SVG or PNG?

Thank you!

[cathibosco]

I think the page icon works, currently I can’t think of a way to improve it. Half of the problem is knowing what each inserter does! That one adds a page - no question. It is good for now
No label required which is good.

[jwold]

Thanks for the feedback @cathibosco, I'll go ahead and remove the UX feedback label now @alcurrie as I think this is dev ready.

[alcurrie]

@jwold and @cathibosco - I've pulled this back to definition, as based on further discussion on related issues, the interface sketch here, is no longer up to date.

[alcurrie]

@cathibosco can you take a look at this with the view to integrating it into the overall interface updates/changes.

cc. @jwold

[cathibosco]

Got it added now - thank you @alcurrie

[bluestormmax]

I've made a first pass at converting the block-appender inserter into the "ghosted" page, hiding the other inserter/shortcut icons in the process.

PR for review or further functionality as needed: #1632

[mehigh]

@bluestormcreative This isn't ready for prime time. This shouldn't remove the side adder - http://cloud.urldocs.com/a4d53dd19dbf

Instead we need to figure out a way to turn this normally hidden + button at the bottom into a page adder:
http://cloud.urldocs.com/6c65fd7a3f02

[mehigh]

Actually the hiding of those elements I did undo quickly.. and the reason the add ghosted page went berserk is due to a Gutenberg update. You were seeing a different "+" structure than I'm seeing, hence the selectors didn't play along well.
I'm updating this to work with the newest version of G and 🤞 for this not to break next week.

[mehigh]

How this looks now:
http://cloud.urldocs.com/76c76d5127ca

The small page icons in the side-nav is updated now
The last add button is transformed into a ghosted page
The page border and background color will be updated in the ticket which handles the borders.

[mehigh]

This handles the first item in AC1 and AC3.
[x] - Display ghosted Story page by default below the last AMP story page
[ ] On tap/click anywhere on the 'ghosted story' page a new story page is created -> I wasn't able to place an element with that functionality there. This work turns the old "+" at the end into a ghosted page only.
[ ] When a new story is created -> no changes on this item in this ticket. Work done on the ticket which pre-populated the story page is where all of the work touching new pages is at.

AC2 - Consider not adding the extra page numbering

AC 3: Update the page icon in the block navigation - this is completed as well

[mehigh]

Fixed via merging #1632

[alcurrie]

Confirmed that add a new page interface, with the new 'ghosted' page interface, and the update of the icon for pages in the block navigation elsewhere in the interface. https://cl.ly/24d18e6425f9

See #1686 - for related minor interface improvements/fixes