Cover: unable to set Left value in the focal point picker

[flootr]

Description

Since 9.8.0 for the Cover block I'm unable to set the Left value in the focal point picker.

Step-by-step reproduction instructions

1. In Gutenberg add a new Cover block and set an image
2. Click on the block to access detailed settings
3. Try to set a Left value in the focal point picker

Expected behaviour

It'd set the Left value accordingly.

Actual behaviour

It doesn't set the Left value at all.

Screenshots or screen recording (optional)

focal-point-picker.mp4

WordPress information

• Gutenberg: v9.8.1
• WordPress: 5.6

All other plugins except for Gutenberg have been deactivated.

Device information

• Device: Desktop
• Operating system: macOS Big Sur 11.1
• Browser: Chrome 88

/cc @sirreal

[flootr]

Addition: I noticed that it's possible to adjust the Left value after I saved the post for the first time and then reload the page.

[mtias]

There was a recent fix around this: #28350

[ockham]

There was a recent fix around this: #28350

I cherry-picked that to the 9.8 branch tho, so it should be included in the release this was tested with 🤔 Could be related to one of the other recent Cover block fixes/adjustments? cc /@jasmussen

[brentswisher]

I believe this was caused in #28096 because updateBounds was added to componentDidMount, it runs after the mediaRef exists, but before it has received the width/height of the image?

This results in a division by 0 which errors out and sets the left of the focal point picker to be NaN and causes it to stop functioning. I added a check to the focalPointPicker in #28499 with should catch this and prevent the error if someone wants to test and review it, I think it might just be able to make it into Gutenberg 9.9 but am not sure on the timing.

Pinging @ItsJonQ since he might see a better way to handle this?

[stokesman]

There was a recent fix around this: #28350

That does appear to have been a separate issue. It's likely Brent has identified the cause for this in the above comment. I'd already made #28406 to address this (it didn't have any issues I could find at the time). The code differs trivially but does the same thing as #28499 and I threw in a doc fix 🤷‍♂️

[ockham]

Since the Focal Point Picker has been a bit fragile lately, it'd be great if we could add some e2e test coverage to the Cover Block e2e test (possibly alongside a fix, such as #28499). Anyone on this issue who'd like to give this a shot? 🙏

[mtias]

The performance of dragging also seems a bit clunky to me.