[AMP Stories] Animation Order

[swissspidy]

To do:

• Maybe use same <Dropdown> component like we already do in [AMP Stories] Font Selection #1885 so we can show each block with its block type's icon.
• Make sure the dropdown updates when animatedBlocks update.
  Right now, content changes aren't reflected in the drop downs.
• Prevent cycles in the animation order.
  onChange, go through all animated blocks to ensure there are no cycles. *

* Similar checks might be needed when removing blocks. This begs the question whether it makes sense to store animation order in list instead of just having each animated block reference its predecessor.

See #1882

[swissspidy]

Prevent cycles in the animation order.

I'm gonna implement a data store as provided by @wordpress/data to store animation order at a central location. From there I can subscribe to state changes (animation order changes, removed blocks, etc.) and update blocks accordingly.

This is gonna be needed for future UI iterations anyway, see #1882 (comment) for example, where animation order is displayed in a central place.

Upon editor initialization, I'd go through all existing blocks to determine the order and set the default state.

[swissspidy]

The picker looks a bit better already:

[swissspidy]

Added some truncating of the text too:

[swissspidy]

The two main things left to do:

1. check cycle prevention again
2. fix state error

[swissspidy]

Cycle prevention is fixed now. Example: When block A is set to start after B, one cannot select B to start after A. Nothing happens when you try to click on such an invalid option.

To further improve messaging to the user, we could think about hiding or disabling invalid choices in the picker. Perhaps with a detailed explanation below the control or something.

[miina]

@swissspidy One additional note about the PR from functional testing:

• At this moment when creating the story and when haven't saved yet, it's possible to choose "Animate after" for a block that doesn't have animation yet, and then this happens with the element having assigned "animate-in-after" never appearing:
  

[swissspidy]

Interesting. So a block was shown in the dropdown that actually wasn't animated? Or did you add the animation to both and then removed it from the first (which then didn't update the other one)?

[miina]

The block was shown in the dropdown what wasn't actually animated.
Note that this issue doesn't seem to occur if the Story has already been Saved once.