Enhance `PreviewBlock` for compatibility with `prefers-reduced-motion`

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 https://github.com/google/site-kit-wp/blob/9b5ae6ca9951f94f09872493317fe5fb665d7871/assets/sass/components/global/_googlesitekit-preview-block.scss#L35

@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]

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!

[wpdarren]

QA Update: ✅

Verified:

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

https://user-images.githubusercontent.com/73545194/173573359-cdb5b5f1-6635-49dd-8594-1699806c9616.mp4

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