[RNMobile] Audio block I - x-platform audio block test

packages/block-editor/src/components/index.native.js

@@ -26,6 +26,7 @@ export {
 	default as MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
 } from './media-upload';
 export { default as MediaUploadProgress } from './media-upload-progress';
@@ -37,6 +38,7 @@ export { default as Caption } from './caption';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseEditorFeature } from './use-editor-feature';
+export { default as MediaReplaceFlow } from './media-replace-flow';
 
 export {
 	BottomSheetSettings,

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -12,6 +12,7 @@ import {
 	MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
 } from '@wordpress/block-editor';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
@@ -65,6 +66,7 @@ function MediaPlaceholder( props ) {
 	const isOneType = allowedTypes.length === 1;
 	const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
 	const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
+	const isAudio = isOneType && allowedTypes.includes( MEDIA_TYPE_AUDIO );
 
 	let placeholderTitle = labels.title;
 	if ( placeholderTitle === undefined ) {
@@ -73,6 +75,8 @@ function MediaPlaceholder( props ) {
 			placeholderTitle = __( 'Image' );
 		} else if ( isVideo ) {
 			placeholderTitle = __( 'Video' );
+		} else if ( isAudio ) {
+			placeholderTitle = __( 'Audio' );
 		}
 	}
 
@@ -82,6 +86,8 @@ function MediaPlaceholder( props ) {
 			instructions = __( 'ADD IMAGE' );
 		} else if ( isVideo ) {
 			instructions = __( 'ADD VIDEO' );
+		} else if ( isAudio ) {
+			instructions = __( 'ADD AUDIO' );
 		} else {
 			instructions = __( 'ADD IMAGE OR VIDEO' );
 		}
@@ -92,6 +98,8 @@ function MediaPlaceholder( props ) {
 		accessibilityHint = __( 'Double tap to select an image' );
 	} else if ( isVideo ) {
 		accessibilityHint = __( 'Double tap to select a video' );
+	} else if ( isAudio ) {
+		accessibilityHint = __( 'Double tap to select aa audio file' );
 	}
 
 	const emptyStateTitleStyle = getStylesFromColorScheme(

packages/block-editor/src/components/media-replace-flow/index.native.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { replace } from '@wordpress/icons';
+
+const MediaReplaceFlow = () => {
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				title={ __( 'Edit audio' ) }
+				icon={ replace }
+				onClick={ () => {} }
+			/>
+		</ToolbarGroup>
+	);
+};
+
+export default MediaReplaceFlow;

packages/block-editor/src/components/media-upload/index.native.js

@@ -23,6 +23,7 @@ import {
 
 export const MEDIA_TYPE_IMAGE = 'image';
 export const MEDIA_TYPE_VIDEO = 'video';
+export const MEDIA_TYPE_AUDIO = 'audio';
 export const MEDIA_TYPE_ANY = 'any';
 
 export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
@@ -166,6 +167,7 @@ export class MediaUpload extends React.Component {
 		const isOneType = allowedTypes.length === 1;
 		const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
 		const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
+		const isAudio = isOneType && allowedTypes.includes( MEDIA_TYPE_AUDIO );
 		const isAnyType = isOneType && allowedTypes.includes( MEDIA_TYPE_ANY );
 
 		const isImageOrVideo =
@@ -194,8 +196,18 @@ export class MediaUpload extends React.Component {
 			} else {
 				pickerTitle = __( 'Choose image or video' );
 			}
+		} else if ( isAudio ) {
+			if ( isReplacingMedia ) {
+				pickerTitle = __( 'Replace audio' );
+			} else {
+				pickerTitle = __( 'Choose audio' );
+			}
 		} else if ( isAnyType ) {
-			pickerTitle = __( 'Choose file' );
+			if ( isReplacingMedia ) {
+				pickerTitle = __( 'Replace file' );
+			} else {
+				pickerTitle = __( 'Choose file' );
+			}
 		}
 
 		const getMediaOptions = () => (

packages/block-library/src/audio/audio-player.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+
+export function AudioPlayer( { src } ) {
+	/*
+		Disable the audio tag so the user clicking on it won't play the
+		file or change the position slider when the controls are enabled.
+	*/
+	return (
+		<Disabled>
+			<audio controls="controls" src={ src } />
+		</Disabled>
+	);
+}

packages/block-library/src/audio/audio-player.native.js

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import { Text } from 'react-native';
+
+export function AudioPlayer() {
+	return <Text>Audio Player goes here</Text>;
+}

packages/block-library/src/audio/edit.js

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { getBlobByURL, isBlobURL } from '@wordpress/blob';
+import { View, Figure } from '@wordpress/primitives';
 import {
-	Disabled,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
@@ -28,17 +28,19 @@ import { createBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
+import { AudioPlayer } from './audio-player';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
-function AudioEdit( {
+export function AudioEdit( {
 	attributes,
 	noticeOperations,
 	setAttributes,
 	onReplace,
 	isSelected,
 	noticeUI,
 	insertBlocksAfter,
+	onFocus,
 } ) {
 	const { id, autoplay, caption, loop, preload, src } = attributes;
 	const blockProps = useBlockProps();
@@ -116,7 +118,7 @@ function AudioEdit( {
 	}
 	if ( ! src ) {
 		return (
-			<div { ...blockProps }>
+			<View { ...blockProps }>
 				<MediaPlaceholder
 					icon={ <BlockIcon icon={ icon } /> }
 					onSelect={ onSelectAudio }
@@ -126,8 +128,9 @@ function AudioEdit( {
 					value={ attributes }
 					notices={ noticeUI }
 					onError={ onUploadError }
+					onFocus={ onFocus }
 				/>
-			</div>
+			</View>
 		);
 	}
 
@@ -175,14 +178,8 @@ function AudioEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<figure { ...blockProps }>
-				{ /*
-					Disable the audio tag so the user clicking on it won't play the
-					file or change the position slider when the controls are enabled.
-				*/ }
-				<Disabled>
-					<audio controls="controls" src={ src } />
-				</Disabled>
+			<Figure { ...blockProps }>
+				<AudioPlayer src={ src } />
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
@@ -197,7 +194,7 @@ function AudioEdit( {
 						}
 					/>
 				) }
-			</figure>
+			</Figure>
 		</>
 	);
 }

packages/block-library/src/index.native.js

@@ -224,6 +224,7 @@ export const registerCoreBlocks = () => {
 		socialLinks,
 		pullquote,
 		devOnly( file ),
+		devOnly( audio ),
 	].forEach( registerBlock );
 
 	registerBlockVariations( socialLink );

packages/primitives/src/figure/index.js

@@ -0,0 +1 @@
+export const Figure = 'figure';

packages/primitives/src/figure/index.native.js

@@ -0,0 +1,4 @@
+/**
+ * External dependencies
+ */
+export { View as Figure } from 'react-native';

packages/primitives/src/index.js

@@ -2,3 +2,4 @@ export * from './svg';
 export * from './horizontal-rule';
 export * from './block-quotation';
 export * from './view';
+export * from './figure';