From 5127d8465664246d994bb3deea2ae5d6a7c4fc8b Mon Sep 17 00:00:00 2001 From: Stefanos Togoulidis Date: Fri, 22 Feb 2019 20:10:20 +0200 Subject: [PATCH] Merge native mobile release v1.0 to master (#14061) * Bump plugin version to 5.1.0-rc.1 * RichText: only ignore input types that insert HTML (#13914) * RichText: only ignore input types that insert HTML * Mark RichTextInputEvent as unstable * Use Set * Bump plugin version to 5.1.0 * Deprecate RichTextInputEvent on mobile too (#13975) * The undelying RichText component implementation has changed the parameters returned onChange, and we forgot to update the PostTitle component (#13967) * Fixes wrong state comparison (#13987) Upload media progress bar is missing while media is uploading new * Re-add rootTagsToEliminate prop (#14006) * [Mobile]Update PostTitle to apply borders when it is focused (#13970) * Trigger onFocusStatusChange from PostTitle * Fix lint issue * Update post title shadow mechanism Also open inner ref so that focus state can be updated when focus is made programmatically * Update props * Update onRef as ref * Update title padding&margin * Mobile: Rename ref to innerRef on PostTitle (#14024) * Fixes a red screen in mobile. (#14011) * Change background color on image placeholder block (#14033) * Changed upload media icon color * Changed media placeholder background color * Fix post title native syntax (#14041) * Fix unexpected token in native code * Dummy commit to trigger Travis * Include the rnmobile release branch to Travis builds * Mobile: Links UI using BottomSheet component (#13972) * Mobile: Replaced Links UI with bottom-sheet component * Mobile links UI: Removed commented code. * Mobile: Fix lint issues * Mobile Links UI: Remove autofocus on Android. This hides an issue where the modal sometimes will be under the keyboard on Android. * Fixes pasting links. (#14038) * Update post title vertical paddings (#14040) * Add try/catch fallback to plain text for pasteHandler (#14044) * Fix link interface. (#14052) * [Mobile]Fix title padding on Android (#14057) * Remove title vertical paddings for Android * Revert "Remove title vertical paddings for Android" This reverts commit 09f0d3592f77509e6a19e7712bba725a6118ab0f. * Import padding variables * Revert wrong format image color (#14058) * Stop building the mobile release branch on Travis (#14060) --- .../block-library/src/image/edit.native.js | 2 +- .../editor/src/components/index.native.js | 2 +- .../media-placeholder/styles.native.scss | 2 +- .../mobile/bottom-sheet/cell.native.js | 13 +- .../mobile/bottom-sheet/styles.native.scss | 1 + .../src/components/post-title/index.native.js | 76 ++++++++--- .../components/post-title/style.native.scss | 10 ++ .../src/components/rich-text/index.native.js | 34 +++-- .../rich-text/input-event.native.js | 2 +- .../format-library/src/link/button.native.js | 24 ---- .../format-library/src/link/index.native.js | 20 ++- .../format-library/src/link/modal.native.js | 129 ++++++++---------- .../format-library/src/link/modal.native.scss | 81 +---------- 13 files changed, 174 insertions(+), 222 deletions(-) create mode 100644 packages/editor/src/components/post-title/style.native.scss delete mode 100644 packages/format-library/src/link/button.native.js diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 73b3eba1ab5fa..eabcdc9941a26 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -124,7 +124,7 @@ class ImageEdit extends React.Component { updateMediaProgress( payload ) { const { setAttributes } = this.props; this.setState( { progress: payload.progress, isUploadInProgress: true, isUploadFailed: false } ); - if ( payload.mediaUrl !== undefined ) { + if ( payload.mediaUrl ) { setAttributes( { url: payload.mediaUrl } ); } } diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js index cd974fd2dfea1..d7d35e3873e2a 100644 --- a/packages/editor/src/components/index.native.js +++ b/packages/editor/src/components/index.native.js @@ -5,7 +5,7 @@ export { default as RichText, RichTextShortcut, RichTextToolbarButton, - RichTextInputEvent, + UnstableRichTextInputEvent, } from './rich-text'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as BlockFormatControls } from './block-format-controls'; diff --git a/packages/editor/src/components/media-placeholder/styles.native.scss b/packages/editor/src/components/media-placeholder/styles.native.scss index 964bb4371310d..d3001491eb73a 100644 --- a/packages/editor/src/components/media-placeholder/styles.native.scss +++ b/packages/editor/src/components/media-placeholder/styles.native.scss @@ -4,7 +4,7 @@ flex-direction: column; align-items: center; justify-content: center; - background-color: #f2f2f2; + background-color: #e9eff3; padding-left: 12; padding-right: 12; padding-top: 12; diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js index 6ac26d2d00ff8..9acc94bbfb3bb 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -16,10 +16,10 @@ import styles from './styles.scss'; import platformStyles from './cellStyles.scss'; export default class Cell extends Component { - constructor() { + constructor( props ) { super( ...arguments ); this.state = { - isEditingValue: false, + isEditingValue: props.autoFocus || false, }; } @@ -53,7 +53,7 @@ export default class Cell extends Component { const onCellPress = () => { if ( isValueEditable ) { - this.setState( { isEditingValue: true } ); + startEditing(); } else if ( onPress !== undefined ) { onPress(); } @@ -63,6 +63,12 @@ export default class Cell extends Component { this.setState( { isEditingValue: false } ); }; + const startEditing = () => { + if ( this.state.isEditingValue === false ) { + this.setState( { isEditingValue: true } ); + } + }; + const separatorStyle = () => { const leftMarginStyle = { ...styles.cellSeparator, ...platformStyles.separatorMarginLeft }; switch ( separatorType ) { @@ -97,6 +103,7 @@ export default class Cell extends Component { onChangeText={ onChangeValue } editable={ isValueEditable } pointerEvents={ this.state.isEditingValue ? 'auto' : 'none' } + onFocus={ startEditing } onBlur={ finishEditing } { ...valueProps } /> diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss index 198d526092a85..53764ee4fe38f 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss @@ -31,6 +31,7 @@ border-top-left-radius: 8px; width: 100%; max-width: 512; + padding-bottom: 0; } .content { diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index 8c79b43414a1a..8204220b3be6d 100644 --- a/packages/editor/src/components/post-title/index.native.js +++ b/packages/editor/src/components/post-title/index.native.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; + /** * WordPress dependencies */ @@ -8,6 +13,11 @@ import { withDispatch } from '@wordpress/data'; import { withFocusOutside } from '@wordpress/components'; import { withInstanceId, compose } from '@wordpress/compose'; +/** + * Internal dependencies + */ +import styles from './style.scss'; + const minHeight = 30; class PostTitle extends Component { @@ -16,6 +26,7 @@ class PostTitle extends Component { this.onSelect = this.onSelect.bind( this ); this.onUnselect = this.onUnselect.bind( this ); + this.titleViewRef = null; this.state = { isSelected: false, @@ -23,10 +34,23 @@ class PostTitle extends Component { }; } + componentDidMount() { + if ( this.props.innerRef ) { + this.props.innerRef( this ); + } + } + handleFocusOutside() { this.onUnselect(); } + focus() { + if ( this.titleViewRef ) { + this.titleViewRef.focus(); + this.setState( { isSelected: true } ); + } + } + onSelect() { this.setState( { isSelected: true } ); this.props.clearSelectedBlock(); @@ -41,33 +65,41 @@ class PostTitle extends Component { placeholder, style, title, + focusedBorderColor, + borderStyle, } = this.props; const decodedPlaceholder = decodeEntities( placeholder ); + const borderColor = this.state.isSelected ? focusedBorderColor : 'transparent'; return ( - { - this.props.onUpdate( event.content ); - } } - onContentSizeChange={ ( event ) => { - this.setState( { aztecHeight: event.aztecHeight } ); - } } - placeholder={ decodedPlaceholder } - value={ title } - onSplit={ this.props.onEnterPress } - setRef={ this.props.setRef } - > - + + { + this.props.onUpdate( value ); + } } + onContentSizeChange={ ( event ) => { + this.setState( { aztecHeight: event.aztecHeight } ); + } } + placeholder={ decodedPlaceholder } + value={ title } + onSplit={ this.props.onEnterPress } + setRef={ ( ref ) => { + this.titleViewRef = ref; + } } + > + + ); } } diff --git a/packages/editor/src/components/post-title/style.native.scss b/packages/editor/src/components/post-title/style.native.scss new file mode 100644 index 0000000000000..b5d36037d9659 --- /dev/null +++ b/packages/editor/src/components/post-title/style.native.scss @@ -0,0 +1,10 @@ + +@import "variables.scss"; + +.titleContainer { + padding-left: 16; + padding-right: 16; + padding-top: $title-block-padding-top; + padding-bottom: $title-block-padding-bottom; + margin-top: 24; +} diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js index e7deab608e266..1e3de4f168086 100644 --- a/packages/editor/src/components/rich-text/index.native.js +++ b/packages/editor/src/components/rich-text/index.native.js @@ -42,6 +42,27 @@ const unescapeSpaces = ( text ) => { return text.replace( / | /gi, ' ' ); }; +/** + * Calls {@link pasteHandler} with a fallback to plain text when HTML processing + * results in errors + * + * @param {Object} [options] The options to pass to {@link pasteHandler} + * + * @return {Array|string} A list of blocks or a string, depending on + * `handlerMode`. + */ +const saferPasteHandler = ( options ) => { + try { + return pasteHandler( options ); + } catch ( error ) { + window.console.log( 'Pasting HTML failed:', error ); + window.console.log( 'HTML:', options.HTML ); + window.console.log( 'Falling back to plain text.' ); + // fallback to plain text + return pasteHandler( { ...options, HTML: '' } ); + } +}; + const gutenbergFormatNamesToAztec = { 'core/bold': 'bold', 'core/italic': 'italic', @@ -289,9 +310,8 @@ export class RichText extends Component { }, } ); this.lastContent = this.valueToFormat( linkedRecord ); - this.props.onChange( { - content: this.lastContent, - } ); + this.lastEventCount = undefined; + this.props.onChange( this.lastContent ); // Allows us to ask for this information when we get a report. window.console.log( 'Created link:\n\n', trimmedText ); @@ -310,7 +330,7 @@ export class RichText extends Component { mode = 'AUTO'; } - const pastedContent = pasteHandler( { + const pastedContent = saferPasteHandler( { HTML: pastedHtml, plainText: pastedText, mode, @@ -324,9 +344,7 @@ export class RichText extends Component { const newContent = this.valueToFormat( insertedContent ); this.lastEventCount = undefined; this.lastContent = newContent; - this.props.onChange( { - content: this.lastContent, - } ); + this.props.onChange( this.lastContent ); } else if ( onSplit ) { if ( ! pastedContent.length ) { return; @@ -568,4 +586,4 @@ RichTextContainer.Content.defaultProps = { export default RichTextContainer; export { RichTextShortcut } from './shortcut'; export { RichTextToolbarButton } from './toolbar-button'; -export { RichTextInputEvent } from './input-event'; +export { UnstableRichTextInputEvent } from './input-event'; diff --git a/packages/editor/src/components/rich-text/input-event.native.js b/packages/editor/src/components/rich-text/input-event.native.js index 71f2ce4797e24..b8f0fad0a969c 100644 --- a/packages/editor/src/components/rich-text/input-event.native.js +++ b/packages/editor/src/components/rich-text/input-event.native.js @@ -3,7 +3,7 @@ */ import { Component } from '@wordpress/element'; -export class RichTextInputEvent extends Component { +export class UnstableRichTextInputEvent extends Component { render() { return null; } diff --git a/packages/format-library/src/link/button.native.js b/packages/format-library/src/link/button.native.js deleted file mode 100644 index fa8fd004c5a37..0000000000000 --- a/packages/format-library/src/link/button.native.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * External dependencies - */ -import { TouchableOpacity, View } from 'react-native'; - -export default function Button( props ) { - const { - children, - onClick, - disabled, - } = props; - - return ( - - - { children } - - - ); -} diff --git a/packages/format-library/src/link/index.native.js b/packages/format-library/src/link/index.native.js index 4a2def1614323..4ea3ee0e30934 100644 --- a/packages/format-library/src/link/index.native.js +++ b/packages/format-library/src/link/index.native.js @@ -107,17 +107,15 @@ export const link = { return ( - { this.state.addingLink && - - } + - - - - - - { __( 'Link Settings' ) } - - - - - - - { __( 'URL' ) } - - - - - - - { __( 'Link Text' ) } - - - - - - - { __( 'Open in a new window' ) } - - - - - - - + { /* eslint-disable jsx-a11y/no-autofocus */ + + /* eslint-enable jsx-a11y/no-autofocus */ } + + + + + + ); } } diff --git a/packages/format-library/src/link/modal.native.scss b/packages/format-library/src/link/modal.native.scss index 72f6a647b2396..e6a590eab85f7 100644 --- a/packages/format-library/src/link/modal.native.scss +++ b/packages/format-library/src/link/modal.native.scss @@ -1,80 +1,3 @@ - -.bottomModal { - justify-content: flex-end; - margin: 0; +.clearLinkButton { + color: $alert-red; } - -.dragIndicator { - background-color: $light-gray-400; - height: 4px; - width: 10%; - top: -12px; - margin: auto; - border-radius: 2px; -} - -.separator { - background-color: $light-gray-400; - height: 1px; - width: 95%; - margin: auto; -} - -.content { - background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; - border-top-right-radius: 8px; - border-top-left-radius: 8px; -} - -.head { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; - align-content: center; -} - -.title { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - flex: 1; - text-align: center; -} - -.buttonText { - font-size: 18px; - padding: 5px; -} - -.inlineInput { - flex-direction: row; - width: 100%; - justify-content: space-between; - align-items: center; - margin: 5px 0; -} - -.inlineInputLabel { - padding: 10px 10px; - color: $dark-gray-600; - font-size: 14px; - font-weight: bold; -} - -.inlineInputValue { - flex-grow: 1; - font-size: 14px; - text-align: right; - align-items: stretch; - align-self: flex-end; - padding: 10px; -} - -.inlineInputValueSwitch { - padding: 5px; -} -