diff --git a/packages/editor/src/components/editor-help/add-blocks.native.js b/packages/editor/src/components/editor-help/add-blocks.native.js new file mode 100644 index 00000000000000..35e3030d982e7e --- /dev/null +++ b/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 ( + + + + + + ); +}; + +export default AddBlocks; diff --git a/packages/editor/src/components/editor-help/customize-blocks.native.js b/packages/editor/src/components/editor-help/customize-blocks.native.js new file mode 100644 index 00000000000000..c0f0e62f9695bc --- /dev/null +++ b/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 ( + + + + + + ); +}; + +export default CustomizeBlocks; diff --git a/packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js b/packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js index afc1b8b202cbcd..260511ea732aec 100644 --- a/packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js +++ b/packages/editor/src/components/editor-help/help-detail-navigation-screen.native.js @@ -1,13 +1,13 @@ /** * 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'; /** @@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n'; */ 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 } /> - Amanda todo + { content } ); }; 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 8f7aa2efebae82..fa764bbe761f96 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 @@ -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 ( - - - - } - showSheet={ showSubSheet } + - - - Amanda Todo - + + ); }; diff --git a/packages/editor/src/components/editor-help/images/add-blocks.png b/packages/editor/src/components/editor-help/images/add-blocks.png new file mode 100644 index 00000000000000..e3ea835c96e250 Binary files /dev/null and b/packages/editor/src/components/editor-help/images/add-blocks.png differ diff --git a/packages/editor/src/components/editor-help/images/customize-blocks.png b/packages/editor/src/components/editor-help/images/customize-blocks.png new file mode 100644 index 00000000000000..bf7f424766ab03 Binary files /dev/null and b/packages/editor/src/components/editor-help/images/customize-blocks.png differ diff --git a/packages/editor/src/components/editor-help/images/cut-copy-duplicate-blocks.png b/packages/editor/src/components/editor-help/images/cut-copy-duplicate-blocks.png new file mode 100644 index 00000000000000..41edced5f19534 Binary files /dev/null and b/packages/editor/src/components/editor-help/images/cut-copy-duplicate-blocks.png differ diff --git a/packages/editor/src/components/editor-help/images/edit-or-replace-media.png b/packages/editor/src/components/editor-help/images/edit-or-replace-media.png new file mode 100644 index 00000000000000..a444e1a498a42b Binary files /dev/null and b/packages/editor/src/components/editor-help/images/edit-or-replace-media.png differ diff --git a/packages/editor/src/components/editor-help/images/intro-blocks-1.png b/packages/editor/src/components/editor-help/images/intro-blocks-1.png new file mode 100644 index 00000000000000..c09c5f5689e315 Binary files /dev/null and b/packages/editor/src/components/editor-help/images/intro-blocks-1.png differ diff --git a/packages/editor/src/components/editor-help/images/intro-blocks-2.png b/packages/editor/src/components/editor-help/images/intro-blocks-2.png new file mode 100644 index 00000000000000..b099167aa5b4db Binary files /dev/null and b/packages/editor/src/components/editor-help/images/intro-blocks-2.png differ diff --git a/packages/editor/src/components/editor-help/images/intro-blocks-3.png b/packages/editor/src/components/editor-help/images/intro-blocks-3.png new file mode 100644 index 00000000000000..7ce90c23a5e933 Binary files /dev/null and b/packages/editor/src/components/editor-help/images/intro-blocks-3.png differ diff --git a/packages/editor/src/components/editor-help/images/intro-blocks-4.png b/packages/editor/src/components/editor-help/images/intro-blocks-4.png new file mode 100644 index 00000000000000..e99a529e65a5be Binary files /dev/null and b/packages/editor/src/components/editor-help/images/intro-blocks-4.png differ diff --git a/packages/editor/src/components/editor-help/images/move-blocks.png b/packages/editor/src/components/editor-help/images/move-blocks.png new file mode 100644 index 00000000000000..1802ebde180874 Binary files /dev/null and b/packages/editor/src/components/editor-help/images/move-blocks.png differ diff --git a/packages/editor/src/components/editor-help/images/remove-blocks.png b/packages/editor/src/components/editor-help/images/remove-blocks.png new file mode 100644 index 00000000000000..3b6de42c032a0e Binary files /dev/null and b/packages/editor/src/components/editor-help/images/remove-blocks.png differ diff --git a/packages/editor/src/components/editor-help/images/what-is-a-block.png b/packages/editor/src/components/editor-help/images/what-is-a-block.png new file mode 100644 index 00000000000000..e3ea835c96e250 Binary files /dev/null and b/packages/editor/src/components/editor-help/images/what-is-a-block.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 3a53c94922aadb..34d25865b8ee57 100644 --- a/packages/editor/src/components/editor-help/index.native.js +++ b/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: , + }, + { + label: __( 'Add blocks' ), + icon: plusCircleFilled, + view: , + }, + { label: __( 'Move blocks' ), icon: alignJustifyAlt, view: }, + { label: __( 'Remove blocks' ), icon: trashFilled, view: }, + { + label: __( 'Customize blocks' ), + icon: cogAlt, + view: , + }, ]; function EditorHelpTopics( { isVisible, onClose } ) { @@ -38,13 +55,13 @@ function EditorHelpTopics( { isVisible, onClose } ) { styles.bottomSheetHeaderTitleDark ); - return useMemo( () => ( + return ( @@ -74,14 +91,18 @@ function EditorHelpTopics( { isVisible, onClose } ) { { /* Print out help detail screens */ } - - - + { HELP_TOPICS.map( ( topic ) => { + return ( + + ); + } ) } - ) ); + ); } export default EditorHelpTopics; diff --git a/packages/editor/src/components/editor-help/intro-to-blocks.native.js b/packages/editor/src/components/editor-help/intro-to-blocks.native.js new file mode 100644 index 00000000000000..d1f0f2ac1322f6 --- /dev/null +++ b/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 ( + + + + { __( 'Welcome to the world of blocks' ) } + + + + + + + + + + + + + + ); +}; + +export default IntroToBlocks; diff --git a/packages/editor/src/components/editor-help/move-blocks.native.js b/packages/editor/src/components/editor-help/move-blocks.native.js new file mode 100644 index 00000000000000..ea3141c9b6035a --- /dev/null +++ b/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 ( + + + + + ); +}; + +export default MoveBlocks; diff --git a/packages/editor/src/components/editor-help/remove-blocks.native.js b/packages/editor/src/components/editor-help/remove-blocks.native.js new file mode 100644 index 00000000000000..8d35a63640e587 --- /dev/null +++ b/packages/editor/src/components/editor-help/remove-blocks.native.js @@ -0,0 +1,32 @@ +/** + * 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 RemoveBlocks = () => { + return ( + + + + + ); +}; + +export default RemoveBlocks; diff --git a/packages/editor/src/components/editor-help/style.scss b/packages/editor/src/components/editor-help/style.scss index 2a0299588b2e96..abf2e9a0b2d11d 100644 --- a/packages/editor/src/components/editor-help/style.scss +++ b/packages/editor/src/components/editor-help/style.scss @@ -35,3 +35,32 @@ .bottomSheetHeaderTitleDark { color: $dark-primary; } + +.helpDetailContainer { + width: 100%; + padding: 0; + height: 100%; +} + +.helpDetailImage { + width: 100%; + margin-bottom: 16px; +} + +.helpDetailTitle { + font-weight: 700; + font-size: 28px; + padding: 16px; +} + +.helpDetailSectionHeading { + font-weight: 600; + font-size: 16px; + padding: 0 16px 16px 16px; +} + +.helpDetailBody { + width: 100%; + padding: 0 16px 16px 16px; + font-size: 16px; +} diff --git a/packages/editor/src/components/editor-help/view-sections.native.js b/packages/editor/src/components/editor-help/view-sections.native.js new file mode 100644 index 00000000000000..9b700ce87f7acf --- /dev/null +++ b/packages/editor/src/components/editor-help/view-sections.native.js @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import { Text, Image } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './style.scss'; + +export const HelpDetailBodyText = ( { text } ) => { + return { text }; +}; + +export const HelpDetailSectionHeadingText = ( { text } ) => { + return { text }; +}; + +export const HelpDetailImage = ( { source } ) => { + return ; +}; diff --git a/packages/react-native-editor/metro.config.js b/packages/react-native-editor/metro.config.js index 548c47d8b93f51..d95f8834720d50 100644 --- a/packages/react-native-editor/metro.config.js +++ b/packages/react-native-editor/metro.config.js @@ -2,6 +2,13 @@ * External dependencies */ const path = require( 'path' ); +const fs = require( 'fs' ); + +const PACKAGES_DIR = path.resolve( __dirname, '..' ); +const packageNames = fs.readdirSync( PACKAGES_DIR ).filter( ( file ) => { + const stats = fs.statSync( path.join( PACKAGES_DIR, file ) ); + return stats.isDirectory(); +} ); module.exports = { watchFolders: [ path.resolve( __dirname, '../..' ) ], @@ -18,4 +25,26 @@ module.exports = { }, } ), }, + server: { + enhanceMiddleware: ( middleware ) => ( req, res, next ) => { + /** + * 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 + */ + const firstUrlSegment = req.url.split( '/' )[ 1 ]; + if ( packageNames.includes( firstUrlSegment ) ) { + req.url = req.url.replace( + `/${ firstUrlSegment }`, + `/assets/../${ firstUrlSegment }` + ); + } + + return middleware( req, res, next ); + }, + }, };