Focal Point Picker: Guidelines Misalignment

[georgeolaru]

In the 8.7.1 version of Gutenberg (the latest) I noticed that the guidelines that we added for center alignment are no longer aligned with the center of the pointer.

It might be in conflict with the 9x9 grid that was added recently, which I don't think it adds much value in this case—the focus is on the pointer as a reference point, not on the container boundaries which are constantly changing according to the block or browser size. If it makes things easier to fix, we could take into consideration the option of removing the 9x9 grid.

[georgeolaru]

@razwan did you succeed in finding a solution for both WordPress 5.5 and the latest version of Gutenberg (8.7.1+)?

[razwan]

Yes, I tested on both WordPress 5.5 and the latest version of Gutenberg. I found one class added to the focal point picker component that was added recently and used that. Hopefully it will stay like that, but I think it's the best we can do right now.
If anything goes south we can ditch the old styling once 5.6 rolls out.

[georgeolaru]

@razwan Got it! Great approach.