Slot/Fill pattern with Toolbar #199 (#11115)

Added support for native toolbar component
WordPress · Nov 7, 2018 · 26ccc15 · 26ccc15
1 parent 16a718a
commit 26ccc15
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 10 deletions.
diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js
@@ -13,14 +13,19 @@ 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 } ) {
 	return (
 		<View>
 			<PlainText
 				value={ attributes.content }
-				style={ style }
+				style={ [ style, styles.blockCode ] }
 				multiline={ true }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }

diff --git a/packages/block-library/src/code/theme.android.scss 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
@@ -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
@@ -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
@@ -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,15 +71,17 @@ class ParagraphEdit extends Component {
 		const {
 			attributes,
 			setAttributes,
-			style,
 			mergeBlocks,
+			style,
 		} = this.props;
 
 		const {
 			placeholder,
 			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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;