[Mobile] - Refactor gallery - Cleanup

lib/experiments-page.php

@@ -58,7 +58,7 @@ function gutenberg_initialize_experiments_settings() {
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Enable the refactored gallery block', 'gutenberg' ),
+			'label' => __( 'Enable the refactored gallery block (Warning: The refactored gallery is not compatible with WordPress mobile apps prior to version 17.8. If you use the mobile app, please update to the latest version to avoid content loss.)', 'gutenberg' ),
 			'id'    => 'gutenberg-gallery-refactor',
 		)
 	);

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

@@ -210,7 +210,6 @@ export class BlockList extends Component {
 			isStackedHorizontally,
 			horizontalAlignment,
 			contentResizeMode,
-			// eslint-disable-next-line no-unused-vars
 			blockWidth,
 		} = this.props;
 		const { parentScrollRef } = extraProps;
@@ -229,11 +228,8 @@ export class BlockList extends Component {
 			marginHorizontal: isRootList ? 0 : -marginHorizontal,
 		};
 
-		// eslint-disable-next-line no-unused-vars
 		const isContentStretch = contentResizeMode === 'stretch';
-		// eslint-disable-next-line no-unused-vars
 		const isMultiBlocks = blockClientIds.length > 1;
-		// eslint-disable-next-line no-unused-vars
 		const { isWider } = alignmentHelpers;
 
 		return (
@@ -269,9 +265,13 @@ export class BlockList extends Component {
 					horizontal={ horizontal }
 					extraData={ this.getExtraData() }
 					scrollEnabled={ isRootList }
-					contentContainerStyle={
-						horizontal && styles.horizontalContentContainer
-					}
+					contentContainerStyle={ [
+						horizontal && styles.horizontalContentContainer,
+						isWider( blockWidth, 'medium' ) &&
+							( isContentStretch && isMultiBlocks
+								? styles.horizontalContentContainerStretch
+								: styles.horizontalContentContainerCenter ),
+					] }
 					style={ getStyles(
 						isRootList,
 						isStackedHorizontally,

packages/block-editor/src/store/defaults.native.js

@@ -8,6 +8,7 @@ import {
 
 const SETTINGS_DEFAULTS = {
 	...SETTINGS,
+	// FOR TESTING ONLY - Later, this will come from a REST API
 	// eslint-disable-next-line no-undef
 	__experimentalGalleryRefactor: __DEV__,
 	alignWide: true,

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

@@ -9,14 +9,12 @@ import { concat, find } from 'lodash';
  */
 import { compose } from '@wordpress/compose';
 import {
-	// eslint-disable-next-line no-unused-vars
 	BaseControl,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
 	withNotices,
 	RangeControl,
-	// eslint-disable-next-line no-unused-vars
 	Spinner,
 } from '@wordpress/components';
 import {
@@ -63,17 +61,13 @@ const linkOptions = [
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-const PLACEHOLDER_TEXT = Platform.select( {
-	web: __(
-		'Drag images, upload new ones or select files from your library.'
-	),
-	native: __( 'ADD MEDIA' ),
-} );
+const PLACEHOLDER_TEXT = Platform.isNative
+	? __( 'ADD MEDIA' )
+	: __( 'Drag images, upload new ones or select files from your library.' );
 
-const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( {
-	web: {},
-	native: { type: 'stepper' },
-} );
+const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
+	? { type: 'stepper' }
+	: {};
 
 function GalleryEdit( props ) {
 	const {
@@ -501,7 +495,7 @@ function GalleryEdit( props ) {
 							hideCancelButton={ true }
 						/>
 					) }
-					{ /* { ! imageSizeOptions && (
+					{ Platform.isWeb && ! imageSizeOptions && (
 						<BaseControl className={ 'gallery-image-sizes' }>
 							<BaseControl.VisualLabel>
 								{ __( 'Image size' ) }
@@ -511,7 +505,7 @@ function GalleryEdit( props ) {
 								{ __( 'Loading options…' ) }
 							</View>
 						</BaseControl>
-					) } */ }
+					) }
 				</PanelBody>
 			</InspectorControls>
 			{ noticeUI }

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

@@ -505,7 +505,7 @@ export class ImageEdit extends Component {
 			image,
 			clientId,
 			imageDefaultSize,
-			context: { isGrouped = false, imageCrop = false },
+			context: { isGrouped = false, imageCrop = false } = {},
 			featuredImageId,
 			wasBlockJustInserted,
 		} = this.props;

packages/element/src/platform.android.js

@@ -14,6 +14,8 @@ const Platform = {
 		}
 		return spec.default;
 	},
+	isNative: true,
+	isAndroid: true,
 };
 
 export default Platform;

packages/element/src/platform.ios.js

@@ -14,6 +14,8 @@ const Platform = {
 		}
 		return spec.default;
 	},
+	isNative: true,
+	isIOS: true,
 };
 
 export default Platform;

packages/element/src/platform.js

@@ -9,6 +9,7 @@
 const Platform = {
 	OS: 'web',
 	select: ( spec ) => ( 'web' in spec ? spec.web : spec.default ),
+	isWeb: true,
 };
 /**
  * Component used to detect the current Platform being used.