Amp-wp: Add Move Forward/Backward options to Block Sidebar

[swissspidy]

As discussed in #2057, this is something we might want to consider.

Alternatively, there would be the drag and drop as proposed in #1974, although not sure how obvious that is for people.

[miina]

Hey @dawidmlynarz, following up on this comment: https://github.com/ampproject/amp-wp/issues/2057#issuecomment-480209982
Did you have time to look into the icons?

[miina]

@swissspidy @westonruter I'm wondering if this would be better in the Toolbar instead? Thoughts?

[swissspidy]

There are some proposed icons on that issue if you scroll down: https://github.com/ampproject/amp-wp/issues/2057#issuecomment-484462542

Not sure about the toolbar as it is already a bit crowded with some very different elements.

Or did you mean adding these options under the "More options" menu in the block toolbar (the three dots)? There are currently a few options there:

That would be like Google Slides:

As for the sidebar, I was thinking of something like Keynote:

So there would be four controls in total

[miina]

I was thinking of maybe in the "More options" menu, however, we can try it out in the Block Sidebar at first and move it if it feels like it's not accessible enough. Maybe it's completely fine there, I don't have a very strong preference at this moment.

Thank you for pointing out the existing icons, I'll ask @dawidmlynarz for the additional 2 icons, too.

[swissspidy]

While waiting for icons I'd use some default up/down arrows in the meantime, just so we have an MVP that we can test already. Maybe we'll even realize that it doesn't quite work before Dawid spends too much time on icons.

[miina]

@swissspidy There is already #2279 which has the two icons functional, not yet the "Back" and "Front". I was planning to continue with the two remaining today but feel free to test it out already to see if it's OK to have these controls in the sidebar.

[dawidmlynarz]

Hello, all icons are ready for different actions. See the image below and leave your feedback.

[miina]

Thanks, @dawidmlynarz, unless there are any objections then I think we can use these.

[miina]

Instructions for testing:

• Create a few blocks.
• Make sure that the blocks have "Block Position" settings in the sidebar.
• Make sure that there are 4 actions available and each action functions as expected.
• "Forward" should bring the block forward of the first block in front of it.
• "Front" should bring the block forward from all the blocks on that page and make it the top block.
• "Backward" should push the block back by 1.
• "Back" should push the block to the last.
• If the block is already the last, then "Backward" and "Back" should be disabled.
• If the block is already on top, the first, then "Forward" and "Front" should be disabled.

[csossi]

I set date block as "top" on page 2 of a story, but Forward and Front were not disabled:

[miina]

@csossi Could you please send the steps to reproduce the issue, it seems to be working as expected to me in the test environment and locally:

[csossi]

Verified in QA (unable to replicate)