diff --git a/src/app/AppContainer.js b/src/app/AppContainer.js index c3eb9ebb92735e..d50391b16bde58 100644 --- a/src/app/AppContainer.js +++ b/src/app/AppContainer.js @@ -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 ) ); }, }; }; diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js index 5ff8571e11a15c..b0207481242208 100644 --- a/src/block-management/block-holder.js +++ b/src/block-management/block-holder.js @@ -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, @@ -36,7 +36,7 @@ export default class BlockHolder extends React.Component { renderToolbarIfBlockFocused() { if ( this.props.focused ) { return ( - + ); } @@ -61,7 +61,7 @@ export default class BlockHolder extends React.Component { 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 } /> @@ -75,7 +75,7 @@ export default class BlockHolder extends React.Component { render() { return ( diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js index 478bb7b7872cac..86708ca18aea94 100644 --- a/src/block-management/block-manager.js +++ b/src/block-management/block-manager.js @@ -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, @@ -39,39 +39,39 @@ export default class BlockManager extends React.Component 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 @@ -101,14 +101,14 @@ export default class BlockManager extends React.Component 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() { @@ -134,7 +134,7 @@ export default class BlockManager extends React.Component style={ styles.list } data={ this.props.blocks } extraData={ this.props.refresh } - keyExtractor={ ( item ) => item.uid } + keyExtractor={ ( item ) => item.clientId } renderItem={ this.renderItem.bind( this ) } /> ); @@ -158,14 +158,15 @@ export default class BlockManager extends React.Component ); } - renderItem( value: { item: BlockType, uid: string } ) { + renderItem( value: { item: BlockType, clientId: string } ) { return ( ); diff --git a/src/block-management/toolbar.js b/src/block-management/toolbar.js index 07a4d3bd43788a..22ef2d999098e5 100644 --- a/src/block-management/toolbar.js +++ b/src/block-management/toolbar.js @@ -8,8 +8,8 @@ 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 { @@ -17,7 +17,7 @@ export default class Toolbar extends React.Component { return ( + @@ -25,7 +25,7 @@ export default class Toolbar extends React.Component { ▲ @@ -33,7 +33,7 @@ export default class Toolbar extends React.Component { ▼ @@ -44,7 +44,7 @@ export default class Toolbar extends React.Component { onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.SETTINGS, - this.props.uid + this.props.clientId ) } > @@ -54,7 +54,7 @@ export default class Toolbar extends React.Component { 🗑 diff --git a/src/store/actions/index.js b/src/store/actions/index.js index e9d03c032c3821..a29a698aaabeef 100644 --- a/src/store/actions/index.js +++ b/src/store/actions/index.js @@ -7,33 +7,33 @@ import ActionTypes from './ActionTypes'; export type BlockActionType = string => { type: $Values, - 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, } ); diff --git a/src/store/actions/test.js b/src/store/actions/test.js index 6c79fbc1a7880a..0923f4f6f2b26e 100644 --- a/src/store/actions/test.js +++ b/src/store/actions/test.js @@ -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' ); } ); } ); } ); diff --git a/src/store/index.js b/src/store/index.js index e92cb58446020f..d61e359cd45356 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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, @@ -58,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: { @@ -73,7 +73,7 @@ const initialState: StateType = { { ...codeBlockInstance, focused: false }, { ...moreBlockInstance, focused: false }, { - uid: '5', + clientId: '5', name: 'paragraph', isValid: true, attributes: { diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js index 858294c599d10e..1af2a6a752a772 100644 --- a/src/store/reducers/index.js +++ b/src/store/reducers/index.js @@ -9,15 +9,15 @@ import ActionTypes from '../actions/ActionTypes'; import type { StateType } from '../'; import type { BlockActionType } from '../actions'; -function findBlock( blocks, uid: string ) { +function findBlock( blocks, clientId: string ) { return find( blocks, obj => { - return obj.uid === uid; + return obj.clientId === clientId; } ); } -function findBlockIndex( blocks, uid: string ) { +function findBlockIndex( blocks, clientId: string ) { return findIndex( blocks, obj => { - return obj.uid === uid; + return obj.clientId === clientId; } ); } @@ -28,7 +28,7 @@ export const reducer = ( const blocks = [ ...state.blocks ]; switch ( action.type ) { case ActionTypes.BLOCK.UPDATE_ATTRIBUTES: { - const block = findBlock( blocks, action.uid ); + const block = findBlock( blocks, action.clientId ); // Ignore updates if block isn't known if ( ! block ) { @@ -41,7 +41,7 @@ export const reducer = ( ( result, value, key ) => { if ( value !== result[ key ] ) { // Avoid mutating original block by creating shallow clone - if ( result === findBlock( blocks, action.uid ).attributes ) { + if ( result === findBlock( blocks, action.clientId ).attributes ) { result = { ...result }; } @@ -50,17 +50,17 @@ export const reducer = ( return result; }, - findBlock( blocks, action.uid ).attributes + findBlock( blocks, action.clientId ).attributes ); // Skip update if nothing has been changed. The reference will // match the original block if `reduce` had no changed values. - if ( nextAttributes === findBlock( blocks, action.uid ).attributes ) { + if ( nextAttributes === findBlock( blocks, action.clientId ).attributes ) { return state; } // Otherwise merge attributes into state - const index = findBlockIndex( blocks, action.uid ); + const index = findBlockIndex( blocks, action.clientId ); blocks[ index ] = { ...block, attributes: nextAttributes, @@ -69,7 +69,7 @@ export const reducer = ( return { blocks: blocks, refresh: ! state.refresh }; } case ActionTypes.BLOCK.FOCUS: { - const destBlock = findBlock( blocks, action.uid ); + const destBlock = findBlock( blocks, action.clientId ); const destBlockState = destBlock.focused; // Deselect all blocks @@ -82,29 +82,29 @@ export const reducer = ( return { blocks: blocks, refresh: ! state.refresh }; } case ActionTypes.BLOCK.MOVE_UP: { - if ( blocks[ 0 ].uid === action.uid ) { + if ( blocks[ 0 ].clientId === action.clientId ) { return state; } - const index = findBlockIndex( blocks, action.uid ); + const index = findBlockIndex( blocks, action.clientId ); const tmp = blocks[ index ]; blocks[ index ] = blocks[ index - 1 ]; blocks[ index - 1 ] = tmp; return { blocks: blocks, refresh: ! state.refresh }; } case ActionTypes.BLOCK.MOVE_DOWN: { - if ( blocks[ blocks.length - 1 ].uid === action.uid ) { + if ( blocks[ blocks.length - 1 ].clientId === action.clientId ) { return state; } - const index = findBlockIndex( blocks, action.uid ); + const index = findBlockIndex( blocks, action.clientId ); const tmp = blocks[ index ]; blocks[ index ] = blocks[ index + 1 ]; blocks[ index + 1 ] = tmp; return { blocks: blocks, refresh: ! state.refresh }; } case ActionTypes.BLOCK.DELETE: { - const index = findBlockIndex( blocks, action.uid ); + const index = findBlockIndex( blocks, action.clientId ); blocks.splice( index, 1 ); return { blocks: blocks, refresh: ! state.refresh }; } diff --git a/src/store/reducers/test.js b/src/store/reducers/test.js index 16b48530a437e8..a9c08c89f6ffd4 100644 --- a/src/store/reducers/test.js +++ b/src/store/reducers/test.js @@ -15,7 +15,7 @@ describe( 'Store', () => { __iniState = { blocks: [ { - uid: '0', + clientId: '0', blockType: 'title', attributes: { content: 'Hello World', @@ -23,7 +23,7 @@ describe( 'Store', () => { focused: false, }, { - uid: '1', + clientId: '1', blockType: 'paragraph', attributes: { content: 'paragraph content',