diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index daad9b0df5dde..dcb94957af70c 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -28,6 +28,8 @@ const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
const MEDIA_UPLOAD_STATE_FAILED = 3;
const MEDIA_UPLOAD_STATE_RESET = 4;
+const LINK_DESTINATION_CUSTOM = 'custom';
+
export default class ImageEdit extends React.Component {
constructor( props ) {
super( props );
@@ -45,6 +47,7 @@ export default class ImageEdit extends React.Component {
this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this );
this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this );
this.updateAlt = this.updateAlt.bind( this );
+ this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
this.onImagePressed = this.onImagePressed.bind( this );
}
@@ -133,9 +136,16 @@ export default class ImageEdit extends React.Component {
this.props.setAttributes( { alt: newAlt } );
}
+ onSetLinkDestination( href ) {
+ this.props.setAttributes( {
+ linkDestination: LINK_DESTINATION_CUSTOM,
+ href,
+ } );
+ }
+
render() {
const { attributes, isSelected, setAttributes } = this.props;
- const { url, caption, height, width, alt } = attributes;
+ const { url, caption, height, width, alt, href } = attributes;
const onMediaLibraryButtonPressed = () => {
requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => {
@@ -197,6 +207,15 @@ export default class ImageEdit extends React.Component {
onClose={ onImageSettingsClose }
hideHeader
>
+
{} }
/>
diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss
index 833b8126bfc1a..95dacc3cd4c50 100644
--- a/packages/block-library/src/image/styles.native.scss
+++ b/packages/block-library/src/image/styles.native.scss
@@ -15,3 +15,7 @@
flex-direction: column;
align-items: center;
}
+
+.resetSettingsButton {
+ color: $alert-red;
+}
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 6dc8ff4b26ef2..1a24d12952256 100644
--- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js
+++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js
@@ -24,28 +24,30 @@ export default function Cell( props ) {
labelStyle = {},
valueStyle = {},
onChangeValue,
+ ...valueProps
} = props;
const showValue = value !== undefined;
const isValueEditable = onChangeValue !== undefined;
const defaultLabelStyle = showValue ? styles.cellLabel : styles.cellLabelCentered;
+ const separatorStyle = showValue ? styles.cellSeparator : styles.separator;
let valueTextInput;
const onCellPress = () => {
if ( isValueEditable ) {
valueTextInput.focus();
- } else {
+ } else if ( onPress !== undefined ) {
onPress();
}
};
return (
-
+
{ icon && (
-
+
) }
@@ -60,13 +62,15 @@ export default function Cell( props ) {
style={ { ...styles.cellValue, ...valueStyle } }
value={ value }
placeholder={ valuePlaceholder }
+ placeholderTextColor={ '#87a6bc' }
onChangeText={ onChangeValue }
editable={ isValueEditable }
+ { ...valueProps }
/>
) }
{ drawSeparator && (
-
+
) }
);
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 e89bc50d44e28..d4754a3909dfa 100644
--- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js
+++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js
@@ -61,6 +61,7 @@ class BottomSheet extends Component {
{ hideHeader || (
diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss
index f02aa77fe4498..139c79d88de56 100644
--- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss
+++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss
@@ -9,7 +9,6 @@
background-color: $light-gray-400;
height: 4px;
width: 10%;
- top: -12px;
margin: auto;
border-radius: 2px;
}
@@ -18,12 +17,12 @@
background-color: $light-gray-400;
height: 1px;
width: 100%;
+ margin-bottom: 14px;
}
.content {
+ padding: 6px 16px 0 16px;
background-color: $white;
- padding: 18px 10px 5px 10px;
- justify-content: center;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
@@ -59,41 +58,44 @@
// Cell
-//Bottom Sheet
-
.cellContainer {
flex-direction: row;
- min-height: 50;
- justify-content: space-between;
- margin-left: 12;
- margin-right: 12;
+ min-height: 48;
align-items: center;
}
+.cellSeparator {
+ background-color: $light-gray-400;
+ height: 1px;
+ width: 100%;
+ margin-left: 36px;
+}
+
.cellRowContainer {
flex-direction: row;
align-items: center;
}
.cellIcon {
- padding-right: 30;
+ padding-right: 0;
}
.cellLabel {
- font-size: 18px;
- color: #000;
+ font-size: 17px;
+ color: #2e4453;
margin-right: 12px;
}
.cellLabelCentered {
- font-size: 18px;
- color: #000;
+ font-size: 17px;
+ color: #2e4453;
flex: 1;
text-align: center;
}
.cellValue {
- font-size: 18px;
- color: $dark-gray-400;
+ font-size: 17px;
+ color: #2e4453;
text-align: right;
+ flex: 1;
}