Animated backend site logo. (instead of the W logo seen one can see the site logo.)

[paaljoachim]

Description

Hovering over the backend Site logo (when the W is not in use) I have noticed it becomes animated.
Like so:

It would be very helpful if the site logo automatically fills out the square it is in and does not animate.
The animation is kinda disturbing.

Step-by-step reproduction instructions

Add a Site logo, and see if it happens to become animated when hovering over it.
Hmm I am sorry but I am having a difficult time figuring out how the site logo got there in the first place.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.9.
Gutenberg plugin 12.5.3
Twenty Twenty Two. (I have switched between various themes.)

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[courtneyr-dev]

Tested in 6 alpha and Gutenberg 12.6.20220207. Animation remains the same. I'm not a fan of this animation. I wonder if there are accessibility implications. Is the goal of animation to show on:hover? If so, what else could achieve that effect more subtly?

[carlomanf]

Is this the site logo or the site icon? If logo, then it might explain why I was having trouble over at #38555.

[paaljoachim]

Hey @carlomanf Actually I am not sure if it is the site logo or the site icon.... I tried adding a site logo and then a site icon to another test site and was not able to get it to show instead of the W.

[courtneyr-dev]

These are site icons, set in Customizer before switching to a block theme. However the animation is still there. Changing Site Logo didn't change my site icon.

[t-hamano]

I don't know which version of gutenberg is implemented, but I was able to reflect the site logo and site icon on the block editor by following the steps below.

• Activate the latest version of the gutenberg plugin.
• Insert the site logo block and set an image.
• Enable "Use as site icon" in the block options.

As for the mouse-over animation, it seems to have been done as part of #33132 to improve interaction.

But for some reason, it only animates when an "original site logo" is used.

gutenberg/packages/edit-post/src/components/header/fullscreen-mode-close/index.js

Lines 68 to 77 in 39649d5

	if ( siteIconUrl ) {
	buttonIcon = (
	<motion.img
	variants={ ! disableMotion && effect }
	alt={ __( 'Site Icon' ) }
	className="edit-post-fullscreen-mode-close_site-icon"
	src={ siteIconUrl }
	/>
	);
	}

I like the animation, but I think the presence or absence of animation should be consistent for both the default logo and the original logo.

[carlomanf]

I tried adding a site logo and then a site icon to another test site and was not able to get it to show instead of the W.

@paaljoachim Was the gutenberg plugin activated or deactivated?

[paaljoachim]

Retesting.
WP 5.9
Twenty Twenty-One
Gutenberg plugin not activated.
Readded a site icon.

Switched to Twenty Twenty Two site editing theme.
Went to a page and post and did not see the site icon but noticed the W logo.

Activated the Gutenberg plugin. 12.5.3.
This time the site icon showed up.

The site icon should show up but it should not be animated.

---

Adding a site icon when FSE theme is activated is done through the Site Logo sidebar options. Add a site logo, add an image and click the toggle "Use as site icon" the W (static) is then switched with the new site icon (animated). It looks like one can not turn off "Use as site icon" to get the default W back.

[richtabor]

I agree, the animation doesn't seem 100% fitting, maybe just an opacity over, or border color change around the site icon there.

[jameskoster]

Yeah the animation does seem arbitrary and feel a bit distracting.

[paaljoachim]

Can we (for now anyway) just remove the animation?
As it is not consistent with the non custom W site icon. Which does not have an animation.
If for whatever reason it feels like a good idea to have an animation for backend site icons then it can be brought up again at a later time.

Backport to WP 5.9.1?
@Mamaduka

[Mamaduka]

Personally, I don't think this needs to be included in a minor release. We can fix in plugin and ship with 6.0.

/cc-ing @mtias, since I know he worked on animations recently.

[Mamaduka]

Created PR (#38702) in case this gets picked up for 5.9.1.

[paaljoachim]

I added the Backport to minor label just in case we can get it into 5.9.1.

[Mamaduka]

We should add a label to the PR.

[mtias]

Animations can already be suspended if "reduced motion" is in place.

[paaljoachim]

Hey @mtias Matias.

I believe "reduced motion" is this: https://a11y-101.com/development/reduced-motion

I will assume from what you are saying is that if one is disturbed by the animated site icon and can not wait for WP 6.0 then one will need to manually turn on reduced motion.

[jasmussen]

All animation are disabled automatically if you set your browser or operating system setting to reduce motion. If you're seeing animation, that means you have it on today.

[paaljoachim]

Gotcha thanks for clearing that up Joen.

If there still are disagreements regarding the animation. Perhaps we can lessen it substantially and also add a much lighter animation to the W site icon? To keep a consistent feel to the site icon on hover.

[mtias]

Yes, sorry, was just bringing it up for the accessibility concern. We can definitely tweak and improve things! Animation finesse can be very subjective.

[paaljoachim]

Thanks Matias!

Just thought I would add the following feedback from the Accessibility Slack channel.
https://wordpress.slack.com/archives/C02RP4X03/p1644311084295679
@joedolson replied the following:
"From the accessibility standpoint, I'd call it a totally unnecessary animation that could be annoying, as well as making the function of that icon more confusing."

In general it feels like we need an animation discussion.
What should be or not be animated and how these elements should be animated.

[paaljoachim]

Joen made a much smoother and a little more subtitle animation.
I left a comment here: #38783 (comment)