Merge branch 'master' of https://github.com/WordPress/gutenberg into …

…rnmobile/372-fix-image-caption-font-family * 'master' of https://github.com/WordPress/gutenberg: Update CODEOWNERS Project: Avoid additional native-file code owner notification (#13675) Mobile: Link image setting (#13654) # Conflicts: # packages/block-library/src/image/styles.native.scss
WordPress · Feb 5, 2019 · 398c26e · 398c26e
2 parents db0c608 + 0a5b11f
commit 398c26e
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 27 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -62,8 +62,8 @@
 /packages/wordcount                             @youknowriad @gziolo @aduth
 
 # Extensibility
-/packages/hooks                                 @youknowriad @gziolo @aduth
-/packages/plugins                               @youknowriad @gziolo @aduth
+/packages/hooks                                 @youknowriad @gziolo @aduth @adamsilverstein
+/packages/plugins                               @youknowriad @gziolo @aduth @adamsilverstein
 
 # Rich Text
 /packages/format-library                        @youknowriad @gziolo @aduth @iseulde @jorgefilipecosta
@@ -75,5 +75,6 @@
 # Documentation
 /docs                                           @youknowriad @gziolo @chrisvanpatten @mkaz @ajitbohra @nosolosw
 
-# Native
-*.native.js                                     @daniloercoli @diegoreymendez @etoledom @hypest @koke @marecar3 @mzorz @pinarol @SergioEstevao @tug
+# Native (Unowned)
+*.native.js                                     @ghost
+*.native.scss                                   @ghost
diff --git 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
 			>
+				<BottomSheet.Cell
+					icon={ 'admin-links' }
+					label={ __( 'Link To' ) }
+					value={ href || '' }
+					valuePlaceholder={ __( 'Add URL' ) }
+					onChangeValue={ this.onSetLinkDestination }
+					autoCapitalize="none"
+					autoCorrect={ false }
+				/>
 				<BottomSheet.Cell
 					icon={ 'editor-textcolor' }
 					label={ __( 'Alt Text' ) }
@@ -205,8 +224,8 @@ export default class ImageEdit extends React.Component {
 					onChangeValue={ this.updateAlt }
 				/>
 				<BottomSheet.Cell
-					label={ __( 'Reset to original' ) }
-					labelStyle={ { color: 'red' } }
+					label={ __( 'Reset to Original' ) }
+					labelStyle={ styles.resetSettingsButton }
 					drawSeparator={ false }
 					onPress={ () => {} }
 				/>

diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss
@@ -23,3 +23,7 @@
 .caption-text {
 	font-family: $default-regular-font;
 }
+
+.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
@@ -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 (
-		<TouchableOpacity onPress={ onCellPress }>
+		<TouchableOpacity onPress={ onCellPress } >
 			<View style={ styles.cellContainer }>
 				<View style={ styles.cellRowContainer }>
 					{ icon && (
 						<View style={ styles.cellRowContainer }>
-							<Dashicon icon={ icon } size={ 30 } />
+							<Dashicon icon={ icon } size={ 24 } />
 							<View style={ { width: 12 } } />
 						</View>
 					) }
@@ -60,13 +62,15 @@ export default function Cell( props ) {
 						style={ { ...styles.cellValue, ...valueStyle } }
 						value={ value }
 						placeholder={ valuePlaceholder }
+						placeholderTextColor={ '#87a6bc' }
 						onChangeText={ onChangeValue }
 						editable={ isValueEditable }
+						{ ...valueProps }
 					/>
 				) }
 			</View>
 			{ drawSeparator && (
-				<View style={ styles.separator } />
+				<View style={ separatorStyle } />
 			) }
 		</TouchableOpacity>
 	);

diff --git 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 {
 				<KeyboardAvoidingView
 					behavior={ Platform.OS === 'ios' && 'padding' }
 					style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }
+					keyboardVerticalOffset={ -this.state.safeAreaBottomInset }
 				>
 					<View style={ styles.dragIndicator } />
 					{ hideHeader || (

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