fix: wp icon focus issue

[up1512001]

Fixes #62672

What?

• fix the focus issue with the wp icon in the editor.

Why?

#62672

How?

• moved the focus from before to the a tag itself.

Screenshots or screencast

Screen.Recording.2024-06-19.at.15.56.08.mov

[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: up1512001 <up1512001@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: afercia <afercia@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.

[bgardner]

Confirming this works as expected!

[talldan]

@up1512001 Thanks for another contribution! Something that's helpful when creating PRs is to type 'Fixes #62672' in the PR description, that links the PR to the issue it solves, sets it in progress and will automatically close the issue when the PR's merged:
https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests

I've gone ahead and added it to this PR's description.

[talldan]

It does look better than trunk:

But the focus style in this PR still looks too thin compared to a normal focus style:

I think because of the css scale that's applied to the anchor element as mentioned in the issue.

Maybe the scale implemented here:

gutenberg/packages/edit-site/src/components/site-hub/index.js

Line 66 in 58932ed

transform: 'scale(0.5)',

Could be implemented on a div around the <SiteIcon> instead? Or applied tothe SiteIcon itself. I imagine there's also a transition style somewhere that would have to be updated too.

I've added @youknowriad as a reviewer, as the change seems to have come from #61579.

[afercia]

It does look better than trunk:

Yes it deoes look better but i'm not sure it fully solves the issue. Ideally, the focus style should be the same blue outline used for all buttons.

I believe this issue comes from #61579 Cc @youknowriad
While I understand the need for simplification on that PR, the CSS 'scale' should not be applied to the button itself because it impacts also the focus style. That said, I would eveb be in favor of entirely removing the animation because I'm not sure it adds great value. Also, as mentioned in that PR the view-transition CSS API is only fully supported in Chrome and I'm not sure WordPress should use unsupported features not even as progressive ehnancement.

[youknowriad]

Can we try to check that this doesn't impact the focus styles ... on the full screen editor. These styles might be shared between both and the expectations different. So I just want to make sure we don't regress elsewhere.

[up1512001]

I have updated the shadow and it's looking like this please let me know if it's ok.
cc: @youknowriad @afercia

Screen.Recording.2024-06-24.at.22.31.35.mov

[youknowriad]

The focus styles in the full editor looks broken to me. (See top left)

[afercia]

It is worth reminding that the whole mechanism of the WP logo / site icon is being discussed in #57813.

To me, the current implementation especially in the Site Editor is unnecessarily complicated and it's mainly done this way only to add an animation that doesn't add great value. Also, as mentioned in #57813, when a site icon is set, this link is used to 'preview' the site icon which, in my opinion, is just confusing. Given the complexity of this implementation, even a simple thing like making sure there is correct focus style becomes complicated. I'd rather see a drastic simplification:

• remove the animaiton
• remove the site icon preview

[up1512001]

The focus styles in the full editor looks broken to me. (See top left)

@youknowriad I have added Fix for this can you please verify it?

[youknowriad]

Maybe I'm not testing properly but I think the focus style is meant to be like that in the editor

In my testing, the blue outline is not visible at the moment in editor mode.

[up1512001]

@youknowriad This is how it's looking now.

Screen.Recording.2024-07-16.at.22.35.05.mov

[youknowriad]

LGTM

I'd appreciate a second review. cc @jameskoster @jasmussen

[jasmussen]

Seems to fix the regression 👍 👍

[ellatrix]

@talldan is this really important to land in a minor release?

[talldan]

@ellatrix I agree it is minor, but also seems low risk and affects quite a prominent part of the site editor.

I don't really mind, feel free to remove the label.

[ellatrix]

It's fine to leave it there's high confidence.

[ellatrix]

Manually backported in 9c34196