[RNMobile] Editor Onboarding: "The Basics" help section - Details Par…

…t 1 (#33790)

* Add help menu option to iOS demo app

* Add basic help topics bottom sheet

* Add help option to Android demo app

* Add new help topics icons

* Add help topics to main help bottom sheet

* Remove unused imports

* Optimized new SVG images using https://jakearchibald.github.io/svgomg/

* Add navigation to help detail subsheet

* Add react-native and react-navigation to package.json per lint

* Fix lint errors

* Add images for help detail sections

* Add intro to blocks page

* Add remaining help detail pages

* Link help details to topics

* WIP

* Remove unnecessary dependency

* Cleanup code, remove debugging

* Patch to correct issues with asset loading at runtime

* Fix lint errors by removing unused imports

* Remove extreneous filename extension from import

* Rename view property for clarity

* Remove memoization

* Fix Metro local static image paths (#33829)

Loading local static assets from a different package within a monorepo
appears broken in Metro for Android. The below fixes paths to packages
within this project to include the necessary `/assets/..` that Metro's
server expects to traverse to the correct directory.

- https://git.io/JBV4e
- https://git.io/JBFon

Co-authored-by: David Calhoun <[email protected]>

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;