WordPress · fluiddot · Jun 3, 2021 · Dec 1, 2020 · Dec 1, 2020 · Dec 1, 2020
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
@@ -26,6 +26,9 @@ import {
 	mobile,
 	globe,
 } from '@wordpress/icons';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
 
 export const MEDIA_TYPE_IMAGE = 'image';
 export const MEDIA_TYPE_VIDEO = 'video';
@@ -35,6 +38,9 @@ export const MEDIA_TYPE_ANY = 'any';
 export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
 export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
+export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
+
+const URL_MEDIA_SOURCE = 'URL';
 
 const PICKER_OPENING_DELAY = 200;
 
@@ -115,8 +121,8 @@ export class MediaUpload extends Component {
 		};
 
 		const urlSource = {
-			id: 'URL',
-			value: 'URL',
+			id: URL_MEDIA_SOURCE,
+			value: URL_MEDIA_SOURCE,
 			label: __( 'Insert from URL' ),
 			types: [ MEDIA_TYPE_AUDIO ],
 			icon: globe,
@@ -137,15 +143,27 @@ export class MediaUpload extends Component {
 		const {
 			allowedTypes = [],
 			__experimentalOnlyMediaLibrary,
+			isAudioBlockMediaUploadEnabled,
 		} = this.props;
 
 		return this.getAllSources()
 			.filter( ( source ) => {
-				return __experimentalOnlyMediaLibrary
-					? source.mediaLibrary
-					: allowedTypes.some( ( allowedType ) =>
+				if ( __experimentalOnlyMediaLibrary ) {
+					return source.mediaLibrary;
+				} else if (
+					allowedTypes.every(
+						( allowedType ) =>
+							allowedType === MEDIA_TYPE_AUDIO &&
 							source.types.includes( allowedType )
-					  );
+					) &&
+					source.id !== URL_MEDIA_SOURCE
+				) {
+					return isAudioBlockMediaUploadEnabled === true;
+				}
+
+				return allowedTypes.some( ( allowedType ) =>
+					source.types.includes( allowedType )
+				);
 			} )
 			.map( ( source ) => {
 				return {
@@ -185,7 +203,7 @@ export class MediaUpload extends Component {
 			multiple = false,
 		} = this.props;
 
-		if ( value === 'URL' ) {
+		if ( value === URL_MEDIA_SOURCE ) {
 			prompt(
 				__( 'Type a URL' ), // title
 				undefined, // message
@@ -286,4 +304,12 @@ export class MediaUpload extends Component {
 	}
 }
 
-export default MediaUpload;
+export default compose( [
+	withSelect( ( select ) => {
+		return {
+			isAudioBlockMediaUploadEnabled:
+				select( blockEditorStore ).getSettings( 'capabilities' )
+					.isAudioBlockMediaUploadEnabled === true,
+		};
+	} ),
+] )( MediaUpload );
diff --git a/packages/block-editor/src/components/media-upload/test/index.native.js b/packages/block-editor/src/components/media-upload/test/index.native.js
@@ -19,8 +19,10 @@ import {
 	MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
 	OPTION_TAKE_VIDEO,
 	OPTION_TAKE_PHOTO,
+	OPTION_INSERT_FROM_URL,
 } from '../index';
 
 const MEDIA_URL = 'http://host.media.type';
@@ -73,6 +75,7 @@ describe( 'MediaUpload component', () => {
 		};
 		expectOptionForMediaType( MEDIA_TYPE_IMAGE, OPTION_TAKE_PHOTO );
 		expectOptionForMediaType( MEDIA_TYPE_VIDEO, OPTION_TAKE_VIDEO );
+		expectOptionForMediaType( MEDIA_TYPE_AUDIO, OPTION_INSERT_FROM_URL );
 	} );
 
 	const expectMediaPickerForOption = (

diff --git a/...id/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/...id/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
@@ -9,7 +9,7 @@ data class GutenbergProps @JvmOverloads constructor(
     val enableXPosts: Boolean,
     val enableUnsupportedBlockEditor: Boolean,
     val canEnableUnsupportedBlockEditor: Boolean,
-    val enableAudioBlock: Boolean,
+    val isAudioBlockMediaUploadEnabled: Boolean,
     val enableReusableBlock: Boolean,
     val localeSlug: String,
     val postType: String,
@@ -45,7 +45,7 @@ data class GutenbergProps @JvmOverloads constructor(
         putBoolean(PROP_CAPABILITIES_MEDIAFILES_COLLECTION_BLOCK, enableMediaFilesCollectionBlocks)
         putBoolean(PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, enableUnsupportedBlockEditor)
         putBoolean(PROP_CAPABILITIES_CAN_ENABLE_UNSUPPORTED_BLOCK_EDITOR, canEnableUnsupportedBlockEditor)
-        putBoolean(PROP_CAPABILITIES_AUDIO_BLOCK, enableAudioBlock)
+        putBoolean(PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED, isAudioBlockMediaUploadEnabled)
         putBoolean(PROP_CAPABILITIES_REUSABLE_BLOCK, enableReusableBlock)
         putBoolean(PROP_CAPABILITIES_CAN_VIEW_EDITOR_ONBOARDING, canViewEditorOnboarding)
     }
@@ -75,7 +75,7 @@ data class GutenbergProps @JvmOverloads constructor(
         const val PROP_CAPABILITIES_XPOSTS = "xposts"
         const val PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR = "unsupportedBlockEditor"
         const val PROP_CAPABILITIES_CAN_ENABLE_UNSUPPORTED_BLOCK_EDITOR = "canEnableUnsupportedBlockEditor"
-        const val PROP_CAPABILITIES_AUDIO_BLOCK = "audioBlock"
+        const val PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED = "isAudioBlockMediaUploadEnabled"
         const val PROP_CAPABILITIES_REUSABLE_BLOCK = "reusableBlock"
         const val PROP_CAPABILITIES_CAN_VIEW_EDITOR_ONBOARDING = "canViewEditorOnboarding"
     }

diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -22,7 +22,7 @@ public enum Capabilities: String {
     case xposts
     case unsupportedBlockEditor
     case canEnableUnsupportedBlockEditor
-    case audioBlock
+    case isAudioBlockMediaUploadEnabled
     case reusableBlock
     case canViewEditorOnboarding
 }

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -15,6 +15,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [*] Audio block: Add Insert from URL functionality. [#27817]
 -   [*] The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. [#30885]
 -   [***] Enable reusable block only in WP.com sites [#31744]
+-   [***] Audio block now available on WP.com sites on the free plan. [#31966]
 
 ## 1.53.1
 

diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
@@ -31,8 +31,8 @@ protected Bundle getLaunchOptions() {
                 capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_MENTIONS, true);
                 capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_XPOSTS, true);
                 capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_AUDIO_BLOCK, true);
                 capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_REUSABLE_BLOCK, false);
+                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED, true);
                 capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_CAN_VIEW_EDITOR_ONBOARDING, false);
                 bundle.putBundle(GutenbergProps.PROP_CAPABILITIES, capabilities);
                 return bundle;

diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -286,7 +286,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
             .unsupportedBlockEditor: unsupportedBlockEnabled,
             .canEnableUnsupportedBlockEditor: unsupportedBlockCanBeActivated,
             .mediaFilesCollectionBlock: true,
-            .audioBlock: true,
+            .isAudioBlockMediaUploadEnabled: true,
             .reusableBlock: false,
             .canViewEditorOnboarding: false
         ]

diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
@@ -18,7 +18,6 @@ import {
 	validateThemeColors,
 	validateThemeGradients,
 } from '@wordpress/block-editor';
-import { dispatch } from '@wordpress/data';
 import { unregisterBlockType } from '@wordpress/blocks';
 
 const reactNativeSetup = () => {
@@ -107,21 +106,6 @@ const setupInitHooks = () => {
 			};
 		}
 	);
-
-	wpHooks.addAction(
-		'native.render',
-		'core/react-native-editor',
-		( props ) => {
-			const isAudioBlockEnabled =
-				props.capabilities && props.capabilities.audioBlock;
-
-			if ( isAudioBlockEnabled === true ) {
-				dispatch( 'core/edit-post' ).showBlockTypes( [ 'core/audio' ] );
-			} else {
-				dispatch( 'core/edit-post' ).hideBlockTypes( [ 'core/audio' ] );
-			}
-		}
-	);
 };
 
 let blocksRegistered = false;