diff --git a/packages/block-editor/src/components/default-block-appender/index.native.js b/packages/block-editor/src/components/default-block-appender/index.native.js
index eae900cc70362a..5893862728203a 100644
--- a/packages/block-editor/src/components/default-block-appender/index.native.js
+++ b/packages/block-editor/src/components/default-block-appender/index.native.js
@@ -1,12 +1,13 @@
/**
* External dependencies
*/
-import { TextInput, TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
import { compose } from '@wordpress/compose';
import { decodeEntities } from '@wordpress/html-entities';
import { withSelect, withDispatch } from '@wordpress/data';
@@ -21,6 +22,7 @@ export function DefaultBlockAppender( {
isVisible,
onAppend,
placeholder,
+ containerStyle,
} ) {
if ( isLocked || ! isVisible ) {
return null;
@@ -32,16 +34,10 @@ export function DefaultBlockAppender( {
-
-
-
-
+
+
);
diff --git a/packages/block-editor/src/components/default-block-appender/style.native.scss b/packages/block-editor/src/components/default-block-appender/style.native.scss
index fd3cd2f9afefb3..5193611fa45d58 100644
--- a/packages/block-editor/src/components/default-block-appender/style.native.scss
+++ b/packages/block-editor/src/components/default-block-appender/style.native.scss
@@ -1,8 +1,5 @@
// @format
-@import "variables.scss";
-@import "colors.scss";
-
.blockHolder {
flex: 1 1 auto;
}
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
new file mode 100644
index 00000000000000..7b026253b7cd67
--- /dev/null
+++ b/packages/block-editor/src/components/index.native.js
@@ -0,0 +1,22 @@
+// Block Creation Components
+export { default as BlockControls } from './block-controls';
+export { default as BlockEdit } from './block-edit';
+export { default as BlockFormatControls } from './block-format-controls';
+export * from './colors';
+export * from './font-sizes';
+export { default as InspectorControls } from './inspector-controls';
+export { default as PlainText } from './plain-text';
+export {
+ default as RichText,
+ RichTextShortcut,
+ RichTextToolbarButton,
+ UnstableRichTextInputEvent,
+} from './rich-text';
+export { default as MediaPlaceholder } from './media-placeholder';
+export { default as URLInput } from './url-input';
+
+// Content Related Components
+export { default as DefaultBlockAppender } from './default-block-appender';
+
+// State Related Components
+export { default as BlockEditorProvider } from './provider';
diff --git a/packages/block-editor/src/components/plain-text/style.native.scss b/packages/block-editor/src/components/plain-text/style.native.scss
index 97a21c5dd37a71..5a9dcaa7445b1f 100644
--- a/packages/block-editor/src/components/plain-text/style.native.scss
+++ b/packages/block-editor/src/components/plain-text/style.native.scss
@@ -1,4 +1,3 @@
-@import "variables.scss";
.block-editor-plain-text {
font-family: $default-regular-font;
diff --git a/packages/block-editor/src/components/provider/index.native.js b/packages/block-editor/src/components/provider/index.native.js
new file mode 100644
index 00000000000000..8e2f2e677397b4
--- /dev/null
+++ b/packages/block-editor/src/components/provider/index.native.js
@@ -0,0 +1,150 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { SlotFillProvider } from '@wordpress/components';
+import { withDispatch, RegistryConsumer } from '@wordpress/data';
+import { createHigherOrderComponent, compose } from '@wordpress/compose';
+
+/**
+ * Higher-order component which renders the original component with the current
+ * registry context passed as its `registry` prop.
+ *
+ * @param {WPComponent} OriginalComponent Original component.
+ *
+ * @return {WPComponent} Enhanced component.
+ */
+const withRegistry = createHigherOrderComponent(
+ ( OriginalComponent ) => ( props ) => (
+
+ { ( registry ) => (
+
+ ) }
+
+ ),
+ 'withRegistry'
+);
+
+class BlockEditorProvider extends Component {
+ componentDidMount() {
+ this.props.updateSettings( this.props.settings );
+ this.props.resetBlocks( this.props.value );
+ this.attachChangeObserver( this.props.registry );
+ }
+
+ componentDidUpdate( prevProps ) {
+ const {
+ settings,
+ updateSettings,
+ value,
+ resetBlocks,
+ registry,
+ } = this.props;
+
+ if ( settings !== prevProps.settings ) {
+ updateSettings( settings );
+ }
+
+ if ( registry !== prevProps.registry ) {
+ this.attachChangeObserver( registry );
+ }
+
+ if ( this.isSyncingOutcomingValue ) {
+ this.isSyncingOutcomingValue = false;
+ } else if ( value !== prevProps.value ) {
+ this.isSyncingIncomingValue = true;
+ resetBlocks( value );
+ }
+ }
+
+ componentWillUnmount() {
+ if ( this.unsubscribe ) {
+ this.unsubscribe();
+ }
+ }
+
+ /**
+ * Given a registry object, overrides the default dispatch behavior for the
+ * `core/block-editor` store to interpret a state change and decide whether
+ * we should call `onChange` or `onInput` depending on whether the change
+ * is persistent or not.
+ *
+ * This needs to be done synchronously after state changes (instead of using
+ * `componentDidUpdate`) in order to avoid batching these changes.
+ *
+ * @param {WPDataRegistry} registry Registry from which block editor
+ * dispatch is to be overriden.
+ */
+ attachChangeObserver( registry ) {
+ if ( this.unsubscribe ) {
+ this.unsubscribe();
+ }
+
+ const {
+ getBlocks,
+ isLastBlockChangePersistent,
+ } = registry.select( 'core/block-editor' );
+
+ let blocks = getBlocks();
+ let isPersistent = isLastBlockChangePersistent();
+
+ this.unsubscribe = registry.subscribe( () => {
+ const {
+ onChange,
+ onInput,
+ } = this.props;
+ const newBlocks = getBlocks();
+ const newIsPersistent = isLastBlockChangePersistent();
+ if ( newBlocks !== blocks && this.isSyncingIncomingValue ) {
+ this.isSyncingIncomingValue = false;
+ blocks = newBlocks;
+ isPersistent = newIsPersistent;
+ return;
+ }
+
+ if (
+ newBlocks !== blocks ||
+ // This happens when a previous input is explicitely marked as persistent.
+ ( newIsPersistent && ! isPersistent )
+ ) {
+ blocks = newBlocks;
+ isPersistent = newIsPersistent;
+
+ this.isSyncingOutcomingValue = true;
+ if ( isPersistent ) {
+ onChange( blocks );
+ } else {
+ onInput( blocks );
+ }
+ }
+ } );
+ }
+
+ render() {
+ const { children } = this.props;
+
+ return (
+
+ { children }
+
+ );
+ }
+}
+
+export default compose( [
+ withDispatch( ( dispatch ) => {
+ const {
+ updateSettings,
+ resetBlocks,
+ } = dispatch( 'core/block-editor' );
+
+ return {
+ updateSettings,
+ resetBlocks,
+ };
+ } ),
+ withRegistry,
+] )( BlockEditorProvider );
diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
index 883889c77eb12a..a4761ca33f1214 100644
--- a/packages/block-editor/src/components/rich-text/index.native.js
+++ b/packages/block-editor/src/components/rich-text/index.native.js
@@ -86,6 +86,7 @@ export class RichText extends Component {
start: 0,
end: 0,
formatPlaceholder: null,
+ height: 0,
};
}
@@ -96,9 +97,16 @@ export class RichText extends Component {
*/
getRecord() {
const { formatPlaceholder, start, end } = this.state;
+
+ let value = this.props.value === undefined ? null : this.props.value;
+
// Since we get the text selection from Aztec we need to be in sync with the HTML `value`
// Removing leading white spaces using `trim()` should make sure this is the case.
- const { formats, replacements, text } = this.formatToValue( this.props.value === undefined ? undefined : this.props.value.trimLeft() );
+ if ( typeof value === 'string' || value instanceof String ) {
+ value = value.trimLeft();
+ }
+
+ const { formats, replacements, text } = this.formatToValue( value );
return { formats, replacements, formatPlaceholder, text, start, end };
}
@@ -189,6 +197,12 @@ export class RichText extends Component {
} );
if ( newContent && newContent !== this.props.value ) {
this.props.onChange( newContent );
+ if ( record.needsSelectionUpdate && record.start && record.end ) {
+ this.setState( { start: record.start, end: record.end } );
+ }
+ this.setState( {
+ needsSelectionUpdate: record.needsSelectionUpdate,
+ } );
} else {
// make sure the component rerenders without refreshing the text on gutenberg
// (this can trigger other events that might update the active formats on aztec)
@@ -235,9 +249,7 @@ export class RichText extends Component {
onContentSizeChange( contentSize ) {
const contentHeight = contentSize.height;
- this.props.onContentSizeChange( {
- aztecHeight: contentHeight,
- } );
+ this.setState( { height: contentHeight } );
}
// eslint-disable-next-line no-unused-vars
@@ -501,6 +513,13 @@ export class RichText extends Component {
this.lastEventCount = undefined; // force a refresh on the native side
}
+ let minHeight = styles[ 'block-editor-rich-text' ].minHeight;
+ if ( style && style.minHeight ) {
+ minHeight = style.minHeight;
+ }
+
+ const selection = this.state.needsSelectionUpdate ? { start: this.state.start, end: this.state.end } : null;
+
return (
{ isSelected && (
@@ -516,7 +535,11 @@ export class RichText extends Component {
this.props.setRef( ref );
}
} }
- text={ { text: html, eventCount: this.lastEventCount } }
+ style={ {
+ ...style,
+ minHeight: Math.max( minHeight, this.state.height ),
+ } }
+ text={ { text: html, eventCount: this.lastEventCount, selection } }
placeholder={ this.props.placeholder }
placeholderTextColor={ this.props.placeholderTextColor || styles[ 'block-editor-rich-text' ].textDecorationColor }
onChange={ this.onChange }
@@ -533,11 +556,11 @@ export class RichText extends Component {
blockType={ { tag: tagName } }
color={ 'black' }
maxImagesWidth={ 200 }
- style={ style }
fontFamily={ this.props.fontFamily || styles[ 'block-editor-rich-text' ].fontFamily }
fontSize={ this.props.fontSize }
fontWeight={ this.props.fontWeight }
fontStyle={ this.props.fontStyle }
+ disableEditingMenu={ this.props.disableEditingMenu }
/>
{ isSelected && }
diff --git a/packages/block-editor/src/components/rich-text/style.native.scss b/packages/block-editor/src/components/rich-text/style.native.scss
index 9436fc9a635285..ef530f4d3c7817 100644
--- a/packages/block-editor/src/components/rich-text/style.native.scss
+++ b/packages/block-editor/src/components/rich-text/style.native.scss
@@ -1,7 +1,6 @@
-@import "variables.scss";
-@import "colors.scss";
.block-editor-rich-text {
font-family: $default-regular-font;
text-decoration-color: $gray;
+ min-height: $min-height-paragraph;
}
diff --git a/packages/block-library/src/code/theme.native.scss b/packages/block-library/src/code/theme.native.scss
index 850db82eb0f446..668b9f92dd1f53 100644
--- a/packages/block-library/src/code/theme.native.scss
+++ b/packages/block-library/src/code/theme.native.scss
@@ -1,7 +1,5 @@
/* stylelint-disable font-family-no-missing-generic-family-keyword */
-@import "variables.scss";
-
.blockCode {
font-family: $default-monospace-font;
}
diff --git a/packages/block-library/src/heading/editor.native.scss b/packages/block-library/src/heading/editor.native.scss
new file mode 100644
index 00000000000000..9518b3bdbacbba
--- /dev/null
+++ b/packages/block-library/src/heading/editor.native.scss
@@ -0,0 +1,4 @@
+
+.wp-block-heading {
+ min-height: $min-height-heading;
+}
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 95eb712a83f8e6..2481d1ce3184a9 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -34,6 +34,7 @@ import {
} from '@wordpress/editor';
import { __ } from '@wordpress/i18n';
import { isURL } from '@wordpress/url';
+import { doAction, hasAction } from '@wordpress/hooks';
/**
* Internal dependencies
@@ -87,6 +88,10 @@ class ImageEdit extends React.Component {
}
componentWillUnmount() {
+ // this action will only exist if the user pressed the trash button on the block holder
+ if ( hasAction( 'blocks.onRemoveBlockCheckUpload' ) && this.state.isUploadInProgress ) {
+ doAction( 'blocks.onRemoveBlockCheckUpload', this.props.attributes.id );
+ }
this.removeMediaUploadListener();
}
diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss
index ec59c4caf0a987..b187d12aa32feb 100644
--- a/packages/block-library/src/image/styles.native.scss
+++ b/packages/block-library/src/image/styles.native.scss
@@ -1,7 +1,5 @@
// @format
-@import "variables.scss";
-
.imageContainer {
flex: 1;
justify-content: center;
diff --git a/packages/block-library/src/nextpage/editor.native.scss b/packages/block-library/src/nextpage/editor.native.scss
index 618ba896961be0..af113cf983b2ce 100644
--- a/packages/block-library/src/nextpage/editor.native.scss
+++ b/packages/block-library/src/nextpage/editor.native.scss
@@ -1,7 +1,5 @@
// @format
-@import "variables.scss";
-
.block-library-nextpage__container {
align-items: center;
padding: 4px 4px 4px 4px;
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 4f366d9decb3a4..4c3af8564aba92 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -19,6 +19,7 @@
},
"main": "build/index.js",
"module": "build-module/index.js",
+ "react-native": "src/index",
"dependencies": {
"@babel/runtime": "^7.3.1",
"@wordpress/a11y": "file:../a11y",
diff --git a/packages/edit-post/src/index.native.js b/packages/edit-post/src/index.native.js
new file mode 100644
index 00000000000000..d097853f5a3714
--- /dev/null
+++ b/packages/edit-post/src/index.native.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import '@wordpress/core-data';
+import '@wordpress/block-editor';
+import { UnsupportedBlock } from '@wordpress/editor';
+import '@wordpress/notices';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { registerBlockType, setUnregisteredTypeHandlerName, unregisterBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './store';
+
+/**
+ * Initializes the Editor.
+ */
+export function initializeEditor() {
+ // register and setup blocks
+ registerCoreBlocks();
+ registerBlockType( UnsupportedBlock.name, UnsupportedBlock.settings );
+ setUnregisteredTypeHandlerName( UnsupportedBlock.name );
+
+ // disable Code and More blocks for the release
+ // eslint-disable-next-line no-undef
+ if ( typeof __DEV__ === 'undefined' || ! __DEV__ ) {
+ unregisterBlockType( 'core/code' );
+ unregisterBlockType( 'core/more' );
+ }
+}
+
diff --git a/packages/edit-post/src/store/index.native.js b/packages/edit-post/src/store/index.native.js
new file mode 100644
index 00000000000000..611a2b4eaae559
--- /dev/null
+++ b/packages/edit-post/src/store/index.native.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { registerStore } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import applyMiddlewares from './middlewares';
+import * as actions from './actions';
+import * as selectors from './selectors';
+
+const store = registerStore( 'core/edit-post', {
+ reducer,
+ actions,
+ selectors,
+ persist: [ 'preferences' ],
+} );
+
+applyMiddlewares( store );
+// Do not dispatch INIT for mobile as its effect currently only deals with
+// setting up the sidebar and we don't need/support it at the moment for mobile
+
+export default store;
diff --git a/packages/editor/src/components/deprecated.native.js b/packages/editor/src/components/deprecated.native.js
new file mode 100644
index 00000000000000..39596edc9dab3b
--- /dev/null
+++ b/packages/editor/src/components/deprecated.native.js
@@ -0,0 +1,47 @@
+// Block Creation Components
+/**
+ * WordPress dependencies
+ */
+import {
+ BlockControls,
+ BlockEdit,
+ BlockFormatControls,
+ DefaultBlockAppender,
+ createCustomColorsHOC,
+ getColorClassName,
+ getColorObjectByAttributeValues,
+ getColorObjectByColorValue,
+ InspectorControls,
+ PlainText,
+ RichText,
+ RichTextShortcut,
+ RichTextToolbarButton,
+ RichTextInserterItem,
+ UnstableRichTextInputEvent,
+ MediaPlaceholder,
+ URLInput,
+ withColors,
+ withFontSizes,
+} from '@wordpress/block-editor';
+
+export {
+ BlockControls,
+ BlockEdit,
+ BlockFormatControls,
+ DefaultBlockAppender,
+ createCustomColorsHOC,
+ getColorClassName,
+ getColorObjectByAttributeValues,
+ getColorObjectByColorValue,
+ InspectorControls,
+ PlainText,
+ RichText,
+ RichTextShortcut,
+ RichTextToolbarButton,
+ RichTextInserterItem,
+ UnstableRichTextInputEvent,
+ MediaPlaceholder,
+ URLInput,
+ withColors,
+ withFontSizes,
+};
diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js
index d7d35e3873e2aa..8611b08dc2f03d 100644
--- a/packages/editor/src/components/index.native.js
+++ b/packages/editor/src/components/index.native.js
@@ -1,21 +1,16 @@
-export * from './colors';
-export * from './font-sizes';
-export { default as PlainText } from './plain-text';
-export {
- default as RichText,
- RichTextShortcut,
- RichTextToolbarButton,
- UnstableRichTextInputEvent,
-} from './rich-text';
-export { default as MediaPlaceholder } from './media-placeholder';
-export { default as BlockFormatControls } from './block-format-controls';
-export { default as BlockControls } from './block-controls';
-export { default as BlockEdit } from './block-edit';
-export { default as DefaultBlockAppender } from './default-block-appender';
+/**
+ * Internal dependencies
+ */
+import * as UnsupportedBlock from './mobile/unsupported-block';
+
+// Post Related Components
export { default as PostTitle } from './post-title';
export { default as EditorHistoryRedo } from './editor-history/redo';
export { default as EditorHistoryUndo } from './editor-history/undo';
-export { default as InspectorControls } from './inspector-controls';
export { default as BottomSheet } from './mobile/bottom-sheet';
export { default as Picker } from './mobile/picker';
-export { default as URLInput } from './url-input';
+
+// Mobile Editor Related Components
+export { UnsupportedBlock };
+
+export * from './deprecated';
diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js
index 313ad950c7b557..6ec1ab2632781d 100644
--- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js
+++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { Text, View, KeyboardAvoidingView, Platform, PanResponder, Dimensions } from 'react-native';
+import { Text, View, Platform, PanResponder, Dimensions } from 'react-native';
import Modal from 'react-native-modal';
import SafeArea from 'react-native-safe-area';
@@ -17,6 +17,7 @@ import styles from './styles.scss';
import Button from './button';
import Cell from './cell';
import PickerCell from './picker-cell';
+import KeyboardAvoidingView from './keyboard-avoiding-view';
class BottomSheet extends Component {
constructor() {
diff --git a/packages/editor/src/components/mobile/bottom-sheet/keyboard-avoiding-view.native.js b/packages/editor/src/components/mobile/bottom-sheet/keyboard-avoiding-view.native.js
new file mode 100644
index 00000000000000..85214b40d51c06
--- /dev/null
+++ b/packages/editor/src/components/mobile/bottom-sheet/keyboard-avoiding-view.native.js
@@ -0,0 +1,118 @@
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import {
+ Keyboard,
+ LayoutAnimation,
+ Platform,
+ StyleSheet,
+ View,
+ Dimensions,
+} from 'react-native';
+
+/**
+ * This is a simplified version of Facebook's KeyboardAvoidingView.
+ * It's meant to work specifically with BottomSheets.
+ * This fixes an issue in the bottom padding calculation, when the
+ * BottomSheet was presented on Landscape, with the keyboard already present,
+ * and a TextField on Autofocus (situation present on Links UI)
+ */
+class KeyboardAvoidingView extends React.Component {
+ constructor() {
+ super( ...arguments );
+
+ this._onKeyboardChange = this._onKeyboardChange.bind( this );
+ this._subscriptions = [];
+ this.state = {
+ bottom: 0,
+ };
+ }
+
+ _relativeKeyboardHeight( keyboardFrame ) {
+ if ( ! keyboardFrame ) {
+ return 0;
+ }
+
+ const windowHeight = Dimensions.get( 'window' ).height;
+ const keyboardY = keyboardFrame.screenY - this.props.keyboardVerticalOffset;
+
+ const final = Math.max( windowHeight - keyboardY, 0 );
+ return final;
+ }
+
+ /**
+ * @param {Object} event Keyboard event.
+ */
+ _onKeyboardChange( event ) {
+ if ( event === null ) {
+ this.setState( { bottom: 0 } );
+ return;
+ }
+
+ const { duration, easing, endCoordinates } = event;
+ const height = this._relativeKeyboardHeight( endCoordinates );
+
+ if ( this.state.bottom === height ) {
+ return;
+ }
+
+ if ( duration && easing ) {
+ LayoutAnimation.configureNext( {
+ duration,
+ update: {
+ duration,
+ type: LayoutAnimation.Types[ easing ] || 'keyboard',
+ },
+ } );
+ }
+ this.setState( { bottom: height } );
+ }
+
+ componentDidMount() {
+ if ( Platform.OS === 'ios' ) {
+ this._subscriptions = [
+ Keyboard.addListener( 'keyboardWillChangeFrame', this._onKeyboardChange ),
+ ];
+ }
+ }
+
+ componentWillUnmount() {
+ this._subscriptions.forEach( ( subscription ) => {
+ subscription.remove();
+ } );
+ }
+
+ render() {
+ const {
+ children,
+ enabled,
+ keyboardVerticalOffset, // eslint-disable-line no-unused-vars
+ style,
+ ...props
+ } = this.props;
+
+ let finalStyle = style;
+ if ( Platform.OS === 'ios' ) {
+ const bottomHeight = enabled ? this.state.bottom : 0;
+ finalStyle = StyleSheet.compose( style, { paddingBottom: bottomHeight } );
+ }
+
+ return (
+
+ { children }
+
+ );
+ }
+}
+
+KeyboardAvoidingView.defaultProps = {
+ enabled: true,
+ keyboardVerticalOffset: 0,
+};
+
+export default KeyboardAvoidingView;
diff --git a/packages/editor/src/components/mobile/unsupported-block/edit.js b/packages/editor/src/components/mobile/unsupported-block/edit.js
new file mode 100644
index 00000000000000..c9fd6378869772
--- /dev/null
+++ b/packages/editor/src/components/mobile/unsupported-block/edit.js
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export default class UnsupportedBlockEdit extends Component {
+ render() {
+ return (
+
+ Unsupported
+
+ );
+ }
+}
diff --git a/packages/editor/src/components/mobile/unsupported-block/index.js b/packages/editor/src/components/mobile/unsupported-block/index.js
new file mode 100644
index 00000000000000..486b4a03abd641
--- /dev/null
+++ b/packages/editor/src/components/mobile/unsupported-block/index.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RawHTML } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+export const name = 'gmobile/unsupported';
+
+export const settings = {
+ title: __( 'Unsupported Block' ),
+
+ description: __( 'Unsupported block type.' ),
+
+ icon: 'editor-code',
+
+ category: 'formatting',
+
+ attributes: {
+ content: {
+ type: 'string',
+ source: 'html',
+ },
+ },
+
+ supports: {
+ className: false,
+ customClassName: false,
+ },
+
+ transforms: {
+ },
+
+ edit,
+
+ save( { attributes } ) {
+ return { attributes.content };
+ },
+};
diff --git a/packages/editor/src/components/mobile/unsupported-block/style.scss b/packages/editor/src/components/mobile/unsupported-block/style.scss
new file mode 100644
index 00000000000000..93cd55274fd0b7
--- /dev/null
+++ b/packages/editor/src/components/mobile/unsupported-block/style.scss
@@ -0,0 +1,18 @@
+/** @format */
+
+.unsupportedBlock {
+ background-color: #e9eff3; // grey lighten 30
+ padding-top: 8;
+ padding-bottom: 8;
+ padding-left: 8;
+ padding-right: 8;
+}
+
+.unsupportedBlockMessage {
+ text-align: center;
+ color: #4f748e; // grey darken 20
+ padding-top: 24;
+ padding-bottom: 24;
+ font-size: 16px;
+ font-family: $default-regular-font;
+}
diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index 95384a6aca6d77..b85d7f2340b9cb 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -18,8 +18,6 @@ import { withInstanceId, compose } from '@wordpress/compose';
*/
import styles from './style.scss';
-const minHeight = 30;
-
class PostTitle extends Component {
constructor() {
super( ...arguments );
@@ -30,7 +28,6 @@ class PostTitle extends Component {
this.state = {
isSelected: false,
- aztecHeight: 0,
};
}
@@ -80,20 +77,16 @@ class PostTitle extends Component {
onFocus={ this.onSelect }
onBlur={ this.props.onBlur } // always assign onBlur as a props
multiline={ false }
- style={ [ style, {
- minHeight: Math.max( minHeight, this.state.aztecHeight ),
- } ] }
+ style={ style }
fontSize={ 24 }
fontWeight={ 'bold' }
onChange={ ( value ) => {
this.props.onUpdate( value );
} }
- onContentSizeChange={ ( event ) => {
- this.setState( { aztecHeight: event.aztecHeight } );
- } }
placeholder={ decodedPlaceholder }
value={ title }
onSplit={ this.props.onEnterPress }
+ disableEditingMenu={ true }
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
index b5d36037d96599..5a17299add6e6f 100644
--- a/packages/editor/src/components/post-title/style.native.scss
+++ b/packages/editor/src/components/post-title/style.native.scss
@@ -1,6 +1,4 @@
-@import "variables.scss";
-
.titleContainer {
padding-left: 16;
padding-right: 16;
diff --git a/packages/format-library/src/default-formats.native.js b/packages/format-library/src/default-formats.native.js
index 30af1e7af981c5..4c822c0ea649b0 100644
--- a/packages/format-library/src/default-formats.native.js
+++ b/packages/format-library/src/default-formats.native.js
@@ -2,14 +2,12 @@
* Internal dependencies
*/
import { bold } from './bold';
-import { code } from './code';
import { italic } from './italic';
import { link } from './link';
import { strikethrough } from './strikethrough';
export default [
bold,
- code,
italic,
link,
strikethrough,
diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
index 765cbb5b455d35..f828c9adc58d3a 100644
--- a/packages/format-library/src/link/modal.native.js
+++ b/packages/format-library/src/link/modal.native.js
@@ -39,6 +39,7 @@ class ModalLinkUI extends Component {
this.onChangeText = this.onChangeText.bind( this );
this.onChangeOpensInNewWindow = this.onChangeOpensInNewWindow.bind( this );
this.removeLink = this.removeLink.bind( this );
+ this.onDismiss = this.onDismiss.bind( this );
this.state = {
inputValue: '',
@@ -85,12 +86,15 @@ class ModalLinkUI extends Component {
if ( isCollapsed( value ) && ! isActive ) { // insert link
const toInsert = applyFormat( create( { text: linkText } ), [ ...placeholderFormats, format ], 0, linkText.length );
- onChange( insert( value, toInsert ) );
+ const newAttributes = insert( value, toInsert );
+ onChange( { ...newAttributes, needsSelectionUpdate: true } );
} else if ( text !== getTextContent( slice( value ) ) ) { // edit text in selected link
const toInsert = applyFormat( create( { text } ), [ ...placeholderFormats, format ], 0, text.length );
- onChange( insert( value, toInsert, value.start, value.end ) );
+ const newAttributes = insert( value, toInsert, value.start, value.end );
+ onChange( { ...newAttributes, needsSelectionUpdate: true } );
} else { // transform selected text into link
- onChange( applyFormat( value, [ ...placeholderFormats, format ] ) );
+ const newAttributes = applyFormat( value, [ ...placeholderFormats, format ] );
+ onChange( { ...newAttributes, needsSelectionUpdate: true } );
}
if ( ! isValidHref( url ) ) {
@@ -109,13 +113,21 @@ class ModalLinkUI extends Component {
this.props.onClose();
}
+ onDismiss() {
+ if ( this.state.inputValue === '' ) {
+ this.removeLink();
+ } else {
+ this.submitLink();
+ }
+ }
+
render() {
const { isVisible } = this.props;
return (
{ /* eslint-disable jsx-a11y/no-autofocus */
@@ -126,7 +138,7 @@ class ModalLinkUI extends Component {
placeholder={ __( 'Add URL' ) }
autoCapitalize="none"
autoCorrect={ false }
- textContentType="URL"
+ keyboardType="url"
onChangeValue={ this.onChangeInputValue }
autoFocus={ Platform.OS === 'ios' }
/>