Slot/Fill pattern with Toolbar

__mocks__/styleMock.js

@@ -1,4 +1,10 @@
 /** @flow
  * @format */
 
-module.exports = {};
+module.exports = {
+
+	//Mock block paragraph style with minimum height
+	blockText: {
+		minHeight: 50,
+	},
+};

package.json

@@ -90,20 +90,25 @@
     "jsdom-jscore": "git+https://github.com/iamcco/jsdom-jscore-rn.git#6eac88dd5d5e7c21ce6382abde7dbc376d7f7f59",
     "jsx-to-string": "^1.3.1",
     "memize": "^1.0.5",
+    "moment": "^2.22.1",
+    "moment-timezone": "^0.5.16",
     "node-libs-react-native": "^1.0.2",
     "node-sass": "^4.8.3",
     "react": "16.5.0",
     "react-native": "0.57.1",
+    "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3",
     "react-native-modal": "^6.5.0",
     "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#336f7159eb6e7bad467c041b3f34667d485e7b58",
     "react-native-svg": "^6.5.2",
-    "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3",
     "react-redux": "^5.0.7",
     "redux": "^3.7.2",
+    "redux-multi": "^0.1.12",
+    "redux-optimist": "^1.0.0",
+    "refx": "^3.0.0",
     "rememo": "^3.0.0",
     "shallowequal": "^1.0.2",
     "simple-html-tokenizer": "^0.5.1",
     "tinycolor2": "^1.4.1",
     "turbo-combine-reducers": "^1.0.2"
   }
-}
+}

src/app/App.test.js

@@ -43,7 +43,7 @@ describe( 'App', () => {
 					const contentComponent = blockHolderContainer.children[ 0 ];
 					const inputComponent =
 						contentComponent.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ]
-							.children[ 0 ].children[ 0 ];
+							.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ];
 					expect( inputComponent.type ).toBe( 'TextInput' );
 				}
 			} );

src/app/MainApp.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { subscribeParentGetHtml } from 'react-native-gutenberg-bridge';
 
 import BlockManager, { type BlockListType } from '../block-management/block-manager';
+import { SlotFillProvider } from '@wordpress/components';
 
 import type { EmitterSubscription } from 'react-native';
 
@@ -27,6 +28,10 @@ export default class MainScreen extends React.Component<PropsType, StateType> {
 	}
 
 	render() {
-		return <BlockManager { ...this.props } />;
+		return (
+			<SlotFillProvider>
+				<BlockManager { ...this.props } />
+			</SlotFillProvider>
+		);
 	}
 }

src/block-management/block-holder.js

@@ -5,19 +5,19 @@
 
 import React from 'react';
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
-import Toolbar from './toolbar';
+import InlineToolbar from './inline-toolbar';
 
 import type { BlockType } from '../store/';
 
 import styles from './block-holder.scss';
 
 // Gutenberg imports
-import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
+import { BlockEdit } from '@wordpress/editor';
 
 type PropsType = BlockType & {
 	showTitle: boolean,
 	onChange: ( clientId: string, attributes: mixed ) => void,
-	onToolbarButtonPressed: ( button: number, clientId: string ) => void,
+	onInlineToolbarButtonPressed: ( button: number, clientId: string ) => void,
 	onBlockHolderPressed: ( clientId: string ) => void,
 	insertBlocksAfter: ( blocks: Array<Object> ) => void,
 	mergeBlocks: ( forward: boolean ) => void,
@@ -40,9 +40,9 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 	renderToolbarIfBlockFocused() {
 		if ( this.props.focused ) {
 			return (
-				<Toolbar
+				<InlineToolbar
 					clientId={ this.props.clientId }
-					onButtonPressed={ this.props.onToolbarButtonPressed }
+					onButtonPressed={ this.props.onInlineToolbarButtonPressed }
 				/>
 			);
 		}
@@ -52,20 +52,9 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 	}
 
 	getBlockForType() {
-		// Since unsupported blocks are handled in block-manager.js, at this point the block should definitely
-		// be supported.
-		const blockType = getBlockType( this.props.name );
-		const Block = blockType.edit;
-
-		let style;
-		if ( blockType.name === 'core/code' ) {
-			style = styles.blockCode;
-		} else if ( blockType.name === 'core/paragraph' ) {
-			style = styles.blockText;
-		}
-
 		return (
-			<Block
+			<BlockEdit
+				name={ this.props.name }
 				attributes={ { ...this.props.attributes } }
 				// pass a curried version of onChanged with just one argument
 				setAttributes={ ( attrs ) =>
@@ -74,22 +63,10 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 				insertBlocksAfter={ this.props.insertBlocksAfter }
 				mergeBlocks={ this.props.mergeBlocks }
 				isSelected={ this.props.focused }
-				style={ style }
 			/>
 		);
 	}
 
-	getBlockType( blockName: String ) {
-		let blockType = getBlockType( blockName );
-
-		if ( ! blockType ) {
-			const fallbackBlockName = getUnregisteredTypeHandlerName();
-			blockType = getBlockType( fallbackBlockName );
-		}
-
-		return blockType;
-	}
-
 	renderBlockTitle() {
 		return (
 			<View style={ styles.blockTitle }>

src/block-management/block-manager.js

@@ -7,11 +7,12 @@ import React from 'react';
 import { Platform, Switch, Text, View, FlatList, KeyboardAvoidingView } from 'react-native';
 import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list';
 import BlockHolder from './block-holder';
-import { ToolbarButton } from './constants';
+import { InlineToolbarButton } from './constants';
 import type { BlockType } from '../store/';
 import styles from './block-manager.scss';
 import BlockPicker from './block-picker';
 import HTMLTextInput from '../components/html-text-input';
+import BlockToolbar from './block-toolbar';
 
 // Gutenberg imports
 import { createBlock, getBlockType, switchToBlockType } from '@wordpress/blocks';
@@ -53,9 +54,21 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	}
 
 	onBlockHolderPressed( clientId: string ) {
+		this.focusDataSourceItem( clientId );
 		this.props.focusBlockAction( clientId );
 	}
 
+	focusDataSourceItem( clientId: string ) {
+		for ( let i = 0; i < this.state.dataSource.size(); ++i ) {
+			const block = this.state.dataSource.get( i );
+			if ( block.clientId === clientId ) {
+				block.focused = true;
+			} else {
+				block.focused = false;
+			}
+		}
+	}
+
 	getDataSourceIndexFromClientId( clientId: string ) {
 		for ( let i = 0; i < this.state.dataSource.size(); ++i ) {
 			const block = this.state.dataSource.get( i );
@@ -112,25 +125,25 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		return null;
 	}
 
-	onToolbarButtonPressed( button: number, clientId: string ) {
+	onInlineToolbarButtonPressed( button: number, clientId: string ) {
 		const dataSourceBlockIndex = this.getDataSourceIndexFromClientId( clientId );
 		switch ( button ) {
-			case ToolbarButton.UP:
+			case InlineToolbarButton.UP:
 				this.state.dataSource.moveUp( dataSourceBlockIndex );
 				this.props.moveBlockUpAction( clientId );
 				break;
-			case ToolbarButton.DOWN:
+			case InlineToolbarButton.DOWN:
 				this.state.dataSource.moveDown( dataSourceBlockIndex );
 				this.props.moveBlockDownAction( clientId );
 				break;
-			case ToolbarButton.DELETE:
+			case InlineToolbarButton.DELETE:
 				this.state.dataSource.splice( dataSourceBlockIndex, 1 );
 				this.props.deleteBlockAction( clientId );
 				break;
-			case ToolbarButton.PLUS:
+			case InlineToolbarButton.PLUS:
 				this.showBlockTypePicker( true );
 				break;
-			case ToolbarButton.SETTINGS:
+			case InlineToolbarButton.SETTINGS:
 				// TODO: implement settings
 				break;
 		}
@@ -260,6 +273,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		return (
 			<KeyboardAvoidingView style={ { flex: 1 } } behavior={ behavior }>
 				{ list }
+				<BlockToolbar />
 			</KeyboardAvoidingView>
 		);
 	}
@@ -324,7 +338,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 			<View>
 				<BlockHolder
 					key={ value.clientId }
-					onToolbarButtonPressed={ this.onToolbarButtonPressed.bind( this ) }
+					onInlineToolbarButtonPressed={ this.onInlineToolbarButtonPressed.bind( this ) }
 					onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) }
 					onChange={ this.onChange.bind( this ) }
 					showTitle={ this.state.inspectBlocks }

src/block-management/block-toolbar.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { BlockFormatControls, BlockControls } from '@wordpress/editor';
+
+export default class BlockToolbar extends Component {
+	render() {
+		return (
+			<View style={ { height: 50, backgroundColor: '#DCDCDC', flexDirection: 'row' } }>
+				<BlockControls.Slot />
+				<BlockFormatControls.Slot />
+			</View>
+		);
+	}
+}

src/block-management/constants.js

@@ -3,12 +3,12 @@
  * @flow
  */
 
-const ToolbarButton = {
+const InlineToolbarButton = {
 	UP: 1,
 	DOWN: 2,
 	SETTINGS: 3,
 	DELETE: 4,
 	PLUS: 5,
 };
 
-export { ToolbarButton };
+export { InlineToolbarButton };

src/block-management/toolbar.js → src/block-management/inline-toolbar.js

@@ -3,59 +3,59 @@
 
 import React from 'react';
 import { View, TouchableOpacity, Text } from 'react-native';
-import { ToolbarButton } from './constants';
+import { InlineToolbarButton } from './constants';
 
-import styles from './toolbar.scss';
+import styles from './inline-toolbar.scss';
 
 type PropsType = {
 	clientId: string,
 	onButtonPressed: ( button: number, clientId: string ) => void,
 };
 
-export default class Toolbar extends React.Component<PropsType> {
+export default class InlineToolbar extends React.Component<PropsType> {
 	render() {
 		return (
-			<View style={ styles.toolbar }>
+			<View style={ styles.inlineToolbar }>
 				<TouchableOpacity
 					onPress={ this.props.onButtonPressed.bind(
 						this,
-						ToolbarButton.PLUS,
+						InlineToolbarButton.PLUS,
 						this.props.clientId
 					) }
 				>
-					<View style={ styles.toolbarButton }>
+					<View style={ styles.inlineToolbarButton }>
 						<Text>+</Text>
 					</View>
 				</TouchableOpacity>
 				<View style={ styles.buttonSeparator } />
 				<TouchableOpacity
-					onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.UP, this.props.clientId ) }
+					onPress={ this.props.onButtonPressed.bind( this, InlineToolbarButton.UP, this.props.clientId ) }
 				>
-					<View style={ styles.toolbarButton }>
+					<View style={ styles.inlineToolbarButton }>
 						<Text>▲</Text>
 					</View>
 				</TouchableOpacity>
 				<View style={ styles.buttonSeparator } />
 				<TouchableOpacity
 					onPress={ this.props.onButtonPressed.bind(
 						this,
-						ToolbarButton.DOWN,
+						InlineToolbarButton.DOWN,
 						this.props.clientId
 					) }
 				>
-					<View style={ styles.toolbarButton }>
+					<View style={ styles.inlineToolbarButton }>
 						<Text>▼</Text>
 					</View>
 				</TouchableOpacity>
 				<View style={ styles.buttonSeparator } />
 				<TouchableOpacity
 					onPress={ this.props.onButtonPressed.bind(
 						this,
-						ToolbarButton.SETTINGS,
+						InlineToolbarButton.SETTINGS,
 						this.props.clientId
 					) }
 				>
-					<View style={ styles.toolbarButton }>
+					<View style={ styles.inlineToolbarButton }>
 						{ /* eslint-disable-next-line jsx-a11y/accessible-emoji */ }
 						<Text>⚙️</Text>
 					</View>
@@ -64,11 +64,11 @@ export default class Toolbar extends React.Component<PropsType> {
 				<TouchableOpacity
 					onPress={ this.props.onButtonPressed.bind(
 						this,
-						ToolbarButton.DELETE,
+						InlineToolbarButton.DELETE,
 						this.props.clientId
 					) }
 				>
-					<View style={ styles.toolbarButton }>
+					<View style={ styles.inlineToolbarButton }>
 						<Text>🗑</Text>
 					</View>
 				</TouchableOpacity>

src/block-management/toolbar.scss → src/block-management/inline-toolbar.scss

@@ -1,14 +1,14 @@
 /** @format */
 
-.toolbar {
+.inlineToolbar {
 	height: 34;
 	background-color: white;
 	flex-direction: row;
 	padding-left: 8;
 	padding-right: 8;
 }
 
-.toolbarButton {
+.inlineToolbarButton {
 	width: 50;
 	justify-content: center;
 	align-items: center;

symlinked-packages-in-parent/@wordpress/date

@@ -0,0 +1 @@
+../../../packages/date/build/

symlinked-packages/@wordpress/date

@@ -0,0 +1 @@
+../../gutenberg/packages/date/src/