Managing two editable fields in gutenberg

Editable has been replaced with RichText in 2.2.

Here’s a example of two RichText components being edit/saved together:

const { __ } = wp.i18n;
const {
    registerBlockType,
    RichText,
} = wp.blocks;

registerBlockType( 'wtv/wtv', {
    title: __( 'wtv', 'wtv' ),
    icon: 'id',
    category: 'widgets',
    keywords: [ __( 'wtv' ), __( 'wtv' ), __( 'wtv' ) ],
    attributes: {
        doi: {
            type: 'string',
            selector: '.doi',
            default: '',
        },
        title: {
            type: 'string',
            selector: '.title',
            default: '',
        },
    },
    edit( { attributes, setAttributes, className } ) {
        const onChangeDOI = value => {
            setAttributes( { doi: value } );
        };
        const onChangeTitle = value => {
            setAttributes( { title: value } );
        };
        return (
            <div className={ className } >
                <RichText
                    tagname="div"
                    placeholder="Enter DOI name. Takes .."
                    value={ attributes.doi }
                    onChange={ onChangeDOI }
                />
                <RichText
                    tagname="div"
                    placeholder="Title .."
                    value={ attributes.title }
                    onChange={ onChangeTitle }
                />
            </div>
        );
    },
    save: function( props ) {
        return ( <div className={ props.className } >
            <div className="doi">
                { props.attributes.doi }
            </div>
            <div className="title">
                { props.attributes.title }
            </div>
        </div> );
    },
} );

I apologize my answer isn’t in es5, but its so much easier in ESNext (highly recommend using @ahmadawais create-guten-block for the tooling)