Fix setting animation order.

[miina]

Fixes #2880.
Closes #2886
Fixes #2923.

Todo:

• Fix setting ampAnimationAfter.
• Fix templates after changed markup.
• Deprecate and migrate all blocks allowed in AMP Stories which have wrapper set (core and custom).
• Moves wrapBlocksInGridLayer filter to PHP to avoid similar issues in the future.
• E2E tests.

[miina]

Was testing with deprecations and there's an issue with it -- we're making the changes in filters and not in the save function itself -- the filters are used for deprecations as well so looks like the usual deprecating wouldn't work for this case at all.

@swissspidy Do you have any thoughts here? If not then I'll also ask in core-editor as well to see if that's something that has been considered.

Saw this deprecation-related issue: WordPress/gutenberg#7604

[miina]

Might have found an option:

We could assign an extra attribute to the deprecated block, e.g. deprecated: 'v1.2' and then, inside the filter, check if this setting exists and then run the previous filter logic according to the version number.

Nor sure exactly yet how the migration would work in this case, will have to test.

[miina]

@swissspidy Would have time for a quick sanity check for the deprecations before I continue?

[swissspidy]

So far animations and deprecations seem to work well. But let's test this a bit more extensively. I'd want at least one other approval here.

[miina]

@kienstra When you have time, would you mind testing/reviewing again? It has had some changes meanwhile (such as moving one of the filters to PHP), would be good to test again.

A quick way how to add some blocks for testing is using templates, too.

[kienstra]

@kienstra When you have time, would you mind testing/reviewing again? It has had some changes meanwhile (such as moving one of the filters to PHP), would be good to test again.

Sure, sorry for the delay. I'm testing this now.

[kienstra]

Approved

Hi @miina,
This worked well. When I added the following blocks with the develop branch, and reloaded the page with this PR's branch, there was no validation error:

• Image
• Code
• Embed
• HTML
• Pullquote
• Quote
• Table
• Verse
• Video

I added animations to most of the blocks.

The Custom HTML block didn't have the same content when reloading the page on the fix/2880-animations branch.

Though this is an improvement, as it didn't have a validation error. Before, even when only using the develop branch, the block had a validation error on reloading.

When adding the Custom HTML block on thedevelop branch, it had this content:

This is a Custom HTML block

...and on reloading the page with the fix/2880-animations branch, it had this content:

<amp-story-grid-layer template="vertical" data-block-name="core/html"><div class="amp-story-block-wrapper" style="position:absolute;top:38.93%;left:5%" animate-in="whoosh-in-right" animate-in-duration="500ms"><div id="a5d971a1-fc6d-45d0-b33c-165c9556043d">This is a Custom HTML block</div></div></amp-story-grid-layer>

Like we talked about, and you captured in #2923, the problem with this block was present in the develop branch before this PR.

[miina]

...and on reloading the page with the fix/2880-animations branch, it had this content:

That's an expected change in the content due to moving the filter. Since HTML block was not working before anyway then it shouldn't be an issue either.

[miina]

There is some Travis issue happening with one Job right now (have restarted it a few times already but times out), once that gets sorted, let's merge the PR.

I will ask Claudio to prepare a Story which can be used for testing after this gets deployed.

Does that sound OK to you, @swissspidy?

[swissspidy]

What's the Travis issue? A failing test or something else?

I will ask Claudio to prepare a Story which can be used for testing after this gets deployed.

Sounds good to me. Make sure the story is a bit more complex and uses at least one custom HTML block, uses animations, etc.

[miina]

What's the Travis issue? A failing test or something else?

One e2e Tavis Job wasn't able to set up the environment for testing. Looks like it's finally running now 👍