Skip to content

Commit

Permalink
Merge pull request #98 from wordpress-mobile/feature/heading-block
Browse files Browse the repository at this point in the history 
Implement heading block
  • Loading branch information
@koke
koke authored Aug 10, 2018
2 parents 6ce51fb + 058b880 commit 0ef3027
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 77 deletions.
2 changes: 1 addition & 1 deletion gutenberg
Submodule gutenberg updated 109 files
20 changes: 10 additions & 10 deletions src/app/AppContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,20 @@ const mapStateToProps = ( state ) => ( {
const mapDispatchToProps = ( dispatch, ownProps ) => {
return {
...ownProps,
onChange: ( uid, attributes ) => {
dispatch( updateBlockAttributes( uid, attributes ) );
onChange: ( clientId, attributes ) => {
dispatch( updateBlockAttributes( clientId, attributes ) );
},
focusBlockAction: ( uid ) => {
dispatch( focusBlockAction( uid ) );
focusBlockAction: ( clientId ) => {
dispatch( focusBlockAction( clientId ) );
},
moveBlockUpAction: ( uid ) => {
dispatch( moveBlockUpAction( uid ) );
moveBlockUpAction: ( clientId ) => {
dispatch( moveBlockUpAction( clientId ) );
},
moveBlockDownAction: ( uid ) => {
dispatch( moveBlockDownAction( uid ) );
moveBlockDownAction: ( clientId ) => {
dispatch( moveBlockDownAction( clientId ) );
},
deleteBlockAction: ( uid ) => {
dispatch( deleteBlockAction( uid ) );
deleteBlockAction: ( clientId ) => {
dispatch( deleteBlockAction( clientId ) );
},
};
};
Expand Down
12 changes: 6 additions & 6 deletions src/block-management/block-holder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import styles from './block-holder.scss';
import { getBlockType } from '@wordpress/blocks';

type PropsType = BlockType & {
onChange: ( uid: string, attributes: mixed ) => void,
onToolbarButtonPressed: ( button: number, uid: string ) => void,
onBlockHolderPressed: ( uid: string ) => void,
onChange: ( clientId: string, attributes: mixed ) => void,
onToolbarButtonPressed: ( button: number, clientId: string ) => void,
onBlockHolderPressed: ( clientId: string ) => void,
};
type StateType = {
selected: boolean,
Expand All @@ -36,7 +36,7 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
renderToolbarIfBlockFocused() {
if ( this.props.focused ) {
return (
<Toolbar uid={ this.props.uid } onButtonPressed={ this.props.onToolbarButtonPressed } />
<Toolbar clientId={ this.props.clientId } onButtonPressed={ this.props.onToolbarButtonPressed } />
);
}

Expand All @@ -61,7 +61,7 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
<Block
attributes={ { ...this.props.attributes } }
// pass a curried version of onChanged with just one argument
setAttributes={ ( attrs ) => this.props.onChange( this.props.uid, { ...this.props.attributes, ...attrs } ) }
setAttributes={ ( attrs ) => this.props.onChange( this.props.clientId, { ...this.props.attributes, ...attrs } ) }
isSelected={ this.props.focused }
style={ style }
/>
Expand All @@ -75,7 +75,7 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
render() {
return (
<TouchableWithoutFeedback
onPress={ this.props.onBlockHolderPressed.bind( this, this.props.uid ) }
onPress={ this.props.onBlockHolderPressed.bind( this, this.props.clientId ) }
>
<View style={ styles.blockHolder }>
<View style={ styles.blockTitle }>
Expand Down
37 changes: 19 additions & 18 deletions src/block-management/block-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import styles from './block-manager.scss';
import { getBlockType, serialize } from '@wordpress/blocks';

export type BlockListType = {
onChange: ( uid: string, attributes: mixed ) => void,
onChange: ( clientId: string, attributes: mixed ) => void,
focusBlockAction: string => mixed,
moveBlockUpAction: string => mixed,
moveBlockDownAction: string => mixed,
Expand All @@ -39,39 +39,39 @@ export default class BlockManager extends React.Component<PropsType, StateType>
constructor( props: PropsType ) {
super( props );
this.state = {
dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.uid ),
dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.clientId ),
showHtml: false,
};
}

onBlockHolderPressed( uid: string ) {
this.props.focusBlockAction( uid );
onBlockHolderPressed( clientId: string ) {
this.props.focusBlockAction( clientId );
}

getDataSourceIndexFromUid( uid: string ) {
getDataSourceIndexFromUid( clientId: string ) {
for ( let i = 0; i < this.state.dataSource.size(); ++i ) {
const block = this.state.dataSource.get( i );
if ( block.uid === uid ) {
if ( block.clientId === clientId ) {
return i;
}
}
return -1;
}

onToolbarButtonPressed( button: number, uid: string ) {
const dataSourceBlockIndex = this.getDataSourceIndexFromUid( uid );
onToolbarButtonPressed( button: number, clientId: string ) {
const dataSourceBlockIndex = this.getDataSourceIndexFromUid( clientId );
switch ( button ) {
case ToolbarButton.UP:
this.state.dataSource.moveUp( dataSourceBlockIndex );
this.props.moveBlockUpAction( uid );
this.props.moveBlockUpAction( clientId );
break;
case ToolbarButton.DOWN:
this.state.dataSource.moveDown( dataSourceBlockIndex );
this.props.moveBlockDownAction( uid );
this.props.moveBlockDownAction( clientId );
break;
case ToolbarButton.DELETE:
this.state.dataSource.splice( dataSourceBlockIndex, 1 );
this.props.deleteBlockAction( uid );
this.props.deleteBlockAction( clientId );
break;
case ToolbarButton.SETTINGS:
// TODO: implement settings
Expand Down Expand Up @@ -101,14 +101,14 @@ export default class BlockManager extends React.Component<PropsType, StateType>
this.state.dataSource.setDirty();
}

onChange( uid: string, attributes: mixed ) {
onChange( clientId: string, attributes: mixed ) {
// Update datasource UI
const index = this.getDataSourceIndexFromUid( uid );
const index = this.getDataSourceIndexFromUid( clientId );
const dataSource = this.state.dataSource;
const block = dataSource.get( this.getDataSourceIndexFromUid( uid ) );
const block = dataSource.get( this.getDataSourceIndexFromUid( clientId ) );
dataSource.set( index, { ...block, attributes: attributes } );
// Update Redux store
this.props.onChange( uid, attributes );
this.props.onChange( clientId, attributes );
}

render() {
Expand All @@ -134,7 +134,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
style={ styles.list }
data={ this.props.blocks }
extraData={ this.props.refresh }
keyExtractor={ ( item ) => item.uid }
keyExtractor={ ( item ) => item.clientId }
renderItem={ this.renderItem.bind( this ) }
/>
);
Expand All @@ -158,14 +158,15 @@ export default class BlockManager extends React.Component<PropsType, StateType>
);
}

renderItem( value: { item: BlockType, uid: string } ) {
renderItem( value: { item: BlockType, clientId: string } ) {
return (
<BlockHolder
key={ value.clientId }
onToolbarButtonPressed={ this.onToolbarButtonPressed.bind( this ) }
onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) }
onChange={ this.onChange.bind( this ) }
focused={ value.item.focused }
uid={ value.uid }
clientId={ value.clientId }
{ ...value.item }
/>
);
Expand Down
14 changes: 7 additions & 7 deletions src/block-management/toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,32 @@ import { ToolbarButton } from './constants';
import styles from './toolbar.scss';

type PropsType = {
uid: string,
onButtonPressed: ( button: number, uid: string ) => void,
clientId: string,
onButtonPressed: ( button: number, clientId: string ) => void,
};

export default class Toolbar extends React.Component<PropsType> {
render() {
return (
<View style={ styles.toolbar }>
<TouchableOpacity
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.PLUS, this.props.uid ) }
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.PLUS, this.props.clientId ) }
>
<View style={ styles.toolbarButton }>
<Text>+</Text>
</View>
</TouchableOpacity>
<View style={ styles.buttonSeparator } />
<TouchableOpacity
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.UP, this.props.uid ) }
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.UP, this.props.clientId ) }
>
<View style={ styles.toolbarButton }>
<Text>▲</Text>
</View>
</TouchableOpacity>
<View style={ styles.buttonSeparator } />
<TouchableOpacity
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DOWN, this.props.uid ) }
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DOWN, this.props.clientId ) }
>
<View style={ styles.toolbarButton }>
<Text>▼</Text>
Expand All @@ -44,7 +44,7 @@ export default class Toolbar extends React.Component<PropsType> {
onPress={ this.props.onButtonPressed.bind(
this,
ToolbarButton.SETTINGS,
this.props.uid
this.props.clientId
) }
>
<View style={ styles.toolbarButton }>
Expand All @@ -54,7 +54,7 @@ export default class Toolbar extends React.Component<PropsType> {
</TouchableOpacity>
<View style={ styles.buttonSeparator } />
<TouchableOpacity
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DELETE, this.props.uid ) }
onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DELETE, this.props.clientId ) }
>
<View style={ styles.toolbarButton }>
<Text>🗑</Text>
Expand Down
22 changes: 11 additions & 11 deletions src/store/actions/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,33 @@ import ActionTypes from './ActionTypes';

export type BlockActionType = string => {
type: $Values<typeof ActionTypes.BLOCK>,
uid: string,
clientId: string,
};

export function updateBlockAttributes( uid: string, attributes: mixed ) {
export function updateBlockAttributes( clientId: string, attributes: mixed ) {
return {
type: ActionTypes.BLOCK.UPDATE_ATTRIBUTES,
uid,
clientId,
attributes,
};
}

export const focusBlockAction: BlockActionType = uid => ( {
export const focusBlockAction: BlockActionType = clientId => ( {
type: ActionTypes.BLOCK.FOCUS,
uid: uid,
clientId,
} );

export const moveBlockUpAction: BlockActionType = uid => ( {
export const moveBlockUpAction: BlockActionType = clientId => ( {
type: ActionTypes.BLOCK.MOVE_UP,
uid: uid,
clientId,
} );

export const moveBlockDownAction: BlockActionType = uid => ( {
export const moveBlockDownAction: BlockActionType = clientId => ( {
type: ActionTypes.BLOCK.MOVE_DOWN,
uid: uid,
clientId,
} );

export const deleteBlockAction: BlockActionType = uid => ( {
export const deleteBlockAction: BlockActionType = clientId => ( {
type: ActionTypes.BLOCK.DELETE,
uid: uid,
clientId,
} );
8 changes: 4 additions & 4 deletions src/store/actions/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,28 @@ describe( 'Store', () => {
const action = actions.focusBlockAction( '1' );
expect( action.type ).toBeDefined();
expect( action.type ).toEqual( ActionTypes.BLOCK.FOCUS );
expect( action.uid ).toEqual( '1' );
expect( action.clientId ).toEqual( '1' );
} );

it( 'should create an action to move block up', () => {
const action = actions.moveBlockUpAction( '1' );
expect( action.type ).toBeDefined();
expect( action.type ).toEqual( ActionTypes.BLOCK.MOVE_UP );
expect( action.uid ).toEqual( '1' );
expect( action.clientId ).toEqual( '1' );
} );

it( 'should create an action to move block down', () => {
const action = actions.moveBlockDownAction( '1' );
expect( action.type ).toBeDefined();
expect( action.type ).toEqual( ActionTypes.BLOCK.MOVE_DOWN );
expect( action.uid ).toEqual( '1' );
expect( action.clientId ).toEqual( '1' );
} );

it( 'should create an action to delete a block', () => {
const action = actions.deleteBlockAction( '1' );
expect( action.type ).toBeDefined();
expect( action.type ).toEqual( ActionTypes.BLOCK.DELETE );
expect( action.uid ).toEqual( '1' );
expect( action.clientId ).toEqual( '1' );
} );
} );
} );
9 changes: 6 additions & 3 deletions src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { createStore } from 'redux';
import { reducer } from './reducers';

export type BlockType = {
uid: string,
clientId: string,
name: string,
isValid: boolean,
attributes: Object,
Expand Down Expand Up @@ -41,13 +41,15 @@ const initialMoreBlockHtml = `
<!-- /wp:more -->
`;

const initialHeadingBlockHtml = '<!-- wp:heading {"level": 2} --><h2>Welcome to Gutenberg</h2><!-- /wp:heading -->';
const initialParagraphBlockHtml = '<!-- wp:paragraph --><p><b>Hello</b> World!</p><!-- /wp:paragraph -->';
const initialParagraphBlockHtml2 = `<!-- wp:paragraph {"dropCap":true,"backgroundColor":"vivid-red","fontSize":"large","className":"custom-class-1 custom-class-2"} -->
<p class="has-background has-drop-cap has-large-font-size has-vivid-red-background-color custom-class-1 custom-class-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><!-- /wp:paragraph -->`;

const codeBlockInstance = parse( initialCodeBlockHtml )[ 0 ];
const moreBlockInstance = parse( initialMoreBlockHtml )[ 0 ];
const headingBlockInstance = parse( initialHeadingBlockHtml )[ 0 ];
const paragraphBlockInstance = parse( initialParagraphBlockHtml )[ 0 ];
const paragraphBlockInstance2 = parse( initialParagraphBlockHtml2 )[ 0 ];

Expand All @@ -56,7 +58,7 @@ const initialState: StateType = {
// If not it should be created from a string parsing (commented HTML to json).
blocks: [
{
uid: '1',
clientId: '1',
name: 'title',
isValid: true,
attributes: {
Expand All @@ -65,12 +67,13 @@ const initialState: StateType = {
innerBlocks: [],
focused: false,
},
{ ...headingBlockInstance, focused: false },
{ ...paragraphBlockInstance, focused: false },
{ ...paragraphBlockInstance2, focused: false },
{ ...codeBlockInstance, focused: false },
{ ...moreBlockInstance, focused: false },
{
uid: '5',
clientId: '5',
name: 'paragraph',
isValid: true,
attributes: {
Expand Down
Loading

0 comments on commit 0ef3027

Please sign in to comment.