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?