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 } + + ); +};