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;
-}
-