From 26ccc159f373e5412d4fabf20fa00431d8fce7b6 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Wed, 7 Nov 2018 13:59:49 +0100 Subject: [PATCH] Slot/Fill pattern with Toolbar #199 (#11115) Added support for native toolbar component --- packages/block-library/src/code/edit.native.js | 7 ++++++- packages/block-library/src/code/theme.android.scss | 4 ++++ packages/block-library/src/code/theme.ios.scss | 5 +++++ packages/block-library/src/heading/edit.native.js | 6 ++++-- packages/block-library/src/paragraph/edit.native.js | 9 +++++++-- packages/block-library/src/paragraph/style.native.scss | 3 +++ packages/components/src/button/index.native.js | 4 ++-- packages/components/src/index.native.js | 1 + .../components/src/toolbar/toolbar-container.native.js | 2 +- packages/editor/src/components/index.native.js | 2 ++ packages/editor/src/components/rich-text/index.native.js | 5 +++-- 11 files changed, 38 insertions(+), 10 deletions(-) create mode 100644 packages/block-library/src/code/theme.android.scss create mode 100644 packages/block-library/src/code/theme.ios.scss create mode 100644 packages/block-library/src/paragraph/style.native.scss diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js index 563c37dd4b13c..b6f4a8e541b37 100644 --- a/packages/block-library/src/code/edit.native.js +++ b/packages/block-library/src/code/edit.native.js @@ -13,6 +13,11 @@ import { __ } from '@wordpress/i18n'; */ import { PlainText } from '@wordpress/editor'; +/** + * Block code style + */ +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( { attributes, setAttributes, style } ) { @@ -20,7 +25,7 @@ export default function CodeEdit( { attributes, setAttributes, style } ) { setAttributes( { content } ) } diff --git a/packages/block-library/src/code/theme.android.scss b/packages/block-library/src/code/theme.android.scss new file mode 100644 index 0000000000000..18d9c4cdcf2dc --- /dev/null +++ b/packages/block-library/src/code/theme.android.scss @@ -0,0 +1,4 @@ +.blockCode { + font-family: monospace; +} + diff --git a/packages/block-library/src/code/theme.ios.scss b/packages/block-library/src/code/theme.ios.scss new file mode 100644 index 0000000000000..c553ba8e275f7 --- /dev/null +++ b/packages/block-library/src/code/theme.ios.scss @@ -0,0 +1,5 @@ +/* stylelint-disable font-family-no-missing-generic-family-keyword */ +.blockCode { + font-family: courier; +} + diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js index 30cc236034e97..077d2701c84d3 100644 --- a/packages/block-library/src/heading/edit.native.js +++ b/packages/block-library/src/heading/edit.native.js @@ -13,7 +13,7 @@ import { View } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { RichText } from '@wordpress/editor'; +import { RichText, BlockControls } from '@wordpress/editor'; import { parse, createBlock } from '@wordpress/blocks'; /** @@ -42,7 +42,9 @@ class HeadingEdit extends Component { return ( <View> - <HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } /> + <BlockControls> + <HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } /> + </BlockControls> <RichText tagName={ tagName } value={ content } diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js index 0a0216d24865c..c77f28fd556d7 100644 --- a/packages/block-library/src/paragraph/edit.native.js +++ b/packages/block-library/src/paragraph/edit.native.js @@ -11,7 +11,10 @@ import { Component } from '@wordpress/element'; import { parse, createBlock } from '@wordpress/blocks'; import { RichText } from '@wordpress/editor'; -const minHeight = 50; +/** + * Import style + */ +import styles from './style.scss'; const name = 'core/paragraph'; @@ -68,8 +71,8 @@ class ParagraphEdit extends Component { const { attributes, setAttributes, - style, mergeBlocks, + style, } = this.props; const { @@ -77,6 +80,8 @@ class ParagraphEdit extends Component { content, } = attributes; + const minHeight = styles.blockText.minHeight; + return ( <View> <RichText diff --git a/packages/block-library/src/paragraph/style.native.scss b/packages/block-library/src/paragraph/style.native.scss new file mode 100644 index 0000000000000..8724a7ca468ca --- /dev/null +++ b/packages/block-library/src/paragraph/style.native.scss @@ -0,0 +1,3 @@ +.blockText { + min-height: 50; +} diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index f4d2f2b9542a4..be7f7caf4369b 100644 --- a/packages/components/src/button/index.native.js +++ b/packages/components/src/button/index.native.js @@ -12,9 +12,9 @@ export default function Button( props ) { onPress={ onClick } style={ { borderColor: ariaPressed ? 'black' : 'white', borderWidth: 1, borderRadius: 2 } } > - <View style={ { flex: 1, flexDirection: 'row' } }> + <View style={ { height: 44, width: 44, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' } }> { children } - { subscript && ( <Text style={ { fontVariant: [ 'small-caps' ], textAlignVertical: 'bottom' } }>{ subscript }</Text> ) } + { subscript && ( <Text style={ { fontVariant: [ 'small-caps' ] } }>{ subscript }</Text> ) } </View> </TouchableOpacity> ); diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index e363c136f3628..2fd9eaa5e836e 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -3,6 +3,7 @@ export * from './primitives'; export { default as Dashicon } from './dashicon'; export { default as Toolbar } from './toolbar'; export { default as withSpokenMessages } from './higher-order/with-spoken-messages'; +export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill'; // Higher-Order Components export { default as withFilters } from './higher-order/with-filters'; diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js index c3504fc40202c..08106a987f408 100644 --- a/packages/components/src/toolbar/toolbar-container.native.js +++ b/packages/components/src/toolbar/toolbar-container.native.js @@ -4,7 +4,7 @@ import { View } from 'react-native'; export default ( props ) => ( - <View style={ { flex: 1, flexDirection: 'row' } }> + <View style={ { flexDirection: 'row' } }> { props.children } </View> ); diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js index 9cb399c034a6a..17943dee6b3ae 100644 --- a/packages/editor/src/components/index.native.js +++ b/packages/editor/src/components/index.native.js @@ -3,4 +3,6 @@ export * from './font-sizes'; export { default as PlainText } from './plain-text'; export { default as RichText } from './rich-text'; export { default as MediaPlaceholder } from './media-placeholder'; +export { default as BlockFormatControls } from './block-format-controls'; +export { default as BlockControls } from './block-controls'; export { default as BlockEdit } from './block-edit'; diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js index c0fb04867bde4..7fe26564cae5e 100644 --- a/packages/editor/src/components/rich-text/index.native.js +++ b/packages/editor/src/components/rich-text/index.native.js @@ -14,6 +14,7 @@ import { import { Component, RawHTML } from '@wordpress/element'; import { withInstanceId, compose } from '@wordpress/compose'; import { Toolbar } from '@wordpress/components'; +import { BlockFormatControls } from '@wordpress/editor'; import { isEmpty, create, @@ -342,9 +343,9 @@ export class RichText extends Component { return ( <View> - <View style={ { flex: 1 } }> + <BlockFormatControls> <Toolbar controls={ toolbarControls } /> - </View> + </BlockFormatControls> <RCTAztecView ref={ ( ref ) => { this._editor = ref;