TRY: Footnotes

blocks/api/factory.js

@@ -16,6 +16,10 @@ import {
  */
 import { getBlockType } from './registration';
 
+const FixedBlockUids = {
+	'core/footnotes': '[[footnotes]]',
+};
+
 /**
  * Returns a block object given its type and attributes.
  *
@@ -46,7 +50,7 @@ export function createBlock( name, blockAttributes = {} ) {
 	// Blocks are stored with a unique ID, the assigned type name,
 	// and the block attributes.
 	return {
-		uid: uuid(),
+		uid: FixedBlockUids[ name ] || uuid(),
 		name,
 		isValid: true,
 		attributes,

blocks/editable/format-toolbar/index.js

@@ -46,6 +46,8 @@ class FormatToolbar extends Component {
 			settingsVisible: false,
 			opensInNewWindow: false,
 			newLinkValue: '',
+			showFootnoteEntry: false,
+			footnote: '',
 		};
 
 		this.addLink = this.addLink.bind( this );
@@ -56,6 +58,10 @@ class FormatToolbar extends Component {
 		this.onChangeLinkValue = this.onChangeLinkValue.bind( this );
 		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 );
 	}
 
 	componentDidMount() {
@@ -83,6 +89,8 @@ class FormatToolbar extends Component {
 				settingsVisible: false,
 				opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target,
 				newLinkValue: '',
+				showFootnoteEntry: false,
+				foonote: '',
 			} );
 		}
 	}
@@ -131,13 +139,29 @@ class FormatToolbar extends Component {
 		}
 	}
 
+	onFootnoteChange( event ) {
+		this.setState( { footnote: event.target.value } );
+	}
+
+	addFootnote() {
+		this.setState( { showFootnoteEntry: true } );
+	}
+
+	submitFootnote( event ) {
+		event.preventDefault();
+
+		this.props.onChange( { footnote: { text: this.state.footnote } } );
+	}
+
 	render() {
 		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS } = this.props;
-		const { isAddingLink, isEditingLink, newLinkValue, settingsVisible, opensInNewWindow } = this.state;
+		const { isAddingLink, isEditingLink, newLinkValue, settingsVisible, opensInNewWindow, showFootnoteEntry, footnote } = this.state;
 		const linkStyle = focusPosition
 			? { position: 'absolute', ...focusPosition }
 			: null;
 
+		const isNodeFootnote = formats.link && formats.link.node.getAttribute( 'data-footnote-id' );
+
 		const toolbarControls = FORMATTING_CONTROLS
 			.filter( control => enabledControls.indexOf( control.format ) !== -1 )
 			.map( ( control ) => ( {
@@ -160,10 +184,17 @@ class FormatToolbar extends Component {
 				icon: 'admin-links',
 				title: __( 'Link' ),
 				onClick: this.addLink,
-				isActive: isAddingLink || !! formats.link,
+				isActive: ( isAddingLink || !! formats.link ) && ! isNodeFootnote,
 			} );
 		}
 
+		toolbarControls.push( {
+			icon: 'format-audio',
+			title: __( 'Footnote' ),
+			onClick: this.addFootnote,
+			isActive: isNodeFootnote,
+		} );
+
 		return (
 			<div className="blocks-format-toolbar">
 				<Toolbar controls={ toolbarControls } />
@@ -181,7 +212,7 @@ class FormatToolbar extends Component {
 					</form>
 				}
 
-				{ !! formats.link && ! isAddingLink && ! isEditingLink &&
+				{ ! isNodeFootnote && !! formats.link && ! isAddingLink && ! isEditingLink &&
 					<div className="blocks-format-toolbar__link-modal" style={ linkStyle }>
 						<a
 							className="blocks-format-toolbar__link-value"
@@ -196,6 +227,16 @@ 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>
 		);
 	}

blocks/editable/format-toolbar/style.scss

@@ -41,3 +41,23 @@
 		margin: 0;
 	}
 }
+
+
+.blocks-format-toolbar__footnote-modal {
+	position: absolute;
+	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
+	border: 1px solid #e0e5e9;
+	background: #fff;
+	width: 305px;
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	font-family: $default-font;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+	z-index: z-index( '.blocks-format-toolbar__link-modal' );
+
+	textarea {
+		flex-grow: 1
+	}
+}

blocks/editable/index.js

@@ -13,10 +13,12 @@ import {
 	find,
 	defer,
 	noop,
+	pick,
 } from 'lodash';
 import { nodeListToReact } from 'dom-react';
 import { Fill } from 'react-slot-fill';
 import 'element-closest';
+import uuid from 'uuid/v4';
 
 /**
  * WordPress dependencies
@@ -93,6 +95,8 @@ export default class Editable extends Component {
 			empty: ! value || ! value.length,
 			selectedNodeId: 0,
 		};
+
+		this.footnotes = props.footnotes || {};
 	}
 
 	getSettings( settings ) {
@@ -233,7 +237,34 @@ export default class Editable extends Component {
 
 		this.savedContent = this.getContent();
 		this.editor.save();
-		this.props.onChange( this.savedContent );
+		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;
 	}
 
 	getEditorSelectionRect() {
@@ -564,6 +595,10 @@ 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 ) {

blocks/library/footnotes/index.js

@@ -0,0 +1,35 @@
+import { mapKeys } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+import { registerBlockType } from '../../api';
+
+registerBlockType( 'core/footnotes', {
+	title: __( 'Footnotes' ),
+
+	icon: 'button',
+
+	category: 'layout',
+
+	attributes: {
+		footnotes: {
+			type: 'object',
+		},
+	},
+
+	save( { attributes } ) {
+		const { footnotes = {} } = attributes;
+
+		const footnoteElements = Object.keys( footnotes ).map( footnoteId => <p key={ footnoteId } id={ `footnote-${ footnoteId }` }>{footnotes[ footnoteId ]}</p> );
+
+		return (
+			<div>
+				<h2>{ __( 'Footnotes' ) }</h2>
+				{ footnoteElements }
+			</div>
+		);
+	},
+} );

blocks/library/index.js

@@ -22,3 +22,5 @@ import './text-columns';
 import './verse';
 import './video';
 import './audio';
+import './footnotes';
+

blocks/library/paragraph/index.js

@@ -61,6 +61,9 @@ registerBlockType( 'core/paragraph', {
 		fontSize: {
 			type: 'number',
 		},
+		footnotes: {
+			type: 'object',
+		},
 	},
 
 	transforms: {
@@ -158,8 +161,10 @@ registerBlockType( 'core/paragraph', {
 					} }
 					value={ content }
 					onChange={ ( nextContent ) => {
+
 						setAttributes( {
-							content: nextContent,
+							content: nextContent.content,
+							footnotes: nextContent.footnotes,
 						} );
 					} }
 					focus={ focus }

editor/modes/visual-editor/block.js

@@ -158,6 +158,10 @@ class VisualEditorBlock extends Component {
 			return result;
 		}, {} );
 
+		if ( attributes.footnotes ) {
+			this.props.changeFootnotes( { footnotes: attributes.footnotes } );
+		}
+
 		if ( size( metaAttributes ) ) {
 			this.props.onMetaChange( {
 				...this.props.meta,
@@ -454,6 +458,10 @@ export default connect(
 			dispatch( updateBlockAttributes( uid, attributes ) );
 		},
 
+		changeFootnotes( footnotes ) {
+			dispatch( updateBlockAttributes( '[[footnotes]]', footnotes ) );
+		},
+
 		onSelect() {
 			dispatch( selectBlock( ownProps.uid ) );
 		},