Store footnote ids in the block object

Everytime the block is modified, it parses its code and stores the footnotes in the block object.

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,29 @@ 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.className === 'footnote' &&
+				element.props[ 'data-footnote-id' ] ) {
+			return footnotes.concat( { id: element.props[ 'data-footnote-id' ] } );
+		}
+
+		return footnotes;
+	}, [] );
+}
+
 /**
  * Creates a block with fallback to the unknown type handler.
  *
@@ -297,6 +320,11 @@ export function createBlockWithFallback( blockNode ) {
 		}
 	}
 
+	const footnotes = parseFootnotesFromContent( block.attributes.content );
+	if ( footnotes.length ) {
+		block.footnotes = footnotes;
+	}
+
 	return block;
 }
 

blocks/api/test/parser.js

@@ -5,6 +5,7 @@ import {
 	getBlockAttribute,
 	getBlockAttributes,
 	asType,
+	parseFootnotesFromContent,
 	createBlockWithFallback,
 	getAttributesAndInnerBlocksFromDeprecatedVersion,
 	default as parse,
@@ -312,6 +313,31 @@ 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: {
+						className: 'footnote',
+						'data-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 );

editor/store/reducer.js

@@ -23,7 +23,7 @@ import {
 /**
  * WordPress dependencies
  */
-import { isSharedBlock } from '@wordpress/blocks';
+import { isSharedBlock, parseFootnotesFromContent } from '@wordpress/blocks';
 import { combineReducers } from '@wordpress/data';
 
 /**
@@ -321,6 +321,7 @@ export const editor = flow( [
 					[ action.uid ]: {
 						...state[ action.uid ],
 						attributes: nextAttributes,
+						footnotes: parseFootnotesFromContent( nextAttributes.content ),
 					},
 				};