diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js index 67f76626d8..970cbf9016 100644 --- a/src/block-management/block-manager.js +++ b/src/block-management/block-manager.js @@ -4,14 +4,14 @@ */ import React from 'react'; -import { Platform, Switch, Text, View, FlatList } from 'react-native'; +import { Platform, Switch, Text, View, FlatList, Picker } from 'react-native'; import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list'; import BlockHolder from './block-holder'; import { ToolbarButton } from './constants'; import type { BlockType } from '../store/'; import styles from './block-manager.scss'; // Gutenberg imports -import { getBlockType, serialize, createBlock } from '@wordpress/blocks'; +import { getBlockType, getBlockTypes, serialize, createBlock } from '@wordpress/blocks'; export type BlockListType = { onChange: ( clientId: string, attributes: mixed ) => void, @@ -29,16 +29,21 @@ type PropsType = BlockListType; type StateType = { dataSource: DataSource, showHtml: boolean, + blockTypePickerVisible: boolean, + selectedBlockType: string, }; export default class BlockManager extends React.Component { _recycler = null; + availableBlockTypes = getBlockTypes(); constructor( props: PropsType ) { super( props ); this.state = { dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.clientId ), showHtml: false, + blockTypePickerVisible: false, + selectedBlockType: 'core/paragraph', // just any valid type to start from }; } @@ -56,6 +61,41 @@ export default class BlockManager extends React.Component return -1; } + findDataSourceIndexForFocusedItem() { + for ( let i = 0; i < this.state.dataSource.size(); ++i ) { + const block = this.state.dataSource.get( i ); + if ( block.focused === true ) { + return i; + } + } + return -1; + } + + // TODO: in the near future this will likely be changed to onShowBlockTypePicker and bound to this.props + // once we move the action to the toolbar + showBlockTypePicker() { + this.setState( { ...this.state, blockTypePickerVisible: true } ); + } + + onBlockTypeSelected( itemValue: string ) { + this.setState( { ...this.state, selectedBlockType: itemValue, blockTypePickerVisible: false } ); + + // find currently focused block + const focusedItemIndex = this.findDataSourceIndexForFocusedItem(); + const clientIdFocused = this.state.dataSource.get( focusedItemIndex ).clientId; + + // create an empty block of the selected type + const newBlock = createBlock( itemValue, { content: 'new test text for a ' + itemValue + ' block' } ); + newBlock.focused = false; + + // set it into the datasource, and use the same object instance to send it to props/redux + this.state.dataSource.splice( focusedItemIndex + 1, 0, newBlock ); + this.props.createBlockAction( newBlock.clientId, newBlock, clientIdFocused ); + + // now set the focus + this.props.focusBlockAction( newBlock.clientId ); + } + onToolbarButtonPressed( button: number, clientId: string ) { const dataSourceBlockIndex = this.getDataSourceIndexFromUid( clientId ); switch ( button ) { @@ -72,11 +112,7 @@ export default class BlockManager extends React.Component this.props.deleteBlockAction( clientId ); break; case ToolbarButton.PLUS: - // TODO: block type picker here instead of hardcoding a core/code block - const newBlock = createBlock( 'core/paragraph', { content: 'new test text for a core/paragraph block' } ); - const newBlockWithFocusedState = { ...newBlock, focused: false }; - this.state.dataSource.splice( dataSourceBlockIndex + 1, 0, newBlockWithFocusedState ); - this.props.createBlockAction( newBlockWithFocusedState.clientId, newBlockWithFocusedState, clientId ); + this.showBlockTypePicker(); break; case ToolbarButton.SETTINGS: // TODO: implement settings @@ -146,6 +182,20 @@ export default class BlockManager extends React.Component ); } + const blockTypePicker = ( + + { + this.onBlockTypeSelected( itemValue ); + } } > + { this.availableBlockTypes.map( ( item, index ) => { + return ( ); + } ) } + + + ); + return ( @@ -160,6 +210,7 @@ export default class BlockManager extends React.Component { this.state.showHtml && { this.serializeToHtml() } } { ! this.state.showHtml && list } + { this.state.blockTypePickerVisible && blockTypePicker } ); }