FocalPointPicker: Apply modern styling

[richtabor]

What?

Testing Instructions

1. Open a post or page.
2. Insert a media and text block.
3. Add an image.
4. Open block inspector.
5. See changes.

Screenshots or screencast

Current:

old-focal.mp4

Proposed:

updated-focal.mp4

[jasmussen]

Looks good!

[t-hamano]

The changes look good to me, but might need a review from the @WordPress/gutenberg-components team just to be sure.

You will also need to update the changelog.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core SVN

Core Committers: Use this line as a base for the props when committing in SVN:

Props richtabor, wildworks, mciampini, joen.

GitHub Merge commits

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Depending on the color of the background, the pointer becomes very difficult to see. How about restoring the pointer outline, perhaps the blur value?

This PR:

trunk:

[richtabor]

Depending on the color of the background, the pointer becomes very difficult to see. How about restoring the pointer outline, perhaps the blur value?

I made a small adjustment here: a27697c

[t-hamano]

Thank you for the update. The pointer is now very clear, but when I move the pointer over the outline, it seems like there is a lot of blurring. I don't have a strong opinion on this, but what do you think about reducing blur from 16px to 8px or 4px?

Current (blur: 16px):

blur: 8px

blur: 4px

[ciampo]

I don't have any additional feedback to give on this PR, so I'll let @t-hamano given the final approval here

[richtabor]

The pointer is now very clear, but when I move the pointer over the outline, it seems like there is a lot of blurring. I don't have a strong opinion on this, but what do you think about reducing blur from 16px to 8px or 4px?

I considered it, but I picked 16 for two reasons:

16px blur is used predominantly throughout, and could perhaps be standardized further. And second, I don't think we should allow the picker to go "off canvas", like it does now—I did not want to do that effort as part of this PR. If we don't have that conflict, we don't have the blurred edge issue.

[t-hamano]

I don't think we should allow the picker to go "off canvas", like it does now—I did not want to do that effort as part of this PR. If we don't have that conflict, we don't have the blurred edge issue.

If you want to indicate a value of 0 or 100 in this component, the picker should come to the contour. Isn't it inevitable that the picker will go off canvas? 🤔

[richtabor]

If you want to indicate a value of 0 or 100 in this component, the picker should come to the contour. Isn't it inevitable that the picker will go off canvas? 🤔

I would think that the first 20px of the bounds would equate to the 0/100% mark (whatever keeps the picker from spilling into the rest of the UI).

[t-hamano]

I would think that the first 20px of the bounds would equate to the 0/100% mark (whatever keeps the picker from spilling into the rest of the UI).

I see, I think it's okay to ship this PR if that approach is being considered in the future 👍