Amp-wp: "Begin after" setting not working when setting for an unsaved Story

[miina]

Steps to reproduce:

• Add a block, set animation.
• Add another block, set animation "Begin after", and choose the first block.
• Save draft now and refresh.
• Check the "Begin After" setting of the second block -- it's "Immediately" instead of the previously set value.

Note: when doing this with a Story that was previously already saved then it works.

[swissspidy]

I can reproduce this. Somehow the animate-in-after information is lost.

The attributes are updated here:

https://github.com/ampproject/amp-wp/blob/eb9052f6195aa4a09e40e4b5d64a9dd54a1cc406/assets/src/stories-editor/index.js#L267-L278

This is likely the first place to investigate.

[swissspidy]

Oh, I think this issue is actually a bit bigger...

In wrapBlocksInGridLayer we added the animation attributes to a separate element to avoid conflicts.

However, the elements with the IDs (which are used for animate-in-after are children of that said animation element. That means it can't ever work.

[miina]

Looking into this.

[miina]

Notes from yesterday's discussion with @swissspidy:

Since the fix would mean markup change then this means that we would need to deprecate _all the available_ blocks (that are wrapped with Grid Layer) in AMP Stories, this means deprecation and migration for both custom and core blocks.

An alternative could be moving to render the blocks in PHP instead.

[swissspidy]

An alternative could be moving to render the blocks in PHP instead.

That might also cause block invalidation and thus require deprecations. Would need some testing.

[miina]

Also, we don't probably want to start updating and keeping track of changes in core blocks to replicate these in PHP.

Just deprecating blocks seems to be the more reasonable option.

[miina]

Instructions for testing:

• Add a block, set animation.
• Add another block, set animation "Begin after", and choose the first block.
• (Feel free to add a third block with "Begin after", too).
• Save and refresh.
• Ensure that the "Begin after" setting is still displaying the correct value.
• Ensure that the animations are working as expected in the front-end.

[csossi]

Verified in QA