Alt image setting

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

@@ -17,7 +17,7 @@ import {
  * Internal dependencies
  */
 import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor';
-import { Toolbar, ToolbarButton, Spinner, Dashicon } from '@wordpress/components';
+import { Toolbar, ToolbarButton, Spinner, Dashicon, TextareaControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
 import { isURL } from '@wordpress/url';
@@ -44,6 +44,7 @@ export default class ImageEdit extends React.Component {
 		this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this );
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this );
 		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this );
+		this.updateAlt = this.updateAlt.bind( this );
 		this.onImagePressed = this.onImagePressed.bind( this );
 	}
 
@@ -128,9 +129,13 @@ export default class ImageEdit extends React.Component {
 		}
 	}
 
+	updateAlt( newAlt ) {
+		this.props.setAttributes( { alt: newAlt } );
+	}
+
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
-		const { url, caption, height, width } = attributes;
+		const { url, caption, height, width, alt } = attributes;
 
 		const onMediaLibraryButtonPressed = () => {
 			requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
@@ -191,15 +196,14 @@ export default class ImageEdit extends React.Component {
 				isVisible={ this.state.showSettings }
 				title={ __( 'Image Settings' ) }
 				onClose={ onImageSettingsClose }
-				rightButton={
-					<BottomSheet.Button
-						text={ __( 'Done' ) }
-						color={ '#0087be' }
-						onPress={ onImageSettingsClose }
-					/>
-				}
 			>
-				<BottomSheet.Cell label={ __( 'Alt Text' ) } value={ __( 'None' ) } onPress={ () => {} } />
+				<BottomSheet.Cell label={ __( 'Alt Text' ) } value={ alt || __( 'None' ) } onPress={ () => {} } />
+				<TextareaControl
+					label={ __( 'Alt Text (Alternative Text)' ) }
+					value={ alt }
+					onChange={ this.updateAlt }
+					help={ __( 'Alternative text describes your image to people who can’t see it. Add a short description with its key details.' ) }
+				/>
 			</BottomSheet>
 		);
 

packages/components/src/base-control/index.native.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+export default function BaseControl( { label, help, children } ) {
+	return (
+		<View
+			accessible={ true }
+			accessibilityLabel={ label }
+		>
+			{ label && <Text>{ label }</Text> }
+			{ children }
+			{ help && <Text>{ help }</Text> }
+		</View>
+	);
+}

packages/components/src/index.native.js

@@ -7,6 +7,8 @@ export { default as withSpokenMessages } from './higher-order/with-spoken-messag
 export { default as IconButton } from './icon-button';
 export { default as Spinner } from './spinner';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
+export { default as BaseControl } from './base-control';
+export { default as TextareaControl } from './textarea-control';
 
 // Higher-Order Components
 export { default as withFilters } from './higher-order/with-filters';

packages/components/src/textarea-control/index.native.js

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { TextInput } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+
+function TextareaControl( { label, value, help, onChange, rows = 4 } ) {
+	return (
+		<BaseControl label={ label } help={ help } >
+			<TextInput
+				style={ { height: 80, borderColor: 'gray', borderWidth: 1 } }
+				value={ value }
+				onChangeText={ onChange }
+				numberOfLines={ rows }
+				multiline={ rows > 1 }
+				textAlignVertical="top"
+			/>
+		</BaseControl>
+	);
+}
+
+export default TextareaControl;

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

@@ -17,8 +17,8 @@ export default function Cell( props ) {
 
 	return (
 		<TouchableOpacity style={ styles.cellContainer } onPress={ onPress }>
-			<Text style={ styles.cellLabel }>{ label }</Text>
-			<Text style={ styles.cellValue }>{ value }</Text>
+			<Text numberOfLines={ 1 } style={ styles.cellLabel }>{ label }</Text>
+			<Text numberOfLines={ 1 } ellipsizeMode={ 'middle' } style={ styles.cellValue }>{ value }</Text>
 		</TouchableOpacity>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text, View } from 'react-native';
+import { Text, View, KeyboardAvoidingView, Platform } from 'react-native';
 import Modal from 'react-native-modal';
 import SafeArea from 'react-native-safe-area';
 
@@ -58,7 +58,10 @@ class BottomSheet extends Component {
 				onSwipe={ this.props.onClose }
 				swipeDirection="down"
 			>
-				<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
+				<KeyboardAvoidingView
+					behavior={ Platform.OS === 'ios' && 'padding' }
+					style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }
+				>
 					<View style={ styles.dragIndicator } />
 					<View style={ styles.head }>
 						<View style={ { flex: 1 } }>
@@ -78,8 +81,9 @@ class BottomSheet extends Component {
 					{ this.props.children }
 					<View style={ { flexGrow: 1 } }></View>
 					<View style={ { height: this.state.safeAreaBottomInset } } />
-				</View>
+				</KeyboardAvoidingView>
 			</Modal>
+
 		);
 	}
 }

packages/editor/src/components/mobile/bottom-sheet/styles.scss

@@ -66,14 +66,15 @@
 	flex-direction: row;
 	min-height: 50;
 	justify-content: space-between;
-	padding-left: 12;
-	padding-right: 12;
+	margin-left: 12;
+	margin-right: 12;
 	align-items: center;
 }
 
 .cellLabel {
 	font-size: 18px;
 	color: #000;
+	margin-right: 12px;
 }
 
 .cellValue {