@wordpress/block-library 9.47.0 → 9.48.1

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/audio/edit.native.js

@@ -1,250 +0,0 @@
-/**
- * External dependencies
- */
-import { TouchableWithoutFeedback } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { View } from '@wordpress/primitives';
-import {
-	PanelBody,
-	SelectControl,
-	ToggleControl,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
-import {
-	AudioPlayer,
-	BlockCaption,
-	BlockControls,
-	BlockIcon,
-	InspectorControls,
-	MediaPlaceholder,
-	MediaUpload,
-	MediaUploadProgress,
-	RichText,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { audio as icon, replace } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-import { isURL, getProtocol } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const ALLOWED_MEDIA_TYPES = [ 'audio' ];
-
-function AudioEdit( {
-	attributes,
-	setAttributes,
-	isSelected,
-	insertBlocksAfter,
-	onFocus,
-	onBlur,
-	clientId,
-} ) {
-	const { id, autoplay, loop, preload, src } = attributes;
-
-	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
-
-	const onFileChange = ( { mediaId, mediaUrl } ) => {
-		setAttributes( { id: mediaId, src: mediaUrl } );
-	};
-
-	const { wasBlockJustInserted } = useSelect( ( select ) => ( {
-		wasBlockJustInserted: select( blockEditorStore ).wasBlockJustInserted(
-			clientId,
-			'inserter_menu'
-		),
-	} ) );
-
-	const { createErrorNotice } = useDispatch( noticesStore );
-
-	function toggleAttribute( attribute ) {
-		return ( newValue ) => {
-			setAttributes( { [ attribute ]: newValue } );
-		};
-	}
-
-	function onSelectURL( newSrc ) {
-		if ( newSrc !== src ) {
-			if ( isURL( newSrc ) && /^https?:/.test( getProtocol( newSrc ) ) ) {
-				setAttributes( { src: newSrc, id: undefined } );
-			} else {
-				createErrorNotice( __( 'Invalid URL. Audio file not found.' ) );
-			}
-		}
-	}
-
-	function onSelectAudio( media ) {
-		if ( ! media || ! media.url ) {
-			// In this case there was an error and we should continue in the editing state
-			// previous attributes should be removed because they may be temporary blob urls.
-			setAttributes( { src: undefined, id: undefined } );
-			return;
-		}
-		// Sets the block's attribute and updates the edit component from the
-		// selected media, then switches off the editing UI.
-		setAttributes( { src: media.url, id: media.id } );
-	}
-
-	function onAudioPress() {
-		setIsCaptionSelected( false );
-	}
-
-	function onFocusCaption() {
-		if ( ! isCaptionSelected ) {
-			setIsCaptionSelected( true );
-		}
-	}
-
-	if ( ! src ) {
-		return (
-			<View>
-				<MediaPlaceholder
-					icon={ <BlockIcon icon={ icon } /> }
-					onSelect={ onSelectAudio }
-					onSelectURL={ onSelectURL }
-					accept="audio/*"
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					value={ attributes }
-					onFocus={ onFocus }
-					autoOpenMediaUpload={ isSelected && wasBlockJustInserted }
-				/>
-			</View>
-		);
-	}
-
-	function getBlockControls( open ) {
-		return (
-			<BlockControls>
-				<ToolbarGroup>
-					<ToolbarButton
-						title={ __( 'Replace audio' ) }
-						icon={ replace }
-						onClick={ open }
-					/>
-				</ToolbarGroup>
-			</BlockControls>
-		);
-	}
-
-	function getBlockUI( open, getMediaOptions ) {
-		return (
-			<MediaUploadProgress
-				mediaId={ id }
-				onFinishMediaUploadWithSuccess={ onFileChange }
-				onMediaUploadStateReset={ onFileChange }
-				containerStyle={ styles.progressContainer }
-				progressBarStyle={ styles.progressBar }
-				spinnerStyle={ styles.spinner }
-				renderContent={ ( {
-					isUploadInProgress,
-					isUploadFailed,
-					retryMessage,
-				} ) => {
-					return (
-						<>
-							{ ! isCaptionSelected &&
-								! isUploadInProgress &&
-								getBlockControls( open ) }
-							{ getMediaOptions() }
-							<AudioPlayer
-								isUploadInProgress={ isUploadInProgress }
-								isUploadFailed={ isUploadFailed }
-								retryMessage={ retryMessage }
-								attributes={ attributes }
-								isSelected={ isSelected }
-							/>
-						</>
-					);
-				} }
-			/>
-		);
-	}
-
-	return (
-		<TouchableWithoutFeedback
-			accessible={ ! isSelected }
-			onPress={ onAudioPress }
-			disabled={ ! isSelected }
-		>
-			<View>
-				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<ToggleControl
-							label={ __( 'Autoplay' ) }
-							onChange={ toggleAttribute( 'autoplay' ) }
-							checked={ autoplay }
-							help={ __(
-								'Autoplay may cause usability issues for some users.'
-							) }
-						/>
-						<ToggleControl
-							label={ __( 'Loop' ) }
-							onChange={ toggleAttribute( 'loop' ) }
-							checked={ loop }
-						/>
-						<SelectControl
-							label={ _x(
-								'Preload',
-								'noun; Audio block parameter'
-							) }
-							value={ preload || '' }
-							// `undefined` is required for the preload attribute to be unset.
-							onChange={ ( value ) =>
-								setAttributes( {
-									preload: value || undefined,
-								} )
-							}
-							options={ [
-								{ value: '', label: __( 'Browser default' ) },
-								{ value: 'auto', label: __( 'Auto' ) },
-								{ value: 'metadata', label: __( 'Metadata' ) },
-								{
-									value: 'none',
-									label: _x( 'None', '"Preload" value' ),
-								},
-							] }
-							hideCancelButton
-						/>
-					</PanelBody>
-				</InspectorControls>
-				<MediaUpload
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					isReplacingMedia
-					onSelect={ onSelectAudio }
-					onSelectURL={ onSelectURL }
-					render={ ( { open, getMediaOptions } ) => {
-						return getBlockUI( open, getMediaOptions );
-					} }
-				/>
-				<BlockCaption
-					accessible
-					accessibilityLabelCreator={ ( caption ) =>
-						RichText.isEmpty( caption )
-							? /* translators: accessibility text. Empty Audio caption. */
-							  __( 'Audio caption. Empty' )
-							: sprintf(
-									/* translators: accessibility text. %s: Audio caption. */
-									__( 'Audio caption. %s' ),
-									caption
-							  )
-					}
-					clientId={ clientId }
-					isSelected={ isCaptionSelected }
-					onFocus={ onFocusCaption }
-					onBlur={ onBlur }
-					insertBlocksAfter={ insertBlocksAfter }
-				/>
-			</View>
-		</TouchableWithoutFeedback>
-	);
-}
-export default AudioEdit;

package/src/audio/style.native.scss

@@ -1,13 +0,0 @@
-.progressContainer {
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.progressBar {
-	height: 4px;
-	margin-bottom: -4px;
-}
-
-.spinner {
-	height: 4px;
-}