Amp-wp: Reordering displays the blocks incorrectly

[miina]

Bug Description

The block preview in the Reordering interface is off.

Expected Behaviour

The block preview when reordering should reflect the actual page layout quite accurately.

Steps to reproduce

1. Add some blocks.
2. Start Reordering
3. Observe the difference

Screenshots

Editor:

Reordering:

Additional context

• Gutenberg plugin version (if applicable): latest develop as of 10th of October. Also tested with the latest stable release.

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance criteria

• The block preview when reordering should reflect the actual page layout in terms of layout and proportions

Implementation brief

QA testing instructions

Demo

Changelog entry

• Improved Gutenberg compatibility on the reorder screen

[swissspidy]

Ah, was just about to file this as well.

There were some significant changes to the BlockPreview component in Gutenberg. We now don‘t have to scale down and position elements ourselves anymore I think.

[spacedmonkey]

I played around with the css property transform: scale(0.5); to scale the original pages. This results in a perfect preview. However, it would mean we would have to reimplement the reordering.

[swissspidy]

We probably need to adjust the BlockPreview's viewportWidth prop, as Gutenberg uses that for its internal scale(). Right now we do our own, which is now obsolete though. In other words:

• Remove our custom scale()
• Adjust viewportWidth so the preview is correct again