[RNMobile] Editor Onboarding: "The Basics" help section - Details Part 1

packages/editor/src/components/editor-help/add-blocks.native.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
+
+const AddBlocks = () => {
+	return (
+		<View style={ styles.helpDetailContainer }>
+			<HelpDetailImage source={ require( './images/add-blocks.png' ) } />
+			<HelpDetailBodyText
+				text={ __(
+					'Add a new block at any time by tapping on the + icon in the toolbar on the bottom left. '
+				) }
+			/>
+			<HelpDetailBodyText
+				text={ __(
+					'Once you become familiar with the names of different blocks, you can add a block by typing a forward slash followed by the block name — for example, /image or /heading.'
+				) }
+			/>
+		</View>
+	);
+};
+
+export default AddBlocks;

packages/editor/src/components/editor-help/customize-blocks.native.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
+
+const CustomizeBlocks = () => {
+	return (
+		<View style={ styles.helpDetailContainer }>
+			<HelpDetailImage
+				source={ require( './images/customize-blocks.png' ) }
+			/>
+			<HelpDetailBodyText
+				text={ __(
+					'Each block has its own settings. To find them, click on a block. Its settings will appear on the toolbar at the bottom of the screen.'
+				) }
+			/>
+			<HelpDetailBodyText
+				text={ __(
+					'Some blocks have additional settings. Tap the settings icon on the bottom right of the block to view more options.'
+				) }
+			/>
+		</View>
+	);
+};
+
+export default CustomizeBlocks;

packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js

@@ -1,21 +1,21 @@
 /**
  * External dependencies
  */
-import { View, Text } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { BottomSheet } from '@wordpress/components';
+import { useNavigation } from '@react-navigation/native';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-const HelpDetailNavigationScreen = ( { name } ) => {
+const HelpDetailNavigationScreen = ( { name, content } ) => {
 	const navigation = useNavigation();
 
 	const goBack = () => {
@@ -29,7 +29,7 @@ const HelpDetailNavigationScreen = ( { name } ) => {
 				leftButtonOnPress={ goBack }
 			/>
 			<View style={ styles.separator } />
-			<Text>Amanda todo</Text>
+			{ content }
 		</BottomSheet.NavigationScreen>
 	);
 };

packages/editor/src/components/editor-help/help-topic-row.native.js

@@ -1,58 +1,32 @@
 /**
  * External dependencies
  */
-import { View, Text } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { BottomSheet, TextControl, Icon } from '@wordpress/components';
+import { TextControl, Icon } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
 const HelpTopicRow = ( { label, icon } ) => {
-	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
 
 	const openSubSheet = () => {
-		setShowSubSheet( true );
-		navigation.navigate( BottomSheet.SubSheet.screenName );
-	};
-
-	const goBack = () => {
-		navigation.goBack();
-		setShowSubSheet( false );
+		navigation.navigate( label );
 	};
 
 	return (
-		<BottomSheet.SubSheet
-			navigationButton={
-				<TextControl
-					separatorType="leftMargin"
-					customActionButton
-					leftAlign
-					onPress={ openSubSheet }
-					label={ label }
-					icon={ icon }
-				>
-					<Icon icon={ chevronRight } />
-				</TextControl>
-			}
-			showSheet={ showSubSheet }
+		<TextControl
+			separatorType="leftMargin"
+			customActionButton
+			leftAlign
+			onPress={ openSubSheet }
+			label={ label }
+			icon={ icon }
 		>
-			<BottomSheet.NavigationHeader
-				screen={ label }
-				leftButtonOnPress={ goBack }
-			/>
-			<View style={ styles.separator } />
-			<Text>Amanda Todo</Text>
-		</BottomSheet.SubSheet>
+			<Icon icon={ chevronRight } />
+		</TextControl>
 	);
 };
 

packages/editor/src/components/editor-help/index.native.js

@@ -7,7 +7,6 @@ import { View, Text } from 'react-native';
  * WordPress dependencies
  */
 import { BottomSheet, PanelBody } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import {
@@ -22,14 +21,32 @@ import {
  * Internal dependencies
  */
 import styles from './style.scss';
-import HelpTopicRow from './help-topic-row.native.js';
+import HelpDetailNavigationScreen from './help-detail-navigation-screen';
+import HelpTopicRow from './help-topic-row';
+import IntroToBlocks from './intro-to-blocks';
+import AddBlocks from './add-blocks';
+import MoveBlocks from './move-blocks';
+import RemoveBlocks from './remove-blocks';
+import CustomizeBlocks from './customize-blocks';
 
 const HELP_TOPICS = [
-	{ label: __( 'What is a block?' ), icon: helpFilled },
-	{ label: __( 'Add blocks' ), icon: plusCircleFilled },
-	{ label: __( 'Move blocks' ), icon: alignJustifyAlt },
-	{ label: __( 'Remove blocks' ), icon: trashFilled },
-	{ label: __( 'Customize blocks' ), icon: cogAlt },
+	{
+		label: __( 'What is a block?' ),
+		icon: helpFilled,
+		view: <IntroToBlocks />,
+	},
+	{
+		label: __( 'Add blocks' ),
+		icon: plusCircleFilled,
+		view: <AddBlocks />,
+	},
+	{ label: __( 'Move blocks' ), icon: alignJustifyAlt, view: <MoveBlocks /> },
+	{ label: __( 'Remove blocks' ), icon: trashFilled, view: <RemoveBlocks /> },
+	{
+		label: __( 'Customize blocks' ),
+		icon: cogAlt,
+		view: <CustomizeBlocks />,
+	},
 ];
 
 function EditorHelpTopics( { isVisible, onClose } ) {
@@ -38,13 +55,13 @@ function EditorHelpTopics( { isVisible, onClose } ) {
 		styles.bottomSheetHeaderTitleDark
 	);
 
-	return useMemo( () => (
+	return (
 		<BottomSheet
 			isVisible={ isVisible }
 			onClose={ onClose }
-			contentStyle={ styles.contentContainer }
 			hideHeader
 			hasNavigation
+			contentStyle={ styles.contentContainer }
 		>
 			<BottomSheet.NavigationContainer animate main>
 				<BottomSheet.NavigationScreen name={ __( 'Topics' ) }>
@@ -74,14 +91,18 @@ function EditorHelpTopics( { isVisible, onClose } ) {
 					</PanelBody>
 				</BottomSheet.NavigationScreen>
 				{ /* Print out help detail screens */ }
-				<BottomSheet.NavigationScreen
-					name={ BottomSheet.SubSheet.screenName }
-				>
-					<BottomSheet.SubSheet.Slot />
-				</BottomSheet.NavigationScreen>
+				{ HELP_TOPICS.map( ( topic ) => {
+					return (
+						<HelpDetailNavigationScreen
+							key={ topic.label }
+							name={ topic.label }
+							content={ topic.view }
+						/>
+					);
+				} ) }
 			</BottomSheet.NavigationContainer>
 		</BottomSheet>
-	) );
+	);
 }
 
 export default EditorHelpTopics;

packages/editor/src/components/editor-help/intro-to-blocks.native.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import {
+	HelpDetailBodyText,
+	HelpDetailSectionHeadingText,
+	HelpDetailImage,
+} from './view-sections';
+
+const IntroToBlocks = () => {
+	return (
+		<View style={ styles.helpDetailContainer }>
+			<HelpDetailImage
+				source={ require( './images/intro-blocks-1.png' ) }
+			/>
+			<Text style={ styles.helpDetailTitle }>
+				{ __( 'Welcome to the world of blocks' ) }
+			</Text>
+			<HelpDetailBodyText
+				text={ __(
+					'Blocks are pieces of content that you can insert, rearrange, and style without needing to know how to code. Blocks are an easy and modern way for you to create beautiful layouts.'
+				) }
+			/>
+			<HelpDetailSectionHeadingText text={ __( 'Rich text editing' ) } />
+			<HelpDetailBodyText
+				text={ __(
+					'Blocks allow you to focus on writing your content, knowing that all the formatting tools you need are there to help you get your message across.'
+				) }
+			/>
+			<HelpDetailImage
+				source={ require( './images/intro-blocks-2.png' ) }
+			/>
+			<HelpDetailSectionHeadingText text={ __( 'Embed media' ) } />
+			<HelpDetailBodyText
+				text={ __(
+					'Make your content stand out by adding images, gifs, videos, and embedded media to your pages.'
+				) }
+			/>
+			<HelpDetailImage
+				source={ require( './images/intro-blocks-3.png' ) }
+			/>
+			<HelpDetailSectionHeadingText text={ __( 'Build layouts' ) } />
+			<HelpDetailBodyText
+				text={ __(
+					'Arrange your content into columns, add Call to Action buttons, and overlay images with text.'
+				) }
+			/>
+			<HelpDetailImage
+				source={ require( './images/intro-blocks-4.png' ) }
+			/>
+			<HelpDetailBodyText
+				text={ __(
+					'Give it a try by adding a few blocks to your post or page!'
+				) }
+			/>
+		</View>
+	);
+};
+
+export default IntroToBlocks;

packages/editor/src/components/editor-help/move-blocks.native.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
+
+const MoveBlocks = () => {
+	return (
+		<View style={ styles.helpDetailContainer }>
+			<HelpDetailImage source={ require( './images/move-blocks.png' ) } />
+			<HelpDetailBodyText
+				text={ __(
+					'You can rearrange blocks by tapping a block and then tapping the up and down arrows that appear on the bottom left side of the block to move it above or below other blocks.'
+				) }
+			/>
+		</View>
+	);
+};
+
+export default MoveBlocks;