Add imageCrop, blockProps to block-list and style fixes

WordPress · Nov 10, 2020 · c0f043d · c0f043d
1 parent 2ec63f1
commit c0f043d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -93,6 +93,7 @@ class BlockListBlock extends Component {
 								parentWidth={ this.props.parentWidth }
 								contentStyle={ this.props.contentStyle }
 								onDeleteBlock={ this.props.onDeleteBlock }
+								{ ...( this.props.blockProps || {} ) }
 							/>
 							<View onLayout={ this.getBlockWidth } />
 						</GlobalStylesContext.Provider>

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -119,20 +119,23 @@ export class BlockList extends Component {
 			onDeleteBlock,
 			contentStyle,
 			renderAppender,
+			blockProps,
 		} = this.props;
 		if (
 			this.extraData.parentWidth !== parentWidth ||
 			this.extraData.renderFooterAppender !== renderFooterAppender ||
 			this.extraData.onDeleteBlock !== onDeleteBlock ||
 			this.extraData.contentStyle !== contentStyle ||
-			this.extraData.renderAppender !== renderAppender
+			this.extraData.renderAppender !== renderAppender ||
+			this.extraData.blockProps !== blockProps
 		) {
 			this.extraData = {
 				parentWidth,
 				renderFooterAppender,
 				onDeleteBlock,
 				contentStyle,
 				renderAppender,
+				blockProps,
 			};
 		}
 		return this.extraData;
@@ -272,9 +275,11 @@ export class BlockList extends Component {
 			parentWidth,
 			marginVertical = styles.defaultBlock.marginTop,
 			marginHorizontal = styles.defaultBlock.marginLeft,
+			blockProps,
+			numColumns,
 		} = this.props;
 		return (
-			<View style={ { flex: 1 } }>
+			<View style={ numColumns && { flex: 1 } }>
 				<BlockListItem
 					isStackedHorizontally={ isStackedHorizontally }
 					rootClientId={ rootClientId }
@@ -292,6 +297,7 @@ export class BlockList extends Component {
 					onCaretVerticalPositionChange={
 						this.onCaretVerticalPositionChange
 					}
+					blockProps={ blockProps }
 				/>
 			</View>
 		);

diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -89,8 +89,8 @@ function UncontrolledInnerBlocks( props ) {
 		horizontalAlignment,
 		filterInnerBlocks,
 		numColumns,
+		blockProps,
 	} = props;
-
 	const block = useSelect(
 		( select ) => select( 'core/block-editor' ).getBlock( clientId ),
 		[ clientId ]
@@ -123,6 +123,7 @@ function UncontrolledInnerBlocks( props ) {
 			onDeleteBlock={ onDeleteBlock }
 			filterInnerBlocks={ filterInnerBlocks }
 			numColumns={ numColumns }
+			blockProps={ blockProps }
 		/>
 	);
 

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -339,6 +339,7 @@ function GalleryEdit( props ) {
 				mediaPlaceholder={ mediaPlaceholder }
 				blockProps={ blockProps }
 				insertBlocksAfter={ insertBlocksAfter }
+				imageCrop={ imageCrop }
 			/>
 		</>
 	);

diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js
@@ -63,6 +63,10 @@ export const Gallery = ( props ) => {
 			numColumns: displayedColumns,
 			marginHorizontal: TILE_SPACING,
 			marginVertical: TILE_SPACING,
+			blockProps: {
+				imageCrop,
+				isGallery: true,
+			},
 		}
 	);
 

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -346,6 +346,8 @@ export class ImageEdit extends React.Component {
 			image,
 			imageSizes,
 			clientId,
+			isGallery,
+			imageCrop,
 		} = this.props;
 		const {
 			align,
@@ -451,6 +453,13 @@ export class ImageEdit extends React.Component {
 			wide: 'center',
 		};
 
+		const additionalImageProps = isGallery
+			? {
+					height: '100%',
+					resizeMode: imageCrop ? 'cover' : 'contain',
+			  }
+			: {};
+
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<>
 				<TouchableWithoutFeedback
@@ -485,10 +494,12 @@ export class ImageEdit extends React.Component {
 								return (
 									/// TEMPORARY FOR GALLERY!! TODO
 									<View
-										style={ {
-											height: 150,
-											overflow: 'hidden',
-										} }
+										style={
+											this.props.isGallery && {
+												height: 150,
+												overflow: 'hidden',
+											}
+										}
 									>
 										<Image
 											align={
@@ -513,8 +524,7 @@ export class ImageEdit extends React.Component {
 											url={ url }
 											shapeStyle={ styles[ className ] }
 											width={ this.getWidth() }
-											height={ '100%' }
-											resizeMode={ 'cover' }
+											{ ...additionalImageProps }
 										/>
 									</View>
 								);