[RNMobile] Image Block: Improve Text Entry for Long Alt Text

packages/block-library/src/image/edit.native.js

@@ -19,12 +19,13 @@ import {
 	CycleSelectControl,
 	Icon,
 	PanelBody,
-	TextControl,
 	ToolbarButton,
 	ToolbarGroup,
 	Image,
 	WIDE_ALIGNMENTS,
 	LinkSettingsNavigation,
+	BottomSheetTextControl,
+	FooterMessageLink,
 } from '@wordpress/components';
 import {
 	BlockCaption,
@@ -45,9 +46,9 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import {
 	image as placeholderIcon,
-	textColor,
 	replace,
 	expand,
+	textColor,
 } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -82,7 +83,6 @@ export class ImageEdit extends Component {
 			this
 		);
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.updateAlt = this.updateAlt.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
 		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
 		this.onSetNewTab = this.onSetNewTab.bind( this );
@@ -246,10 +246,6 @@ export class ImageEdit extends Component {
 		this.setState( { isUploadInProgress: false } );
 	}
 
-	updateAlt( newAlt ) {
-		this.props.setAttributes( { alt: newAlt } );
-	}
-
 	updateImageURL( url ) {
 		this.props.setAttributes( {
 			url,
@@ -393,6 +389,39 @@ export class ImageEdit extends Component {
 		);
 	}
 
+	getAltTextSettings() {
+		const {
+			attributes: { alt },
+		} = this.props;
+
+		const updateAlt = ( newAlt ) => {
+			this.props.setAttributes( { alt: newAlt } );
+		};
+
+		return (
+			<BottomSheetTextControl
+				initialValue={ alt }
+				onChange={ updateAlt }
+				placeholder={ __( 'Add alt text' ) }
+				label={ __( 'Alt Text' ) }
+				icon={ textColor }
+				footerNote={
+					<>
+						{ __(
+							'Describe the purpose of the image. Leave empty if the image is purely decorative. '
+						) }
+						<FooterMessageLink
+							href={
+								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+							}
+							value={ __( 'What is alt text?' ) }
+						/>
+					</>
+				}
+			/>
+		);
+	}
+
 	onSizeChangeValue( newValue ) {
 		this.onSetSizeSlug( newValue );
 	}
@@ -439,13 +468,7 @@ export class ImageEdit extends Component {
 							options={ this.sizeOptions }
 						/>
 					) }
-					<TextControl
-						icon={ textColor }
-						label={ __( 'Alt Text' ) }
-						value={ alt || '' }
-						valuePlaceholder={ __( 'None' ) }
-						onChangeValue={ this.updateAlt }
-					/>
+					{ this.getAltTextSettings() }
 				</PanelBody>
 				<PanelBody title={ __( 'Link Settings' ) }>
 					{ this.getLinkSettings( true ) }

packages/components/src/index.native.js

@@ -76,6 +76,8 @@ export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
 export { default as FocalPointSettingsPanel } from './mobile/focal-point-settings-panel';
+export { default as BottomSheetTextControl } from './mobile/bottom-sheet-text-control';
+export { default as FooterMessageLink } from './mobile/bottom-sheet/footer-message-link/footer-message-link';
 export { LinkPicker } from './mobile/link-picker';
 export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-screen';
 export { default as LinkSettings } from './mobile/link-settings';

packages/components/src/mobile/bottom-sheet-text-control/README.md

@@ -0,0 +1,91 @@
+# BottomSheetTextControl
+
+`BottomSheetTextControl` allows users to enter and edit text, similar to [`TextControl`](/packages/components/src/text-control/README.md).
+
+`BottomSheetTextControl`'s main difference from `TextControl` is that it utilizes [`BottomSheetSubSheet`](/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md). A user will tap to open a subsheet where they can enter their text into an editor. This is useful for cases where a larger text area is warranted for user input.
+
+### Usage
+
+```jsx
+// This is a paraphrased example from the image block's edit.native.js file
+import {
+	BottomSheetSelectControl,
+	FooterMessageLink,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MyTextControl = () => {
+	const {
+		attributes: { alt },
+	} = this.props;
+
+	const updateAlt = ( newAlt ) => {
+		this.props.setAttributes( { alt: newAlt } );
+	};
+
+	return (
+		<PanelBody>
+			<BottomSheetTextControl
+				initialValue={ alt }
+				onChange={ updateAlt }
+				placeholder={ __( 'Generic placeholder text' ) }
+				label={ __( 'Generic label' ) }
+				icon={ textColor }
+				footerNote={
+					<>
+						{ __( 'A footer note to add to the component! ' ) }
+						<FooterMessageLink
+							href={ 'https://wordpress.org/' }
+							value={ __( 'Visit WordPress.org' ) }
+						/>
+					</>
+				}
+			/>
+		</PanelBody>
+	);
+};
+```
+
+### Props
+
+#### initialValue
+
+The initial value of the input.
+
+-   Type: `String`
+-   Required: Yes
+
+#### onChange
+
+A function that receives the value that's input into the text editor.
+
+-   Type: `Function`
+-   Required: Yes
+
+#### placeholder
+
+The placeholder text that will display in the component's subsheet, when its text editor is empty.
+
+-   Type: `String`
+-   Required: No
+
+#### label
+
+The label for the control. The label will appear in the header area of the subsheet and is necessary for navigation.
+
+-   Type: `String`
+-   Required: Yes
+
+#### icon
+
+The icon to display alongside the control.
+
+-   Type: `String`
+-   Required: No
+
+#### footerNote
+
+An optional note to display in the component's footer area.
+
+-   Type: `String`
+-   Required: No

packages/components/src/mobile/bottom-sheet-text-control/index.native.js

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import { TextInput } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import {
+	BottomSheet,
+	PanelBody,
+	FooterMessageControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const BottomSheetTextControl = ( {
+	initialValue,
+	onChange,
+	placeholder,
+	label,
+	icon,
+	footerNote,
+} ) => {
+	const [ showSubSheet, setShowSubSheet ] = useState( false );
+	const navigation = useNavigation();
+
+	const goBack = () => {
+		setShowSubSheet( false );
+		navigation.goBack();
+	};
+
+	const openSubSheet = () => {
+		navigation.navigate( BottomSheet.SubSheet.screenName );
+		setShowSubSheet( true );
+	};
+
+	const [ value, onChangeText ] = useState( initialValue );
+
+	const horizontalBorderStyle = usePreferredColorSchemeStyle(
+		styles.horizontalBorder,
+		styles.horizontalBorderDark
+	);
+
+	const textEditorStyle = usePreferredColorSchemeStyle(
+		styles.textEditor,
+		styles.textEditorDark
+	);
+
+	return (
+		<BottomSheet.SubSheet
+			navigationButton={
+				<BottomSheet.Cell
+					icon={ icon }
+					placeholder={ placeholder }
+					label={ label }
+					onPress={ openSubSheet }
+					value={ initialValue || '' }
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</BottomSheet.Cell>
+			}
+			showSheet={ showSubSheet }
+		>
+			<>
+				<BottomSheet.NavigationHeader
+					screen={ label }
+					leftButtonOnPress={ goBack }
+				/>
+				<PanelBody style={ horizontalBorderStyle }>
+					<TextInput
+						label={ label }
+						onChangeText={ ( text ) => onChangeText( text ) }
+						onChange={ onChange( value ) }
+						value={ value }
+						multiline={ true }
+						placeholder={ placeholder }
+						placeholderTextColor={ '#87a6bc' }
+						style={ textEditorStyle }
+						textAlignVertical={ 'top' }
+					/>
+				</PanelBody>
+			</>
+
+			{ footerNote && (
+				<PanelBody style={ styles.textFooternote }>
+					<FooterMessageControl
+						label={ footerNote }
+						textAlign="left"
+					/>
+				</PanelBody>
+			) }
+		</BottomSheet.SubSheet>
+	);
+};
+
+export default BottomSheetTextControl;

packages/components/src/mobile/bottom-sheet-text-control/styles.scss

@@ -0,0 +1,22 @@
+.textEditor {
+	padding: 14px 0;
+	height: 80px;
+}
+
+.textEditorDark {
+	color: $white;
+}
+
+.textFooternote {
+	padding: 0 16px 24px;
+}
+
+.horizontalBorder {
+	border-top-width: $border-width;
+	border-bottom-width: $border-width;
+	border-color: $light-gray-400;
+}
+
+.horizontalBorderDark {
+	border-color: $gray-70;
+}

packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js

@@ -8,7 +8,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import Cell from './cell';
 import styles from './styles.scss';
 
-function FooterMessageCell( { textAlign = 'center', ...props } ) {
+function FooterMessageCell( { textAlign = 'left', ...props } ) {
 	return (
 		<Cell
 			{ ...props }

packages/components/src/mobile/bottom-sheet/footer-message-link/README.md

@@ -0,0 +1,37 @@
+# Footer Message Link
+
+FooterMessageLink allows for adding a link within a FooterMessageControl component.
+
+### Usage
+
+```jsx
+return (
+	<FooterMessageControl
+		value={
+			<>
+				{ __( 'Example footer text. ' ) }
+				<FooterMessageLink
+					href={ 'https://www.wordpress.org/' }
+					value={ __( 'Visit WordPress.org!' ) }
+				/>
+			</>
+		}
+	/>
+);
+```
+
+### Props
+
+#### href
+
+The URL that is being linked to and that will open in a browser tab when selected.
+
+-   Type: `String`
+-   Required: Yes
+
+#### value
+
+The "clickable" text that will be displayed to the user.
+
+-   Type: `String`
+-   Required: Yes