From 7ebe160815a1556c0b970c60179fe883b106b2ed Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 14 Aug 2019 17:19:58 +0200 Subject: [PATCH 01/23] Adding dark mode component implemented on list and list block --- .../src/components/block-list/block.native.js | 6 ++++- .../components/block-list/block.native.scss | 4 ++++ .../src/components/block-list/index.native.js | 6 +++-- .../components/block-list/style.native.scss | 4 ++++ .../src/mobile/dark-mode/index.native.js | 22 +++++++++++++++++++ 5 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 packages/components/src/mobile/dark-mode/index.native.js diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index b87f95445e11f2..186bfec4162b06 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -15,6 +15,7 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { getBlockType } from '@wordpress/blocks'; import { __, sprintf } from '@wordpress/i18n'; +import { useStyle, DarkMode } from '@wordpress/components'; /** * Internal dependencies @@ -25,6 +26,8 @@ import BlockInvalidWarning from './block-invalid-warning'; import BlockMobileToolbar from './block-mobile-toolbar'; class BlockListBlock extends Component { + static contextType = DarkMode.Context; + constructor() { super( ...arguments ); @@ -113,6 +116,7 @@ class BlockListBlock extends Component { title, } = this.props; + const blockContainerStyle = useStyle( styles.blockContainer, styles.blockContainerDark ); const borderColor = isSelected ? focusedBorderColor : 'transparent'; const accessibilityLabel = this.getAccessibilityLabel(); @@ -127,7 +131,7 @@ class BlockListBlock extends Component { { showTitle && this.renderBlockTitle() } { isValid && this.getBlockForType() } { ! isValid && diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index b997cddc723073..624d41258a619f 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -10,6 +10,10 @@ padding-bottom: 12px; } +.blockContainerDark { + background-color: #1c1c1e; +} + .blockContainerFocused { background-color: $white; padding-left: 16px; diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 3a193a9d02a9b1..908bc228cb0374 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/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, DarkMode } from '@wordpress/components'; /** * Internal dependencies @@ -24,6 +24,8 @@ import DefaultBlockAppender from '../default-block-appender'; const innerToolbarHeight = 44; export class BlockList extends Component { + static contextType = DarkMode.Context; + constructor() { super( ...arguments ); @@ -103,7 +105,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 } diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index 5185e2099bf93e..53676bb528b5bf 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/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; diff --git a/packages/components/src/mobile/dark-mode/index.native.js b/packages/components/src/mobile/dark-mode/index.native.js new file mode 100644 index 00000000000000..ab6ff33ff8fad3 --- /dev/null +++ b/packages/components/src/mobile/dark-mode/index.native.js @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { eventEmitter, initialMode, DarkModeContext } from 'react-native-dark-mode'; + +let mode = initialMode; + +eventEmitter.on( 'currentModeChanged', ( newMode ) => { + mode = newMode; +} ); + +export function useStyle( light, dark ) { + const finalDark = { + ...light, + ...dark, + }; + + return mode === 'dark' ? finalDark : light; +} + +export const DarkMode = {}; +DarkMode.Context = DarkModeContext; From 8a4a8a4094114da1717b823624e24134296f3ed9 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 14 Aug 2019 17:20:53 +0200 Subject: [PATCH 02/23] Adding DarkMode handling to RichText, ToolBar and SafeArea --- packages/components/src/button/index.native.js | 12 +++++++++++- packages/components/src/index.native.js | 1 + .../components/header/header-toolbar/index.native.js | 4 ++-- .../header/header-toolbar/style.native.scss | 5 +++++ .../edit-post/src/components/layout/index.native.js | 6 ++++-- .../src/components/layout/style.native.scss | 4 ++++ packages/rich-text/src/component/index.native.js | 11 ++++++++--- packages/rich-text/src/component/style.native.scss | 8 +++++++- 8 files changed, 42 insertions(+), 9 deletions(-) diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index 7a90dd53131661..ce9394a8826cac 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -3,6 +3,11 @@ */ import { StyleSheet, TouchableOpacity, Text, View, Platform } from 'react-native'; +/** + * WordPress dependencies + */ +import { useStyle } from '@wordpress/components'; + const isAndroid = Platform.OS === 'android'; const marginBottom = isAndroid ? -0.5 : 0; const marginLeft = -3; @@ -22,6 +27,9 @@ const styles = StyleSheet.create( { aspectRatio: 1, backgroundColor: 'white', }, + buttonInactiveDark: { + backgroundColor: 'black', + }, buttonActive: { flex: 1, flexDirection: 'row', @@ -63,9 +71,11 @@ export default function Button( props ) { } = props; const isDisabled = ariaDisabled || disabled; + const buttonInactiveStyle = useStyle( styles.buttonInactive, styles.buttonInactiveDark ); + const buttonViewStyle = { opacity: isDisabled ? 0.2 : 1, - ...( ariaPressed ? styles.buttonActive : styles.buttonInactive ), + ...( ariaPressed ? styles.buttonActive : buttonInactiveStyle ), }; const states = []; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 4984cdde2fd36d..d09b157160003c 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -27,3 +27,4 @@ export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list'; export { default as Picker } from './mobile/picker'; export { default as ReadableContentView } from './mobile/readable-content-view'; +export * from './mobile/dark-mode'; diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js index 487dcea882dab1..cf69f3352fa850 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.native.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.native.js @@ -14,7 +14,7 @@ import { Inserter, BlockToolbar, } from '@wordpress/block-editor'; -import { Toolbar, ToolbarButton } from '@wordpress/components'; +import { Toolbar, ToolbarButton, useStyle } from '@wordpress/components'; /** * Internal dependencies @@ -32,7 +32,7 @@ function HeaderToolbar( { clearSelectedBlock, } ) { return ( - + + { mode === 'text' ? this.renderHTML() : this.renderVisual() } diff --git a/packages/edit-post/src/components/layout/style.native.scss b/packages/edit-post/src/components/layout/style.native.scss index e6d7e241bcd0df..7deb6d1d9970f0 100644 --- a/packages/edit-post/src/components/layout/style.native.scss +++ b/packages/edit-post/src/components/layout/style.native.scss @@ -5,6 +5,10 @@ background-color: #fff; } +.containerDark { + background-color: #000; +} + .toolbarKeyboardAvoidingView { position: absolute; bottom: 0; diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 1cf45d08548bf0..5dcda7d5cefea6 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -20,6 +20,7 @@ import { childrenBlock } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/html-entities'; import { BACKSPACE } from '@wordpress/keycodes'; import { isURL } from '@wordpress/url'; +import { useStyle, DarkMode } from '@wordpress/components'; /** * Internal dependencies @@ -72,6 +73,8 @@ const gutenbergFormatNamesToAztec = { }; export class RichText extends Component { + static contextType = DarkMode.Context; + constructor( { value, __unstableMultiline: multiline, selectionStart, selectionEnd } ) { super( ...arguments ); @@ -777,7 +780,7 @@ export class RichText extends Component { const record = this.getRecord(); const html = this.getHtmlToRender( record, tagName ); - let minHeight = styles[ 'rich-text' ].minHeight; + let minHeight = styles.richText.minHeight; if ( style && style.minHeight ) { minHeight = style.minHeight; } @@ -790,7 +793,7 @@ export class RichText extends Component { color: defaultColor, textDecorationColor: defaultTextDecorationColor, fontFamily: defaultFontFamily, - } = styles[ 'rich-text' ]; + } = useStyle( styles.richText, styles.richTextDark, this.context ); let selection = null; if ( this.needsSelectionUpdate ) { @@ -819,6 +822,8 @@ export class RichText extends Component { this.firedAfterTextChanged = false; } + const dynamicStyle = useStyle( style, styles.richTextDark ); + return ( { children && children( { @@ -835,7 +840,7 @@ export class RichText extends Component { } } } style={ { - ...style, + ...dynamicStyle, minHeight: Math.max( minHeight, this.state.height ), } } text={ { text: html, eventCount: this.lastEventCount, selection } } diff --git a/packages/rich-text/src/component/style.native.scss b/packages/rich-text/src/component/style.native.scss index 6481c415694127..efe675e50b8614 100644 --- a/packages/rich-text/src/component/style.native.scss +++ b/packages/rich-text/src/component/style.native.scss @@ -1,11 +1,17 @@ -.rich-text { +.richText { font-family: $default-regular-font; min-height: $min-height-paragraph; color: $gray-900; text-decoration-color: $blue-500; } +.richTextDark { + color: $white; + text-decoration-color: $blue-500; + background-color: #1c1c1e; +} + .rich-text-placeholder { color: $gray; } From 8958ff67deee42b879a7b035726c6f99c6e7b78a Mon Sep 17 00:00:00 2001 From: etoledom Date: Fri, 16 Aug 2019 16:34:27 +0200 Subject: [PATCH 03/23] Mobile: Using DarkMode as HOC --- .../src/components/block-list/block.native.js | 8 ++-- .../src/components/block-list/index.native.js | 5 +-- .../components/src/button/index.native.js | 12 ++++-- .../src/mobile/dark-mode/index.native.js | 37 +++++++++++++------ .../header/header-toolbar/index.native.js | 6 ++- .../src/components/layout/index.native.js | 7 ++-- .../rich-text/src/component/index.native.js | 10 ++--- 7 files changed, 53 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 186bfec4162b06..3af07afef751f8 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -15,7 +15,7 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { getBlockType } from '@wordpress/blocks'; import { __, sprintf } from '@wordpress/i18n'; -import { useStyle, DarkMode } from '@wordpress/components'; +import { useStyle, withTheme } from '@wordpress/components'; /** * Internal dependencies @@ -26,8 +26,6 @@ import BlockInvalidWarning from './block-invalid-warning'; import BlockMobileToolbar from './block-mobile-toolbar'; class BlockListBlock extends Component { - static contextType = DarkMode.Context; - constructor() { super( ...arguments ); @@ -114,9 +112,10 @@ class BlockListBlock extends Component { isValid, showTitle, title, + theme, } = this.props; - const blockContainerStyle = useStyle( styles.blockContainer, styles.blockContainerDark ); + const blockContainerStyle = useStyle( styles.blockContainer, styles.blockContainerDark, theme ); const borderColor = isSelected ? focusedBorderColor : 'transparent'; const accessibilityLabel = this.getAccessibilityLabel(); @@ -221,4 +220,5 @@ export default compose( [ }, }; } ), + withTheme, ] )( BlockListBlock ); diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 908bc228cb0374..494ffb81906506 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/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, useStyle, DarkMode } from '@wordpress/components'; +import { KeyboardAwareFlatList, ReadableContentView, useStyle, withTheme } from '@wordpress/components'; /** * Internal dependencies @@ -24,8 +24,6 @@ import DefaultBlockAppender from '../default-block-appender'; const innerToolbarHeight = 44; export class BlockList extends Component { - static contextType = DarkMode.Context; - constructor() { super( ...arguments ); @@ -216,5 +214,6 @@ export default compose( [ replaceBlock, }; } ), + withTheme, ] )( BlockList ); diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index ce9394a8826cac..639eb4448de7ba 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -6,7 +6,10 @@ import { StyleSheet, TouchableOpacity, Text, View, Platform } from 'react-native /** * WordPress dependencies */ -import { useStyle } from '@wordpress/components'; +/** + * Internal dependencies + */ +import { useStyle, withTheme } from '../mobile/dark-mode'; const isAndroid = Platform.OS === 'android'; const marginBottom = isAndroid ? -0.5 : 0; @@ -58,7 +61,7 @@ const styles = StyleSheet.create( { }, } ); -export default function Button( props ) { +export function Button( props ) { const { children, onClick, @@ -68,10 +71,11 @@ export default function Button( props ) { 'aria-label': ariaLabel, 'aria-pressed': ariaPressed, 'data-subscript': subscript, + theme, } = props; const isDisabled = ariaDisabled || disabled; - const buttonInactiveStyle = useStyle( styles.buttonInactive, styles.buttonInactiveDark ); + const buttonInactiveStyle = useStyle( styles.buttonInactive, styles.buttonInactiveDark, theme ); const buttonViewStyle = { opacity: isDisabled ? 0.2 : 1, @@ -108,3 +112,5 @@ export default function Button( props ) { ); } + +export default withTheme( Button ); diff --git a/packages/components/src/mobile/dark-mode/index.native.js b/packages/components/src/mobile/dark-mode/index.native.js index ab6ff33ff8fad3..b28e64f50d5441 100644 --- a/packages/components/src/mobile/dark-mode/index.native.js +++ b/packages/components/src/mobile/dark-mode/index.native.js @@ -1,22 +1,37 @@ /** * External dependencies */ -import { eventEmitter, initialMode, DarkModeContext } from 'react-native-dark-mode'; +import { eventEmitter, initialMode } from 'react-native-dark-mode'; +import React from 'react'; -let mode = initialMode; - -eventEmitter.on( 'currentModeChanged', ( newMode ) => { - mode = newMode; -} ); - -export function useStyle( light, dark ) { +export function useStyle( light, dark, theme ) { const finalDark = { ...light, ...dark, }; - return mode === 'dark' ? finalDark : light; + return theme === 'dark' ? finalDark : light; } -export const DarkMode = {}; -DarkMode.Context = DarkModeContext; +// This function takes a component... +export function withTheme( WrappedComponent ) { + return class extends React.Component { + constructor( props ) { + super( props ); + + this.state = { + mode: initialMode, + }; + } + + componentDidMount() { + eventEmitter.on( 'currentModeChanged', ( newMode ) => { + this.setState( { mode: newMode } ); + } ); + } + + render() { + return ; + } + }; +} diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js index cf69f3352fa850..0d4bc101279146 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.native.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.native.js @@ -14,7 +14,7 @@ import { Inserter, BlockToolbar, } from '@wordpress/block-editor'; -import { Toolbar, ToolbarButton, useStyle } from '@wordpress/components'; +import { Toolbar, ToolbarButton, useStyle, withTheme } from '@wordpress/components'; /** * Internal dependencies @@ -30,9 +30,10 @@ function HeaderToolbar( { showInserter, showKeyboardHideButton, clearSelectedBlock, + theme, } ) { return ( - + + { mode === 'text' ? this.renderHTML() : this.renderVisual() } @@ -145,4 +143,5 @@ export default compose( [ mode: getEditorMode(), }; } ), + withTheme, ] )( Layout ); diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 5dcda7d5cefea6..7e26f0e11cbb6f 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -20,7 +20,7 @@ import { childrenBlock } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/html-entities'; import { BACKSPACE } from '@wordpress/keycodes'; import { isURL } from '@wordpress/url'; -import { useStyle, DarkMode } from '@wordpress/components'; +import { useStyle, withTheme } from '@wordpress/components'; /** * Internal dependencies @@ -73,8 +73,6 @@ const gutenbergFormatNamesToAztec = { }; export class RichText extends Component { - static contextType = DarkMode.Context; - constructor( { value, __unstableMultiline: multiline, selectionStart, selectionEnd } ) { super( ...arguments ); @@ -775,6 +773,7 @@ export class RichText extends Component { style, __unstableIsSelected: isSelected, children, + theme, } = this.props; const record = this.getRecord(); @@ -793,7 +792,7 @@ export class RichText extends Component { color: defaultColor, textDecorationColor: defaultTextDecorationColor, fontFamily: defaultFontFamily, - } = useStyle( styles.richText, styles.richTextDark, this.context ); + } = useStyle( styles.richText, styles.richTextDark, theme ); let selection = null; if ( this.needsSelectionUpdate ) { @@ -822,7 +821,7 @@ export class RichText extends Component { this.firedAfterTextChanged = false; } - const dynamicStyle = useStyle( style, styles.richTextDark ); + const dynamicStyle = useStyle( style, styles.richTextDark, theme ); return ( @@ -885,4 +884,5 @@ export default compose( [ withSelect( ( select ) => ( { formatTypes: select( 'core/rich-text' ).getFormatTypes(), } ) ), + withTheme, ] )( RichText ); From 8bb6d0eafa9eb12228d9b4181440e99464fb12ff Mon Sep 17 00:00:00 2001 From: etoledom Date: Tue, 20 Aug 2019 12:46:30 +0200 Subject: [PATCH 04/23] iOS DarkMode: Modified colors on block list and block container --- .../block-editor/src/components/block-list/block.native.js | 4 +++- .../src/components/block-list/block.native.scss | 6 +++++- .../src/components/header/header-toolbar/style.native.scss | 2 +- packages/edit-post/src/components/layout/style.native.scss | 2 +- packages/rich-text/src/component/style.native.scss | 2 +- 5 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 3af07afef751f8..141735c8135e8a 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -116,6 +116,8 @@ class BlockListBlock extends Component { } = this.props; const blockContainerStyle = useStyle( styles.blockContainer, styles.blockContainerDark, theme ); + const blockContainerFocusedStyle = useStyle( styles.blockContainerFocused, styles.blockContainerFocusedDark, theme ); + const borderColor = isSelected ? focusedBorderColor : 'transparent'; const accessibilityLabel = this.getAccessibilityLabel(); @@ -130,7 +132,7 @@ class BlockListBlock extends Component { { showTitle && this.renderBlockTitle() } { isValid && this.getBlockForType() } { ! isValid && diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index 624d41258a619f..fd088f5f8b2fed 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -11,7 +11,7 @@ } .blockContainerDark { - background-color: #1c1c1e; + background-color: $black; } .blockContainerFocused { @@ -22,6 +22,10 @@ padding-bottom: 0; // will be flushed into inline toolbar height } +.blockContainerFocusedDark { + background-color: $black; +} + .blockTitle { background-color: $gray; padding-left: 8px; diff --git a/packages/edit-post/src/components/header/header-toolbar/style.native.scss b/packages/edit-post/src/components/header/header-toolbar/style.native.scss index d4fb90833e9cb7..1e495a40806e6a 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.native.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.native.scss @@ -8,7 +8,7 @@ } .containerDark { - background-color: #000; + background-color: $black; border-top-color: #3a3a3c; } diff --git a/packages/edit-post/src/components/layout/style.native.scss b/packages/edit-post/src/components/layout/style.native.scss index 7deb6d1d9970f0..64fa3351251e83 100644 --- a/packages/edit-post/src/components/layout/style.native.scss +++ b/packages/edit-post/src/components/layout/style.native.scss @@ -6,7 +6,7 @@ } .containerDark { - background-color: #000; + background-color: $black; } .toolbarKeyboardAvoidingView { diff --git a/packages/rich-text/src/component/style.native.scss b/packages/rich-text/src/component/style.native.scss index efe675e50b8614..642a61d5dec8e2 100644 --- a/packages/rich-text/src/component/style.native.scss +++ b/packages/rich-text/src/component/style.native.scss @@ -9,7 +9,7 @@ .richTextDark { color: $white; text-decoration-color: $blue-500; - background-color: #1c1c1e; + background-color: $black; } .rich-text-placeholder { From aa61ee7ff4f03c08f34c4a41bb3704bf2c55d66e Mon Sep 17 00:00:00 2001 From: etoledom Date: Tue, 20 Aug 2019 14:14:40 +0200 Subject: [PATCH 05/23] iOS DarkMode: Improved Header Toolbar colors --- packages/components/src/toolbar/style.native.scss | 4 ++++ .../components/src/toolbar/toolbar-container.native.js | 5 +++-- .../components/header/header-toolbar/style.native.scss | 4 ++-- packages/edit-post/src/components/layout/index.native.js | 2 +- .../edit-post/src/components/layout/style.native.scss | 9 +++++++++ 5 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/components/src/toolbar/style.native.scss b/packages/components/src/toolbar/style.native.scss index 1e0d176e275d80..3038ea8e491d8d 100644 --- a/packages/components/src/toolbar/style.native.scss +++ b/packages/components/src/toolbar/style.native.scss @@ -5,3 +5,7 @@ padding-left: 5px; padding-right: 5px; } + +.containerDark { + border-color: #515459; +} diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js index 887991d2ea1238..f9d019450266c2 100644 --- a/packages/components/src/toolbar/toolbar-container.native.js +++ b/packages/components/src/toolbar/toolbar-container.native.js @@ -7,11 +7,12 @@ import { View } from 'react-native'; * Internal dependencies */ import styles from './style.scss'; +import { withTheme, useStyle } from '../mobile/dark-mode'; const ToolbarContainer = ( props ) => ( - + { props.children } ); -export default ToolbarContainer; +export default withTheme( ToolbarContainer ); diff --git a/packages/edit-post/src/components/header/header-toolbar/style.native.scss b/packages/edit-post/src/components/header/header-toolbar/style.native.scss index 1e495a40806e6a..7b9d3ebe4f9541 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.native.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.native.scss @@ -8,8 +8,8 @@ } .containerDark { - background-color: $black; - border-top-color: #3a3a3c; + background-color: $dark-background-elevated; + border-top-color: $dark-background-elevated; } .scrollableContent { diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js index 3ae073a405e23b..6196b176720405 100644 --- a/packages/edit-post/src/components/layout/index.native.js +++ b/packages/edit-post/src/components/layout/index.native.js @@ -113,7 +113,7 @@ class Layout extends Component { return ( - + { mode === 'text' ? this.renderHTML() : this.renderVisual() } diff --git a/packages/edit-post/src/components/layout/style.native.scss b/packages/edit-post/src/components/layout/style.native.scss index 64fa3351251e83..4b34dc2aa109a0 100644 --- a/packages/edit-post/src/components/layout/style.native.scss +++ b/packages/edit-post/src/components/layout/style.native.scss @@ -6,6 +6,15 @@ } .containerDark { + background-color: $dark-background-elevated; +} + +.background { + flex: 1; + background-color: $white; +} + +.backgroundDark { background-color: $black; } From d3c7eef7729445f468135f9c37d4e75b1cccbf54 Mon Sep 17 00:00:00 2001 From: etoledom Date: Tue, 20 Aug 2019 19:32:47 +0200 Subject: [PATCH 06/23] iOS DarkMode: Removing background from buttons --- .../components/src/button/index.native.js | 20 ++----------------- 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index 639eb4448de7ba..78d10226e26def 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -3,14 +3,6 @@ */ import { StyleSheet, TouchableOpacity, Text, View, Platform } from 'react-native'; -/** - * WordPress dependencies - */ -/** - * Internal dependencies - */ -import { useStyle, withTheme } from '../mobile/dark-mode'; - const isAndroid = Platform.OS === 'android'; const marginBottom = isAndroid ? -0.5 : 0; const marginLeft = -3; @@ -28,10 +20,6 @@ const styles = StyleSheet.create( { justifyContent: 'center', alignItems: 'center', aspectRatio: 1, - backgroundColor: 'white', - }, - buttonInactiveDark: { - backgroundColor: 'black', }, buttonActive: { flex: 1, @@ -61,7 +49,7 @@ const styles = StyleSheet.create( { }, } ); -export function Button( props ) { +export default function Button( props ) { const { children, onClick, @@ -71,15 +59,13 @@ export function Button( props ) { 'aria-label': ariaLabel, 'aria-pressed': ariaPressed, 'data-subscript': subscript, - theme, } = props; const isDisabled = ariaDisabled || disabled; - const buttonInactiveStyle = useStyle( styles.buttonInactive, styles.buttonInactiveDark, theme ); const buttonViewStyle = { opacity: isDisabled ? 0.2 : 1, - ...( ariaPressed ? styles.buttonActive : buttonInactiveStyle ), + ...( ariaPressed ? styles.buttonActive : styles.buttonInactive ), }; const states = []; @@ -112,5 +98,3 @@ export function Button( props ) { ); } - -export default withTheme( Button ); From 0d8f63069fc5732d6eb8616c9fb8b1ba1635f771 Mon Sep 17 00:00:00 2001 From: etoledom Date: Tue, 20 Aug 2019 20:24:42 +0200 Subject: [PATCH 07/23] iOS DarkMode warning and unsupported --- .../src/components/warning/index.native.js | 18 +++++++++++------- .../src/components/warning/style.native.scss | 12 ++++++++++++ .../block-library/src/missing/edit.native.js | 19 +++++++++++++------ .../src/missing/style.native.scss | 12 ++++++++++++ .../src/primitives/svg/style.native.scss | 14 ++++++++++++-- 5 files changed, 60 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/warning/index.native.js b/packages/block-editor/src/components/warning/index.native.js index 7d0cced3408cca..071fd30a0738a3 100644 --- a/packages/block-editor/src/components/warning/index.native.js +++ b/packages/block-editor/src/components/warning/index.native.js @@ -6,7 +6,7 @@ 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'; /** @@ -14,29 +14,33 @@ import { normalizeIconObject } from '@wordpress/blocks'; */ 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 ( { icon && ( ) } { title && ( - { title } + { title } ) } { message && ( - { message } + { message } ) } ); } -export default Warning; +export default withTheme( Warning ); diff --git a/packages/block-editor/src/components/warning/style.native.scss b/packages/block-editor/src/components/warning/style.native.scss index a96045ada1fd55..4cc23df350dc69 100644 --- a/packages/block-editor/src/components/warning/style.native.scss +++ b/packages/block-editor/src/components/warning/style.native.scss @@ -10,6 +10,10 @@ justify-content: center; } +.containerDark { + background-color: #1e2327; +} + .icon { width: 24px; height: 24px; @@ -24,8 +28,16 @@ color: $gray-dark; } +.titleDark { + color: $white; +} + .message { text-align: center; color: $gray-text-min; font-size: 12; } + +.messageDark { + color: $white; +} diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js index 838c64d88b56c4..c5a604144b7e7b 100644 --- a/packages/block-library/src/missing/edit.native.js +++ b/packages/block-library/src/missing/edit.native.js @@ -6,7 +6,7 @@ import { View, Text } from 'react-native'; /** * WordPress dependencies */ -import { Icon } from '@wordpress/components'; +import { Icon, withTheme, useStyle } from '@wordpress/components'; import { coreBlocks } from '@wordpress/block-library'; import { normalizeIconObject } from '@wordpress/blocks'; import { Component } from '@wordpress/element'; @@ -17,18 +17,25 @@ import { __ } from '@wordpress/i18n'; */ import styles from './style.scss'; -export default class UnsupportedBlockEdit extends Component { +export class UnsupportedBlockEdit extends Component { render() { const { originalName } = this.props.attributes; + const theme = this.props.theme; const blockType = coreBlocks[ originalName ]; + const title = blockType ? blockType.settings.title : __( 'Unsupported' ); - const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins'; + const titleStyle = useStyle( styles.unsupportedBlockMessage, styles.unsupportedBlockMessageDark, theme ); + const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins'; + const iconStyle = useStyle( styles.unsupportedBlockIcon, styles.unsupportedBlockIconDark, theme ); + const iconClassName = 'unsupported-icon' + '-' + theme; return ( - - - { title } + + + { title } ); } } + +export default withTheme( UnsupportedBlockEdit ); diff --git a/packages/block-library/src/missing/style.native.scss b/packages/block-library/src/missing/style.native.scss index 95a86122d70983..de7170975c78ef 100644 --- a/packages/block-library/src/missing/style.native.scss +++ b/packages/block-library/src/missing/style.native.scss @@ -10,13 +10,25 @@ justify-content: center; } +.unsupportedBlockDark { + background-color: #1e2327; +} + .unsupportedBlockIcon { color: $gray-dark; } +.unsupportedBlockIconDark { + color: $white; +} + .unsupportedBlockMessage { margin-top: 2; text-align: center; color: $gray-dark; font-size: 14; } + +.unsupportedBlockMessageDark { + color: $white; +} diff --git a/packages/components/src/primitives/svg/style.native.scss b/packages/components/src/primitives/svg/style.native.scss index e5a64ea140d0d8..595372b06329e1 100644 --- a/packages/components/src/primitives/svg/style.native.scss +++ b/packages/components/src/primitives/svg/style.native.scss @@ -13,12 +13,22 @@ fill: currentColor; } -.unsupported-icon { +.unsupported-icon-light { color: $gray-dark; fill: currentColor; } -.warning-icon { +.unsupported-icon-dark { + color: $white; + fill: currentColor; +} + +.warning-icon-light { color: $gray-dark; fill: currentColor; } + +.warning-icon-dark { + color: $white; + fill: currentColor; +} From 580b63b30c2d17aefe03a4a8e84b40c66ab39cca Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 21 Aug 2019 11:12:51 +0200 Subject: [PATCH 08/23] iOS DarkMode: MediaPlaceholder --- .../src/components/block-list/index.native.js | 3 ++- .../src/components/block-list/style.native.scss | 4 ++++ .../src/components/media-placeholder/index.native.js | 12 ++++++++---- .../components/media-placeholder/styles.native.scss | 8 ++++++++ packages/block-library/src/image/edit.native.js | 9 +++++++-- packages/block-library/src/image/styles.native.scss | 4 ++++ packages/block-library/src/video/edit.native.js | 9 +++++++-- packages/block-library/src/video/style.native.scss | 4 ++++ 8 files changed, 44 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 494ffb81906506..002d73175b3d4c 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -126,6 +126,7 @@ export class BlockList extends Component { } renderItem( { item: clientId } ) { + const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark, this.props.theme ); return ( { this.props.shouldShowInsertionPoint( clientId ) && this.renderAddBlockSeparator() } @@ -136,7 +137,7 @@ export class BlockList extends Component { rootClientId={ this.props.rootClientId } onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange } borderStyle={ this.blockHolderBorderStyle() } - focusedBorderColor={ styles.blockHolderFocused.borderColor } + focusedBorderColor={ blockHolderFocusedStyle.borderColor } /> ); diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index 53676bb528b5bf..0cb78ad70f75e0 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -70,6 +70,10 @@ border-color: $gray-lighten-30; } +.blockHolderFocusedDark { + border-color: #3c434a; +} + .blockListFooter { height: 80px; } diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index a19a28588200c9..e04361b71f3307 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -8,6 +8,7 @@ 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 @@ -15,7 +16,7 @@ import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/bloc 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 ( - + { getMediaOptions() } { icon } - + { placeholderTitle } @@ -83,4 +87,4 @@ function MediaPlaceholder( props ) { ); } -export default MediaPlaceholder; +export default withTheme( MediaPlaceholder ); diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index f76be4b8f36a42..ab30eb16fac6f0 100644 --- a/packages/block-editor/src/components/media-placeholder/styles.native.scss +++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss @@ -11,6 +11,10 @@ padding-bottom: 12; } +.emptyStateContainerDark { + background-color: #1e2327; +} + .emptyStateTitle { text-align: center; margin-top: 8; @@ -19,6 +23,10 @@ color: #2e4453; } +.emptyStateTitleDark { + color: $white; +} + .emptyStateDescription { text-align: center; color: $blue-wordpress; diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 3928691b777aa0..024e88053a6aa2 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -19,7 +19,10 @@ import { Icon, Toolbar, ToolbarButton, + withTheme, + useStyle, } from '@wordpress/components'; + import { MediaPlaceholder, MediaUpload, @@ -193,11 +196,13 @@ class ImageEdit extends React.Component { } getIcon( isRetryIcon ) { + const iconStyle = useStyle( styles.icon, styles.iconDark, this.props.theme ); + if ( isRetryIcon ) { return ; } - return ; + return ; } render() { @@ -391,4 +396,4 @@ class ImageEdit extends React.Component { } } -export default ImageEdit; +export default withTheme( ImageEdit ); diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 81578bd734ba3e..aaafc3ae5457c8 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -45,3 +45,7 @@ width: 100%; height: 100%; } + +.iconDark { + fill: $white; +} diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index 4d7ce426d55c05..dee769ce6bb07b 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/packages/block-library/src/video/edit.native.js @@ -20,7 +20,10 @@ import { Icon, Toolbar, ToolbarButton, + withTheme, + useStyle, } from '@wordpress/components'; + import { MediaPlaceholder, MediaUpload, @@ -127,11 +130,13 @@ class VideoEdit extends React.Component { } getIcon( isRetryIcon, isMediaPlaceholder ) { + const iconStyle = useStyle( style.icon, style.iconDark, this.props.theme ); + if ( isRetryIcon ) { return ; } - return ; + return ; } render() { @@ -249,4 +254,4 @@ class VideoEdit extends React.Component { } } -export default VideoEdit; +export default withTheme( VideoEdit ); diff --git a/packages/block-library/src/video/style.native.scss b/packages/block-library/src/video/style.native.scss index a7b77efce2c4bc..15a92ee01353fa 100644 --- a/packages/block-library/src/video/style.native.scss +++ b/packages/block-library/src/video/style.native.scss @@ -67,6 +67,10 @@ height: 100%; } +.iconDark { + fill: $white; +} + .iconUploading { fill: $gray-lighten-20; width: 100%; From 43bc0420ce8a5f7586ae3fcb91584f3cc0276538 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 21 Aug 2019 12:08:02 +0200 Subject: [PATCH 09/23] iOS DarkMode: BottomSheets --- .../src/mobile/bottom-sheet/cell.native.js | 25 +++++++++++++------ .../src/mobile/bottom-sheet/index.native.js | 20 +++++++++------ .../mobile/bottom-sheet/styles.native.scss | 16 ++++++++++++ 3 files changed, 47 insertions(+), 14 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index cebfc6a91c1826..41a1d5563ca0fb 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -16,8 +16,10 @@ import { __, _x, sprintf } from '@wordpress/i18n'; */ import styles from './styles.scss'; import platformStyles from './cellStyles.scss'; +// `useStyle as getStyle`: Hack to avoid lint thinking this is a React Hook +import { withTheme, useStyle as getStyle } from '../dark-mode'; -export default class BottomSheetCell extends Component { +class BottomSheetCell extends Component { constructor( props ) { super( ...arguments ); this.state = { @@ -48,12 +50,15 @@ export default class BottomSheetCell extends Component { editable = true, separatorType, style = {}, + theme, ...valueProps } = this.props; const showValue = value !== undefined; const isValueEditable = editable && onChangeValue !== undefined; - const defaultLabelStyle = showValue || icon !== undefined ? styles.cellLabel : styles.cellLabelCentered; + const cellLabelStyle = getStyle( styles.cellLabel, styles.cellTextDark, theme ); + const cellLabelCenteredStyle = getStyle( styles.cellLabelCentered, styles.cellTextDark, theme ); + const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : cellLabelCenteredStyle; const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined; const onCellPress = () => { @@ -75,22 +80,26 @@ export default class BottomSheetCell extends Component { }; const separatorStyle = () => { - const leftMarginStyle = { ...styles.cellSeparator, ...platformStyles.separatorMarginLeft }; + //eslint-disable-next-line @wordpress/no-unused-vars-before-return + const defaultSeparatorStyle = getStyle( styles.separator, styles.separatorDark, theme ); + const cellSeparatorStyle = getStyle( styles.cellSeparator, styles.cellSeparatorDark, theme ); + const leftMarginStyle = { ...cellSeparatorStyle, ...platformStyles.separatorMarginLeft }; switch ( separatorType ) { case 'leftMargin': return leftMarginStyle; case 'fullWidth': - return styles.separator; + return defaultSeparatorStyle; case 'none': return undefined; case undefined: - return showValue ? leftMarginStyle : styles.separator; + return showValue ? leftMarginStyle : defaultSeparatorStyle; } }; const getValueComponent = () => { const styleRTL = I18nManager.isRTL && styles.cellValueRTL; - const finalStyle = { ...styles.cellValue, ...valueStyle, ...styleRTL }; + const cellValueStyle = getStyle( styles.cellValue, styles.cellTextDark, theme ); + const finalStyle = { ...cellValueStyle, ...valueStyle, ...styleRTL }; // To be able to show the `middle` ellipsizeMode on editable cells // we show the TextInput just when the user wants to edit the value, @@ -159,7 +168,7 @@ export default class BottomSheetCell extends Component { { icon && ( - + ) } @@ -177,3 +186,5 @@ export default class BottomSheetCell extends Component { ); } } + +export default withTheme( BottomSheetCell ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 9106709cea25ef..e3209713e49449 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -19,6 +19,7 @@ import Cell from './cell'; import PickerCell from './picker-cell'; import SwitchCell from './switch-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; +import { withTheme, useStyle } from '../dark-mode'; class BottomSheet extends Component { constructor() { @@ -63,6 +64,7 @@ class BottomSheet extends Component { hideHeader, style = {}, contentStyle = {}, + theme, } = this.props; const panResponder = PanResponder.create( { @@ -118,6 +120,8 @@ class BottomSheet extends Component { }, }; + const backgroundStyle = useStyle( styles.background, styles.backgroundDark, theme ); + return ( @@ -160,10 +164,12 @@ function getWidth() { return Math.min( Dimensions.get( 'window' ).width, styles.background.maxWidth ); } -BottomSheet.getWidth = getWidth; -BottomSheet.Button = Button; -BottomSheet.Cell = Cell; -BottomSheet.PickerCell = PickerCell; -BottomSheet.SwitchCell = SwitchCell; +const ThemedBottomSheet = withTheme( BottomSheet ); + +ThemedBottomSheet.getWidth = getWidth; +ThemedBottomSheet.Button = Button; +ThemedBottomSheet.Cell = Cell; +ThemedBottomSheet.PickerCell = PickerCell; +ThemedBottomSheet.SwitchCell = SwitchCell; -export default BottomSheet; +export default ThemedBottomSheet; diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 53764ee4fe38f1..3ee16b2deeedc1 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -21,6 +21,10 @@ width: 100%; } +.separatorDark { + background-color: #3c434a; +} + .emptyHeaderSpace { height: 14; } @@ -34,6 +38,10 @@ padding-bottom: 0; } +.backgroundDark { + background-color: $dark-background-elevated; +} + .content { padding: 0 16px 0 16px; } @@ -86,6 +94,10 @@ width: 100%; } +.cellSeparatorDark { + background-color: #3c434a; +} + .cellRowContainer { flex-direction: row; align-items: center; @@ -115,6 +127,10 @@ flex: 1; } +.cellTextDark { + color: $white; +} + .cellValueRTL { text-align: left; } From d79f027ab93fba92c19fc180e2df2e198b438b20 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 21 Aug 2019 12:40:58 +0200 Subject: [PATCH 10/23] iOS DarkMode: Inserter --- .../src/components/inserter/index.native.js | 12 +++++++----- .../src/components/inserter/menu.native.js | 14 +++++++++----- .../src/components/inserter/style.native.scss | 17 +++++++++++++++++ 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index b20eb8387992d6..1a757a65a502b2 100644 --- a/packages/block-editor/src/components/inserter/index.native.js +++ b/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 } ) => ( ) } + icon={ ( ) } 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 ); diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 7870f41954afe3..3b0e27a156ddb8 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/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 ( this.props.onSelect( item ) }> - - - + + + - { item.title } + { item.title } } @@ -213,4 +216,5 @@ export default compose( }; } ), withInstanceId, + withTheme, )( InserterMenu ); diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index e10b685dda406c..899b3f676827db 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/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; +} From c096c3c280fb2000d12656ef2c25409ad1075efc Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 21 Aug 2019 12:56:34 +0200 Subject: [PATCH 11/23] iOS DarkMode: DefaultBlockAppender --- .../src/components/block-list/block.native.js | 8 +------- .../src/components/block-list/block.native.scss | 10 ---------- .../src/components/block-list/style.native.scss | 1 - .../default-block-appender/style.native.scss | 1 - 4 files changed, 1 insertion(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 141735c8135e8a..b87f95445e11f2 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -15,7 +15,6 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { getBlockType } from '@wordpress/blocks'; import { __, sprintf } from '@wordpress/i18n'; -import { useStyle, withTheme } from '@wordpress/components'; /** * Internal dependencies @@ -112,12 +111,8 @@ class BlockListBlock extends Component { isValid, showTitle, title, - theme, } = this.props; - const blockContainerStyle = useStyle( styles.blockContainer, styles.blockContainerDark, theme ); - const blockContainerFocusedStyle = useStyle( styles.blockContainerFocused, styles.blockContainerFocusedDark, theme ); - const borderColor = isSelected ? focusedBorderColor : 'transparent'; const accessibilityLabel = this.getAccessibilityLabel(); @@ -132,7 +127,7 @@ class BlockListBlock extends Component { { showTitle && this.renderBlockTitle() } { isValid && this.getBlockForType() } { ! isValid && @@ -222,5 +217,4 @@ export default compose( [ }, }; } ), - withTheme, ] )( BlockListBlock ); diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index fd088f5f8b2fed..a7dbae3b46516b 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -3,29 +3,19 @@ } .blockContainer { - background-color: $white; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; } -.blockContainerDark { - background-color: $black; -} - .blockContainerFocused { - background-color: $white; padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 0; // will be flushed into inline toolbar height } -.blockContainerFocusedDark { - background-color: $black; -} - .blockTitle { background-color: $gray; padding-left: 8px; diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index 0cb78ad70f75e0..8276fd216a5754 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -59,7 +59,6 @@ } .blockContainerFocused { - background-color: $white; padding-left: 16; padding-right: 16; padding-top: 12; 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 5193611fa45d58..9e2ffd2f293b01 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 @@ -5,7 +5,6 @@ } .blockContainer { - background-color: $white; padding-top: 0; padding-left: 16px; padding-right: 16px; From c826cf100171945fab63a3f674ec6bbaac735a4c Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 21 Aug 2019 13:13:29 +0200 Subject: [PATCH 12/23] iOS DarkMode: PostTite --- .../src/components/visual-editor/index.native.js | 8 +++++--- .../src/components/visual-editor/style.native.scss | 4 ++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/visual-editor/index.native.js b/packages/edit-post/src/components/visual-editor/index.native.js index 15ca4ed9d451bc..9d1925356a9138 100644 --- a/packages/edit-post/src/components/visual-editor/index.native.js +++ b/packages/edit-post/src/components/visual-editor/index.native.js @@ -7,7 +7,7 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { BlockList } from '@wordpress/block-editor'; import { PostTitle } from '@wordpress/editor'; -import { ReadableContentView } from '@wordpress/components'; +import { ReadableContentView, withTheme, useStyle } from '@wordpress/components'; /** * Internal dependencies @@ -20,8 +20,9 @@ class VisualEditor extends Component { editTitle, setTitleRef, title, + theme, } = this.props; - + const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark, theme ); return ( @@ -81,4 +82,5 @@ export default compose( [ }, }; } ), + withTheme, ] )( VisualEditor ); diff --git a/packages/edit-post/src/components/visual-editor/style.native.scss b/packages/edit-post/src/components/visual-editor/style.native.scss index 02b49a1515584c..b0541e91613356 100644 --- a/packages/edit-post/src/components/visual-editor/style.native.scss +++ b/packages/edit-post/src/components/visual-editor/style.native.scss @@ -15,3 +15,7 @@ .blockHolderFocused { border-color: $gray-lighten-30; } + +.blockHolderFocusedDark { + border-color: #3c434a; +} From 16ad3d83b703563847dbc7c74c4658225ca8b39a Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 21 Aug 2019 13:43:40 +0200 Subject: [PATCH 13/23] Update hardcoded colors with variables --- .../src/components/block-list/style.native.scss | 2 +- .../src/components/media-placeholder/styles.native.scss | 2 +- .../block-editor/src/components/warning/style.native.scss | 2 +- packages/block-library/src/missing/style.native.scss | 2 +- .../components/src/mobile/bottom-sheet/styles.native.scss | 6 +++--- .../src/components/header/header-toolbar/style.native.scss | 4 ++-- packages/edit-post/src/components/layout/style.native.scss | 2 +- .../src/components/visual-editor/style.native.scss | 2 +- 8 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index 8276fd216a5754..b6ee6b4a9188dd 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -70,7 +70,7 @@ } .blockHolderFocusedDark { - border-color: #3c434a; + border-color: $gray-70; } .blockListFooter { diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index ab30eb16fac6f0..7a192f078e2090 100644 --- a/packages/block-editor/src/components/media-placeholder/styles.native.scss +++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss @@ -12,7 +12,7 @@ } .emptyStateContainerDark { - background-color: #1e2327; + background-color: $background-dark-secondary; } .emptyStateTitle { diff --git a/packages/block-editor/src/components/warning/style.native.scss b/packages/block-editor/src/components/warning/style.native.scss index 4cc23df350dc69..2bfc52da454d25 100644 --- a/packages/block-editor/src/components/warning/style.native.scss +++ b/packages/block-editor/src/components/warning/style.native.scss @@ -11,7 +11,7 @@ } .containerDark { - background-color: #1e2327; + background-color: $background-dark-secondary; } .icon { diff --git a/packages/block-library/src/missing/style.native.scss b/packages/block-library/src/missing/style.native.scss index de7170975c78ef..c3f9c3a935c630 100644 --- a/packages/block-library/src/missing/style.native.scss +++ b/packages/block-library/src/missing/style.native.scss @@ -11,7 +11,7 @@ } .unsupportedBlockDark { - background-color: #1e2327; + background-color: $background-dark-secondary; } .unsupportedBlockIcon { diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 3ee16b2deeedc1..83986cf6b68624 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -22,7 +22,7 @@ } .separatorDark { - background-color: #3c434a; + background-color: $gray-70; } .emptyHeaderSpace { @@ -39,7 +39,7 @@ } .backgroundDark { - background-color: $dark-background-elevated; + background-color: $background-dark-elevated; } .content { @@ -95,7 +95,7 @@ } .cellSeparatorDark { - background-color: #3c434a; + background-color: $gray-70; } .cellRowContainer { diff --git a/packages/edit-post/src/components/header/header-toolbar/style.native.scss b/packages/edit-post/src/components/header/header-toolbar/style.native.scss index 7b9d3ebe4f9541..9210ce5506d620 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.native.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.native.scss @@ -8,8 +8,8 @@ } .containerDark { - background-color: $dark-background-elevated; - border-top-color: $dark-background-elevated; + background-color: $background-dark-elevated; + border-top-color: $background-dark-elevated; } .scrollableContent { diff --git a/packages/edit-post/src/components/layout/style.native.scss b/packages/edit-post/src/components/layout/style.native.scss index 4b34dc2aa109a0..7a5026d6664dc9 100644 --- a/packages/edit-post/src/components/layout/style.native.scss +++ b/packages/edit-post/src/components/layout/style.native.scss @@ -6,7 +6,7 @@ } .containerDark { - background-color: $dark-background-elevated; + background-color: $background-dark-elevated; } .background { diff --git a/packages/edit-post/src/components/visual-editor/style.native.scss b/packages/edit-post/src/components/visual-editor/style.native.scss index b0541e91613356..4ade220b5dd9e9 100644 --- a/packages/edit-post/src/components/visual-editor/style.native.scss +++ b/packages/edit-post/src/components/visual-editor/style.native.scss @@ -17,5 +17,5 @@ } .blockHolderFocusedDark { - border-color: #3c434a; + border-color: $gray-70; } From 8654cb11337ce0f0e64d4b3eb7340e64ffddc641 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 21 Aug 2019 13:48:22 +0200 Subject: [PATCH 14/23] iOS DarkMode: Fix bottom-sheet cell value color --- packages/components/src/mobile/bottom-sheet/cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 41a1d5563ca0fb..b5fc4ce3b54ed3 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -123,7 +123,7 @@ class BottomSheetCell extends Component { /> ) : ( From 2809ebf4eebc4e6469e6382c6de1be8547526897 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 21 Aug 2019 18:26:01 +0200 Subject: [PATCH 15/23] iOS DarkMode: More - PageBreak - Add Block Here --- .../src/components/block-list/index.native.js | 8 +++++--- .../src/components/block-list/style.native.scss | 9 ++++++++- packages/block-library/src/more/edit.native.js | 11 ++++++++--- packages/block-library/src/more/editor.native.scss | 12 ++++++++++-- packages/block-library/src/nextpage/edit.native.js | 11 ++++++++--- .../block-library/src/nextpage/editor.native.scss | 13 +++++++++++-- 6 files changed, 50 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 002d73175b3d4c..20fd136d8ccce7 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -144,11 +144,13 @@ export class BlockList extends Component { } renderAddBlockSeparator() { + const lineStyle = useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark, this.props.theme ); + const labelStyle = useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark, this.props.theme ); return ( - - { __( 'ADD BLOCK HERE' ) } - + + { __( 'ADD BLOCK HERE' ) } + ); } diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index b6ee6b4a9188dd..29e8e3b0110b50 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -30,6 +30,10 @@ height: 2px; } +.lineStyleAddHereDark { + background-color: $gray-50; +} + .labelStyleAddHere { flex: 1; text-align: center; @@ -38,10 +42,13 @@ font-weight: bold; } +.labelStyleAddHereDark { + color: $gray-20; +} + .containerStyleAddHere { flex: 1; flex-direction: row; - background-color: $white; } .blockHolderSemiBordered { diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js index 8b369284cb5962..e177213a7f1f6f 100644 --- a/packages/block-library/src/more/edit.native.js +++ b/packages/block-library/src/more/edit.native.js @@ -9,13 +9,14 @@ import Hr from 'react-native-hr'; */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; +import { withTheme, useStyle } from '@wordpress/components'; /** * Internal dependencies */ import styles from './editor.scss'; -export default class MoreEdit extends Component { +export class MoreEdit extends Component { constructor() { super( ...arguments ); @@ -28,6 +29,8 @@ export default class MoreEdit extends Component { const { customText } = this.props.attributes; const { defaultText } = this.state; const content = customText || defaultText; + const textStyle = useStyle( styles.moreText, styles.moreTextDark, this.props.theme ); + const lineStyle = useStyle( styles.moreLine, styles.moreLineDark, this.props.theme ); return ( @@ -35,10 +38,12 @@ export default class MoreEdit extends Component { text={ content } marginLeft={ 0 } marginRight={ 0 } - textStyle={ styles[ 'block-library-more__text' ] } - lineStyle={ styles[ 'block-library-more__line' ] } + textStyle={ textStyle } + lineStyle={ lineStyle } /> ); } } + +export default withTheme( MoreEdit ); diff --git a/packages/block-library/src/more/editor.native.scss b/packages/block-library/src/more/editor.native.scss index eb4a1d60d9431f..b0dece50736e6b 100644 --- a/packages/block-library/src/more/editor.native.scss +++ b/packages/block-library/src/more/editor.native.scss @@ -1,13 +1,21 @@ // @format -.block-library-more__line { +.moreLine { background-color: $gray-lighten-20; height: 2; } -.block-library-more__text { +.moreLineDark { + background-color: $gray-50; +} + +.moreText { color: $gray; text-decoration-style: solid; text-transform: uppercase; } +.moreTextDark { + color: $gray-20; +} + diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js index e3aa69b15e5e41..be9ad283576401 100644 --- a/packages/block-library/src/nextpage/edit.native.js +++ b/packages/block-library/src/nextpage/edit.native.js @@ -8,16 +8,19 @@ import Hr from 'react-native-hr'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; +import { withTheme, useStyle } from '@wordpress/components'; /** * Internal dependencies */ import styles from './editor.scss'; -export default function NextPageEdit( { attributes, isSelected, onFocus } ) { +export function NextPageEdit( { attributes, isSelected, onFocus, theme } ) { const { customText = __( 'Page break' ) } = attributes; const accessibilityTitle = attributes.customText || ''; const accessibilityState = isSelected ? [ 'selected' ] : []; + const textStyle = useStyle( styles.nextpageText, styles.nextpageTextDark, theme ); + const lineStyle = useStyle( styles.nextpageLine, styles.nextpageLineDark, theme ); return ( + textStyle={ textStyle } + lineStyle={ lineStyle } /> ); } + +export default withTheme( NextPageEdit ); diff --git a/packages/block-library/src/nextpage/editor.native.scss b/packages/block-library/src/nextpage/editor.native.scss index 869851fdd37c63..01ed97ac577473 100644 --- a/packages/block-library/src/nextpage/editor.native.scss +++ b/packages/block-library/src/nextpage/editor.native.scss @@ -1,12 +1,21 @@ // @format -.block-library-nextpage__line { +.nextpageLine { background-color: $gray-lighten-20; height: 2; } -.block-library-nextpage__text { +.nextpageLineDark { + background-color: $gray-50; +} + +.nextpageText { color: $gray; text-decoration-style: solid; text-transform: uppercase; } + +.nextpageTextDark { + color: $gray-20; +} + From 67cefeda3c84a272c93fac8117bec98acbf1f238 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 22 Aug 2019 12:41:12 +0200 Subject: [PATCH 16/23] iOS DarkMode: Better text color --- packages/rich-text/src/component/index.native.js | 4 +++- packages/rich-text/src/component/style.native.scss | 8 ++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 30699d3917ede4..6191e627d56962 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -782,9 +782,11 @@ export class RichText extends Component { minHeight = style.minHeight; } + const placeholderStyle = useStyle( styles.richTextPlaceholder, styles.richTextPlaceholderDark, theme ); + const { color: defaultPlaceholderTextColor, - } = styles[ 'rich-text-placeholder' ]; + } = placeholderStyle; const { color: defaultColor, diff --git a/packages/rich-text/src/component/style.native.scss b/packages/rich-text/src/component/style.native.scss index 642a61d5dec8e2..4ed93f7f70239d 100644 --- a/packages/rich-text/src/component/style.native.scss +++ b/packages/rich-text/src/component/style.native.scss @@ -8,10 +8,14 @@ .richTextDark { color: $white; - text-decoration-color: $blue-500; + text-decoration-color: $blue-30; background-color: $black; } -.rich-text-placeholder { +.richTextPlaceholder { color: $gray; } + +.richTextPlaceholderDark { + color: $gray-50; +} From 8cb3708382a293fe3486d6f9f83eb2f5bc69d498 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 22 Aug 2019 12:52:55 +0200 Subject: [PATCH 17/23] iOS Darkmode: Code block --- packages/block-library/src/code/edit.native.js | 13 +++++++++---- packages/block-library/src/code/theme.native.scss | 11 +++++++++++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js index 3f021790c2a403..0363fcfebc61d0 100644 --- a/packages/block-library/src/code/edit.native.js +++ b/packages/block-library/src/code/edit.native.js @@ -6,12 +6,13 @@ import { View } from 'react-native'; /** * WordPress dependencies */ +import { PlainText } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; +import { withTheme, useStyle } from '@wordpress/components'; /** * Internal dependencies */ -import { PlainText } from '@wordpress/block-editor'; import { escape, unescape } from './utils'; /** @@ -21,14 +22,16 @@ import styles from './theme.scss'; // Note: styling is applied directly to the (nested) PlainText component. Web-side components // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet. -export default function CodeEdit( props ) { - const { attributes, setAttributes, style, onFocus, onBlur } = props; +export function CodeEdit( props ) { + const { attributes, setAttributes, style, onFocus, onBlur, theme } = props; + const codeStyle = useStyle( styles.blockCode, styles.blockCodeDark, theme ); + const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark, theme ); return ( setAttributes( { content: escape( content ) } ) } @@ -38,8 +41,10 @@ export default function CodeEdit( props ) { onFocus={ onFocus } onBlur={ onBlur } fontFamily={ ( styles.blockCode.fontFamily ) } + placeholderTextColor={ placeholderStyle.color } /> </View> ); } +export default withTheme( CodeEdit ); diff --git a/packages/block-library/src/code/theme.native.scss b/packages/block-library/src/code/theme.native.scss index 668b9f92dd1f53..40a4ba9bfcbfdf 100644 --- a/packages/block-library/src/code/theme.native.scss +++ b/packages/block-library/src/code/theme.native.scss @@ -4,3 +4,14 @@ font-family: $default-monospace-font; } +.blockCodeDark { + color: $white; +} + +.placeholder { + color: $gray; +} + +.placeholderDark { + color: $gray-50; +} From bf2a1b582acf11b20f761e6a5b0c0b249defe963 Mon Sep 17 00:00:00 2001 From: etoledom <etoledom@icloud.com> Date: Thu, 22 Aug 2019 13:29:38 +0200 Subject: [PATCH 18/23] iOS DarkMode: HTML View --- .../src/mobile/html-text-input/index.native.js | 8 +++++++- .../mobile/html-text-input/style-common.native.scss | 10 +++++++++- .../src/mobile/html-text-input/style.android.scss | 2 -- .../src/mobile/html-text-input/style.ios.scss | 6 ++++-- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/components/src/mobile/html-text-input/index.native.js b/packages/components/src/mobile/html-text-input/index.native.js index e25f7a1af71c4d..1408be65c90530 100644 --- a/packages/components/src/mobile/html-text-input/index.native.js +++ b/packages/components/src/mobile/html-text-input/index.native.js @@ -15,6 +15,7 @@ import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies */ +import { withTheme, useStyle } from '../dark-mode'; import HTMLInputContainer from './container'; import styles from './style.scss'; @@ -60,6 +61,8 @@ export class HTMLTextInput extends Component { } render() { + const htmlStyle = useStyle( styles.htmlView, styles.htmlViewDark, this.props.theme ); + const placeholderStyle = useStyle( styles.placeholder, styles.placeholderDark, this.props.theme ); return ( <HTMLInputContainer parentHeight={ this.props.parentHeight }> <TextInput @@ -70,6 +73,7 @@ export class HTMLTextInput extends Component { style={ styles.htmlViewTitle } value={ this.props.title } placeholder={ __( 'Add title' ) } + placeholderTextColor={ placeholderStyle.color } onChangeText={ this.props.editTitle } /> <TextInput @@ -77,11 +81,12 @@ export class HTMLTextInput extends Component { accessibilityLabel="html-view-content" textAlignVertical="top" multiline - style={ styles.htmlView } + style={ htmlStyle } value={ this.state.value } onChangeText={ this.edit } onBlur={ this.stopEditing } placeholder={ __( 'Start writing…' ) } + placeholderTextColor={ placeholderStyle.color } scrollEnabled={ HTMLInputContainer.scrollEnabled } /> </HTMLInputContainer> @@ -117,4 +122,5 @@ export default compose( [ }; } ), withInstanceId, + withTheme, ] )( HTMLTextInput ); diff --git a/packages/components/src/mobile/html-text-input/style-common.native.scss b/packages/components/src/mobile/html-text-input/style-common.native.scss index 4db5b985161402..c1ac9f155d4c79 100644 --- a/packages/components/src/mobile/html-text-input/style-common.native.scss +++ b/packages/components/src/mobile/html-text-input/style-common.native.scss @@ -1,6 +1,6 @@ $padding: 8; -$backgroundColor: $white; $htmlFont: $default-monospace-font; +$textColorDark: $white; .keyboardAvoidingView { position: absolute; @@ -13,3 +13,11 @@ $htmlFont: $default-monospace-font; .container { flex: 1; } + +.placeholder { + color: $gray; +} + +.placeholderDark { + color: $gray-50; +} diff --git a/packages/components/src/mobile/html-text-input/style.android.scss b/packages/components/src/mobile/html-text-input/style.android.scss index 10594358722c37..1dca01274d75b5 100644 --- a/packages/components/src/mobile/html-text-input/style.android.scss +++ b/packages/components/src/mobile/html-text-input/style.android.scss @@ -2,7 +2,6 @@ .htmlView { font-family: $htmlFont; - background-color: $backgroundColor; padding-left: $padding; padding-right: $padding; padding-top: $padding; @@ -11,7 +10,6 @@ .htmlViewTitle { font-family: $htmlFont; - background-color: $backgroundColor; padding-left: $padding; padding-right: $padding; padding-top: $padding; diff --git a/packages/components/src/mobile/html-text-input/style.ios.scss b/packages/components/src/mobile/html-text-input/style.ios.scss index 8b13392b95a9ae..97cf00a7512ff5 100644 --- a/packages/components/src/mobile/html-text-input/style.ios.scss +++ b/packages/components/src/mobile/html-text-input/style.ios.scss @@ -4,15 +4,17 @@ $title-height: 32; .htmlView { font-family: $htmlFont; - background-color: $backgroundColor; padding-left: $padding; padding-right: $padding; padding-bottom: $title-height + $padding; } +.htmlViewDark { + color: $textColorDark; +} + .htmlViewTitle { font-family: $htmlFont; - background-color: $backgroundColor; padding-left: $padding; padding-right: $padding; padding-top: $padding; From 3f71f3d616a740d1e593e601dbb72356bc2cbaeb Mon Sep 17 00:00:00 2001 From: etoledom <etoledom@icloud.com> Date: Thu, 22 Aug 2019 13:54:16 +0200 Subject: [PATCH 19/23] iOS DarkMode: Improve colors on SafeArea --- .../src/components/layout/index.native.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js index 6196b176720405..7cd449504ec180 100644 --- a/packages/edit-post/src/components/layout/index.native.js +++ b/packages/edit-post/src/components/layout/index.native.js @@ -112,19 +112,21 @@ class Layout extends Component { }; return ( - <SafeAreaView style={ useStyle( styles.container, styles.containerDark, this.props.theme ) } onLayout={ this.onRootViewLayout }> + <View style={ useStyle( styles.container, styles.containerDark, this.props.theme ) } onLayout={ this.onRootViewLayout }> <View style={ useStyle( styles.background, styles.backgroundDark, this.props.theme ) }> { mode === 'text' ? this.renderHTML() : this.renderVisual() } </View> <View style={ { flex: 0, flexBasis: marginBottom, height: marginBottom } }> </View> - <KeyboardAvoidingView - parentHeight={ this.state.rootViewHeight } - style={ toolbarKeyboardAvoidingViewStyle } - > - <Header /> - </KeyboardAvoidingView> - </SafeAreaView> + <SafeAreaView> + <KeyboardAvoidingView + parentHeight={ this.state.rootViewHeight } + style={ toolbarKeyboardAvoidingViewStyle } + > + <Header /> + </KeyboardAvoidingView> + </SafeAreaView> + </View> ); } } From 5aee1ce1ac96e01c4cc0ec9c1f52ff6f4ce7324d Mon Sep 17 00:00:00 2001 From: etoledom <etoledom@icloud.com> Date: Fri, 23 Aug 2019 09:34:10 +0200 Subject: [PATCH 20/23] Fix toolbar not avoiding keyboard regression --- .../src/components/layout/index.native.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js index 7cd449504ec180..6196b176720405 100644 --- a/packages/edit-post/src/components/layout/index.native.js +++ b/packages/edit-post/src/components/layout/index.native.js @@ -112,21 +112,19 @@ class Layout extends Component { }; return ( - <View style={ useStyle( styles.container, styles.containerDark, this.props.theme ) } onLayout={ this.onRootViewLayout }> + <SafeAreaView style={ useStyle( styles.container, styles.containerDark, this.props.theme ) } onLayout={ this.onRootViewLayout }> <View style={ useStyle( styles.background, styles.backgroundDark, this.props.theme ) }> { mode === 'text' ? this.renderHTML() : this.renderVisual() } </View> <View style={ { flex: 0, flexBasis: marginBottom, height: marginBottom } }> </View> - <SafeAreaView> - <KeyboardAvoidingView - parentHeight={ this.state.rootViewHeight } - style={ toolbarKeyboardAvoidingViewStyle } - > - <Header /> - </KeyboardAvoidingView> - </SafeAreaView> - </View> + <KeyboardAvoidingView + parentHeight={ this.state.rootViewHeight } + style={ toolbarKeyboardAvoidingViewStyle } + > + <Header /> + </KeyboardAvoidingView> + </SafeAreaView> ); } } From 852fa05cfbb0d7317df86517db966886eccfc67c Mon Sep 17 00:00:00 2001 From: etoledom <etoledom@icloud.com> Date: Fri, 23 Aug 2019 11:08:39 +0200 Subject: [PATCH 21/23] Fix native unit tests --- packages/format-library/src/link/test/modal.native.js | 8 +++++--- test/native/__mocks__/styleMock.js | 8 +++++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/format-library/src/link/test/modal.native.js b/packages/format-library/src/link/test/modal.native.js index 03594a4ef1c380..44153ea3a40185 100644 --- a/packages/format-library/src/link/test/modal.native.js +++ b/packages/format-library/src/link/test/modal.native.js @@ -23,7 +23,7 @@ describe( 'LinksUI', () => { onRemove={ onRemove } onClose={ jest.fn() } /> - ).dive(); // -> dive() removes the HOC layer that was blocking access to ModalLinkUI + ).dive().dive(); // -> dive() removes the HOC layer that was blocking access to ModalLinkUI // When @@ -52,8 +52,10 @@ describe( 'LinksUI', () => { // When // Simulate user typing on the URL Cell. - const bottomSheet = wrapper.find( 'BottomSheet' ).first(); - const cell = bottomSheet.find( 'BottomSheetCell' ).first(); + const bottomSheet = wrapper.dive().find( 'BottomSheet' ).first(); + // withTheme is type "_class", we search for it and dive into BottomSheetCell + const cell = bottomSheet.dive().find( '_class' ).first().dive(); + cell.simulate( 'changeValue', 'wordpress.com' ); // Close the BottomSheet diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index 182af41388dc0a..f1119dd1d2c53a 100644 --- a/test/native/__mocks__/styleMock.js +++ b/test/native/__mocks__/styleMock.js @@ -15,7 +15,7 @@ module.exports = { blockCode: { fontFamily: 'serif', }, - 'rich-text': { + richText: { fontFamily: 'serif', minHeight: 30, }, @@ -66,4 +66,10 @@ module.exports = { iconUploading: { fill: 'gray', }, + placeholder: { + color: 'gray', + }, + richTextPlaceholder: { + color: 'gray', + }, }; From 327d545cb950eea200eaedfad9e05e541e5ae046 Mon Sep 17 00:00:00 2001 From: etoledom <etoledom@icloud.com> Date: Fri, 23 Aug 2019 11:13:08 +0200 Subject: [PATCH 22/23] Fix gutenberg-mobile unit tests --- test/native/__mocks__/styleMock.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index f1119dd1d2c53a..4e63b494feff94 100644 --- a/test/native/__mocks__/styleMock.js +++ b/test/native/__mocks__/styleMock.js @@ -72,4 +72,7 @@ module.exports = { richTextPlaceholder: { color: 'gray', }, + unsupportedBlockIcon: { + color: 'white', + }, }; From de173df0d25be8d577afa7283da05ae1d93d6408 Mon Sep 17 00:00:00 2001 From: etoledom <etoledom@icloud.com> Date: Fri, 23 Aug 2019 11:21:50 +0200 Subject: [PATCH 23/23] Adding RNDarkMode mocks --- test/native/__mocks__/react-native-dark-mode/index.js | 0 test/native/setup.js | 9 +++++++++ 2 files changed, 9 insertions(+) create mode 100644 test/native/__mocks__/react-native-dark-mode/index.js diff --git a/test/native/__mocks__/react-native-dark-mode/index.js b/test/native/__mocks__/react-native-dark-mode/index.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/test/native/setup.js b/test/native/setup.js index cfd2417a11ad9d..c0e3e0942a9180 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -21,6 +21,15 @@ jest.mock( 'react-native-gutenberg-bridge', () => { }; } ); +jest.mock( 'react-native-dark-mode', () => { + return { + eventEmitter: { + on: jest.fn(), + }, + initialMode: 'light', + }; +} ); + jest.mock( 'react-native-modal', () => () => 'Modal' ); jest.mock( 'react-native-hr', () => () => 'Hr' );