[WIP] Add footnotes support to Gutenberg

blocks/api/index.js

@@ -9,6 +9,7 @@ export {
 export {
 	default as parse,
 	getBlockAttributes,
+	parseFootnotesFromContent,
 	parseWithAttributeSchema,
 } from './parser';
 export { default as rawHandler, getPhrasingContentSchema } from './raw-handling';

blocks/api/parser.js

@@ -205,6 +205,30 @@ export function getAttributesAndInnerBlocksFromDeprecatedVersion( blockType, inn
 	}
 }
 
+/**
+ * Parses the content and extracts the list of footnotes.
+ *
+ * @param {?Array} content The content to parse.
+ *
+ * @return {Array} Array of footnote ids.
+ */
+export function parseFootnotesFromContent( content ) {
+	if ( ! content || ! Array.isArray( content ) ) {
+		return [];
+	}
+
+	return content.reduce( ( footnotes, element ) => {
+		if ( element.type === 'sup' && element.props[ 'data-wp-footnote-id' ] ) {
+			return [
+				...footnotes,
+				{ id: element.props[ 'data-wp-footnote-id' ] },
+			];
+		}
+
+		return footnotes;
+	}, [] );
+}
+
 /**
  * Creates a block with fallback to the unknown type handler.
  *

blocks/api/test/parser.js

@@ -5,6 +5,7 @@ import {
 	getBlockAttribute,
 	getBlockAttributes,
 	asType,
+	parseFootnotesFromContent,
 	createBlockWithFallback,
 	getAttributesAndInnerBlocksFromDeprecatedVersion,
 	default as parse,
@@ -312,6 +313,25 @@ describe( 'block parser', () => {
 		} );
 	} );
 
+	describe( 'parseFootnotesFromContent', () => {
+		it( 'should return empty array if there is no content', () => {
+			const footnotes = parseFootnotesFromContent();
+
+			expect( footnotes ).toEqual( [] );
+		} );
+		it( 'should parse content and return footnote ids', () => {
+			const content = [
+				'Lorem ipsum',
+				{ type: 'sup', props: { 'data-wp-footnote-id': '12345' } },
+				'is a text',
+			];
+
+			const footnotes = parseFootnotesFromContent( content );
+
+			expect( footnotes ).toEqual( [ { id: '12345' } ] );
+		} );
+	} );
+
 	describe( 'createBlockWithFallback', () => {
 		it( 'should create the requested block if it exists', () => {
 			registerBlockType( 'core/test-block', defaultBlockSettings );

core-blocks/footnotes/edit.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+import { RichText } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getFootnoteByUid, orderFootnotes } from './footnotes-utils.js';
+import './editor.scss';
+
+class FootnotesEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			editable: null,
+		};
+	}
+
+	onChange( footnoteUid ) {
+		return ( nextValue ) => {
+			const { attributes, orderedFootnoteUids, setAttributes } = this.props;
+
+			const nextFootnotes = orderedFootnoteUids.map( ( { id } ) => {
+				if ( id === footnoteUid ) {
+					return {
+						id,
+						text: nextValue,
+					};
+				}
+
+				return getFootnoteByUid( attributes.footnotes, id );
+			} );
+
+			setAttributes( {
+				footnotes: nextFootnotes,
+			} );
+		};
+	}
+
+	onSetActiveEditable( id ) {
+		return () => {
+			this.setState( { editable: id } );
+		};
+	}
+
+	render() {
+		const { attributes, editable, orderedFootnoteUids, isSelected } = this.props;
+		const orderedFootnotes = orderFootnotes( attributes.footnotes, orderedFootnoteUids );
+
+		return (
+			<ol className="blocks-footnotes__footnotes-list">
+				{ orderedFootnotes.map( ( footnote ) => (
+					<li key={ footnote.id }>
+						<RichText
+							tagName="span"
+							value={ footnote.text }
+							onChange={ this.onChange( footnote.id ) }
+							isSelected={ isSelected && editable === footnote.id }
+							placeholder={ __( 'Write footnote…' ) }
+							onFocus={ this.onSetActiveEditable( footnote.id ) }
+						/>
+					</li>
+				) ) }
+			</ol>
+		);
+	}
+}
+
+export default withSelect( ( select ) => ( {
+	orderedFootnoteUids: select( 'core/editor' ).getFootnotes(),
+} ) )( FootnotesEdit );

core-blocks/footnotes/editor.scss

@@ -0,0 +1,3 @@
+.edit-post-visual-editor .blocks-footnotes__footnotes-list {
+	padding-left: 1.3em;
+}

core-blocks/footnotes/footnotes-utils.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * Given an array of footnotes and a UID, returns the footnote object associated
+ * with that UID. If the array doesn't contain the footnote, a footnote object is
+ * returned with the given ID and an empty text.
+ *
+ * @param {Array} footnotes   Array of footnotes.
+ * @param {Array} footnoteUID UID of the footnote to return.
+ *
+ * @return {Object} Footnote object with the id and the text of the footnote. If
+ * the footnote doesn't exist in the array, the text is an empty string.
+ */
+const getFootnoteByUid = function( footnotes, footnoteUID ) {
+	const filteredFootnotes = footnotes.filter(
+		( footnote ) => footnote.id === footnoteUID );
+
+	return get( filteredFootnotes, [ 0 ], { id: footnoteUID, text: '' } );
+};
+
+/**
+ * Orders an array of footnotes based on another array with the footnote UIDs
+ * ordered.
+ *
+ * @param {Array} footnotes            Array of unordered footnotes.
+ * @param {Array} orderedFootnotesUids Array of ordered footnotes UIDs. Every
+ * element of the array must be an object with an id property, like the one
+ * returned after parsing the attributes.
+ *
+ * @return {Array} Array of footnotes ordered.
+ */
+const orderFootnotes = function( footnotes, orderedFootnotesUids ) {
+	return orderedFootnotesUids.map(
+		( { id } ) => getFootnoteByUid( footnotes, id ) );
+};
+
+export { getFootnoteByUid, orderFootnotes };

core-blocks/footnotes/index.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import FootnotesEdit from './edit.js';
+import { orderFootnotes } from './footnotes-utils.js';
+import './style.scss';
+
+export const name = 'core/footnotes';
+
+export const settings = {
+	title: __( 'Footnotes' ),
+	description: __( 'List of footnotes from the article' ),
+	category: 'common',
+	useOnce: true,
+	keywords: [ __( 'footnotes' ), __( 'references' ) ],
+
+	attributes: {
+		footnotes: {
+			type: 'array',
+			source: 'query',
+			selector: 'li',
+			query: {
+				id: {
+					source: 'attribute',
+					attribute: 'id',
+				},
+				text: {
+					source: 'children',
+				},
+			},
+			default: [],
+		},
+	},
+
+	edit: FootnotesEdit,
+
+	save( { attributes } ) {
+		const orderedFootnoteUids = select( 'core/editor' ).getFootnotes();
+		const footnotes = orderedFootnoteUids && orderedFootnoteUids.length ?
+			orderFootnotes( attributes.footnotes, orderedFootnoteUids ) :
+			attributes.footnotes;
+
+		return (
+			<div>
+				<ol>
+					{ footnotes.map( ( footnote ) => (
+						<li id={ footnote.id } key={ footnote.id }>
+							{ footnote.text }
+						</li>
+					) ) }
+				</ol>
+			</div>
+		);
+	},
+};

core-blocks/footnotes/style.scss

@@ -0,0 +1,9 @@
+.post,
+.edit-post-visual-editor {
+	counter-reset: footnotes;
+}
+
+.wp-footnote::before {
+	counter-increment: footnotes;
+	content: counter(footnotes);
+}

core-blocks/footnotes/test/__snapshots__/index.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`core/footnotes block edit matches snapshot 1`] = `
+<ol
+  class="blocks-footnotes__footnotes-list"
+/>
+`;

core-blocks/footnotes/test/footnotes-utils.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import { getFootnoteByUid, orderFootnotes } from '../footnotes-utils.js';
+
+describe( 'footnotes utils', () => {
+	describe( 'getFootnoteByUid', () => {
+		it( 'should return footnote associated with the id', () => {
+			const footnote = { id: 'abcd', text: 'ABCD' };
+			const id = 'abcd';
+
+			expect( getFootnoteByUid( [ footnote ], id ) ).toEqual( footnote );
+		} );
+
+		it( 'should return a footnote without text when the id is not found', () => {
+			const emptyFootnote = { id: 'abcd', text: '' };
+			const id = 'abcd';
+
+			expect( getFootnoteByUid( [], id ) ).toEqual( emptyFootnote );
+		} );
+	} );
+
+	describe( 'orderFootnotes', () => {
+		it( 'should return ordered footnotes', () => {
+			const footnote1 = { id: 'abcd1', text: 'ABCD1' };
+			const footnote2 = { id: 'abcd2', text: 'ABCD2' };
+			const footnotes = [ footnote1, footnote2 ];
+			const orderedFootnoteUids = [ { id: footnote2.id }, { id: footnote1.id } ];
+
+			expect( orderFootnotes( footnotes, orderedFootnoteUids ) )
+				.toEqual( [ footnote2, footnote1 ] );
+		} );
+	} );
+} );

core-blocks/footnotes/test/index.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import { name, settings } from '../';
+import { blockEditRender } from '../../test/helpers';
+import '@wordpress/editor';
+
+describe( 'core/footnotes', () => {
+	test( 'block edit matches snapshot', () => {
+		const wrapper = blockEditRender( name, settings );
+
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );

core-blocks/index.js

@@ -25,6 +25,7 @@ import * as columns from './columns';
 import * as coverImage from './cover-image';
 import * as embed from './embed';
 import * as freeform from './freeform';
+import * as footnotes from './footnotes';
 import * as html from './html';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
@@ -65,6 +66,7 @@ export const registerCoreBlocks = () => {
 		...embed.common,
 		...embed.others,
 		freeform,
+		footnotes,
 		html,
 		latestPosts,
 		more,