@wordpress/editor 11.0.1 → 12.0.2

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

@@ -1,14 +1,19 @@
 /**
  * External dependencies
  */
-import { View, Text } from 'react-native';
+import { kebabCase } from 'lodash';
+import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import { TransitionPresets } from '@react-navigation/stack';
 
 /**
  * WordPress dependencies
  */
-import { BottomSheet, PanelBody } from '@wordpress/components';
+import {
+	BottomSheet,
+	BottomSheetConsumer,
+	PanelBody,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import {
 	helpFilled,
 	plusCircleFilled,
@@ -16,6 +21,13 @@ import {
 	trashFilled,
 	cogAlt,
 } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import {
+	requestContactCustomerSupport,
+	requestGotoCustomerSupportOptions,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -23,6 +35,7 @@ import {
 import styles from './style.scss';
 import HelpDetailNavigationScreen from './help-detail-navigation-screen';
 import HelpTopicRow from './help-topic-row';
+import HelpGetSupportButton from './help-get-support-button';
 import IntroToBlocks from './intro-to-blocks';
 import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
@@ -49,12 +62,21 @@ const HELP_TOPICS = [
 	},
 ];
 
-function EditorHelpTopics( { isVisible, onClose } ) {
-	const bottomSheetHeaderTitleStyle = usePreferredColorSchemeStyle(
-		styles.bottomSheetHeaderTitle,
-		styles.bottomSheetHeaderTitleDark
+function EditorHelpTopics( { close, isVisible, onClose } ) {
+	const { postType } = useSelect( ( select ) => ( {
+		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
+	} ) );
+
+	const sectionTitle = usePreferredColorSchemeStyle(
+		styles.helpDetailSectionHeading,
+		styles.helpDetailSectionHeadingDark
 	);
 
+	const title =
+		postType === 'page'
+			? __( 'How to edit your page' )
+			: __( 'How to edit your post' );
+
 	return (
 		<BottomSheet
 			isVisible={ isVisible }
@@ -62,45 +84,127 @@ function EditorHelpTopics( { isVisible, onClose } ) {
 			hideHeader
 			hasNavigation
 			contentStyle={ styles.contentContainer }
+			testID="editor-help-modal"
 		>
-			<BottomSheet.NavigationContainer animate main>
-				<BottomSheet.NavigationScreen name={ __( 'Topics' ) }>
-					<View style={ styles.bottomSheetHeader }>
-						<Text
-							style={ bottomSheetHeaderTitleStyle }
-							maxFontSizeMultiplier={ 3 }
-						>
-							{ __( 'How to edit your site' ) }
-						</Text>
-					</View>
-					<View style={ styles.separator } />
-					<PanelBody
-						title={ __( 'The basics' ) }
-						style={ styles.sectionContainer }
+			<SafeAreaView>
+				<BottomSheet.NavigationContainer
+					animate
+					main
+					style={ styles.navigationContainer }
+				>
+					<BottomSheet.NavigationScreen
+						isScrollable
+						fullScreen
+						name="help-topics"
 					>
-						{ /* Print out help topics */ }
-						{ HELP_TOPICS.map( ( topic ) => {
-							return (
-								<HelpTopicRow
-									key={ topic.label }
-									label={ topic.label }
-									icon={ topic.icon }
+						<View style={ styles.container }>
+							<BottomSheet.NavBar>
+								<BottomSheet.NavBar.DismissButton
+									onPress={ close }
+									iosText={ __( 'Close' ) }
 								/>
-							);
-						} ) }
-					</PanelBody>
-				</BottomSheet.NavigationScreen>
-				{ /* Print out help detail screens */ }
-				{ HELP_TOPICS.map( ( topic ) => {
-					return (
-						<HelpDetailNavigationScreen
-							key={ topic.label }
-							name={ topic.label }
-							content={ topic.view }
-						/>
-					);
-				} ) }
-			</BottomSheet.NavigationContainer>
+								<BottomSheet.NavBar.Heading>
+									{ title }
+								</BottomSheet.NavBar.Heading>
+							</BottomSheet.NavBar>
+							<BottomSheetConsumer>
+								{ ( { listProps } ) => {
+									const contentContainerStyle = StyleSheet.flatten(
+										listProps.contentContainerStyle
+									);
+									return (
+										<ScrollView
+											{ ...listProps }
+											contentContainerStyle={ {
+												...contentContainerStyle,
+												paddingBottom: Math.max(
+													listProps.safeAreaBottomInset,
+													contentContainerStyle.paddingBottom
+												),
+												/**
+												 * Remove margin set via `hideHeader`. Combining a header
+												 * and navigation in this bottom sheet is at odds with the
+												 * current `BottomSheet` implementation.
+												 */
+												marginTop: 0,
+											} }
+										>
+											<PanelBody>
+												<Text style={ sectionTitle }>
+													{ __( 'The basics' ) }
+												</Text>
+												{ /* Print out help topics */ }
+												{ HELP_TOPICS.map(
+													( { label, icon } ) => {
+														const labelSlug = kebabCase(
+															label
+														);
+														return (
+															<HelpTopicRow
+																key={
+																	labelSlug
+																}
+																label={ label }
+																icon={ icon }
+																screenName={
+																	labelSlug
+																}
+															/>
+														);
+													}
+												) }
+												{
+													<Text
+														style={ sectionTitle }
+													>
+														{ __( 'Get support' ) }
+													</Text>
+												}
+												{
+													<HelpGetSupportButton
+														title={ __(
+															'Contact support'
+														) }
+														onPress={
+															requestContactCustomerSupport
+														}
+													/>
+												}
+												{
+													<HelpGetSupportButton
+														title={ __(
+															'More support options'
+														) }
+														onPress={
+															requestGotoCustomerSupportOptions
+														}
+													/>
+												}
+											</PanelBody>
+										</ScrollView>
+									);
+								} }
+							</BottomSheetConsumer>
+						</View>
+					</BottomSheet.NavigationScreen>
+					{ /* Print out help detail screens */ }
+					{ HELP_TOPICS.map( ( { view, label } ) => {
+						const labelSlug = kebabCase( label );
+						return (
+							<HelpDetailNavigationScreen
+								key={ labelSlug }
+								name={ labelSlug }
+								content={ view }
+								label={ label }
+								options={ {
+									gestureEnabled: true,
+									...TransitionPresets.DefaultTransition,
+								} }
+							/>
+						);
+					} ) }
+				</BottomSheet.NavigationContainer>
+			</SafeAreaView>
 		</BottomSheet>
 	);
 }

package/src/components/editor-help/intro-to-blocks.native.js

@@ -7,6 +7,7 @@ import { View, Text } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,52 +20,71 @@ import {
 } from './view-sections';
 
 const IntroToBlocks = () => {
+	const titleStyle = usePreferredColorSchemeStyle(
+		styles.helpDetailTitle,
+		styles.helpDetailTitleDark
+	);
 	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!'
-				) }
+				source={ require( './images/block-layout-collage.png' ) }
 			/>
-		</View>
+			<View style={ styles.helpDetailContainer }>
+				<Text
+					accessibilityRole="header"
+					selectable
+					style={ titleStyle }
+				>
+					{ __( '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
+					accessible={ true }
+					accessibilityLabel={ __(
+						'Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block'
+					) }
+					source={ require( './images/rich-text-light.png' ) }
+					sourceDarkMode={ require( './images/rich-text-dark.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/embed-media-light.png' ) }
+					sourceDarkMode={ require( './images/embed-media-dark.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/build-layouts-light.png' ) }
+					sourceDarkMode={ require( './images/build-layouts-dark.png' ) }
+				/>
+				<HelpDetailBodyText
+					text={ __(
+						'Give it a try by adding a few blocks to your post or page!'
+					) }
+				/>
+			</View>
+		</>
 	);
 };
 

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

@@ -16,14 +16,19 @@ 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.'
-				) }
+		<>
+			<HelpDetailImage
+				source={ require( './images/move-light.png' ) }
+				sourceDarkMode={ require( './images/move-dark.png' ) }
 			/>
-		</View>
+			<View style={ styles.helpDetailContainer }>
+				<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>
+		</>
 	);
 };
 

package/src/components/editor-help/remove-blocks.native.js

@@ -16,16 +16,19 @@ import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
 
 const RemoveBlocks = () => {
 	return (
-		<View style={ styles.helpDetailContainer }>
+		<>
 			<HelpDetailImage
-				source={ require( './images/remove-blocks.png' ) }
+				source={ require( './images/options-light.png' ) }
+				sourceDarkMode={ require( './images/options-dark.png' ) }
 			/>
-			<HelpDetailBodyText
-				text={ __(
-					'To remove a block, select the block and click the three dots in the bottom right of the block to view the settings. From there, choose the option to remove the block.'
-				) }
-			/>
-		</View>
+			<View style={ styles.helpDetailContainer }>
+				<HelpDetailBodyText
+					text={ __(
+						'To remove a block, select the block and click the three dots in the bottom right of the block to view the settings. From there, choose the option to remove the block.'
+					) }
+				/>
+			</View>
+		</>
 	);
 };
 

package/src/components/editor-help/style.android.scss

@@ -0,0 +1,6 @@
+@import "./style.scss";
+
+.button {
+	border-radius: $border-width * 4;
+	padding: $grid-unit-10;
+}

package/src/components/editor-help/style.ios.scss

@@ -0,0 +1,6 @@
+@import "./style.scss";
+
+.button {
+	border-radius: $border-width * 8;
+	padding: $grid-unit-15;
+}

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

@@ -1,66 +1,83 @@
-.contentContainer {
-	padding: 0;
+.button {
+	margin: $grid-unit-10 $grid-unit-05;
+	align-items: center;
+	justify-content: center;
+	border: $border-width solid $gray-300;
 }
 
-.sectionContainer {
-	padding: 0 16px;
+.buttonDark {
+	border-color: $gray-700;
 }
 
-.separator {
-	background-color: $light-gray-400;
-	height: 1px;
-	width: 100%;
+.buttonText {
+	font-weight: 600;
+	font-size: 16px;
+	color: $light-primary;
 }
 
-.separatorDark {
-	background-color: $gray-70;
+.buttonTextDark {
+	color: $dark-primary;
 }
 
-.bottomSheetHeader {
-	flex-direction: row;
-	align-items: center;
-	padding-right: $grid-unit-20;
-	padding-left: $grid-unit-20;
-	min-height: 44px;
+.navigationContainer {
+	overflow: hidden;
 }
 
-.bottomSheetHeaderTitle {
-	color: $light-primary;
-	text-align: center;
-	font-weight: 600;
-	font-size: 16px;
-	flex: 2;
+.container {
+	height: 100%;
 }
 
-.bottomSheetHeaderTitleDark {
-	color: $dark-primary;
+.contentContainer {
+	padding: 0;
 }
 
 .helpDetailContainer {
-	width: 100%;
-	padding: 0;
-	height: 100%;
+	padding: 0 16px;
 }
 
 .helpDetailImage {
+	background-color: $gray-light;
+	margin-bottom: 16px;
 	width: 100%;
+}
+
+.helpDetailImageDark {
+	background-color: $gray-dark;
+}
+
+.helpDetailTitle,
+.helpDetailSectionHeading,
+.helpDetailBody {
 	margin-bottom: 16px;
 }
 
 .helpDetailTitle {
-	font-weight: 700;
+	color: $light-primary;
+	font-weight: 600;
 	font-size: 28px;
-	padding: 16px;
+}
+
+.helpDetailTitleDark {
+	color: $dark-primary;
 }
 
 .helpDetailSectionHeading {
+	color: $light-primary;
 	font-weight: 600;
 	font-size: 16px;
-	padding: 0 16px 16px 16px;
+	margin-top: 24px;
+}
+
+.helpDetailSectionHeadingDark {
+	color: $dark-secondary;
 }
 
 .helpDetailBody {
-	width: 100%;
-	padding: 0 16px 16px 16px;
+	color: $light-secondary;
 	font-size: 16px;
+	line-height: 24px;
+}
+
+.helpDetailBodyDark {
+	color: $dark-secondary;
 }

package/src/components/editor-help/test/index.native.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, waitForElementToBeRemoved } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import EditorHelp from '../index';
+
+it( 'lists help topics', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+
+	expect( helpTopic ).toBeTruthy();
+} );
+
+it( 'navigates to help topic detail screen', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+	fireEvent.press( helpTopic );
+
+	expect(
+		screen.getByText(
+			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
+		)
+	).toBeTruthy();
+} );
+
+it( 'navigates back from help topic detail screen', async () => {
+	const screen = render( <EditorHelp isVisible /> );
+	const helpTopic = await screen.findByText( 'Customize blocks' );
+	fireEvent.press( helpTopic );
+
+	const backButton = screen.getAllByA11yLabel( 'Go back' );
+	fireEvent.press( backButton[ backButton.length - 1 ] );
+
+	// Currently logs `act` warning due to https://git.io/JYYGE
+	await waitForElementToBeRemoved( () =>
+		screen.getByText(
+			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
+		)
+	);
+} );
+
+it( 'dismisses when close button is pressed', async () => {
+	const closeMock = jest.fn();
+	const screen = render( <EditorHelp isVisible close={ closeMock } /> );
+	const closeButton = await screen.findByA11yLabel( 'Go back' );
+	fireEvent.press( closeButton );
+
+	expect( closeMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when parent modal backdrop is pressed', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'backdropPress' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when parent modal backdrop is swiped', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'swipeComplete' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );
+
+it( 'dismisses when hardware back button is pressed', async () => {
+	const onCloseMock = jest.fn();
+	const screen = render( <EditorHelp isVisible onClose={ onCloseMock } /> );
+	const modal = await screen.findByTestId( 'editor-help-modal' );
+	fireEvent( modal, 'backButtonPress' );
+
+	expect( onCloseMock ).toHaveBeenCalled();
+} );