[RNMobile] Add capabilities to force only Core blocks and control Sup…

…port section (#46215) * Add new Gutenberg capabilities to iOS * Add conditional rendering for help section * Add new Gutenberg capabilities to Android * Update react-native-editor changelog * Pass block name to missing_block_detail filter hook * Not render missing block detail if not present * Add showSupport prop to EditorHelpTopics
WordPress · Dec 29, 2022 · 4faba61 · 4faba61 · github-actions · Dec 29, 2022
1 parent 8af389f
commit 4faba61
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 32 deletions.
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
@@ -151,7 +151,8 @@ export class UnsupportedBlockEdit extends Component {
 		const infoTitle = sprintf( titleFormat, blockTitle );
 		const missingBlockDetail = applyFilters(
 			'native.missing_block_detail',
-			__( 'We are working hard to add more blocks with each release.' )
+			__( 'We are working hard to add more blocks with each release.' ),
+			blockName
 		);
 		const missingBlockActionButton = applyFilters(
 			'native.missing_block_action_button',
@@ -205,11 +206,17 @@ export class UnsupportedBlockEdit extends Component {
 					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
 						{ infoTitle }
 					</Text>
-					{ isEditableInUnsupportedBlockEditor && (
-						<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
-							{ missingBlockDetail }
-						</Text>
-					) }
+					{ isEditableInUnsupportedBlockEditor &&
+						missingBlockDetail && (
+							<Text
+								style={ [
+									infoTextStyle,
+									infoDescriptionStyle,
+								] }
+							>
+								{ missingBlockDetail }
+							</Text>
+						) }
 				</View>
 				{ ( isUnsupportedBlockEditorSupported ||
 					canEnableUnsupportedBlockEditor ) &&

diff --git a/packages/editor/src/components/editor-help/index.native.js b/packages/editor/src/components/editor-help/index.native.js
@@ -57,7 +57,7 @@ const HELP_TOPICS = [
 	},
 ];
 
-function EditorHelpTopics( { close, isVisible, onClose } ) {
+function EditorHelpTopics( { close, isVisible, onClose, showSupport } ) {
 	const { postType } = useSelect( ( select ) => ( {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
@@ -67,6 +67,20 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			? __( 'How to edit your page' )
 			: __( 'How to edit your post' );
 
+	const supportSection = (
+		<>
+			<HelpSectionTitle>{ __( 'Get support' ) }</HelpSectionTitle>
+			<HelpGetSupportButton
+				title={ __( 'Contact support' ) }
+				onPress={ requestContactCustomerSupport }
+			/>
+			<HelpGetSupportButton
+				title={ __( 'More support options' ) }
+				onPress={ requestGotoCustomerSupportOptions }
+			/>
+		</>
+	);
+
 	return (
 		<BottomSheet
 			isVisible={ isVisible }
@@ -153,31 +167,8 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 														);
 													}
 												) }
-												{
-													<HelpSectionTitle>
-														{ __( 'Get support' ) }
-													</HelpSectionTitle>
-												}
-												{
-													<HelpGetSupportButton
-														title={ __(
-															'Contact support'
-														) }
-														onPress={
-															requestContactCustomerSupport
-														}
-													/>
-												}
-												{
-													<HelpGetSupportButton
-														title={ __(
-															'More support options'
-														) }
-														onPress={
-															requestGotoCustomerSupportOptions
-														}
-													/>
-												}
+												{ showSupport &&
+													supportSection }
 											</PanelBody>
 										</ScrollView>
 									);

diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js
@@ -338,6 +338,7 @@ class NativeEditorProvider extends Component {
 					isVisible={ this.state.isHelpVisible }
 					onClose={ () => this.setState( { isHelpVisible: false } ) }
 					close={ () => this.setState( { isHelpVisible: false } ) }
+					showSupport={ capabilities?.supportSection === true }
 				/>
 			</>
 		);

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
@@ -16,6 +16,8 @@ data class GutenbergProps @JvmOverloads constructor(
     val enableMentions: Boolean,
     val enableXPosts: Boolean,
     val enableUnsupportedBlockEditor: Boolean,
+    val enableSupportSection: Boolean,
+    val enableOnlyCoreBlocks: Boolean,
     val canEnableUnsupportedBlockEditor: Boolean,
     val isAudioBlockMediaUploadEnabled: Boolean,
     val shouldUseFastImage: Boolean,
@@ -76,6 +78,8 @@ data class GutenbergProps @JvmOverloads constructor(
         putBoolean(PROP_CAPABILITIES_INSTAGRAM_EMBED_BLOCK, enableInstagramEmbed)
         putBoolean(PROP_CAPABILITIES_LOOM_EMBED_BLOCK, enableLoomEmbed)
         putBoolean(PROP_CAPABILITIES_SMARTFRAME_EMBED_BLOCK, enableSmartframeEmbed)
+        putBoolean(PROP_CAPABILITIES_SUPPORT_SECTION, enableSupportSection)
+        putBoolean(PROP_CAPABILITIES_ONLY_CORE_BLOCKS, enableOnlyCoreBlocks)
     }
 
     companion object {
@@ -119,6 +123,8 @@ data class GutenbergProps @JvmOverloads constructor(
         const val PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED = "isAudioBlockMediaUploadEnabled"
         const val PROP_CAPABILITIES_SHOULD_USE_FASTIMAGE = "shouldUseFastImage"
         const val PROP_CAPABILITIES_REUSABLE_BLOCK = "reusableBlock"
+        const val PROP_CAPABILITIES_SUPPORT_SECTION = "supportSection"
+        const val PROP_CAPABILITIES_ONLY_CORE_BLOCKS = "onlyCoreBlocks"
 
         /**
          * Android converts some new language codes to older, deprecated ones, to preserve

diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -33,6 +33,8 @@ public enum Capabilities: String {
     case loomEmbed
     case smartframeEmbed
     case shouldUseFastImage
+    case supportSection
+    case onlyCoreBlocks
 }
 
 /// Wrapper for single block data

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Add capabilities to force only Core blocks and control Support section [#46215]
 
 ## 1.86.1
 -   [*] Block Actions Menu - Fix block title regression and adds integration tests [#46699]

diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -328,6 +328,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
             .instagramEmbed: true,
             .loomEmbed: true,
             .smartframeEmbed: true,
+            .supportSection: true
         ]
     }