[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/editor.js

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import { get, isEqual } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+import { RichText } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+class FootnotesEditor extends Component {
+	constructor( props ) {
+		super( ...arguments );
+
+		this.setFootnotesInOrder( props.footnotesOrder );
+		this.state = {
+			editable: null,
+		};
+	}
+
+	setFootnotesInOrder( footnotesOrder ) {
+		const { attributes, setAttributes } = this.props;
+
+		const footnotes = footnotesOrder.map( ( { id } ) => {
+			return this.getFootnoteById( attributes.footnotes, id );
+		} );
+
+		setAttributes( { footnotes } );
+	}
+
+	getFootnoteById( footnotes, footnoteUid ) {
+		const filteredFootnotes = footnotes.filter(
+			( footnote ) => footnote.id === footnoteUid );
+
+		return get( filteredFootnotes, [ 0 ], { id: footnoteUid, text: '' } );
+	}
+
+	onChange( footnoteUid ) {
+		return ( nextValue ) => {
+			const { attributes, footnotesOrder, setAttributes } = this.props;
+
+			const nextFootnotes = footnotesOrder.map( ( { id } ) => {
+				if ( id === footnoteUid ) {
+					return {
+						id,
+						text: nextValue,
+					};
+				}
+
+				return this.getFootnoteById( attributes.footnotes, id );
+			} );
+
+			setAttributes( {
+				footnotes: nextFootnotes,
+			} );
+		};
+	}
+
+	onSetActiveEditable( id ) {
+		return () => {
+			this.setState( { editable: id } );
+		};
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		const { footnotesOrder } = this.props;
+		const nextFootnotesOrder = nextProps.footnotesOrder;
+
+		if ( ! isEqual( footnotesOrder, nextFootnotesOrder ) ) {
+			this.setFootnotesInOrder( nextFootnotesOrder );
+		}
+	}
+
+	render() {
+		const { attributes, editable, isSelected } = this.props;
+		const { footnotes } = attributes;
+
+		return (
+			<ol className="blocks-footnotes__footnotes-list">
+				{ footnotes.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 ) => ( {
+	footnotesOrder: select( 'core/editor' ).getFootnotes(),
+} ) )( FootnotesEditor );

core-blocks/footnotes/editor.scss

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

core-blocks/footnotes/index.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import FootnotesEditor from './editor.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: FootnotesEditor,
+
+	save( { attributes } ) {
+		const { footnotes } = attributes;
+
+		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/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,