[RNMobile] Media & Text alignment options (#18300)

* Correct media text alignments * Unblock alignment options in Media & Text component * Fix images layout in media text * Set center alignment by default, revert shouldStack changes
WordPress · Nov 8, 2019 · 2c3310f · 2c3310f
1 parent eba7de4
commit 2c3310f
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 37 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -75,12 +75,12 @@ export class BlockList extends Component {
 	}
 
 	render() {
-		const { clearSelectedBlock, blockClientIds, isFullyBordered, title, header, withFooter = true, renderAppender, isFirstBlock, selectedBlockParentId } = this.props;
+		const { clearSelectedBlock, blockClientIds, isFullyBordered, title, header, withFooter = true, renderAppender, isFirstBlock, selectedBlockParentId, isRootList } = this.props;
 
 		const showFloatingToolbar = isFirstBlock && selectedBlockParentId !== '';
 		return (
 			<View
-				style={ { flex: 1 } }
+				style={ { flex: isRootList ? 1 : 0 } }
 				onAccessibilityEscape={ clearSelectedBlock }
 			>
 				{ showFloatingToolbar && <FloatingToolbar.Slot fillProps={ { innerFloatingToolbar: showFloatingToolbar } } /> }
@@ -91,7 +91,7 @@ export class BlockList extends Component {
 					innerRef={ this.scrollViewInnerRef }
 					extraScrollHeight={ innerToolbarHeight + 10 }
 					keyboardShouldPersistTaps="always"
-					style={ styles.list }
+					scrollViewStyle={ { flex: isRootList ? 1 : 0 } }
 					data={ blockClientIds }
 					extraData={ [ isFullyBordered ] }
 					keyExtractor={ identity }
@@ -236,6 +236,7 @@ export default compose( [
 			selectedBlockClientId,
 			isFirstBlock,
 			selectedBlockParentId,
+			isRootList: rootClientId === undefined,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
@@ -4,10 +4,6 @@
 	background-color: #fff;
 }
 
-.list {
-	flex: 1;
-}
-
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;

diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
@@ -10,7 +10,7 @@ import { View } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
-	//	BlockVerticalAlignmentToolbar,
+	BlockVerticalAlignmentToolbar,
 	InnerBlocks,
 	withColors,
 } from '@wordpress/block-editor';
@@ -131,10 +131,10 @@ class MediaTextEdit extends Component {
 			attributes,
 			backgroundColor,
 			setAttributes,
-		//	isMobile,
+			// isMobile,
 		} = this.props;
 		const {
-		//	isStackedOnMobile,
+			// isStackedOnMobile,
 			mediaPosition,
 			mediaWidth,
 			verticalAlignment,
@@ -145,7 +145,7 @@ class MediaTextEdit extends Component {
 		const widthString = `${ temporaryMediaWidth }%`;
 		const containerStyles = {
 			...styles[ 'wp-block-media-text' ],
-			...styles[ `is-vertically-aligned-${ verticalAlignment }` ],
+			...styles[ `is-vertically-aligned-${ verticalAlignment || 'center' }` ],
 			...( mediaPosition === 'right' ? styles[ 'has-media-on-the-right' ] : {} ),
 			...( shouldStack ? styles[ 'is-stacked-on-mobile' ] : {} ),
 			...( shouldStack && mediaPosition === 'right' ? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ] : {} ),
@@ -166,22 +166,21 @@ class MediaTextEdit extends Component {
 			onClick: () => setAttributes( { mediaPosition: 'right' } ),
 		} ];
 
-		/* const onVerticalAlignmentChange = ( alignment ) => {
+		const onVerticalAlignmentChange = ( alignment ) => {
 			setAttributes( { verticalAlignment: alignment } );
-		}; */
+		};
 
 		return (
 			<>
 				<BlockControls>
 					<Toolbar
 						controls={ toolbarControls }
 					/>
-					{ /* // Temporarily commenting out until alignment functionality is fixed
 					<BlockVerticalAlignmentToolbar
 						onChange={ onVerticalAlignmentChange }
 						value={ verticalAlignment }
 						isCollapsed={ false }
-					/> */ }
+					/>
 				</BlockControls>
 				<View style={ containerStyles }>
 					<View style={ { width: widthString } }>

diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
@@ -265,32 +265,34 @@ class MediaContainer extends Component {
 
 		if ( mediaUrl ) {
 			return (
-				<View style={ { flex: 1 } }>
+				<View>
 					<MediaUpload
 						onSelect={ this.onSelectMediaUploadOption }
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						value={ mediaId }
 						render={ ( { open, getMediaOptions } ) => {
-							return <>
-								{ getMediaOptions() }
-								{ this.renderToolbarEditButton( open ) }
-
-								<MediaUploadProgress
-									coverUrl={ coverUrl }
-									mediaId={ mediaId }
-									onUpdateMediaProgress={ this.updateMediaProgress }
-									onFinishMediaUploadWithSuccess={ this.finishMediaUploadWithSuccess }
-									onFinishMediaUploadWithFailure={ this.finishMediaUploadWithFailure }
-									onMediaUploadStateReset={ this.mediaUploadStateReset }
-									renderContent={ ( params ) => {
-										return (
-											<View style={ styles.content }>
-												{ this.renderContent( params, open ) }
-											</View>
-										);
-									} }
-								/>
-							</>;
+							return (
+								<View style={ { flex: 1 } }>
+									{ getMediaOptions() }
+									{ this.renderToolbarEditButton( open ) }
+
+									<MediaUploadProgress
+										coverUrl={ coverUrl }
+										mediaId={ mediaId }
+										onUpdateMediaProgress={ this.updateMediaProgress }
+										onFinishMediaUploadWithSuccess={ this.finishMediaUploadWithSuccess }
+										onFinishMediaUploadWithFailure={ this.finishMediaUploadWithFailure }
+										onMediaUploadStateReset={ this.mediaUploadStateReset }
+										renderContent={ ( params ) => {
+											return (
+												<View style={ styles.content }>
+													{ this.renderContent( params, open ) }
+												</View>
+											);
+										} }
+									/>
+								</View>
+							);
 						} }
 					/>
 				</View>

diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
@@ -9,10 +9,11 @@ export const KeyboardAwareFlatList = ( {
 	shouldPreventAutomaticScroll,
 	innerRef,
 	autoScroll,
+	scrollViewStyle,
 	...listProps
 } ) => (
 	<KeyboardAwareScrollView
-		style={ { flex: 1 } }
+		style={ [ { flex: 1 }, scrollViewStyle ] }
 		keyboardDismissMode="none"
 		enableResetScrollToCoords={ false }
 		keyboardShouldPersistTaps="handled"