[AMP Stories] Reverse Bring Forward / Send Backward Logic

[swissspidy]

Scenario:

1. Insert Text block
2. Insert image block

Expected result: Text block is shown below image block in block navigation, because it is visually underneath the image as well.

Next, click on Up arrow, assuming that it brings the Text block up in the visual hierarchy.

Actual result: Text block is sent backward.

Take this screenshot as an example:

On the left, the text is on top. On the right, the image is on top.

Suggested change:

1. Reverse list in the block navigation.
2. Reverse action of Bring Forward / Send Backward arrows. Clicking on the Up arrow should bring the block up, clicking on the Down arrow should move the block behind the other one

These are only visual changes for the users, as I think these are more clear.

[swissspidy]

For Bring Forward and Send Backward, I like how tools like Keynote or Google Slides are offering these options:

[dawidmlynarz]

@swissspidy I agree with your point. Elements that are in the Editor and exist above other elememnts should be shown in the Block navigation on the top.

Here is how the icons look in Sketch as well for moving Forward/Backward.

I like the Keynote icons though much better but these are a little bit more complex to fir in small areas!

[swissspidy]

Thanks for chiming in @dawidmlynarz! I was thinking about eventually adding icons similar to the Keynote ones the block sidebar on the right side of the screen. There we would have similar amount of space for that like in Keynote. Something for another iteration though :-)

[dawidmlynarz]

@swissspidy Awesome! Do you want me to explore the possible look of the icon (Keynote style) ?

[swissspidy]

Sure! I imagine they could look well in a Gutenberg-like black & white design.

[csossi]

Verified in QA

[dawidmlynarz]

@swissspidy I have managed to create icons for moving Backward / Forward. Let me know if that works and I will send you SVGs.