diff --git a/blocks/api/index.js b/blocks/api/index.js
index 897aba32f31761..5d93473c79f193 100644
--- a/blocks/api/index.js
+++ b/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';
diff --git a/blocks/api/parser.js b/blocks/api/parser.js
index 99d13fbb83e8fb..f64c0a87375ec3 100644
--- a/blocks/api/parser.js
+++ b/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.
*
diff --git a/blocks/api/test/parser.js b/blocks/api/test/parser.js
index 1eacdc317e37f2..b039a66bac0720 100644
--- a/blocks/api/test/parser.js
+++ b/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 );
diff --git a/core-blocks/footnotes/edit.js b/core-blocks/footnotes/edit.js
new file mode 100644
index 00000000000000..3e952ce4e46db0
--- /dev/null
+++ b/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 (
+
+ { orderedFootnotes.map( ( footnote ) => (
+ -
+
+
+ ) ) }
+
+ );
+ }
+}
+
+export default withSelect( ( select ) => ( {
+ orderedFootnoteUids: select( 'core/editor' ).getFootnotes(),
+} ) )( FootnotesEdit );
diff --git a/core-blocks/footnotes/editor.scss b/core-blocks/footnotes/editor.scss
new file mode 100644
index 00000000000000..cdb6a814ceb8c9
--- /dev/null
+++ b/core-blocks/footnotes/editor.scss
@@ -0,0 +1,3 @@
+.edit-post-visual-editor .blocks-footnotes__footnotes-list {
+ padding-left: 1.3em;
+}
diff --git a/core-blocks/footnotes/footnotes-utils.js b/core-blocks/footnotes/footnotes-utils.js
new file mode 100644
index 00000000000000..14a6de0f99134c
--- /dev/null
+++ b/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 };
diff --git a/core-blocks/footnotes/index.js b/core-blocks/footnotes/index.js
new file mode 100644
index 00000000000000..b9927fd39edbfc
--- /dev/null
+++ b/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 (
+
+
+ { footnotes.map( ( footnote ) => (
+ -
+ { footnote.text }
+
+ ) ) }
+
+