From 1e089dba0c572bd7dd71f37aa1c4759cd6aaf81b Mon Sep 17 00:00:00 2001 From: Cameron Voell Date: Wed, 16 Oct 2019 04:00:34 -0700 Subject: [PATCH] RNMobile Add size options to mobile image block (#17245) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [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 * 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 https://github.com/WordPress/gutenberg/pull/17802, affected by merge. Fixed extra space and unused code. * Fixing lint error, trailing space. --- .../media-placeholder/styles.native.scss | 4 --- .../components/media-upload/index.native.js | 2 +- .../block-library/src/image/edit.native.js | 36 +++++++++++++++++-- .../src/mobile/bottom-sheet/cell.native.js | 6 +++- .../src/mobile/bottom-sheet/index.native.js | 2 ++ .../mobile/bottom-sheet/picker-cell.native.js | 3 ++ .../mobile/bottom-sheet/styles.native.scss | 7 ++++ .../src/mobile/picker/index.android.js | 1 + .../components/src/mobile/picker/index.ios.js | 3 +- 9 files changed, 55 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index a0b7445debf66b..03c7c73b2edfc9 100644 --- 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 index 3d89091e94da3d..77f125fb35f91a 100644 --- 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 = () => ( 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 index ce2c1affe275a5..3e08ed18a2361d 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -9,7 +9,7 @@ import { requestImageFailedRetryDialog, requestImageUploadCancelDialog, } from 'react-native-gutenberg-bridge'; -import { isEmpty } from 'lodash'; +import { isEmpty, map } from 'lodash'; /** * WordPress dependencies @@ -17,6 +17,7 @@ import { isEmpty } from 'lodash'; 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 ) => ( @@ -249,6 +271,16 @@ export class ImageEdit extends React.Component { checked={ linkTarget === '_blank' } onChange={ this.onSetNewTab } /> + { // eslint-disable-next-line no-undef + __DEV__ && + this.onSetSizeSlug( newValue ) } + options={ sizeOptions } + /> } { diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index f17284b49e7306..4de3335189dce8 100644 --- 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 index 50a775f25728b1..12eae94c7d8919 100644 --- 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 ( 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 index 8f153715c16705..86422f3228cac4 100644 --- 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 index 3fad1cc2b23bf0..372378e0a2b3ed 100644 --- 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 { this.onCellPress( option.value ) } diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js index 2cf9798b28e9c0..9de17d1ff7060a 100644 --- 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, },