@wordpress/block-library 9.48.0 → 10.0.0

package/src/utils/test/waveform-player.js

@@ -0,0 +1,254 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+import { act, render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { WaveformPlayer } from '../waveform-player';
+import { initWaveformPlayer } from '../waveform-utils';
+
+jest.mock( '../waveform-utils', () => ( {
+	initWaveformPlayer: jest.fn(),
+} ) );
+
+/**
+ * Create a fake player instance that mimics the parts of the waveform
+ * player instance the component manipulates.
+ *
+ * @param {Object}  options Options passed to initWaveformPlayer.
+ * @param {Element} element The element passed to initWaveformPlayer.
+ * @return {Object} The fake player.
+ */
+function createFakePlayer( options, element ) {
+	const titleEl = document.createElement( 'span' );
+	titleEl.textContent = options.title ?? '';
+	// The subtitle and artwork elements only exist when the track had an
+	// artist/image when the player was created, mirroring the library markup.
+	let subtitleEl = null;
+	if ( options.artist ) {
+		subtitleEl = document.createElement( 'span' );
+		subtitleEl.textContent = options.artist;
+	}
+	let artworkEl = null;
+	if ( options.image ) {
+		artworkEl = document.createElement( 'img' );
+		artworkEl.src = options.image;
+	}
+
+	element.append( titleEl );
+	if ( subtitleEl ) {
+		element.append( subtitleEl );
+	}
+	if ( artworkEl ) {
+		element.append( artworkEl );
+	}
+
+	return {
+		instance: { titleEl, subtitleEl, artworkEl },
+		destroy: jest.fn(),
+	};
+}
+
+describe( 'WaveformPlayer', () => {
+	beforeEach( () => {
+		jest.useFakeTimers();
+		initWaveformPlayer.mockImplementation( ( element, options ) =>
+			createFakePlayer( options, element )
+		);
+	} );
+
+	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+		initWaveformPlayer.mockReset();
+	} );
+
+	const baseProps = {
+		src: 'https://example.com/song.mp3',
+		title: 'Original Title',
+		artist: 'Original Artist',
+		image: 'https://example.com/cover.jpg',
+		onEnded: () => {},
+	};
+
+	it( 'initializes the player once with the provided metadata', () => {
+		render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				src: baseProps.src,
+				title: 'Original Title',
+				artist: 'Original Artist',
+				image: 'https://example.com/cover.jpg',
+			} )
+		);
+	} );
+
+	it( 'updates metadata on the live player without recreating it', () => {
+		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				title="New Title"
+				artist="New Artist"
+				image="https://example.com/new.jpg"
+			/>
+		);
+
+		// The player is updated in place, not destroyed and recreated.
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( player.instance.titleEl ).toHaveTextContent( 'New Title' );
+		expect( player.instance.subtitleEl ).toHaveTextContent( 'New Artist' );
+		expect( player.instance.artworkEl ).toHaveAttribute(
+			'src',
+			'https://example.com/new.jpg'
+		);
+	} );
+
+	it( 'recreates the player when the src changes', () => {
+		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				src="https://example.com/other.mp3"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'recreates the player to show an image added to a track that had none', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } image="" />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const firstPlayer = initWaveformPlayer.mock.results[ 0 ].value;
+		// No artwork element exists when the track started without an image.
+		expect( firstPlayer.instance.artworkEl ).toBeNull();
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				image="https://example.com/added.jpg"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( firstPlayer.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		const secondPlayer = initWaveformPlayer.mock.results[ 1 ].value;
+		expect( secondPlayer.instance.artworkEl ).toHaveAttribute(
+			'src',
+			'https://example.com/added.jpg'
+		);
+	} );
+
+	it( 'recreates the player when the image is removed', () => {
+		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender( <WaveformPlayer { ...baseProps } image="" /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		const secondPlayer = initWaveformPlayer.mock.results[ 1 ].value;
+		expect( secondPlayer.instance.artworkEl ).toBeNull();
+	} );
+
+	it( 'updates the player in place to show an artist added to a track that had none', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } artist="" />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const firstPlayer = initWaveformPlayer.mock.results[ 0 ].value;
+		// The editor seeds a hidden subtitle element so artist edits can
+		// update in place.
+		expect( firstPlayer.instance.subtitleEl ).toHaveTextContent( '' );
+		expect( firstPlayer.instance.subtitleEl ).toHaveStyle( {
+			display: 'none',
+		} );
+
+		rerender( <WaveformPlayer { ...baseProps } artist="New Artist" /> );
+
+		expect( firstPlayer.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( firstPlayer.instance.subtitleEl ).toHaveTextContent(
+			'New Artist'
+		);
+		expect( firstPlayer.instance.subtitleEl ).not.toHaveStyle( {
+			display: 'none',
+		} );
+	} );
+
+	it( 'updates the player in place when the artist is removed', () => {
+		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender( <WaveformPlayer { ...baseProps } artist="" /> );
+
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( player.instance.subtitleEl ).toHaveTextContent( '' );
+		expect( player.instance.subtitleEl ).toHaveStyle( {
+			display: 'none',
+		} );
+	} );
+} );

package/src/utils/waveform-player.js

@@ -1,36 +1,103 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
+import { useEffect, useRef } from '@wordpress/element';
+import { useEvent, useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { initWaveformPlayer } from './waveform-utils';
 
+const EMPTY_ARTIST_PLACEHOLDER = '\u00a0';
+
+/**
+ * Update a live waveform player's metadata elements in place.
+ *
+ * The title element always exists, so the title is updated in place. The
+ * subtitle element is seeded during editor player creation, so it can be
+ * updated in place and hidden when the track has no artist. The artwork
+ * element only exists when the track had an image when the player was created,
+ * so its value is updated in place here; adding or removing an image (which
+ * creates or tears down that element) is instead handled by recreating the
+ * player, keyed on the `hasImage` dependency.
+ *
+ * The library's only metadata API is `loadTrack()`, which re-fetches and
+ * re-decodes the audio and regenerates the waveform (resetting playback), so
+ * it's unsuitable for live metadata edits. We instead write to the title,
+ * subtitle, and artwork elements directly, which is what `loadTrack()` itself
+ * does internally for these fields.
+ *
+ * @param {Object} instance        - The waveform player instance.
+ * @param {Object} metadata        - The track metadata.
+ * @param {string} metadata.title  - The track title.
+ * @param {string} metadata.artist - The artist name.
+ * @param {string} metadata.image  - The artwork image URL.
+ */
+function updatePlayerMetadata( instance, { title, artist, image } ) {
+	if ( instance.titleEl ) {
+		instance.titleEl.textContent = title ?? '';
+	}
+	if ( instance.subtitleEl ) {
+		instance.subtitleEl.textContent = artist ?? '';
+		instance.subtitleEl.style.display = artist ? '' : 'none';
+	}
+	if ( instance.artworkEl && image ) {
+		instance.artworkEl.src = image;
+	}
+}
+
 /**
  * A reusable WaveformPlayer component for the block editor.
  *
  * Renders an audio waveform visualization with play/pause controls.
  * Automatically inherits colors from the parent block's text color.
  *
- * @param {Object}   props         - Component props.
- * @param {string}   props.src     - The audio file URL.
- * @param {string}   props.title   - The track title.
- * @param {string}   props.artist  - The artist name.
- * @param {string}   props.image   - The artwork image URL.
- * @param {Function} props.onEnded - Callback when the track finishes playing.
+ * @param {Object}   props               - Component props.
+ * @param {string}   props.src           - The audio file URL.
+ * @param {string}   props.title         - The track title.
+ * @param {string}   props.artist        - The artist name.
+ * @param {string}   props.image         - The artwork image URL.
+ * @param {string}   props.waveformStyle - Waveform style (bars, mirror, line, blocks, dots, seekbar).
+ * @param {Function} props.onEnded       - Callback when the track finishes playing.
  * @return {Element} The WaveformPlayer element.
  */
-export function WaveformPlayer( { src, title, artist, image, onEnded } ) {
-	// Store onEnded in a ref so it doesn't need to be a useRefEffect dependency.
+export function WaveformPlayer( {
+	src,
+	title,
+	artist,
+	image,
+	waveformStyle,
+	onEnded,
+} ) {
+	// Store onEnded in a stable callback so it doesn't need to be a useRefEffect dependency.
 	// The callback changes reference on every render (its dependency chain
 	// includes an unstable array), which would cause useRefEffect to destroy
 	// and recreate the entire player on every re-render, making it disappear
 	// during editor resizes.
-	const onEndedRef = useRef( onEnded );
-	onEndedRef.current = onEnded;
+	const onEndedEvent = useEvent( onEnded );
+	const metadataRef = useRef( { title, artist, image } );
+	const playerRef = useRef();
+
+	// The artwork element only exists when an image was present when the
+	// player was created. Recreate the player when one is added or removed so
+	// that element is created or torn down; value changes to an existing
+	// element are applied in place below.
+	const hasImage = !! image;
+
+	// Keep the freshest metadata available to init() (which runs on a
+	// deferred timeout) and update the live player in place when metadata
+	// changes. Updating in place avoids destroying and recreating the
+	// player, which would flash it on every keystroke while editing a
+	// track's title or artist.
+	useEffect( () => {
+		metadataRef.current = { title, artist, image };
+
+		const instance = playerRef.current?.instance;
+		if ( instance ) {
+			updatePlayerMetadata( instance, { title, artist, image } );
+		}
+	}, [ title, artist, image ] );
 
 	const ref = useRefEffect(
 		( element ) => {
@@ -45,13 +112,17 @@ export function WaveformPlayer( { src, title, artist, image, onEnded } ) {
 				if ( cancelled ) {
 					return;
 				}
-				const { destroy } = initWaveformPlayer( element, {
+				const player = initWaveformPlayer( element, {
 					src,
-					title,
-					artist,
-					image,
-					onEnded: () => onEndedRef.current?.(),
+					...metadataRef.current,
+					waveformStyle,
+					artist:
+						metadataRef.current.artist || EMPTY_ARTIST_PLACEHOLDER,
+					onEnded: () => onEndedEvent?.(),
 				} );
+				playerRef.current = player;
+				updatePlayerMetadata( player.instance, metadataRef.current );
+				const { destroy } = player;
 				playerDestroy = destroy;
 			}
 
@@ -67,10 +138,11 @@ export function WaveformPlayer( { src, title, artist, image, onEnded } ) {
 			return () => {
 				cancelled = true;
 				clearTimeout( timeoutId );
+				playerRef.current = undefined;
 				playerDestroy?.();
 			};
 		},
-		[ src, title, artist, image ]
+		[ onEndedEvent, src, waveformStyle, hasImage ]
 	);
 
 	return <div ref={ ref } className="wp-block-playlist__waveform-player" />;

package/src/utils/waveform-utils.js

@@ -51,6 +51,7 @@ export function getWaveformColors( element ) {
  * @param {string} options.progressColor - The progress indicator color.
  * @param {string} options.buttonColor   - The play button color.
  * @param {number} options.height        - The waveform height in pixels.
+ * @param {string} options.waveformStyle - The visualization style (bars, mirror, line, blocks, dots, seekbar).
  * @return {Element} The configured container element.
  */
 export function createWaveformContainer( {
@@ -62,12 +63,13 @@ export function createWaveformContainer( {
 	progressColor,
 	buttonColor,
 	height = DEFAULT_WAVEFORM_HEIGHT,
+	waveformStyle = 'bars',
 } ) {
 	const container = document.createElement( 'div' );
 	container.setAttribute( 'data-waveform-player', '' );
 	container.setAttribute( 'data-url', url );
 	container.setAttribute( 'data-height', String( height ) );
-	container.setAttribute( 'data-waveform-style', 'bars' );
+	container.setAttribute( 'data-waveform-style', waveformStyle );
 	container.setAttribute( 'data-waveform-color', waveformColor );
 	container.setAttribute( 'data-progress-color', progressColor );
 	container.setAttribute( 'data-button-color', buttonColor );
@@ -158,20 +160,21 @@ export function logPlayError( error ) {
  * This is the shared core logic used by both the React component (editor)
  * and the Interactivity API (frontend).
  *
- * @param {Element}  element          - The container element (must be in DOM).
- * @param {Object}   options          - Configuration options.
- * @param {string}   options.src      - The audio file URL.
- * @param {string}   options.title    - The track title.
- * @param {string}   options.artist   - The artist name.
- * @param {string}   options.image    - The artwork image URL.
- * @param {boolean}  options.autoPlay - Whether to auto-play when ready.
- * @param {Function} options.onEnded  - Callback when track ends.
- * @param {Object}   options.labels   - Translated button labels.
+ * @param {Element}  element               - The container element (must be in DOM).
+ * @param {Object}   options               - Configuration options.
+ * @param {string}   options.src           - The audio file URL.
+ * @param {string}   options.title         - The track title.
+ * @param {string}   options.artist        - The artist name.
+ * @param {string}   options.image         - The artwork image URL.
+ * @param {boolean}  options.autoPlay      - Whether to auto-play when ready.
+ * @param {Function} options.onEnded       - Callback when track ends.
+ * @param {Object}   options.labels        - Translated button labels.
+ * @param {string}   options.waveformStyle - Waveform style (bars, mirror, line, blocks, dots, seekbar).
  * @return {Object} Object with instance, container, and destroy function.
  */
 export function initWaveformPlayer(
 	element,
-	{ src, title, artist, image, autoPlay, onEnded, labels }
+	{ src, title, artist, image, autoPlay, onEnded, labels, waveformStyle }
 ) {
 	// Get colors from computed styles.
 	const { textColor, waveformColor, progressColor } =
@@ -186,6 +189,7 @@ export function initWaveformPlayer(
 		waveformColor,
 		progressColor,
 		buttonColor: textColor,
+		waveformStyle,
 	} );
 	element.appendChild( container );
 

package/src/verse/README.md

@@ -0,0 +1,58 @@
+# Poetry
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Insert poetry. Use special spacing formats. Or quote song lyrics.
+
+- **Name:** `core/verse`
+- **Category:** [text](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-text/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Static](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (saved in post content)
+- **Keywords:** `poetry`, `poem`, `verse`, `stanza`, `song`, `lyrics`
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `content` | `rich-text` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `rich-text`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `pre`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
+  - `backgroundImage`: `true`
+  - `backgroundSize`: `true`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+  - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
+  - `minHeight`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+  - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `margin`: `true`
+  - `padding`: `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Block Markup
+
+This is a [**static block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). The markup is saved directly in the post content.
+
+```html
+<!-- wp:core/verse -->
+<pre class="wp-block-verse">A <em>verse</em>…<br>And more!</pre>
+<!-- /wp:core/verse -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/verse/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/verse/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/video/README.md

@@ -0,0 +1,58 @@
+# Video
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Embed a video from your media library or upload a new one.
+
+- **Name:** `core/video`
+- **Category:** [media](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements)
+- **Keywords:** `movie`
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `autoplay` | `boolean` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `autoplay` |
+| `caption` | `rich-text` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `rich-text`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `figcaption`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `controls` | `boolean` | `true` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `controls` |
+| `id` | `number` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `loop` | `boolean` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `loop` |
+| `muted` | `boolean` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `muted` |
+| `poster` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `poster` |
+| `preload` | `string` | `"metadata"` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `preload` |
+| `blob` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `local` |
+| `src` | `string` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `src`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `playsInline` | `boolean` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `attribute`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `video`. [HTML attr](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#attribute-source): `playsinline` |
+| `tracks` | `array` | `[]` | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `margin`: `true`
+  - `padding`: `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Block Markup
+
+This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
+
+```html
+<!-- wp:core/video -->
+<figure class="wp-block-video"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video><figcaption class="wp-element-caption">My video</figcaption></figure>
+<!-- /wp:core/video -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/video/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/video/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/video/edit-common-settings.js

@@ -7,7 +7,7 @@ import {
 	SelectControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useMemo, useCallback, Platform } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 const options = [
 	{ value: 'auto', label: __( 'Auto' ) },
@@ -23,12 +23,9 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 		'Autoplay may cause usability issues for some users.'
 	);
 
-	const getAutoplayHelp = Platform.select( {
-		web: useCallback( ( checked ) => {
-			return checked ? autoPlayHelpText : null;
-		}, [] ),
-		native: autoPlayHelpText,
-	} );
+	const getAutoplayHelp = useCallback( ( checked ) => {
+		return checked ? autoPlayHelpText : null;
+	}, [] );
 
 	const toggleFactory = useMemo( () => {
 		const toggleAttribute = ( attribute ) => {

package/src/video/edit.js

@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import { isBlobURL } from '@wordpress/blob';
 import {
-	Disabled,
 	Spinner,
 	Placeholder,
 	__experimentalToolsPanel as ToolsPanel,
@@ -235,21 +234,15 @@ function VideoEdit( {
 				</ToolsPanel>
 			</InspectorControls>
 			<figure { ...blockProps }>
-				{ /*
-                Disable the video tag if the block is not selected
-                so the user clicking on it won't play the
-                video when the controls are enabled.
-            */ }
-				<Disabled isDisabled={ ! isSingleSelected }>
-					<video
-						controls={ controls }
-						poster={ poster }
-						src={ src || temporaryURL }
-						ref={ videoPlayer }
-					>
-						<Tracks tracks={ tracks } />
-					</video>
-				</Disabled>
+				<video
+					controls={ controls }
+					inert={ ! isSingleSelected ? 'true' : undefined }
+					poster={ poster }
+					src={ src || temporaryURL }
+					ref={ videoPlayer }
+				>
+					<Tracks tracks={ tracks } />
+				</video>
 				{ !! temporaryURL && <Spinner /> }
 				<Caption
 					attributes={ attributes }