Enhance PreviewBlock for compatibility with prefers-reduced-motion

[aaemnnosttv]

Feature Description

When components are waiting on data to display data, we fill the component with various preview blocks to make a skeleton of the component. This helps avoid layout shifts once the data becomes available and we can render the "real" contents.

The PreviewBlock component uses a CSS animation to create a slow pulsing of color to indicate a loading state.

Currently, we don't style this component any differently for users that prefer reduced motion. While the motion of the component is rather tame to begin with, it may be good to go with an even less motion or no-motion variant under these conditions.

However, one problem exists with the current implementation where some themes implement their own styles for prefers-reduced-motion using media queries, such as TwentyTwenty, and TwentyTwenty One.

For TwentyTwenty specifically, the preview blocks are are invisible when prefers-reduced-motion is enabled due to CSS styles that set the animation-duration to 0s !important. Because it's coming from the theme, we have no control over what these styles may be, so right now this only affects our admin bar integration but it would be good to enforce a consistent style for Site Kit components that accounts for prefers-reduced-motion in the same way in wp-admin and in the front end.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• If a user has prefers-reduced-motion enabled, the PreviewBlock component should have a fixed background gradient (probably using the two animation colours, eg background-color: rgba($c-black, 0.05); and background-color: rgba($c-black, 0.15);) instead of relying on the animation here to make the background gradient appear.

Implementation Brief

• Add the following CSS to

  site-kit-wp/assets/sass/components/global/_googlesitekit-preview-block.scss

  Line 35 in 9b5ae6c

  &__wrapper {

@media (prefers-reduced-motion: reduce) {
	animation: none;
	background-image: linear-gradient(150deg, rgba($c-black, 0.05), rgba($c-black, 0.15));
}

Test Coverage

• No tests needed.

QA Brief

• Enable "reduced motion" in your browser or OS (in Chrome, open the developer tools, type Command + Shift + P, then search for/enable the "enable/emulate CSS prefers-reduced-motion" option).
• Go to a Site Kit Dashboard with no cached content. (You may need to slow down request speed to observer the preview blocks)
• All preview blocks should not animate and instead show a static gradient.

This gradient can also be seen by enabling "reduced motion" and visiting a story with a PreviewBlock: https://google.github.io/site-kit-wp/storybook/pull/5333/?path=/story/analytics-module-components-dashboard-all-traffic-widget--loading

Changelog entry

• Enhance PreviewBlock for compatibility with prefers-reduced-motion.

[tofumatt]

Hah, that's a bit of a brute-force approach the themes are taking, but fair play.

We should assign a fixed background colour only in a @media (prefers-reduced-motion) selector… we might want to audit any other animations and make sure themes or other overrides won't break them too, just-in-case.

[aaemnnosttv]

We should assign a fixed background colour only in a @media (prefers-reduced-motion) selector…

@tofumatt maybe a linear gradient would be a nicer touch than a solid color? That way we can use the same two colors as well.

we might want to audit any other animations and make sure themes or other overrides won't break them too, just-in-case.

Good call, although I don't think we have any other animations on the front end where a theme would conflict. It would probably be a good idea thought to revisit the others in wp-admin though (I think surveys are the only thing that uses them). That's probably for another issue though.

[tofumatt]

@tofumatt maybe a linear gradient would be a nicer touch than a solid color? That way we can use the same two colors as well.

Oh, fair point. Yeah, let's do that. 😄

I think this is the only one that would be affected by the theme for now, true. Okay, then this should cover the ACs for this 👍🏻

[aaemnnosttv]

@tofumatt IB looks good to me, just one question: do we not also need to clear/unset the animation css on the preview block?

[tofumatt]

Oh, whoops, yes, we totally should. I just forgot because I was testing with a theme that disabled it when I had reduce-motion off so in my proof-of-concept CSS it wasn't there. Thanks!

[aaemnnosttv]

IB ✅

[wpdarren]

QA Update: ✅

Verified:

• Based on instructions on QAB, all preview blocks do not animate and instead show a static gradient.

loading.mp4

QA Note for future reference: I had to make the change in MacOS for this accessibility change.