[RNMobile] Refactor Caption component

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

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Caption, RichText } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+
+const BlockCaption = ( {
+	accessible,
+	accessibilityLabelCreator,
+	onBlur,
+	onChange,
+	onFocus,
+	isSelected,
+	shouldDisplay,
+	text,
+} ) => (
+	<View
+		style={ { flex: 1, padding: 12 } }
+	>
+		<Caption
+			accessibilityLabelCreator={ accessibilityLabelCreator }
+			accessible={ accessible }
+			isSelected={ isSelected }
+			onBlur={ onBlur }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			shouldDisplay={ shouldDisplay }
+			value={ text }
+		/>
+	</View>
+);
+
+export default compose( [
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlockAttributes,
+			getSelectedBlockClientId,
+		} = select( 'core/block-editor' );
+		const { caption } = getBlockAttributes( clientId );
+		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 {
+			shouldDisplay,
+			text: caption,
+		};
+	} ),
+	withDispatch( ( dispatch, { clientId } ) => {
+		const { updateBlockAttributes } = dispatch( 'core/block-editor' );
+		return {
+			onChange: ( caption ) => {
+				updateBlockAttributes( clientId, { caption } );
+			},
+		};
+	} ),
+] )( BlockCaption );

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

@@ -1,65 +1,59 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { Platform, 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' } }
+// this platform difference is needed to avoid a regression described here:
+// https://github.com/WordPress/gutenberg/pull/18818#issuecomment-559818548
+const CAPTION_TAG_NAME = Platform.select( {
+	ios: 'p',
+	android: '',
+} );
+
+const Caption = ( {
+	accessibilityLabelCreator,
+	accessible,
+	inlineToolbar,
+	isSelected,
+	onBlur,
+	onChange,
+	onFocus,
+	placeholder = __( 'Write caption…' ),
+	placeholderTextColor,
+	shouldDisplay = true,
+	style,
+	value,
+} ) => (
+	<View
+		accessibilityLabel={ accessibilityLabelCreator ? accessibilityLabelCreator( value ) : undefined }
+		accessibilityRole="button"
 		accessible={ accessible }
-		accessibilityLabel={ accessibilityLabel }
-		accessibilityRole={ 'button' }
+		style={ { flex: 1, display: shouldDisplay ? 'flex' : 'none' } }
 	>
 		<RichText
-			rootTagsToEliminate={ [ 'p' ] }
-			placeholder={ __( 'Write caption…' ) }
-			value={ text }
-			onChange={ onChange }
-			unstableOnFocus={ onFocus }
-			onBlur={ onBlur } // always assign onBlur as props
-			isSelected={ isSelected }
 			__unstableMobileNoFocusOnMount
-			fontSize={ 14 }
+			fontSize={ style && style.fontSize ? style.fontSize : 14 }
+			inlineToolbar={ inlineToolbar }
+			isSelected={ isSelected }
+			onBlur={ onBlur }
+			onChange={ onChange }
+			placeholder={ placeholder }
+			placeholderTextColor={ placeholderTextColor }
+			rootTagsToEliminate={ [ 'p' ] }
+			style={ style }
+			tagName={ CAPTION_TAG_NAME }
+			textAlign="center"
 			underlineColorAndroid="transparent"
-			textAlign={ 'center' }
-			tagName={ 'p' }
+			unstableOnFocus={ onFocus }
+			value={ value }
 		/>
 	</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 );
+export default Caption;

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

@@ -22,7 +22,9 @@ export { default as MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from './me
 export { default as MediaUploadProgress } from './media-upload-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
+export { default as BlockCaption } from './block-caption';
 export { default as Caption } from './caption';
+
 export { BottomSheetSettings, BlockSettingsButton } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image, StyleSheet, View, ScrollView, Text, TouchableWithoutFeedback, Platform } from 'react-native';
+import { Image, StyleSheet, View, ScrollView, Text, TouchableWithoutFeedback } from 'react-native';
 import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
@@ -14,7 +14,7 @@ import { isEmpty } from 'lodash';
 import { Component } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { RichText, MediaUploadProgress } from '@wordpress/block-editor';
+import { Caption, MediaUploadProgress } from '@wordpress/block-editor';
 import { isURL } from '@wordpress/url';
 import { withPreferredColorScheme } from '@wordpress/compose';
 
@@ -32,20 +32,14 @@ const removeButtonStyle = compose( style.removeButton, { aspectRatio: 1 } );
 const ICON_SIZE_ARROW = 15;
 const ICON_SIZE_REMOVE = 20;
 
-// this platform difference is needed to avoid a regression described here:
-// https://github.com/WordPress/gutenberg/pull/18818#issuecomment-559818548
-const CAPTION_TAG_NAME = Platform.select( {
-	ios: 'p',
-	android: '',
-} );
-
 class GalleryImage extends Component {
 	constructor() {
 		super( ...arguments );
 
 		this.onSelectImage = this.onSelectImage.bind( this );
 		this.onSelectCaption = this.onSelectCaption.bind( this );
 		this.onMediaPressed = this.onMediaPressed.bind( this );
+		this.onCaptionChange = this.onCaptionChange.bind( this );
 		this.bindContainer = this.bindContainer.bind( this );
 
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
@@ -104,6 +98,11 @@ class GalleryImage extends Component {
 		}
 	}
 
+	onCaptionChange( caption ) {
+		const { setAttributes } = this.props;
+		setAttributes( { caption } );
+	}
+
 	componentDidUpdate( prevProps ) {
 		const { isSelected, image, url } = this.props;
 		if ( image && ! url ) {
@@ -150,10 +149,10 @@ class GalleryImage extends Component {
 	renderContent( params ) {
 		const {
 			url, isFirstItem, isLastItem, isSelected, caption, onRemove,
-			onMoveForward, onMoveBackward, setAttributes, 'aria-label': ariaLabel,
+			onMoveForward, onMoveBackward, 'aria-label': ariaLabel,
 			isCropped, getStylesFromColorScheme } = this.props;
 
-		const { isUploadInProgress } = this.state;
+		const { isUploadInProgress, captionSelected } = this.state;
 		const { isUploadFailed, retryMessage } = params;
 		const resizeMode = isCropped ? 'cover' : 'contain';
 
@@ -234,19 +233,15 @@ class GalleryImage extends Component {
 						{ ( shouldShowCaptionEditable || shouldShowCaptionExpanded ) && (
 							<View style={ captionContainerStyle }>
 								<ScrollView nestedScrollEnabled keyboardShouldPersistTaps="handled">
-									<RichText
-										tagName={ CAPTION_TAG_NAME }
-										rootTagsToEliminate={ [ 'p' ] }
+									<Caption
+										inlineToolbar
+										isSelected={ captionSelected }
+										onChange={ this.onCaptionChange }
+										onFocus={ this.onSelectCaption }
 										placeholder={ isSelected ? __( 'Write caption…' ) : null }
-										value={ caption }
-										isSelected={ this.state.captionSelected }
-										onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
-										unstableOnFocus={ this.onSelectCaption }
-										fontSize={ captionStyle.fontSize }
-										style={ captionStyle }
-										textAlign={ captionStyle.textAlign }
 										placeholderTextColor={ captionPlaceholderStyle.color }
-										inlineToolbar
+										style={ captionStyle }
+										value={ caption }
 									/>
 								</ScrollView>
 							</View>

packages/block-library/src/gallery/gallery.native.js

@@ -16,7 +16,7 @@ import Tiles from './tiles';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Caption } from '@wordpress/block-editor';
+import { BlockCaption } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 
 const TILE_SPACING = 15;
@@ -109,7 +109,7 @@ export const Gallery = ( props ) => {
 				} ) }
 			</Tiles>
 			{ mediaPlaceholder }
-			<Caption
+			<BlockCaption
 				clientId={ clientId }
 				isSelected={ isCaptionSelected }
 				accessible={ true }

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

@@ -27,7 +27,7 @@ import {
 } from '@wordpress/components';
 
 import {
-	Caption,
+	BlockCaption,
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadProgress,
@@ -450,7 +450,7 @@ export class ImageEdit extends React.Component {
 							);
 						} }
 					/>
-					<Caption
+					<BlockCaption
 						clientId={ this.props.clientId }
 						isSelected={ this.state.isCaptionSelected }
 						accessible={ true }

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

@@ -3,6 +3,8 @@
  */
 import React from 'react';
 import { View, TouchableWithoutFeedback, Text } from 'react-native';
+import { isEmpty } from 'lodash';
+
 /**
  * Internal dependencies
  */
@@ -23,7 +25,7 @@ import {
 } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import {
-	Caption,
+	BlockCaption,
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadProgress,
@@ -33,7 +35,7 @@ import {
 	VideoPlayer,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 
@@ -196,7 +198,11 @@ class VideoEdit extends React.Component {
 		}
 
 		return (
-			<TouchableWithoutFeedback onPress={ this.onVideoPressed } disabled={ ! isSelected }>
+			<TouchableWithoutFeedback
+				accessible={ ! isSelected }
+				onPress={ this.onVideoPressed }
+				disabled={ ! isSelected }
+			>
 				<View style={ { flex: 1 } }>
 					{ ! this.state.isCaptionSelected &&
 						<BlockControls>
@@ -256,7 +262,17 @@ class VideoEdit extends React.Component {
 							);
 						} }
 					/>
-					<Caption
+					<BlockCaption
+						accessible={ true }
+						accessibilityLabelCreator={ ( caption ) =>
+							isEmpty( caption ) ?
+							/* translators: accessibility text. Empty video caption. */
+								( 'Video caption. Empty' ) :
+								sprintf(
+								/* translators: accessibility text. %s: video caption. */
+									__( 'Video caption. %s' ),
+									caption )
+						}
 						clientId={ this.props.clientId }
 						isSelected={ this.state.isCaptionSelected }
 						onFocus={ this.onFocusCaption }