React Native - Heading toolbar

packages/api-fetch/package.json

@@ -19,6 +19,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime-corejs2": "7.0.0-beta.56",
 		"@wordpress/hooks": "file:../hooks",

packages/block-library/src/heading/edit.native.js

@@ -2,13 +2,15 @@
  * External dependencies
  */
 import { View } from 'react-native';
+import { range } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { RichText } from '@wordpress/editor';
+import { Toolbar } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -18,6 +20,26 @@ import './editor.scss';
 const minHeight = 50;
 
 class HeadingEdit extends Component {
+	createLevelControl( targetLevel ) {
+		const {
+			attributes,
+			setAttributes,
+		} = this.props;
+
+		const {
+			level,
+		} = attributes;
+
+		return {
+			icon: 'heading',
+			// translators: %s: heading level e.g: "1", "2", "3"
+			title: sprintf( __( 'Heading %d' ), targetLevel ),
+			isActive: targetLevel === level,
+			onClick: () => setAttributes( { level: targetLevel } ),
+			subscript: String( targetLevel ),
+		};
+	}
+
 	render() {
 		const {
 			attributes,
@@ -33,6 +55,7 @@ class HeadingEdit extends Component {
 
 		return (
 			<View>
+				<Toolbar controls={ range( 2, 5 ).map( this.createLevelControl.bind( this ) ) } />
 				<RichText
 					tagName={ tagName }
 					content={ { contentTree: attributes.content, eventCount: attributes.eventCount } }

packages/components/src/button/index.native.js

@@ -1,18 +1,21 @@
 /**
  * External dependencies
  */
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, Text, View } from 'react-native';
 
 export default function Button( props ) {
-	const { children, onClick, 'aria-label': ariaLabel, 'aria-pressed': ariaPressed } = props;
+	const { children, onClick, 'aria-label': ariaLabel, 'aria-pressed': ariaPressed, 'data-subscript': subscript } = props;
 	return (
 		<TouchableOpacity
 			accessible={ true }
 			accessibilityLabel={ ariaLabel }
 			onPress={ onClick }
 			style={ { borderColor: ariaPressed ? 'black' : 'white', borderWidth: 1, borderRadius: 2 } }
 		>
-			{ children }
+			<View style={ { flex: 1, flexDirection: 'row' } }>
+				{ children }
+				{ subscript && ( <Text style={ { fontVariant: [ 'small-caps' ], textAlignVertical: 'bottom' } }>{ subscript }</Text> ) }
+			</View>
 		</TouchableOpacity>
 	);
 }