Amp-wp: Vertical or tilted text orientation disappear after order change

[bph]

I used different text orientation in this example story.
on the first page I tilted the title and on the third page I made the text vertical.
Then I changed the order and the text orientation went back to horizontal
Here is a video http://recordit.co/tzEhnBHLhQ

_There is another case when this happens, I haven't yet narrowed down. I'll add it here when it occurs again_

[swissspidy]

Thanks for your report, Birgit! We'll try to reproduce it and then see how it can be fixed.

[bph]

You are welcome. Turns out it also doesn't persist coming back a couple days later. So something is not right with the text turning tool. Let me know what would be a good method to troubleshoot this.

[miina]

Thanks for the issue, I'm able to reproduce this consistently with the following steps:

• Add a block.
• Rotate the block.
• Save & reload the page.
• Note the rotation is not displaying.

This issue is in the editor only (displays in front-end) and most likely related to animation changes upstream in the Gutenberg plugin -- the transform used for rotation in AMP Stories might be overridden by transform used for default block animations.

Looking into this.

[miina]

Confirming that the default useMovingAnimation function is indeed overriding our transform used for rotation.

It used to be that enableAnimation set to false worked for disabling the default animations and thus also not overriding ours, however, this doesn't seem to work the same way anymore and in case of setting enableAnimation to false the transform is now set to undefined, still overriding the rotation.

Here is the relevant part in AMP Stories that was working before:
https://github.com/ampproject/amp-wp/blob/434e8317b3d6b129dff1d6ca22930b18047cd513/assets/src/stories-editor/components/with-wrapper-props.js#L93-L95

There doesn't seem to be a very straightforward solution right away so might need to suggest a change to upstream (e.g. enableAnimations set to false should not override the existing transform) or figure out an alternative within AMP Stories logic, that might require a hacky solution though.

Probably won't get to this before the new week.

Edit: Investigating if we can fix this upstream.

[miina]

Note: will create an upstream PR.

[miina]

Upstream PR: https://github.com/WordPress/gutenberg/pull/16893

[swissspidy]

Seems to work well with the upstream change.

How do we best test this in QA? Deploy Gutenberg master to the test env?

cc @westonruter

[miina]

Deploy Gutenberg master to the test env?

Yes.

[swissspidy]

Deployed Gutenberg 6.2.0-0b853e85f2bbf0938440d5598dbfa6a68471e252 and AMP 1.2.1-beta1-20190806T154048Z-60278517 to the test environment.

So this just needs testing instructions now for QA.

[miina]

Will add.

[miina]

Testing instructions:
1.
- Add any block, e.g. Text block or Image block.
- Rotate the block.
- Verify that the rotation remains when Reordering the Pages and after Reordering the Pages.

2.

• Add any block, e.g. Text block or Image block.
• Rotate the block.
• Save the post.
• Refresh the page.
• Verify that the block still displays rotated.

3.

• Open Template Inserter.
• Find the Template which has "ROME" written in it.
• Verify that the Rotation is displayed on the template without inserting.
• Verify that the rotation is displayed after inserting.

[csossi]

Verified in QA