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.
  *
@@ -53,7 +57,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

@@ -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';
 
@@ -56,6 +56,8 @@ class FormatToolbar extends Component {
 		this.onChangeLinkValue = this.onChangeLinkValue.bind( this );
 		this.toggleLinkSettingsVisibility = this.toggleLinkSettingsVisibility.bind( this );
 		this.setLinkTarget = this.setLinkTarget.bind( this );
+
+		this.getFormatterSettingsElement = this.getFormatterSettingsElement.bind( this );
 	}
 
 	componentDidMount() {
@@ -83,6 +85,7 @@ class FormatToolbar extends Component {
 				settingsVisible: false,
 				opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target,
 				newLinkValue: '',
+				showFootnoteEntry: false,
 			} );
 		}
 	}
@@ -131,14 +134,30 @@ class FormatToolbar extends Component {
 		}
 	}
 
+	getFormatterSettingsElement( formatters ) {
+		let settingsElement = null;
+		let formatterName = null;
+
+		for ( let formatter of formatters ) {
+			settingsElement = formatter.getSettingsElement();
+
+			if ( !! settingsElement ) {
+				formatterName = formatter.name;
+				break;
+			}
+		}
+
+		return settingsElement && cloneElement( settingsElement, { changeFormats: ( formatSettings ) => this.props.onChange( { [ formatterName ]: formatSettings } ) } );
+	}
+
 	render() {
-		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS } = this.props;
+		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 toolbarControls = FORMATTING_CONTROLS
+		let toolbarControls = FORMATTING_CONTROLS
 			.filter( control => enabledControls.indexOf( control.format ) !== -1 )
 			.map( ( control ) => ( {
 				...control,
@@ -160,14 +179,29 @@ class FormatToolbar extends Component {
 				icon: 'admin-links',
 				title: __( 'Link' ),
 				onClick: this.addLink,
-				isActive: isAddingLink || !! formats.link,
+				isActive: ( isAddingLink || !! formats.link ),
 			} );
 		}
 
+		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"
@@ -196,9 +230,4 @@ class FormatToolbar extends Component {
 						{ linkSettings }
 					</div>
 				}
-			</div>
-		);
-	}
-}
-
-export default withSpokenMessages( FormatToolbar );
+*/

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,6 +13,7 @@ import {
 	find,
 	defer,
 	noop,
+	values,
 } from 'lodash';
 import { nodeListToReact } from 'dom-react';
 import { Fill } from 'react-slot-fill';
@@ -127,6 +128,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 ) {
@@ -481,8 +486,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() {
@@ -563,8 +571,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 ) {
@@ -584,6 +596,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 ),
 		} ) );
@@ -604,6 +617,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
@@ -620,6 +634,7 @@ export default class Editable extends Component {
 				formats={ this.state.formats }
 				onChange={ this.changeFormats }
 				enabledControls={ formattingControls }
+				formatters={ values( formatters ) }
 			/>
 		);
 

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';
+