Skip to content

Commit 84dae9e

Browse files
im3dabasiaim3dabasiajoedolsonadamsilversteinMamaduka
authored and
widoz
committed
Cover: Don't autoplay embedded background videos when reduced motion is preferred (WordPress#83452)
* Cover: Declare Interactivity API usage in block supports , A11y: Add a prefersReducedMotion helper * Cover: Add a view module that decides whether an embed may autoplay * Cover: Don't autoplay an embedded background video when reduced motion is preferred * Cover: Render the autoplaying embed source by default --------- Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: joedolson <joedolson@git.wordpress.org> Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
1 parent 4600d2c commit 84dae9e

12 files changed

Lines changed: 123 additions & 17 deletions

File tree

‎docs/reference-guides/core-blocks/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ Add an image or video with a text overlay.
303303

304304
- **Name:** [core/cover](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/core-block-cover/)
305305
- **Category:** [media](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/)
306-
- **Supports:** align, allowedBlocks, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), filter (duotone), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
306+
- **Supports:** align, allowedBlocks, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), filter (duotone), interactivity (clientNavigation, interactive), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
307307
- **Attributes:** allowedVideoProviders, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, poster, sizeSlug, tagName, templateLock, url, useFeaturedImage
308308

309309
## Details

‎packages/a11y/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### New Features
6+
7+
- Add `prefersReducedMotion`, which reports whether the user has asked their operating system to reduce motion. It is the counterpart to the `useReducedMotion` hook in `@wordpress/compose`, for code that runs outside React such as block view scripts ([#83452](https://github.com/WordPress/gutenberg/pull/83452)).
8+
59
## 4.56.0 (2026-09-23)
610

711
## 4.55.0 (2026-09-10)

‎packages/a11y/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,26 @@ _This package assumes that your code will run in an **ES2015+** environment. If
1616

1717
<!-- START TOKEN(Autogenerated API docs) -->
1818

19+
### prefersReducedMotion
20+
21+
Whether the user has asked their operating system to reduce motion.
22+
23+
This is the counterpart to the `useReducedMotion` hook in `@wordpress/compose`, for code that runs outside React such as block view scripts. It reads the preference once; callers that need to react to it changing should watch the media query themselves.
24+
25+
_Usage_
26+
27+
```js
28+
import { prefersReducedMotion } from '@wordpress/a11y';
29+
30+
if ( ! prefersReducedMotion() ) {
31+
video.play();
32+
}
33+
```
34+
35+
_Returns_
36+
37+
- `boolean`: Whether reduced motion is preferred.
38+
1939
### setup
2040

2141
Create the live regions.

‎packages/a11y/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import addContainer from './script/add-container';
33
import addIntroText from './script/add-intro-text';
44

55
export { speak } from './shared/index';
6+
export { prefersReducedMotion } from './shared/prefers-reduced-motion';
67

78
/**
89
* Create the live regions.

‎packages/a11y/src/module/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { speak } from '../shared/index';
2+
export { prefersReducedMotion } from '../shared/prefers-reduced-motion';
23

34
/**
45
* This no-op function is exported to provide compatibility with the `wp-a11y` Script.

‎packages/a11y/src/shared/prefers-reduced-motion.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* Whether the user has asked their operating system to reduce motion.
3+
*
4+
* This is the counterpart to the `useReducedMotion` hook in
5+
* `@wordpress/compose`, for code that runs outside React such as block view
6+
* scripts. It reads the preference once; callers that need to react to it
7+
* changing should watch the media query themselves.
8+
*
9+
* @example
10+
* ```js
11+
* import { prefersReducedMotion } from '@wordpress/a11y';
12+
*
13+
* if ( ! prefersReducedMotion() ) {
14+
* video.play();
15+
* }
16+
* ```
17+
*
18+
* @return Whether reduced motion is preferred.
19+
*/
20+
export function prefersReducedMotion(): boolean {
21+
return (
22+
window.matchMedia?.( '(prefers-reduced-motion: reduce)' )?.matches ===
23+
true
24+
);
25+
}

‎packages/block-library/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
### Enhancements
66

7+
- Cover: Don't autoplay an embedded background video on the front end when the visitor prefers reduced motion. A new view module swaps the iframe source for one without the autoplay parameters ([#83452](https://github.com/WordPress/gutenberg/pull/83452)).
78
- Columns: Remove the column count slider from the block settings ([#83262](https://github.com/WordPress/gutenberg/pull/83262)).
89
- Media & Text: Lower the specificity of the content area's default padding so themes can override it, including through the block's custom CSS in `theme.json` ([#83563](https://github.com/WordPress/gutenberg/pull/83563)).
910
- Gallery: Add an "Order by" sorting control to the static gallery mode, and consolidate sorting control for static and dynamic modes in the Settings panel ([#83438](https://github.com/WordPress/gutenberg/pull/83438)).

‎packages/block-library/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"wpScript": true,
4444
"wpScriptModuleExports": {
4545
"./accordion/view": "./build-module/accordion/view.mjs",
46+
"./cover/view": "./build-module/cover/view.mjs",
4647
"./file/view": "./build-module/file/view.mjs",
4748
"./image/view": "./build-module/image/view.mjs",
4849
"./navigation/view": "./build-module/navigation/view.mjs",

‎packages/block-library/src/cover/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
160160
- [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `false`
161161
- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
162162
- `clientNavigation`: `true`
163+
- `interactive`: `true`
163164
- [`filter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter):
164165
- [`duotone`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#filter-duotone): `true`
165166
- [`allowedBlocks`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#allowedblocks): `true`

‎packages/block-library/src/cover/block.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,8 @@
153153
"allowJustification": false
154154
},
155155
"interactivity": {
156-
"clientNavigation": true
156+
"clientNavigation": true,
157+
"interactive": true
157158
},
158159
"filter": {
159160
"duotone": true

0 commit comments

Comments
 (0)