diff --git a/packages/editor/src/components/editor-help/help-section-title.native.js b/packages/editor/src/components/editor-help/help-section-title.native.js
new file mode 100644
index 00000000000000..573d48d24fd6ce
--- /dev/null
+++ b/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 (
+
+ { children }
+
+ );
+};
+
+export default HelpSectionTitle;
diff --git a/packages/editor/src/components/editor-help/help-topic-row.native.js b/packages/editor/src/components/editor-help/help-topic-row.native.js
index e04ffae4a00b59..89495fc9a601d3 100644
--- a/packages/editor/src/components/editor-help/help-topic-row.native.js
+++ b/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 (
+
+
+);
diff --git a/packages/editor/src/components/editor-help/images/drag-and-drop-dark.png b/packages/editor/src/components/editor-help/images/drag-and-drop-dark.png
new file mode 100644
index 00000000000000..47188faf0a1a44
Binary files /dev/null and b/packages/editor/src/components/editor-help/images/drag-and-drop-dark.png differ
diff --git a/packages/editor/src/components/editor-help/images/drag-and-drop-dark@2x.png b/packages/editor/src/components/editor-help/images/drag-and-drop-dark@2x.png
new file mode 100644
index 00000000000000..2e928d2fcd98a9
Binary files /dev/null and b/packages/editor/src/components/editor-help/images/drag-and-drop-dark@2x.png differ
diff --git a/packages/editor/src/components/editor-help/images/drag-and-drop-dark@3x.png b/packages/editor/src/components/editor-help/images/drag-and-drop-dark@3x.png
new file mode 100644
index 00000000000000..c49248c449ad26
Binary files /dev/null and b/packages/editor/src/components/editor-help/images/drag-and-drop-dark@3x.png differ
diff --git a/packages/editor/src/components/editor-help/images/drag-and-drop-light.png b/packages/editor/src/components/editor-help/images/drag-and-drop-light.png
new file mode 100644
index 00000000000000..844373d735f00e
Binary files /dev/null and b/packages/editor/src/components/editor-help/images/drag-and-drop-light.png differ
diff --git a/packages/editor/src/components/editor-help/images/drag-and-drop-light@2x.png b/packages/editor/src/components/editor-help/images/drag-and-drop-light@2x.png
new file mode 100644
index 00000000000000..2d907e4c346fec
Binary files /dev/null and b/packages/editor/src/components/editor-help/images/drag-and-drop-light@2x.png differ
diff --git a/packages/editor/src/components/editor-help/images/drag-and-drop-light@3x.png b/packages/editor/src/components/editor-help/images/drag-and-drop-light@3x.png
new file mode 100644
index 00000000000000..f906e8f6f83226
Binary files /dev/null and b/packages/editor/src/components/editor-help/images/drag-and-drop-light@3x.png differ
diff --git a/packages/editor/src/components/editor-help/index.native.js b/packages/editor/src/components/editor-help/index.native.js
index a4ce122aa95620..c9161b47863b4e 100644
--- a/packages/editor/src/components/editor-help/index.native.js
+++ b/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: ,
},
- { label: __( 'Move blocks' ), icon: alignJustify, view: },
+ { label: __( 'Move blocks' ), icon: moveBlocksIcon, view: },
{ label: __( 'Remove blocks' ), icon: trash, view: },
{
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 } ) {
} }
>
-
+
{ __( 'The basics' ) }
-
+
{ /* Print out help topics. */ }
{ HELP_TOPICS.map(
- ( { label, icon } ) => {
+ (
+ { label, icon },
+ index
+ ) => {
const labelSlug = kebabCase(
label
);
+ const isLastItem =
+ index ===
+ HELP_TOPICS.length -
+ 1;
return (
);
}
) }
{
-
+
{ __( 'Get support' ) }
-
+
}
{
{
return (
<>
+
+
+
+
+
+
diff --git a/packages/editor/src/components/editor-help/style.scss b/packages/editor/src/components/editor-help/style.scss
index 4bac8875811b5d..8058f00381da95 100644
--- a/packages/editor/src/components/editor-help/style.scss
+++ b/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;
+}
diff --git a/packages/editor/src/components/editor-help/view-sections.native.js b/packages/editor/src/components/editor-help/view-sections.native.js
index a1ed66e0525489..fefca22fa7e097 100644
--- a/packages/editor/src/components/editor-help/view-sections.native.js
+++ b/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 }
-
+
+ { badge && }
+
+ { text }
+
+
);
};
@@ -62,3 +69,11 @@ export const HelpDetailImage = ( {
/>
);
};
+
+const HelpDetailBadge = ( { text } ) => {
+ return (
+
+ { text }
+
+ );
+};