diff --git a/blocks/editable/format-toolbar/index.js b/blocks/editable/format-toolbar/index.js
index dc6a1adbd968d8..5feda666811cdc 100644
--- a/blocks/editable/format-toolbar/index.js
+++ b/blocks/editable/format-toolbar/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, cloneElement } from '@wordpress/element';
 import { IconButton, Toolbar, withSpokenMessages } from '@wordpress/components';
 import { keycodes } from '@wordpress/utils';
 
@@ -46,8 +46,6 @@ class FormatToolbar extends Component {
 			settingsVisible: false,
 			opensInNewWindow: false,
 			newLinkValue: '',
-			showFootnoteEntry: false,
-			footnote: '',
 		};
 
 		this.addLink = this.addLink.bind( this );
@@ -59,9 +57,7 @@ class FormatToolbar extends Component {
 		this.toggleLinkSettingsVisibility = this.toggleLinkSettingsVisibility.bind( this );
 		this.setLinkTarget = this.setLinkTarget.bind( this );
 
-		this.addFootnote = this.addFootnote.bind( this );
-		this.onFootnoteChange = this.onFootnoteChange.bind( this );
-		this.submitFootnote = this.submitFootnote.bind( this );
+		this.getFormatterSettingsElement = this.getFormatterSettingsElement.bind( this );
 	}
 
 	componentDidMount() {
@@ -90,7 +86,6 @@ class FormatToolbar extends Component {
 				opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target,
 				newLinkValue: '',
 				showFootnoteEntry: false,
-				foonote: '',
 			} );
 		}
 	}
@@ -139,30 +134,30 @@ class FormatToolbar extends Component {
 		}
 	}
 
-	onFootnoteChange( event ) {
-		this.setState( { footnote: event.target.value } );
-	}
+	getFormatterSettingsElement( formatters ) {
+		let settingsElement = null;
+		let formatterName = null;
 
-	addFootnote() {
-		this.setState( { showFootnoteEntry: true } );
-	}
+		for ( let formatter of formatters ) {
+			settingsElement = formatter.getSettingsElement();
 
-	submitFootnote( event ) {
-		event.preventDefault();
+			if ( !! settingsElement ) {
+				formatterName = formatter.name;
+				break;
+			}
+		}
 
-		this.props.onChange( { footnote: { text: this.state.footnote } } );
+		return settingsElement && cloneElement( settingsElement, { changeFormats: ( formatSettings ) => this.props.onChange( { [ formatterName ]: formatSettings } ) } );
 	}
 
 	render() {
-		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS } = this.props;
-		const { isAddingLink, isEditingLink, newLinkValue, settingsVisible, opensInNewWindow, showFootnoteEntry, footnote } = this.state;
+		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, formatters = [] } = this.props;
+		const { isAddingLink, isEditingLink, newLinkValue, settingsVisible, opensInNewWindow } = this.state;
 		const linkStyle = focusPosition
 			? { position: 'absolute', ...focusPosition }
 			: null;
 
-		const isNodeFootnote = formats.link && formats.link.node.getAttribute( 'data-footnote-id' );
-
-		const toolbarControls = FORMATTING_CONTROLS
+		let toolbarControls = FORMATTING_CONTROLS
 			.filter( control => enabledControls.indexOf( control.format ) !== -1 )
 			.map( ( control ) => ( {
 				...control,
@@ -184,21 +179,29 @@ class FormatToolbar extends Component {
 				icon: 'admin-links',
 				title: __( 'Link' ),
 				onClick: this.addLink,
-				isActive: ( isAddingLink || !! formats.link ) && ! isNodeFootnote,
+				isActive: ( isAddingLink || !! formats.link ),
 			} );
 		}
 
-		toolbarControls.push( {
-			icon: 'format-audio',
-			title: __( 'Footnote' ),
-			onClick: this.addFootnote,
-			isActive: isNodeFootnote,
-		} );
+		toolbarControls = toolbarControls.concat( formatters );
+		const formatterSettings = this.getFormatterSettingsElement( formatters );
 
 		return (
 			<div className="blocks-format-toolbar">
 				<Toolbar controls={ toolbarControls } />
+				{ formatterSettings &&
+					<div className="blocks-format-toolbar__link-modal" style={ linkStyle }>
+						{ formatterSettings }
+					</div>
+				}
+			</div>
+		);
+	}
+}
 
+export default withSpokenMessages( FormatToolbar );
+
+/*
 				{ ( isAddingLink || isEditingLink ) &&
 					<form
 						className="blocks-format-toolbar__link-modal"
@@ -212,7 +215,7 @@ class FormatToolbar extends Component {
 					</form>
 				}
 
-				{ ! isNodeFootnote && !! formats.link && ! isAddingLink && ! isEditingLink &&
+				{ !! formats.link && ! isAddingLink && ! isEditingLink &&
 					<div className="blocks-format-toolbar__link-modal" style={ linkStyle }>
 						<a
 							className="blocks-format-toolbar__link-value"
@@ -227,19 +230,4 @@ class FormatToolbar extends Component {
 						{ linkSettings }
 					</div>
 				}
-
-				{ ( isNodeFootnote || showFootnoteEntry ) &&
-					<form
-						style={ linkStyle }
-						className="blocks-format-toolbar__footnote-modal"
-						onSubmit={ this.submitFootnote }>
-						<textarea value={ footnote } onChange={ this.onFootnoteChange } placeholder={ __( 'Footnote' ) } />
-						<IconButton icon="yes" type="submit" label={ __( 'Apply' ) } />
-					</form>
-				}
-			</div>
-		);
-	}
-}
-
-export default withSpokenMessages( FormatToolbar );
+*/
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
index 6fe157e578ecb5..e863267d9aa9c5 100644
--- a/blocks/editable/index.js
+++ b/blocks/editable/index.js
@@ -13,12 +13,11 @@ import {
 	find,
 	defer,
 	noop,
-	pick,
+	values,
 } from 'lodash';
 import { nodeListToReact } from 'dom-react';
 import { Fill } from 'react-slot-fill';
 import 'element-closest';
-import uuid from 'uuid/v4';
 
 /**
  * WordPress dependencies
@@ -95,8 +94,6 @@ export default class Editable extends Component {
 			empty: ! value || ! value.length,
 			selectedNodeId: 0,
 		};
-
-		this.footnotes = props.footnotes || {};
 	}
 
 	getSettings( settings ) {
@@ -129,6 +126,10 @@ export default class Editable extends Component {
 		if ( this.props.onSetup ) {
 			this.props.onSetup( editor );
 		}
+
+		this.editorFacade = {
+			setNodeContent: ( content ) => editor.selection.setContent( content ),
+		};
 	}
 
 	proxyPropHandler( name ) {
@@ -237,34 +238,7 @@ export default class Editable extends Component {
 
 		this.savedContent = this.getContent();
 		this.editor.save();
-		this.footnotes = pick( this.footnotes, this.getFootnoteIds( this.savedContent ) );
-		this.props.onChange( { content: this.savedContent, footnotes: this.footnotes } );
-	}
-
-	getFootnoteIds( content ) {
-		const footnoteIds = [];
-		const nodesToVisit = [ ...content ];
-		let node = nodesToVisit.pop();
-
-		while ( node !== undefined ) {
-			if ( typeof node !== 'string' ) {
-				if ( node.type === 'a' && node.props[ 'data-footnote-id' ] ) {
-					footnoteIds.push( node.props[ 'data-footnote-id' ] );
-				}
-
-				if ( node.props.children ) {
-					if ( Array.isArray( node.props.children ) ) {
-						node.props.children.forEach( n => nodesToVisit.push( n ) );
-					} else {
-						nodesToVisit.push( node.props.children );
-					}
-				}
-			}
-
-			node = nodesToVisit.pop();
-		}
-
-		return footnoteIds;
+		this.props.onChange( this.savedContent );
 	}
 
 	getEditorSelectionRect() {
@@ -502,8 +476,11 @@ export default class Editable extends Component {
 		const activeFormats = this.editor.formatter.matchAll( [	'bold', 'italic', 'strikethrough' ] );
 		activeFormats.forEach( ( activeFormat ) => formats[ activeFormat ] = true );
 
+		const selectedNodeId = this.state.selectedNodeId + 1;
+		forEach( this.props.formatters, formatter => formatter.onNodeChange( parents, selectedNodeId ) );
+
 		const focusPosition = this.getFocusPosition();
-		this.setState( { formats, focusPosition, selectedNodeId: this.state.selectedNodeId + 1 } );
+		this.setState( { parents, formats, focusPosition, selectedNodeId } );
 	}
 
 	updateContent() {
@@ -584,8 +561,12 @@ export default class Editable extends Component {
 	}
 
 	changeFormats( formats ) {
+		const { formatters } = this.props;
+
 		forEach( formats, ( formatValue, format ) => {
-			if ( format === 'link' ) {
+			if ( format in formatters ) {
+				formatters[ format ].applyFormat( this.editorFacade, formatValue );
+			} else if ( format === 'link' ) {
 				if ( formatValue !== undefined ) {
 					const anchor = this.editor.dom.getParent( this.editor.selection.getNode(), 'a' );
 					if ( ! anchor ) {
@@ -595,10 +576,6 @@ export default class Editable extends Component {
 				} else {
 					this.editor.execCommand( 'Unlink' );
 				}
-			} else if ( format === 'footnote' ) {
-				const footnoteId = uuid();
-				this.footnotes[ footnoteId ] = formatValue.text;
-				this.editor.selection.setContent( `<a href="#footnote-${ footnoteId }" data-footnote-id="${ footnoteId }" contenteditable="false"><sup>[*]</sup></a>` );
 			} else {
 				const isActive = this.isFormatActive( format );
 				if ( isActive && ! formatValue ) {
@@ -609,6 +586,7 @@ export default class Editable extends Component {
 			}
 		} );
 
+		// TODO: investigate whether formatter format needs to be in here
 		this.setState( ( state ) => ( {
 			formats: merge( {}, state.formats, formats ),
 		} ) );
@@ -629,6 +607,7 @@ export default class Editable extends Component {
 			placeholder,
 			multiline: MultilineTag,
 			keepPlaceholderOnFocus = false,
+			formatters,
 		} = this.props;
 
 		// Generating a key that includes `tagName` ensures that if the tag
@@ -645,6 +624,7 @@ export default class Editable extends Component {
 				formats={ this.state.formats }
 				onChange={ this.changeFormats }
 				enabledControls={ formattingControls }
+				formatters={ values( formatters ) }
 			/>
 		);
 
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
index 3a42f8a112fd91..96c977205b2290 100644
--- a/blocks/library/paragraph/index.js
+++ b/blocks/library/paragraph/index.js
@@ -1,8 +1,14 @@
+/**
+ * External dependencies
+ */
+import uuid from 'uuid/v4';
+import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { concatChildren } from '@wordpress/element';
+import { concatChildren, Component } from '@wordpress/element';
+import { IconButton } from '@wordpress/components';
 import classnames from 'classnames';
 
 /**
@@ -92,96 +98,134 @@ registerBlockType( 'core/paragraph', {
 		}
 	},
 
-	edit( { attributes, setAttributes, insertBlocksAfter, focus, setFocus, mergeBlocks, onReplace } ) {
-		const { align, content, dropCap, placeholder, fontSize, backgroundColor, textColor, width } = attributes;
-		const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
-		const className = dropCap ? 'has-drop-cap' : null;
+	edit: class extends Component {
+		constructor() {
+			super( ...arguments );
 
-		return [
-			focus && (
-				<BlockControls key="controls">
-					<AlignmentToolbar
-						value={ align }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { align: nextAlign } );
+			this.state = { activeFormats: { }, activeFormatSettings: null, footnoteId: null };
+
+			this.footnotes = this.props.attributes.footnotes || {};
+
+			this.footnoteFormatter = {
+				name: 'footnote',
+				icon: 'format-audio',
+				title: __( 'Footnote' ),
+				onClick: () => {
+					this.setState( { activeFormatSettings: 'footnote' } );
+				},
+				onNodeChange: ( parents ) => {
+					const link = find( parents, ( node ) => node.nodeName.toLowerCase() === 'a' );
+					const href = link && link.getAttribute( 'href' );
+					const isFootnote = link && href && href.indexOf( '#footnote-' ) === 0;
+					const footnoteId = isFootnote && href.substring( '#footnote-'.length );
+					const activeFormats = { ...this.state.activeFormats, footnote: isFootnote };
+					this.setState( { activeFormats, activeFormatSettings: isFootnote ? 'footnote' : ( this.state.activeFormatSettings === 'footnote' ? null : this.state.activeFormatSettings ), footnoteId } );
+				},
+				isActive: () => this.state.activeFormats.footnote,
+				applyFormat: ( { setNodeContent }, formatValue ) => {
+					const footnoteId = uuid();
+					this.footnotes[ footnoteId ] = formatValue;
+					setNodeContent( `<a href="#footnote-${ footnoteId }" contenteditable="false"><sup>[*]</sup></a>` );
+				},
+				getSettingsElement: () => this.state.activeFormatSettings === 'footnote' && <FootnoteSettings footnoteId={ this.state.footnoteId } footnote={ this.footnotes[ this.state.footnoteId ] } />,
+			};
+		}
+		componentWillReceiveProps( { focus } ) {
+			if ( ! focus ) {
+				this.setState( { activeFormatSettings: null } );
+			}
+		}
+		render() {
+			const { attributes, setAttributes, insertBlocksAfter, focus, setFocus, mergeBlocks, onReplace } = this.props;
+			const { align, content, dropCap, placeholder, fontSize, backgroundColor, textColor, width } = attributes;
+			const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
+			const setContent = ( newContent ) => {
+				setAttributes( { content: newContent, footnotes: this.footnotes } );
+			};
+
+			const className = dropCap ? 'has-drop-cap' : null;
+
+			return [
+				focus && (
+					<BlockControls key="controls">
+						<AlignmentToolbar
+							value={ align }
+							onChange={ ( nextAlign ) => {
+								setAttributes( { align: nextAlign } );
+							} }
+						/>
+					</BlockControls>
+				),
+				focus && (
+					<InspectorControls key="inspector">
+						<BlockDescription>
+							<p>{ __( 'Text. Great things start here.' ) }</p>
+						</BlockDescription>
+						<h3>{ __( 'Text Settings' ) }</h3>
+						<ToggleControl
+							label={ __( 'Drop Cap' ) }
+							checked={ !! dropCap }
+							onChange={ toggleDropCap }
+						/>
+						<RangeControl
+							label={ __( 'Font Size' ) }
+							value={ fontSize || '' }
+							onChange={ ( value ) => setAttributes( { fontSize: value } ) }
+							min={ 10 }
+							max={ 200 }
+							beforeIcon="editor-textcolor"
+							allowReset
+						/>
+						<h3>{ __( 'Background Color' ) }</h3>
+						<ColorPalette
+							value={ backgroundColor }
+							onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
+							withTransparentOption
+						/>
+						<h3>{ __( 'Text Color' ) }</h3>
+						<ColorPalette
+							value={ textColor }
+							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+						/>
+						<h3>{ __( 'Block Alignment' ) }</h3>
+						<BlockAlignmentToolbar
+							value={ width }
+							onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) }
+						/>
+					</InspectorControls>
+				),
+				<BlockAutocomplete key="editable" onReplace={ onReplace }>
+					<Editable
+						tagName="p"
+						className={ classnames( 'wp-block-paragraph', className, {
+							[ `align${ width }` ]: width,
+							'has-background': backgroundColor,
+						} ) }
+						style={ {
+							backgroundColor: backgroundColor,
+							color: textColor,
+							fontSize: fontSize ? fontSize + 'px' : undefined,
+							textAlign: align,
 						} }
+						value={ content }
+						onChange={ setContent }
+						focus={ focus }
+						onFocus={ setFocus }
+						onSplit={ ( before, after, ...blocks ) => {
+							setAttributes( { content: before } );
+							insertBlocksAfter( [
+								...blocks,
+								createBlock( 'core/paragraph', { content: after } ),
+							] );
+						} }
+						onMerge={ mergeBlocks }
+						onReplace={ onReplace }
+						placeholder={ placeholder || __( 'New Paragraph' ) }
+						formatters={ { footnote: this.footnoteFormatter } }
 					/>
-				</BlockControls>
-			),
-			focus && (
-				<InspectorControls key="inspector">
-					<BlockDescription>
-						<p>{ __( 'Text. Great things start here.' ) }</p>
-					</BlockDescription>
-					<h3>{ __( 'Text Settings' ) }</h3>
-					<ToggleControl
-						label={ __( 'Drop Cap' ) }
-						checked={ !! dropCap }
-						onChange={ toggleDropCap }
-					/>
-					<RangeControl
-						label={ __( 'Font Size' ) }
-						value={ fontSize || '' }
-						onChange={ ( value ) => setAttributes( { fontSize: value } ) }
-						min={ 10 }
-						max={ 200 }
-						beforeIcon="editor-textcolor"
-						allowReset
-					/>
-					<h3>{ __( 'Background Color' ) }</h3>
-					<ColorPalette
-						value={ backgroundColor }
-						onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
-						withTransparentOption
-					/>
-					<h3>{ __( 'Text Color' ) }</h3>
-					<ColorPalette
-						value={ textColor }
-						onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
-					/>
-					<h3>{ __( 'Block Alignment' ) }</h3>
-					<BlockAlignmentToolbar
-						value={ width }
-						onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) }
-					/>
-				</InspectorControls>
-			),
-			<BlockAutocomplete key="editable" onReplace={ onReplace }>
-				<Editable
-					tagName="p"
-					className={ classnames( 'wp-block-paragraph', className, {
-						[ `align${ width }` ]: width,
-						'has-background': backgroundColor,
-					} ) }
-					style={ {
-						backgroundColor: backgroundColor,
-						color: textColor,
-						fontSize: fontSize ? fontSize + 'px' : undefined,
-						textAlign: align,
-					} }
-					value={ content }
-					onChange={ ( nextContent ) => {
-
-						setAttributes( {
-							content: nextContent.content,
-							footnotes: nextContent.footnotes,
-						} );
-					} }
-					focus={ focus }
-					onFocus={ setFocus }
-					onSplit={ ( before, after, ...blocks ) => {
-						setAttributes( { content: before } );
-						insertBlocksAfter( [
-							...blocks,
-							createBlock( 'core/paragraph', { content: after } ),
-						] );
-					} }
-					onMerge={ mergeBlocks }
-					onReplace={ onReplace }
-					placeholder={ placeholder || __( 'New Paragraph' ) }
-				/>
-			</BlockAutocomplete>,
-		];
+				</BlockAutocomplete>,
+			];
+		}
 	},
 
 	save( { attributes } ) {
@@ -203,3 +247,32 @@ registerBlockType( 'core/paragraph', {
 } );
 
 setDefaultBlockName( 'core/paragraph' );
+
+class FootnoteSettings extends Component {
+	constructor( props ) {
+		super( props );
+		this.addFootnote = this.addFootnote.bind( this );
+		this.onFootnoteChange = this.onFootnoteChange.bind( this );
+
+		this.state = {
+			footnote: props.footnote,
+		};
+	}
+	componentWillReceiveProps( nextProps ) {
+		if ( nextProps.footnoteId !== this.props.footnoteId ) {
+			this.setState( { footnote: nextProps.footnote } );
+		}
+	}
+	onFootnoteChange( e ) {
+		this.setState( { footnote: e.target.value } );
+	}
+	addFootnote() {
+		this.props.changeFormats( this.state.footnote );
+	}
+	render() {
+		return [
+			<textarea placeholder="Add a footnote" style={ { flexGrow: 1 } } value={ this.state.footnote } onChange={ this.onFootnoteChange } />,
+			<IconButton icon="yes" label={ __( 'Add footnote' ) } onClick={ this.addFootnote } />,
+		];
+	}
+}
diff --git a/components/toolbar/index.js b/components/toolbar/index.js
index 21f8bd1c84f980..13a84bce617ace 100644
--- a/components/toolbar/index.js
+++ b/components/toolbar/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-
+import { isFunction } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -27,28 +27,30 @@ function Toolbar( { controls = [], children, className } ) {
 		<ul className={ classnames( 'components-toolbar', className ) }>
 			{ controlSets.reduce( ( result, controlSet, setIndex ) => [
 				...result,
-				...controlSet.map( ( control, controlIndex ) => (
-					<li
-						key={ [ setIndex, controlIndex ].join() }
-						className={ setIndex > 0 && controlIndex === 0 ? 'has-left-divider' : null }
-					>
-						<IconButton
-							icon={ control.icon }
-							label={ control.title }
-							data-subscript={ control.subscript }
-							onClick={ ( event ) => {
-								event.stopPropagation();
-								control.onClick();
-							} }
-							className={ classnames( 'components-toolbar__control', {
-								'is-active': control.isActive,
-							} ) }
-							aria-pressed={ control.isActive }
-							disabled={ control.isDisabled }
-						/>
-						{ control.children }
-					</li>
-				) ),
+				...controlSet.map( ( control, controlIndex ) => {
+					const isActive = isFunction( control.isActive ) ? control.isActive() : control.isActive;
+					return (
+						<li
+							key={ [ setIndex, controlIndex ].join() }
+							className={ setIndex > 0 && controlIndex === 0 ? 'has-left-divider' : null }
+						>
+							<IconButton
+								icon={ control.icon }
+								label={ control.title }
+								data-subscript={ control.subscript }
+								onClick={ ( event ) => {
+									event.stopPropagation();
+									control.onClick();
+								} }
+								className={ classnames( 'components-toolbar__control', {
+									'is-active': isActive,
+								} ) }
+								aria-pressed={ isActive }
+								disabled={ control.isDisabled }
+							/>
+							{ control.children }
+						</li> );
+				} ),
 			], [] ) }
 			{ children }
 		</ul>