diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index d87c0f1d2f8357..543fa79283e9d3 100644 --- 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 index 222e8e1b78f4bc..a6f5b5f0753de7 100644 --- 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/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt index a12fbfd9520cae..129a0fd0437ffb 100644 --- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt +++ b/packages/react-native-bridge/android/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 index 879af5ebd62422..f89563063e63a5 100644 --- 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 index ff04abc4e8fefa..ba64ae5fa2417e 100644 --- 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 index e4a0f9d7af2cc0..393389df925d46 100644 --- 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 index 1e0880c98487e4..08b4123d7579bd 100644 --- 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 index 6198c043a3ab83..bb97e34af5f590 100644 --- 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;