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