[RNMobile] Audio block capability now enables/disables media upload's…

… media sources (#31966) * Basics of Audio block working * Add audio support to MediaUpload * Add handling of file uploads and replace * WPMediaLibrary support for Audio block * Avoid removing media info on error state * Linting * Added an AUDIO file to the test requestMediaPickFromMediaLibrary func * Fixed typo in ToolbarButton of Audio Block. * Removed auto help behavior present on web that's not used on mobile. * [Android] Wired the click of the Audio Media Library button. * Added Audio media options for choosing audio file locally. * [RNMobile] Audio Block: Proper caption field (#27689) * Add alert prompt to insert from URL * Set entered URL in audio block attributes * initial integration with react native prompt. * updated prompt lib. * updated commit hash of prompt lib. * Updated package-lock.json. * Added RNPromptPackage to Glue Code. * fixed merge conflicts between the edit.native.js files of the branches * added onSelectURL to the media-upload component * added onSelectURL to the media-placeholder * updated onSelectURL support with notice and URL validation * sync package-lock.json * updated package-lock.json * updated package-lock.json * updated react-native-prompt-android setup due to binary dep changes. * sync package-lock.json * Integrated RNPromptPackage with the glue code. * sync package-lock.json * package-lock.json fix * sync package-lock.json * Added the globe icon to the Insert from URL source.Only shown on Android * Extract filename from all URL types and optimized extension logic. * Removed hook that would show/hide the audio block. It is not needed. * Only show the Insert from URL option when the audio block cap is false * Added changelog entry for the Audio block URL prompt on free sites * Removed exclamation mark. * Reduced onPress -> onSelectURL logic since the parameters match. * Added entry to CHANGELOG.md * simplified isAudioBlockEnabled's usage of getSettings. * exported the Insert from URL option so that the test can be utilize it. * Added test that verifies the Insert From URL option with the audio type * isAudioBlockMediaUploadEnabled now represents the Audio block capability * placed the audio block capability in a single filter callback function * Added release notes entry under unreleased. * added logic that verifies that the source being enabled supports audio * formatted code changes. * Changed the order of the props to match the order throughout the file. * Fixed order of ios capabilities * Fix indent issues on Gutenberg props Co-authored-by: eToledo <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]> Co-authored-by: Carlos Garcia <[email protected]>
WordPress · Jun 3, 2021 · 7e360e4 · 7e360e4
1 parent 696d64b
commit 7e360e4
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 30 deletions.
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
@@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label  to i
 ## Unreleased
 -   [*] Gallery block - Fix gallery images caption text formatting [#32351]
 -   [*] Image block: "Set as featured" button within image block settings. (Android only) [#31705]
+-   [***] Audio block now available on WP.com sites on the free plan. [#31966]
 
 ## 1.54.0
 -   [***] Slash inserter [#29772]

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;