Uniform Focal point labels

[akasunil]

What?

Fixes #62408

Testing Instructions

• Add group block
• Open style setting
• Add background image
• look for focal point control

Screenshots or screencast

[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.

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: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: jennydupuy <jdy68@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]

Thanks for the PR!

In my feeling, the term "Focal Point" itself seems to be a bit confusing. The background panel controls four things: background-image, background-position, background-repeat, and background-size, but since the FocalPointPicker component controls background-position, it feels easier to understand as it is now.

Therefore, I would lean towards changing the label "Focal Point" to something that better matches the context.

Currently, the label "Focal Point" is used in the Cover block and Media & Text block. In these two cases, I would prefer to change the label as follows:

Media & Text Block

Focal point to Media position

Cover Block

Focal point to Image position

cc @WordPress/gutenberg-design @ramonjd Please let us know your thoughts.

[jasmussen]

I could go either way on this one. On the one hand, I appreciate how focal point seems to work well for the visual below with the drag handle. On the other hand, I'm leaning towards position, since top/left position values are shown right below.

[jameskoster]

'Position' feels more universally recognisable to me.

The prefix 'Media position' is mostly useful in the Media & Text block since 'Position' would be an ambiguous option in the tools panel. But I don't know that we need that prefix elsewhere.

[ramonjd]

Thanks for the PR. I agree the labels should be the same, or similar.

I think "Position" is valid and universal label for instances of the control. I'd argue even terser and more straight forward than "focal point".

It also relates directly to the CSS property it updates (in the case of the cover block object-position) - though the tool does give the impression of setting the image origin.

[richtabor]

Why not update the background image control to use the existing focal point term? Has there been feedback that "Focal point" is not clear? It's certainly clearer than "Position", in my opinion.

[akasunil]

Thank you for the input, everyone. I appreciate the different perspectives on this. I agree that consistency across labels is important for user understanding and ease of use.

"Focal Point" is visually descriptive, it seems to cause some confusion about what it controls. "Position" might simplify user understanding, especially for those who are familiar with CSS properties ( as @ramonjd mentioned ). I agree with @t-hamano suggestions.

let me know your thoughts.

[richtabor]

I don't prefer "Position" for these two reasons:

1. Position is used elsewhere in the UI for setting CSS position, like absolute positioning.

2. Position is less clear than focal point. The ideal behind "focal point" is that you're deciding where the focus is on this image. The "Position" label is indicative of you deciding the position of the focal point. Why abstract further from the actual intent?

[t-hamano]

I noticed that the background image UI is a popover in the latest Gutenberg. In this case, which is better, "Position" or "Focal point"?

[ramonjd]

I noticed that the background image UI is a popover in the latest Gutenberg. In this case, which is better, "Position" or "Focal point"?

I think it should be consistent, whether one or the other. As this PR stands, changing it to Focal point is 👍🏻

Just needs a rebase after #60151 as mentioned above

[t-hamano]

Ok, let's ship this PR 👍