RNMobile Add size options to mobile image block (#17245)

cameronvoell · hypest · commit 1e5263a8b6a7 · 2019-11-04T15:51:58.000+02:00
* [RNMobile] Native mobile release v1.11.0 (#17181) * [RNMobile] Fix crash when adding separator * Build: remove global install of latest npm since we want to use the paired node/npm version (#17134) * Build: remove global install of latest npm since we want to use the paired node/npm version * Also update travis to remove --latest-npm flag * [RNMobile] Try dark mode (iOS) (#17067) * Adding dark mode component implemented on list and list block * Adding DarkMode handling to RichText, ToolBar and SafeArea * Mobile: Using DarkMode as HOC * iOS DarkMode: Modified colors on block list and block container * iOS DarkMode: Improved Header Toolbar colors * iOS DarkMode: Removing background from buttons * iOS DarkMode warning and unsupported * iOS DarkMode: MediaPlaceholder * iOS DarkMode: BottomSheets * iOS DarkMode: Inserter * iOS DarkMode: DefaultBlockAppender * iOS DarkMode: PostTite * Update hardcoded colors with variables * iOS DarkMode: Fix bottom-sheet cell value color * iOS DarkMode: More - PageBreak - Add Block Here * iOS DarkMode: Better text color * iOS Darkmode: Code block * iOS DarkMode: HTML View * iOS DarkMode: Improve colors on SafeArea * Fix toolbar not avoiding keyboard regression * Fix native unit tests * Fix gutenberg-mobile unit tests * Adding RNDarkMode mocks * RNMobile: Fix crash when viewing HTML on iOS * [RNMobile] Remove toolbar from html view * [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186) * Fix MaxListenersExceededWarning caused by dark-mode event emitter * Checking for setMaxListeners trying to avoid CI error * Adding remove listener to DarkMode HOC * DarkMode: Binding this.onModeChanged to `this` * DarkMode: Adding conditional needed to pass UI Tests on CI * Fix focus title on new posts regression (#17180) * BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193) * Activate Travis CI on rnmobile/master branch (#17229) * Added ability to update image size options (sizeSlug) through a new InspectorControl Cell that leads to a Picker. * Added a style for Size Inspector Controls cell to align it will other cells that have icons. * Add native support for the MediaText block (#16305) * First working version of the MediaText component for native mobile * Fix adding a block to an innerblock list * Disable mediaText on production * MediaText native: improve editor visuals * Move BlockToolbar from BlockList to Layout * Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender * Update BlockMover for native to hide if locked or if it's the only block * Make the vertical align button work, add more styling options for toolbar buttons * Make sure registerCoreBlocks does not break in production * Copy docblock comment from the web version for registerCoreBlocks * Fix focusing on the media placeholder * Only support adding image for now * Update usage of MediaPlaceholder in MediaContainer * Enable autoScroll for just the out most block list * Fix JS Unit tests * Roll back to IconButton refactor and fix tests * Fix BlockVerticalAlignmentToolbar buttons style on mobile * Fix thing for web and ensure ariaPressed is always passed down * Use AriaPressed directly to style SVG on mobile * Update snapshots * Swtiched to react-native Modal onDismiss property for signaling Picker is ready to show * Added a prop for catching modal dismissal on Android. (onDismiss is iOS only and onModalHide works on Android but breaks on iOS) * Added icon for Inspector Controls size option. Removed style we no longer need. * Added title to size option iOS ActionSheet and left alignstyle to size options BottomSheet * MediaUpload and MediaPlaceholder unify props (#17145) * Unify media placeholder and upload props within media-text (#17268) * [RNMobile] Fix dismiss keyboard button for the post title (#17260) * Set unused functions to undefined instead of false in BottomSheet Modal props * Recover border colors (#17269) * [RNMobile] Insure tapping at end of post inserts at end Previously, tapping at the end of the post would insert a block immediately after the currently selected block. In addition, this commit is cleaning out a few unusued props in the block-list file. * Support group block on mobile (#17251) * First working version of the MediaText component for native mobile * Fix adding a block to an innerblock list * Disable mediaText on production * MediaText native: improve editor visuals * Move BlockToolbar from BlockList to Layout * Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender * Update BlockMover for native to hide if locked or if it's the only block * Make the vertical align button work, add more styling options for toolbar buttons * Make sure registerCoreBlocks does not break in production * Copy docblock comment from the web version for registerCoreBlocks * Fix focusing on the media placeholder * Only support adding image for now * Update usage of MediaPlaceholder in MediaContainer * Enable autoScroll for just the out most block list * Fix JS Unit tests * Roll back to IconButton refactor and fix tests * Fix BlockVerticalAlignmentToolbar buttons style on mobile * Fix thing for web and ensure ariaPressed is always passed down * Use AriaPressed directly to style SVG on mobile * Update snapshots * Support group block on mobile * Extend shouldShowInsertionPoint condition to be false when group is selected * Code refactor * Update package-lock * Removing old style reference. * Moved Picker for image size options into new ImageSizePicker component. Cleaned up sizeOptionLabels. * Updated total left margin on Android Image size options to be 24 px instead of 28 px * Image Size options hidden behind __DEV__ flag * Remove redundant bg color within button appender (#17325) * [RNMobile] DarkMode improvements (#17309) * Remove the need to import `useStyle` and pass the theme prop on every instance that `withStyle` is used * Implement dark-mode refactor on all components * Fix broken native tests * Fix default block appender background color on DarkMode * DarkMode: Make `useStyle` a class function * Cleaned up default true properties and replaced code with lodash map. * Updated to use BottomSheetPickerCell. Eliminated code, but size options now open over top inspector controls menu. * Added leftalign to PickerCell. * [RNMobile] Add autosave to mobile apps (#17329) * [RNMobile] Fix crash when adding separator * Build: remove global install of latest npm since we want to use the paired node/npm version (#17134) * Build: remove global install of latest npm since we want to use the paired node/npm version * Also update travis to remove --latest-npm flag * [RNMobile] Try dark mode (iOS) (#17067) * Adding dark mode component implemented on list and list block * Adding DarkMode handling to RichText, ToolBar and SafeArea * Mobile: Using DarkMode as HOC * iOS DarkMode: Modified colors on block list and block container * iOS DarkMode: Improved Header Toolbar colors * iOS DarkMode: Removing background from buttons * iOS DarkMode warning and unsupported * iOS DarkMode: MediaPlaceholder * iOS DarkMode: BottomSheets * iOS DarkMode: Inserter * iOS DarkMode: DefaultBlockAppender * iOS DarkMode: PostTite * Update hardcoded colors with variables * iOS DarkMode: Fix bottom-sheet cell value color * iOS DarkMode: More - PageBreak - Add Block Here * iOS DarkMode: Better text color * iOS Darkmode: Code block * iOS DarkMode: HTML View * iOS DarkMode: Improve colors on SafeArea * Fix toolbar not avoiding keyboard regression * Fix native unit tests * Fix gutenberg-mobile unit tests * Adding RNDarkMode mocks * RNMobile: Fix crash when viewing HTML on iOS * [RNMobile] Remove toolbar from html view * [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186) * Fix MaxListenersExceededWarning caused by dark-mode event emitter * Checking for setMaxListeners trying to avoid CI error * Adding remove listener to DarkMode HOC * DarkMode: Binding this.onModeChanged to `this` * DarkMode: Adding conditional needed to pass UI Tests on CI * Fix focus title on new posts regression (#17180) * BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193) * Add a preliminary version of the AutosaveMonitor for mobile that calls the "bridge" and asks the native side to save the content * Add autosave mock function for tests * Fix merge conflicts * Fix lint * Re-add autosave on mobile that was removed erroneously during import-merge from rnmobile/master * Remove native variant of AutosaveMonitor and introduces changes at editor store level * Default to false for `isEditedPostAutosaveable` on mobile. There was a typo in the returing value on the previous commit. * Make sure to consider edits to the Title when checking if auto-save is needed * Fix lint * Add isAppender functionality on mobile (#17195) * Add isAppender functionality on mobile * refactor isAppender conditions * Replace dropZoneUIOnly in favour of showMediaSelectionUI * deprecate dropZoneUIOnly and add disableMediaSelection prop * Update test * Refactor tests and change prop name * Remove redundant empty lines * Refactor conditions inside MediaPlaceholder * Update block-editor CHANGELOG * Update packages/block-editor/CHANGELOG.md Co-Authored-By: Grzegorz (Greg) Ziółkowski <grzegorz@gziolo.pl> * Autosave monitor - Make the mobile editor ping the native at each keystroke, since the deboucing logic is already well defined in the apps. (#17548) * [RNMobile] Refactor Dark Mode HOC (#17552) * [RNMobile] Refactor the Dark Mode HOC to fix naming antipatterns * Fix lint errors * Add .native.js suffix to usePreferredColorScheme * Update usage of theme props renamed to preferredColorScheme * Update usage of theme props renamed to preferredColorScheme * Add missing heading levels to the UI (H4, H5, H6) (#17533) * Fix lint issue (#17598) * Fix list filter on paste for RN mobile. (#17550) * Fix method for RN mobile. * Use array.From instead of slice. * Remove comment and use Array.from directly * Convert from NodeList spreadable to Array.from * Fix lint errors. * Fix documentation examples to use Array.from * Add empty line. * [RNMobile] Move MediaUploadPorgress to its own component folder (#17392) * Move MediaUploadPorgress to its own component folder (native) * MediaUploadProgress - Fix import to code standards * MediaUploadProgress readme * Mobile - MediaUploadProgress README update * Rnmobile/fix link editing on start (#17631) * Don't try to clear links if text is clean. * Commented LinkUI removal test when no URL. * Don't try to remove link if we are at start of link and no actual selection is * Re-implementing #17802, affected by merge. Fixed extra space and unused code. * Fixing lint error, trailing space.
diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -19,10 +19,6 @@
 	background-color: $background-dark-secondary;
 }
 
-.emptyStateContainerDark {
-	background-color: $background-dark-secondary;
-}
-
 .emptyStateTitle {
 	text-align: center;
 	margin-top: 8;
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
@@ -106,7 +106,7 @@ export class MediaUpload extends React.Component {
 
 		const getMediaOptions = () => (
 			<Picker
-				hideCancelButton={ true }
+				hideCancelButton
 				ref={ ( instance ) => this.picker = instance }
 				options={ mediaOptions }
 				onChange={ this.onPickerChange }
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -9,14 +9,15 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 } from 'react-native-gutenberg-bridge';
-import { isEmpty } from 'lodash';
+import { isEmpty, map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import {
 	TextControl,
 	ToggleControl,
+	SelectControl,
 	Icon,
 	Toolbar,
 	ToolbarButton,
@@ -50,6 +51,19 @@ import {
 	LINK_DESTINATION_NONE,
 } from './constants';
 
+const IMAGE_SIZE_THUMBNAIL = 'thumbnail';
+const IMAGE_SIZE_MEDIUM = 'medium';
+const IMAGE_SIZE_LARGE = 'large';
+const IMAGE_SIZE_FULL_SIZE = 'full';
+const DEFAULT_SIZE_SLUG = IMAGE_SIZE_LARGE;
+const sizeOptionLabels = {
+	[ IMAGE_SIZE_THUMBNAIL ]: __( 'Thumbnail' ),
+	[ IMAGE_SIZE_MEDIUM ]: __( 'Medium' ),
+	[ IMAGE_SIZE_LARGE ]: __( 'Large' ),
+	[ IMAGE_SIZE_FULL_SIZE ]: __( 'Full Size' ),
+};
+const sizeOptions = map( sizeOptionLabels, ( label, option ) => ( { value: option, label } ) );
+
 // Default Image ratio 4:3
 const IMAGE_ASPECT_RATIO = 4 / 3;
 
@@ -70,6 +84,7 @@ export class ImageEdit extends React.Component {
 		this.updateImageURL = this.updateImageURL.bind( this );
 		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
 		this.onSetNewTab = this.onSetNewTab.bind( this );
+		this.onSetSizeSlug = this.onSetSizeSlug.bind( this );
 		this.onImagePressed = this.onImagePressed.bind( this );
 		this.onClearSettings = this.onClearSettings.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
@@ -179,12 +194,19 @@ export class ImageEdit extends React.Component {
 		this.props.setAttributes( updatedLinkTarget );
 	}
 
+	onSetSizeSlug( sizeSlug ) {
+		this.props.setAttributes( {
+			sizeSlug,
+		} );
+	}
+
 	onClearSettings() {
 		this.props.setAttributes( {
 			alt: '',
 			linkDestination: LINK_DESTINATION_NONE,
 			href: undefined,
 			linkTarget: undefined,
+			sizeSlug: DEFAULT_SIZE_SLUG,
 			rel: undefined,
 		} );
 	}
@@ -216,7 +238,7 @@ export class ImageEdit extends React.Component {
 
 	render() {
 		const { attributes, isSelected } = this.props;
-		const { url, height, width, alt, href, id, linkTarget } = attributes;
+		const { url, height, width, alt, href, id, linkTarget, sizeSlug } = attributes;
 
 		const getToolbarEditButton = ( open ) => (
 			<BlockControls>
@@ -249,6 +271,16 @@ export class ImageEdit extends React.Component {
 						checked={ linkTarget === '_blank' }
 						onChange={ this.onSetNewTab }
 					/>
+					{ // eslint-disable-next-line no-undef
+						__DEV__ &&
+						<SelectControl
+							hideCancelButton
+							icon={ 'editor-expand' }
+							label={ __( 'Size' ) }
+							value={ sizeOptionLabels[ sizeSlug || DEFAULT_SIZE_SLUG ] }
+							onChangeValue={ ( newValue ) => this.onSetSizeSlug( newValue ) }
+							options={ sizeOptions }
+						/> }
 					<TextControl
 						icon={ 'editor-textcolor' }
 						label={ __( 'Alt Text' ) }
diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -42,6 +42,7 @@ class BottomSheetCell extends Component {
 			value,
 			valuePlaceholder = '',
 			icon,
+			leftAlign,
 			labelStyle = {},
 			valueStyle = {},
 			onChangeValue,
@@ -57,7 +58,10 @@ class BottomSheetCell extends Component {
 		const isValueEditable = editable && onChangeValue !== undefined;
 		const cellLabelStyle = getStylesFromColorScheme( styles.cellLabel, styles.cellTextDark );
 		const cellLabelCenteredStyle = getStylesFromColorScheme( styles.cellLabelCentered, styles.cellTextDark );
-		const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : cellLabelCenteredStyle;
+		const cellLabelLeftAlignNoIconStyle = getStylesFromColorScheme( styles.cellLabelLeftAlignNoIcon, styles.cellTextDark );
+		const defaultMissingIconAndValue = leftAlign ? cellLabelLeftAlignNoIconStyle : cellLabelCenteredStyle;
+		const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : defaultMissingIconAndValue;
+
 		const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined;
 
 		const onCellPress = () => {
diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -136,6 +136,8 @@ class BottomSheet extends Component {
 				onBackdropPress={ this.props.onClose }
 				onBackButtonPress={ this.props.onClose }
 				onSwipe={ this.props.onClose }
+				onDismiss={ Platform.OS === 'ios' ? this.props.onDismiss : undefined }
+				onModalHide={ Platform.OS === 'android' ? this.props.onDismiss : undefined }
 				swipeDirection="down"
 				onMoveShouldSetResponder={ panResponder.panHandlers.onMoveShouldSetResponder }
 				onMoveShouldSetResponderCapture={ panResponder.panHandlers.onMoveShouldSetResponderCapture }
diff --git a/packages/components/src/mobile/bottom-sheet/picker-cell.native.js b/packages/components/src/mobile/bottom-sheet/picker-cell.native.js
@@ -7,6 +7,7 @@ import Picker from '../picker';
 export default function BottomSheetPickerCell( props ) {
 	const {
 		options,
+		hideCancelButton,
 		onChangeValue,
 		...cellProps
 	} = props;
@@ -24,6 +25,8 @@ export default function BottomSheetPickerCell( props ) {
 	return (
 		<Cell onPress={ onCellPress } editable={ false } { ...cellProps } >
 			<Picker
+				leftAlign
+				hideCancelButton={ hideCancelButton }
 				ref={ ( instance ) => picker = instance }
 				options={ options }
 				onChange={ onChange }
diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -120,6 +120,13 @@
 	text-align: center;
 }
 
+.cellLabelLeftAlignNoIcon {
+	font-size: 17px;
+	color: #2e4453;
+	flex: 1;
+	margin-left: 12px;
+}
+
 .cellValue {
 	font-size: 17px;
 	color: #2e4453;
diff --git a/packages/components/src/mobile/picker/index.android.js b/packages/components/src/mobile/picker/index.android.js
@@ -52,6 +52,7 @@ export default class Picker extends Component {
 						<BottomSheet.Cell
 							icon={ option.icon }
 							key={ index }
+							leftAlign={ this.props.leftAlign }
 							label={ option.label }
 							separatorType={ 'none' }
 							onPress={ () => this.onCellPress( option.value ) }
diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js
@@ -11,12 +11,13 @@ import { Component } from '@wordpress/element';
 
 class Picker extends Component {
 	presentPicker() {
-		const { options, onChange } = this.props;
+		const { options, onChange, title } = this.props;
 		const labels = options.map( ( { label } ) => label );
 		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
 
 		ActionSheetIOS.showActionSheetWithOptions(
 			{
+				title,
 				options: fullOptions,
 				cancelButtonIndex: 0,
 			},
