[RNMobile] Enable reusable block only in WP.com sites

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

@@ -250,7 +250,7 @@ export const registerCoreBlocks = () => {
 		pullquote,
 		file,
 		audio,
-		devOnly( reusableBlock ),
+		reusableBlock,
 		search,
 		devOnly( embed ),
 	].forEach( registerBlock );

packages/editor/src/components/provider/index.native.js

@@ -1,6 +1,8 @@
 /**
  * External dependencies
  */
+import memize from 'memize';
+
 /**
  * WordPress dependencies
  */
@@ -70,6 +72,15 @@ class NativeEditorProvider extends Component {
 			this.post.type,
 			this.post
 		);
+		this.getEditorSettings = memize(
+			( settings, capabilities ) => ( {
+				...settings,
+				capabilities,
+			} ),
+			{
+				maxSize: 1,
+			}
+		);
 	}
 
 	componentDidMount() {
@@ -267,11 +278,18 @@ class NativeEditorProvider extends Component {
 		const {
 			children,
 			post, // eslint-disable-line no-unused-vars
+			capabilities,
+			settings,
 			...props
 		} = this.props;
+		const editorSettings = this.getEditorSettings( settings, capabilities );
 
 		return (
-			<EditorProvider post={ this.post } { ...props }>
+			<EditorProvider
+				post={ this.post }
+				settings={ editorSettings }
+				{ ...props }
+			>
 				{ children }
 			</EditorProvider>
 		);

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -38,19 +38,18 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		const { canUserUseUnfilteredHTML, isPostTitleSelected } = select(
 			editorStore
 		);
+		const isWeb = Platform.OS === 'web';
 		const { canUser } = select( coreStore );
 
 		return {
 			canUseUnfilteredHTML: canUserUseUnfilteredHTML(),
-			reusableBlocks: select( coreStore ).getEntityRecords(
-				'postType',
-				'wp_block',
-				/**
-				 * Unbounded queries are not supported on native so as a workaround, we set per_page with the maximum value that native version can handle.
-				 * Related issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/2661
-				 */
-				{ per_page: Platform.select( { web: -1, native: 100 } ) }
-			),
+			reusableBlocks: isWeb
+				? select( coreStore ).getEntityRecords(
+						'postType',
+						'wp_block',
+						{ per_page: -1 }
+				  )
+				: [], // Reusable blocks are fetched in the native version of this hook.
 			hasUploadPermissions: defaultTo(
 				canUser( 'create', 'media' ),
 				true

packages/editor/src/components/provider/use-block-editor-settings.native.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import useBlockEditorSettings from './use-block-editor-settings.js';
+
+function useNativeBlockEditorSettings( settings, hasTemplate ) {
+	const capabilities = settings.capabilities ?? {};
+	const editorSettings = useBlockEditorSettings( settings, hasTemplate );
+
+	const supportReusableBlock = capabilities.reusableBlock === true;
+	const { reusableBlocks } = useSelect(
+		( select ) => ( {
+			reusableBlocks: supportReusableBlock
+				? select( coreStore ).getEntityRecords(
+						'postType',
+						'wp_block',
+						// Unbounded queries are not supported on native so as a workaround, we set per_page with the maximum value that native version can handle.
+						// Related issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/2661
+						{ per_page: 100 }
+				  )
+				: [],
+		} ),
+		[ supportReusableBlock ]
+	);
+
+	return useMemo(
+		() => ( {
+			...editorSettings,
+			__experimentalReusableBlocks: reusableBlocks,
+		} ),
+		[ reusableBlocks ]
+	);
+}
+
+export default useNativeBlockEditorSettings;

packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt

@@ -10,6 +10,7 @@ data class GutenbergProps @JvmOverloads constructor(
     val enableUnsupportedBlockEditor: Boolean,
     val canEnableUnsupportedBlockEditor: Boolean,
     val enableAudioBlock: Boolean,
+    val enableReusableBlock: Boolean,
     val localeSlug: String,
     val postType: String,
     val featuredImageId: Int,
@@ -45,6 +46,7 @@ data class GutenbergProps @JvmOverloads constructor(
         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_REUSABLE_BLOCK, enableReusableBlock)
         putBoolean(PROP_CAPABILITIES_CAN_VIEW_EDITOR_ONBOARDING, canViewEditorOnboarding)
     }
 
@@ -74,6 +76,7 @@ data class GutenbergProps @JvmOverloads constructor(
         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_REUSABLE_BLOCK = "reusableBlock"
         const val PROP_CAPABILITIES_CAN_VIEW_EDITOR_ONBOARDING = "canViewEditorOnboarding"
     }
 }

packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift

@@ -23,6 +23,7 @@ public enum Capabilities: String {
     case unsupportedBlockEditor
     case canEnableUnsupportedBlockEditor
     case audioBlock
+    case reusableBlock
     case canViewEditorOnboarding
 }
 

packages/react-native-editor/CHANGELOG.md

@@ -10,28 +10,19 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
--   [***] Slash inserter 
 
+-   [***] Slash inserter [#29772]
 -   [*] Audio block: Add Insert from URL functionality. [#27817]
+-   [*] Fix missing title for some unsupported blocks [#31743]
+-   [*] 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]
 
 ## 1.53.0
 
 -   [*] Bottom-sheet: Add custom header [#30291]
 -   [*] Fixes color picker rendering bug when scrolling [#30994]
 -   [*] Add enableCaching param to fetch request on Android [#31186]
 -   [***] Add reusable blocks to the inserter menu. [#28495]
--   [*] The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. [#30885]
-
-## 1.52.2
-
--   [*] Disabled featured image banner on iOS. [#31681]
--   [*] Fix missing title for some unsupported blocks [#31743]
-
-## 1.52.1
-
--   [*] Fixes for the generated localized strings files.
-
-## 1.52.0
 
 ## 1.52.2
 

packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java

@@ -32,6 +32,7 @@ protected Bundle getLaunchOptions() {
                 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_CAN_VIEW_EDITOR_ONBOARDING, false);
                 bundle.putBundle(GutenbergProps.PROP_CAPABILITIES, capabilities);
                 return bundle;

packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift

@@ -287,6 +287,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
             .canEnableUnsupportedBlockEditor: unsupportedBlockCanBeActivated,
             .mediaFilesCollectionBlock: true,
             .audioBlock: true,
+            .reusableBlock: false,
             .canViewEditorOnboarding: false
         ]
     }

packages/react-native-editor/src/index.js

@@ -19,6 +19,7 @@ import {
 	validateThemeGradients,
 } from '@wordpress/block-editor';
 import { dispatch } from '@wordpress/data';
+import { unregisterBlockType } from '@wordpress/blocks';
 
 const reactNativeSetup = () => {
 	// Disable warnings as they disrupt the user experience in dev mode
@@ -56,6 +57,11 @@ const setupInitHooks = () => {
 		'core/react-native-editor',
 		( props ) => {
 			setupLocale( props.locale, props.translations );
+
+			const capabilities = props.capabilities ?? {};
+			if ( capabilities.reusableBlock !== true ) {
+				unregisterBlockType( 'core/block' );
+			}
 		}
 	);