[RNMobile] Native mobile release v1.11.0

packages/block-editor/src/components/block-list/block.native.scss

@@ -3,15 +3,13 @@
 }
 
 .blockContainer {
-	background-color: $white;
 	padding-left: 16px;
 	padding-right: 16px;
 	padding-top: 12px;
 	padding-bottom: 12px;
 }
 
 .blockContainerFocused {
-	background-color: $white;
 	padding-left: 16px;
 	padding-right: 16px;
 	padding-top: 12px;

packages/block-editor/src/components/block-list/index.native.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';
+import { KeyboardAwareFlatList, ReadableContentView, useStyle, withTheme } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -103,7 +103,7 @@ export class BlockList extends Component {
 					innerRef={ this.scrollViewInnerRef }
 					extraScrollHeight={ innerToolbarHeight + 10 }
 					keyboardShouldPersistTaps="always"
-					style={ styles.list }
+					style={ useStyle( styles.list, styles.listDark, this.context ) }
 					data={ this.props.blockClientIds }
 					extraData={ [ this.props.isFullyBordered ] }
 					keyExtractor={ identity }
@@ -126,6 +126,7 @@ export class BlockList extends Component {
 	}
 
 	renderItem( { item: clientId, index } ) {
+		const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark, this.props.theme );
 		const { shouldShowBlockAtIndex, shouldShowInsertionPoint } = this.props;
 		return (
 			<ReadableContentView>
@@ -138,18 +139,20 @@ export class BlockList extends Component {
 						rootClientId={ this.props.rootClientId }
 						onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
 						borderStyle={ this.blockHolderBorderStyle() }
-						focusedBorderColor={ styles.blockHolderFocused.borderColor }
+						focusedBorderColor={ blockHolderFocusedStyle }
 					/> ) }
 			</ReadableContentView>
 		);
 	}
 
 	renderAddBlockSeparator() {
+		const lineStyle = useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark, this.props.theme );
+		const labelStyle = useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark, this.props.theme );
 		return (
 			<View style={ styles.containerStyleAddHere } >
-				<View style={ styles.lineStyleAddHere }></View>
-				<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text>
-				<View style={ styles.lineStyleAddHere }></View>
+				<View style={ lineStyle }></View>
+				<Text style={ labelStyle } >{ __( 'ADD BLOCK HERE' ) }</Text>
+				<View style={ lineStyle }></View>
 			</View>
 		);
 	}
@@ -228,5 +231,6 @@ export default compose( [
 			replaceBlock,
 		};
 	} ),
+	withTheme,
 ] )( BlockList );
 

packages/block-editor/src/components/block-list/style.native.scss

@@ -8,6 +8,10 @@
 	flex: 1;
 }
 
+.listDark {
+	background: #1c1c1e;
+}
+
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;
@@ -26,6 +30,10 @@
 	height: 2px;
 }
 
+.lineStyleAddHereDark {
+	background-color: $gray-50;
+}
+
 .labelStyleAddHere {
 	flex: 1;
 	text-align: center;
@@ -34,9 +42,12 @@
 	font-weight: bold;
 }
 
+.labelStyleAddHereDark {
+	color: $gray-20;
+}
+
 .containerStyleAddHere {
 	flex-direction: row;
-	background-color: $white;
 }
 
 .blockHolderSemiBordered {
@@ -54,7 +65,6 @@
 }
 
 .blockContainerFocused {
-	background-color: $white;
 	padding-left: 16;
 	padding-right: 16;
 	padding-top: 12;
@@ -65,6 +75,10 @@
 	border-color: $gray-lighten-30;
 }
 
+.blockHolderFocusedDark {
+	border-color: $gray-70;
+}
+
 .blockListFooter {
 	height: 80px;
 }

packages/block-editor/src/components/default-block-appender/style.native.scss

@@ -5,7 +5,6 @@
 }
 
 .blockContainer {
-	background-color: $white;
 	padding-top: 0;
 	padding-left: 16px;
 	padding-right: 16px;

packages/block-editor/src/components/inserter/index.native.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown, ToolbarButton, Dashicon } from '@wordpress/components';
+import { Dropdown, ToolbarButton, Dashicon, withTheme, useStyle } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -14,10 +14,10 @@ import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 import styles from './style.scss';
 import InserterMenu from './menu';
 
-const defaultRenderToggle = ( { onToggle, disabled } ) => (
+const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
 	<ToolbarButton
 		title={ __( 'Add block' ) }
-		icon={ ( <Dashicon icon="plus-alt" style={ styles.addBlockButton } color={ styles.addBlockButton.color } /> ) }
+		icon={ ( <Dashicon icon="plus-alt" style={ style } color={ style.color } /> ) }
 		onClick={ onToggle }
 		extraProps={ { hint: __( 'Double tap to add a block' ) } }
 		isDisabled={ disabled }
@@ -56,9 +56,10 @@ class Inserter extends Component {
 		const {
 			disabled,
 			renderToggle = defaultRenderToggle,
+			theme,
 		} = this.props;
-
-		return renderToggle( { onToggle, isOpen, disabled } );
+		const style = useStyle( styles.addBlockButton, styles.addBlockButtonDark, theme );
+		return renderToggle( { onToggle, isOpen, disabled, style } );
 	}
 
 	/**
@@ -118,4 +119,5 @@ export default compose( [
 			items: inserterItems.filter( ( { name } ) => name !== getUnregisteredTypeHandlerName() ),
 		};
 	} ),
+	withTheme,
 ] )( Inserter );

packages/block-editor/src/components/inserter/menu.native.js

@@ -14,7 +14,7 @@ import {
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { BottomSheet, Icon } from '@wordpress/components';
+import { BottomSheet, Icon, withTheme, useStyle } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -63,6 +63,9 @@ export class InserterMenu extends Component {
 	render() {
 		const numberOfColumns = this.calculateNumberOfColumns();
 		const bottomPadding = styles.contentBottomPadding;
+		const modalIconWrapperStyle = useStyle( styles.modalIconWrapper, styles.modalIconWrapperDark, this.props.theme );
+		const modalIconStyle = useStyle( styles.modalIcon, styles.modalIconDark, this.props.theme );
+		const modalItemLabelStyle = useStyle( styles.modalItemLabel, styles.modalItemLabelDark, this.props.theme );
 
 		return (
 			<BottomSheet
@@ -89,12 +92,12 @@ export class InserterMenu extends Component {
 							accessibilityLabel={ item.title }
 							onPress={ () => this.props.onSelect( item ) }>
 							<View style={ styles.modalItem }>
-								<View style={ styles.modalIconWrapper }>
-									<View style={ styles.modalIcon }>
-										<Icon icon={ item.icon.src } fill={ styles.modalIcon.fill } size={ styles.modalIcon.width } />
+								<View style={ modalIconWrapperStyle }>
+									<View style={ modalIconStyle }>
+										<Icon icon={ item.icon.src } fill={ modalIconStyle.fill } size={ modalIconStyle.width } />
 									</View>
 								</View>
-								<Text style={ styles.modalItemLabel }>{ item.title }</Text>
+								<Text style={ modalItemLabelStyle }>{ item.title }</Text>
 							</View>
 						</TouchableHighlight>
 					}
@@ -213,4 +216,5 @@ export default compose(
 		};
 	} ),
 	withInstanceId,
+	withTheme,
 )( InserterMenu );

packages/block-editor/src/components/inserter/style.native.scss

@@ -37,6 +37,10 @@
 	align-items: center;
 }
 
+.modalIconWrapperDark {
+	background-color: rgba($white, 0.07);
+}
+
 .modalIcon {
 	width: 32px;
 	height: 32px;
@@ -45,6 +49,10 @@
 	fill: $gray-dark;
 }
 
+.modalIconDark {
+	fill: $white;
+}
+
 .modalItemLabel {
 	background-color: transparent;
 	padding-left: 2;
@@ -56,9 +64,18 @@
 	color: $gray-dark;
 }
 
+.modalItemLabelDark {
+	color: $white;
+}
+
 .addBlockButton {
 	color: $blue-wordpress;
 	border: 2px;
 	border-radius: 10px;
 	border-color: $blue-wordpress;
 }
+
+.addBlockButtonDark {
+	color: $blue-30;
+	border-color: $blue-30;
+}

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -8,14 +8,15 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/block-editor';
+import { withTheme, useStyle } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
 function MediaPlaceholder( props ) {
-	const { mediaType, labels = {}, icon, onSelectURL } = props;
+	const { mediaType, labels = {}, icon, onSelectURL, theme } = props;
 
 	const isImage = MEDIA_TYPE_IMAGE === mediaType;
 	const isVideo = MEDIA_TYPE_VIDEO === mediaType;
@@ -46,6 +47,9 @@ function MediaPlaceholder( props ) {
 		accessibilityHint = __( 'Double tap to select a video' );
 	}
 
+	const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark, theme );
+	const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark, theme );
+
 	return (
 		<MediaUpload
 			mediaType={ mediaType }
@@ -65,12 +69,12 @@ function MediaPlaceholder( props ) {
 							open();
 						} }
 					>
-						<View style={ styles.emptyStateContainer }>
+						<View style={ emptyStateContainerStyle }>
 							{ getMediaOptions() }
 							<View style={ styles.modalIcon }>
 								{ icon }
 							</View>
-							<Text style={ styles.emptyStateTitle }>
+							<Text style={ emptyStateTitleStyle }>
 								{ placeholderTitle }
 							</Text>
 							<Text style={ styles.emptyStateDescription }>
@@ -83,4 +87,4 @@ function MediaPlaceholder( props ) {
 	);
 }
 
-export default MediaPlaceholder;
+export default withTheme( MediaPlaceholder );

packages/block-editor/src/components/media-placeholder/styles.native.scss

@@ -11,6 +11,10 @@
 	padding-bottom: 12;
 }
 
+.emptyStateContainerDark {
+	background-color: $background-dark-secondary;
+}
+
 .emptyStateTitle {
 	text-align: center;
 	margin-top: 8;
@@ -19,6 +23,10 @@
 	color: #2e4453;
 }
 
+.emptyStateTitleDark {
+	color: $white;
+}
+
 .emptyStateDescription {
 	text-align: center;
 	color: $blue-wordpress;

packages/block-editor/src/components/warning/index.native.js

@@ -6,37 +6,41 @@ import { View, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon, withTheme, useStyle } from '@wordpress/components';
 import { normalizeIconObject } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-function Warning( { title, message, icon, iconClass, ...viewProps } ) {
+function Warning( { title, message, icon, iconClass, theme, ...viewProps } ) {
 	icon = icon && normalizeIconObject( icon );
+	const internalIconClass = 'warning-icon' + '-' + theme;
+	const titleStyle = useStyle( styles.title, styles.titleDark, theme );
+	const messageStyle = useStyle( styles.message, styles.messageDark, theme );
+
 	return (
 		<View
-			style={ styles.container }
+			style={ useStyle( styles.container, styles.containerDark, theme ) }
 			{ ...viewProps }
 		>
 			{ icon && (
 				<View style={ styles.icon }>
 					<Icon
-						className={ iconClass || 'warning-icon' }
+						className={ iconClass || internalIconClass }
 						icon={ icon && icon.src ? icon.src : icon }
 					/>
 				</View>
 			) }
 			{ title && (
-				<Text style={ styles.title }>{ title }</Text>
+				<Text style={ titleStyle }>{ title }</Text>
 			) }
 			{ message && (
-				<Text style={ styles.message }>{ message }</Text>
+				<Text style={ messageStyle }>{ message }</Text>
 			) }
 		</View>
 	);
 }
 
-export default Warning;
+export default withTheme( Warning );