[RNMobile] Add drag & drop help guide in Help & Support screen (#40961)

* Add drag & drop help guide

* Update content of help screen related to moving blocks

* Update drand-and-drop images

* Update styles of heading component of help screen

* Add HelpDetailBadge component

This component will be rendered in `HelpDetailSectionHeadingText` component via the `badge` prop.

* Add NEW badge to move blocks help section

* Optimize drag-and-drop images

* Add move-blocks icon to Help & Support screen

* Update react-native-editor changelog

* Add HelpSectionTitle component

* Prevent rendering separator on last help topic item

packages/editor/src/components/editor-help/help-section-title.native.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const HelpSectionTitle = ( { children } ) => {
+	const helpSectionTitle = usePreferredColorSchemeStyle(
+		styles.helpSectionTitle,
+		styles.helpSectionTitleDark
+	);
+
+	return (
+		<View style={ styles.helpSectionTitleContainer }>
+			<Text style={ helpSectionTitle }>{ children }</Text>
+		</View>
+	);
+};
+
+export default HelpSectionTitle;

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

@@ -9,7 +9,7 @@ import { useNavigation } from '@react-navigation/native';
 import { TextControl, Icon } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
 
-const HelpTopicRow = ( { label, icon, screenName } ) => {
+const HelpTopicRow = ( { label, icon, screenName, isLastItem } ) => {
 	const navigation = useNavigation();
 
 	const openSubSheet = () => {
@@ -18,7 +18,7 @@ const HelpTopicRow = ( { label, icon, screenName } ) => {
 
 	return (
 		<TextControl
-			separatorType="leftMargin"
+			separatorType={ isLastItem ? 'none' : 'leftMargin' }
 			customActionButton
 			leftAlign
 			onPress={ openSubSheet }

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

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9.53 17.47 9 16.94 7.94 18l.53.53 2 2 .53.53.53-.53 2-2 .53-.53L13 16.94l-.53.53-.72.72v-4.94h-1.5v4.94l-.72-.72Zm-1.06-14L7.94 4 9 5.06l.53-.53.72-.72v4.94h1.5V3.81l.72.72.53.53L14.06 4l-.53-.53-2-2L11 .94l-.53.53-2 2ZM4.53 9.53 5.06 9 4 7.94l-.53.53-2 2-.53.53.53.53 2 2 .53.53L5.06 13l-.53-.53-.72-.72h4.94v-1.5H3.81l.72-.72Zm14-1.06L18 7.94 16.94 9l.53.53.72.72h-4.94v1.5h4.94l-.72.72-.53.53L18 14.06l.53-.53 2-2 .53-.53-.53-.53-2-2Z" />
+	</SVG>
+);

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -14,16 +14,9 @@ import {
 	PanelBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	helpFilled,
-	plusCircleFilled,
-	alignJustify,
-	trash,
-	cog,
-} from '@wordpress/icons';
+import { helpFilled, plusCircleFilled, trash, cog } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import {
 	requestContactCustomerSupport,
 	requestGotoCustomerSupportOptions,
@@ -41,6 +34,8 @@ import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
 import RemoveBlocks from './remove-blocks';
 import CustomizeBlocks from './customize-blocks';
+import moveBlocksIcon from './icon-move-blocks';
+import HelpSectionTitle from './help-section-title';
 
 const HELP_TOPICS = [
 	{
@@ -53,7 +48,7 @@ const HELP_TOPICS = [
 		icon: plusCircleFilled,
 		view: <AddBlocks />,
 	},
-	{ label: __( 'Move blocks' ), icon: alignJustify, view: <MoveBlocks /> },
+	{ label: __( 'Move blocks' ), icon: moveBlocksIcon, view: <MoveBlocks /> },
 	{ label: __( 'Remove blocks' ), icon: trash, view: <RemoveBlocks /> },
 	{
 		label: __( 'Customize blocks' ),
@@ -67,11 +62,6 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
 
-	const sectionTitle = usePreferredColorSchemeStyle(
-		styles.helpDetailSectionHeading,
-		styles.helpDetailSectionHeadingDark
-	);
-
 	const title =
 		postType === 'page'
 			? __( 'How to edit your page' )
@@ -130,15 +120,22 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 											} }
 										>
 											<PanelBody>
-												<Text style={ sectionTitle }>
+												<HelpSectionTitle>
 													{ __( 'The basics' ) }
-												</Text>
+												</HelpSectionTitle>
 												{ /* Print out help topics. */ }
 												{ HELP_TOPICS.map(
-													( { label, icon } ) => {
+													(
+														{ label, icon },
+														index
+													) => {
 														const labelSlug = kebabCase(
 															label
 														);
+														const isLastItem =
+															index ===
+															HELP_TOPICS.length -
+																1;
 														return (
 															<HelpTopicRow
 																key={
@@ -149,16 +146,17 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 																screenName={
 																	labelSlug
 																}
+																isLastItem={
+																	isLastItem
+																}
 															/>
 														);
 													}
 												) }
 												{
-													<Text
-														style={ sectionTitle }
-													>
+													<HelpSectionTitle>
 														{ __( 'Get support' ) }
-													</Text>
+													</HelpSectionTitle>
 												}
 												{
 													<HelpGetSupportButton

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

@@ -12,19 +12,39 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import styles from './style.scss';
-import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
+import {
+	HelpDetailBodyText,
+	HelpDetailImage,
+	HelpDetailSectionHeadingText,
+} from './view-sections';
 
 const MoveBlocks = () => {
 	return (
 		<>
+			<HelpDetailImage
+				source={ require( './images/drag-and-drop-light.png' ) }
+				sourceDarkMode={ require( './images/drag-and-drop-dark.png' ) }
+			/>
+			<View style={ styles.helpDetailContainer }>
+				<HelpDetailSectionHeadingText
+					text={ __( 'Drag & drop' ) }
+					badge="NEW"
+				/>
+				<HelpDetailBodyText
+					text={ __(
+						'Drag & drop makes rearranging blocks a breeze. Press and hold on a block, then drag it to its new location and release.'
+					) }
+				/>
+			</View>
 			<HelpDetailImage
 				source={ require( './images/move-light.png' ) }
 				sourceDarkMode={ require( './images/move-dark.png' ) }
 			/>
 			<View style={ styles.helpDetailContainer }>
+				<HelpDetailSectionHeadingText text={ __( 'Arrow buttons' ) } />
 				<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.'
+						'You can also 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 up or down.'
 					) }
 				/>
 			</View>

packages/editor/src/components/editor-help/style.scss

@@ -31,6 +31,21 @@
 	padding: 0;
 }
 
+.helpSectionTitleContainer {
+	margin-top: 24px;
+	margin-bottom: 16px;
+}
+
+.helpSectionTitle {
+	color: $light-primary;
+	font-weight: 600;
+	font-size: 16px;
+}
+
+.helpSectionTitleDark {
+	color: $dark-secondary;
+}
+
 .helpDetailContainer {
 	padding: 0 16px;
 }
@@ -62,14 +77,18 @@
 }
 
 .helpDetailSectionHeading {
+	flex-direction: row;
+	align-items: center;
+}
+
+.helpDetailSectionHeadingText {
 	color: $light-primary;
-	font-weight: 600;
+	font-weight: 700;
 	font-size: 16px;
-	margin-top: 24px;
 }
 
-.helpDetailSectionHeadingDark {
-	color: $dark-secondary;
+.helpDetailSectionHeadingTextDark {
+	color: $dark-primary;
 }
 
 .helpDetailBody {
@@ -81,3 +100,16 @@
 .helpDetailBodyDark {
 	color: $dark-secondary;
 }
+
+.helpDetailBadgeContainer {
+	padding: 2px 6px;
+	margin-right: 8px;
+	border-radius: 6px;
+	background-color: #c9356e;
+}
+
+.helpDetailBadgeText {
+	color: $white;
+	font-weight: 500;
+	font-size: 12px;
+}

packages/editor/src/components/editor-help/view-sections.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text, Image } from 'react-native';
+import { Text, Image, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -28,15 +28,22 @@ export const HelpDetailBodyText = ( { text } ) => {
 	);
 };
 
-export const HelpDetailSectionHeadingText = ( { text } ) => {
-	const headingStyle = usePreferredColorSchemeStyle(
-		styles.helpDetailSectionHeading,
-		styles.helpDetailSectionHeadingDark
+export const HelpDetailSectionHeadingText = ( { text, badge } ) => {
+	const headingTextStyle = usePreferredColorSchemeStyle(
+		styles.helpDetailSectionHeadingText,
+		styles.helpDetailSectionHeadingTextDark
 	);
 	return (
-		<Text accessibilityRole="header" selectable style={ headingStyle }>
-			{ text }
-		</Text>
+		<View style={ styles.helpDetailSectionHeading }>
+			{ badge && <HelpDetailBadge text={ badge } /> }
+			<Text
+				accessibilityRole="header"
+				selectable
+				style={ headingTextStyle }
+			>
+				{ text }
+			</Text>
+		</View>
 	);
 };
 
@@ -62,3 +69,11 @@ export const HelpDetailImage = ( {
 		/>
 	);
 };
+
+const HelpDetailBadge = ( { text } ) => {
+	return (
+		<View style={ styles.helpDetailBadgeContainer }>
+			<Text style={ styles.helpDetailBadgeText }>{ text }</Text>
+		</View>
+	);
+};

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
 
 -   [*] [a11y] Improve text read by screen readers for BottomSheetSelectControl [#41036]
+-   [*] Add drag & drop help guide in Help & Support screen [#40961]
 
 ## 1.76.0