[RNMobile] Extract caption component

packages/block-editor/src/components/caption/index.native.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+const Caption = ( { accessible, accessibilityLabel, onBlur, onChange, onFocus, isSelected, shouldDisplay, text } ) => (
+	<View style={ {	padding: 12, flex: 1, display: shouldDisplay ? 'flex' : 'none' } }
+		accessible={ accessible }
+		accessibilityLabel={ accessibilityLabel }
+		accessibilityRole={ 'button' }
+	>
+		<RichText
+			rootTagsToEliminate={ [ 'p' ] }
+			placeholder={ __( 'Write caption…' ) }
+			value={ text }
+			onChange={ onChange }
+			unstableOnFocus={ onFocus }
+			onBlur={ onBlur } // always assign onBlur as props
+			isSelected={ isSelected }
+			__unstableMobileNoFocusOnMount
+			fontSize={ 14 }
+			underlineColorAndroid="transparent"
+			textAlign={ 'center' }
+			tagName={ '' }
+		/>
+	</View>
+);
+
+export default compose( [
+	withSelect( ( select, { accessibilityLabelCreator, clientId } ) => {
+		const {
+			getBlockAttributes,
+			getSelectedBlockClientId,
+		} = select( 'core/block-editor' );
+		const { caption } = getBlockAttributes( clientId );
+		const accessibilityLabel = accessibilityLabelCreator ? accessibilityLabelCreator( caption ) : undefined;
+		const isBlockSelected = getSelectedBlockClientId() === clientId;
+
+		// We'll render the caption so that the soft keyboard is not forced to close on Android
+		// but still hide it by setting its display style to none. See wordpress-mobile/gutenberg-mobile#1221
+		const shouldDisplay = ! RichText.isEmpty( caption ) > 0 || isBlockSelected;
+
+		return {
+			accessibilityLabel,
+			shouldDisplay,
+			text: caption,
+		};
+	} ),
+	withDispatch( ( dispatch, { clientId } ) => {
+		const { updateBlockAttributes } = dispatch( 'core/block-editor' );
+		return {
+			onChange: ( caption ) => {
+				updateBlockAttributes( clientId, { caption } );
+			},
+		};
+	} ),
+] )( Caption );

packages/block-editor/src/components/index.native.js

@@ -17,6 +17,7 @@ export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from './media-upload';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
+export { default as Caption } from './caption';
 
 // Content Related Components
 export { default as BlockList } from './block-list';

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

@@ -21,10 +21,10 @@ import {
 	ToolbarButton,
 } from '@wordpress/components';
 import {
+	Caption,
 	MediaPlaceholder,
 	MediaUpload,
 	MEDIA_TYPE_IMAGE,
-	RichText,
 	BlockControls,
 	InspectorControls,
 } from '@wordpress/block-editor';
@@ -115,7 +115,6 @@ class ImageEdit extends React.Component {
 			requestImageFailedRetryDialog( attributes.id );
 		}
 
-		this._caption.blur();
 		this.setState( {
 			isCaptionSelected: false,
 		} );
@@ -201,8 +200,8 @@ class ImageEdit extends React.Component {
 	}
 
 	render() {
-		const { attributes, isSelected, setAttributes } = this.props;
-		const { url, caption, height, width, alt, href, id } = attributes;
+		const { attributes, isSelected } = this.props;
+		const { url, height, width, alt, href, id } = attributes;
 
 		const onImageSettingsButtonPressed = () => {
 			this.setState( { showSettings: true } );
@@ -270,12 +269,6 @@ class ImageEdit extends React.Component {
 			);
 		}
 
-		// We still want to render the caption so that the soft keyboard is not forced to close on Android
-		const shouldCaptionDisplay = () => {
-			const isCaptionEmpty = RichText.isEmpty( caption ) > 0;
-			return ! isCaptionEmpty || isSelected;
-		};
-
 		const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO;
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<TouchableWithoutFeedback
@@ -344,38 +337,22 @@ class ImageEdit extends React.Component {
 							);
 						} }
 					/>
-					<View style={ { padding: 12, flex: 1, display: shouldCaptionDisplay() ? 'flex' : 'none' } }
+					<Caption
+						clientId={ this.props.clientId }
+						isSelected={ this.state.isCaptionSelected }
 						accessible={ true }
-						accessibilityLabel={
+						accessibilityLabelCreator={ ( caption ) =>
 							isEmpty( caption ) ?
 							/* translators: accessibility text. Empty image caption. */
-								__( 'Image caption. Empty' ) :
+								( 'Image caption. Empty' ) :
 								sprintf(
-									/* translators: accessibility text. %s: image caption. */
+								/* translators: accessibility text. %s: image caption. */
 									__( 'Image caption. %s' ),
-									caption
-								)
+									caption )
 						}
-						accessibilityRole={ 'button' }
-					>
-						<RichText
-							setRef={ ( ref ) => {
-								this._caption = ref;
-							} }
-							rootTagsToEliminate={ [ 'p' ] }
-							placeholder={ __( 'Write caption…' ) }
-							value={ caption }
-							onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
-							unstableOnFocus={ this.onFocusCaption }
-							onBlur={ this.props.onBlur } // always assign onBlur as props
-							isSelected={ this.state.isCaptionSelected }
-							__unstableMobileNoFocusOnMount
-							fontSize={ 14 }
-							underlineColorAndroid="transparent"
-							textAlign={ 'center' }
-							tagName={ '' }
-						/>
-					</View>
+						onFocus={ this.onFocusCaption }
+						onBlur={ this.props.onBlur } // always assign onBlur as props
+					/>
 				</View>
 			</TouchableWithoutFeedback>
 		);

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { View, TextInput, TouchableWithoutFeedback, Text } from 'react-native';
+import { View, TouchableWithoutFeedback, Text } from 'react-native';
 /**
  * Internal dependencies
  */
@@ -22,10 +22,10 @@ import {
 	ToolbarButton,
 } from '@wordpress/components';
 import {
+	Caption,
 	MediaPlaceholder,
 	MediaUpload,
 	MEDIA_TYPE_VIDEO,
-	RichText,
 	BlockControls,
 	InspectorControls,
 } from '@wordpress/block-editor';
@@ -48,6 +48,7 @@ class VideoEdit extends React.Component {
 		super( props );
 
 		this.state = {
+			isCaptionSelected: false,
 			showSettings: false,
 			videoContainerHeight: 0,
 		};
@@ -59,6 +60,7 @@ class VideoEdit extends React.Component {
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.onVideoPressed = this.onVideoPressed.bind( this );
 		this.onVideoContanerLayout = this.onVideoContanerLayout.bind( this );
+		this.onFocusCaption = this.onFocusCaption.bind( this );
 	}
 
 	componentDidMount() {
@@ -75,6 +77,14 @@ class VideoEdit extends React.Component {
 		}
 	}
 
+	static getDerivedStateFromProps( props, state ) {
+		// Avoid a UI flicker in the toolbar by insuring that isCaptionSelected
+		// is updated immediately any time the isSelected prop becomes false
+		return {
+			isCaptionSelected: props.isSelected && state.isCaptionSelected,
+		};
+	}
+
 	onVideoPressed() {
 		const { attributes } = this.props;
 
@@ -83,6 +93,16 @@ class VideoEdit extends React.Component {
 		} else if ( attributes.id && ! isURL( attributes.src ) ) {
 			requestImageFailedRetryDialog( attributes.id );
 		}
+
+		this.setState( {
+			isCaptionSelected: false,
+		} );
+	}
+
+	onFocusCaption() {
+		if ( ! this.state.isCaptionSelected ) {
+			this.setState( { isCaptionSelected: true } );
+		}
 	}
 
 	updateMediaProgress( payload ) {
@@ -135,8 +155,8 @@ class VideoEdit extends React.Component {
 	}
 
 	render() {
-		const { attributes, isSelected, setAttributes } = this.props;
-		const { caption, id, src } = attributes;
+		const { attributes, isSelected } = this.props;
+		const { id, src } = attributes;
 		const { videoContainerHeight } = this.state;
 
 		const toolbarEditButton = (
@@ -173,9 +193,10 @@ class VideoEdit extends React.Component {
 		return (
 			<TouchableWithoutFeedback onPress={ this.onVideoPressed } disabled={ ! isSelected }>
 				<View style={ { flex: 1 } }>
-					<BlockControls>
-						{ toolbarEditButton }
-					</BlockControls>
+					{ ! this.state.isCaptionSelected &&
+						<BlockControls>
+							{ toolbarEditButton }
+						</BlockControls> }
 					<InspectorControls>
 						{ false && <ToolbarButton //Not rendering settings button until it has an action
 							label={ __( 'Video Settings' ) }
@@ -212,7 +233,7 @@ class VideoEdit extends React.Component {
 									{ showVideo &&
 										<View style={ style.videoContainer }>
 											<Video
-												isSelected={ isSelected }
+												isSelected={ isSelected && ! this.state.isCaptionSelected }
 												style={ videoStyle }
 												source={ { uri: src } }
 												paused={ true }
@@ -229,20 +250,12 @@ class VideoEdit extends React.Component {
 							);
 						} }
 					/>
-					{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
-						<View style={ { paddingTop: 8, paddingBottom: 0, flex: 1 } }>
-							<TextInput
-								style={ { textAlign: 'center' } }
-								fontFamily={ this.props.fontFamily || ( style[ 'caption-text' ].fontFamily ) }
-								underlineColorAndroid="transparent"
-								value={ caption }
-								placeholder={ __( 'Write caption…' ) }
-								placeholderTextColor={ style.captionPlaceholder.color }
-								onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
-								onFocus={ this.props.onFocus }
-							/>
-						</View>
-					) }
+					<Caption
+						clientId={ this.props.clientId }
+						isSelected={ this.state.isCaptionSelected }
+						onFocus={ this.onFocusCaption }
+						onBlur={ this.props.onBlur } // always assign onBlur as props
+					/>
 				</View>
 			</TouchableWithoutFeedback>
 		);

packages/block-library/src/video/style.native.scss

@@ -53,14 +53,6 @@
 	border-style: solid;
 }
 
-.caption-text {
-	font-family: $default-regular-font;
-}
-
-.captionPlaceholder {
-	color: $gray;
-}
-
 .icon {
 	fill: $gray-dark;
 	width: 100%;