Footnotes

.github/CODEOWNERS

@@ -104,6 +104,7 @@
 /packages/format-library                        @ellatrix @cameronvoell @guarani
 /packages/rich-text                             @ellatrix @cameronvoell @guarani
 /packages/block-editor/src/components/rich-text @ellatrix @cameronvoell @guarani
+/packages/footnotes                             @ellatrix
 
 # Project Management
 /.github                                        @mapk @karmatosed

docs/manifest.json

@@ -1601,6 +1601,12 @@
 		"markdown_source": "../packages/eslint-plugin/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/footnotes",
+		"slug": "packages-footnotes",
+		"markdown_source": "../packages/footnotes/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/format-library",
 		"slug": "packages-format-library",

gutenberg.php

@@ -241,3 +241,5 @@ function register_site_icon_url( $response ) {
 add_filter( 'rest_index', 'register_site_icon_url' );
 
 add_theme_support( 'widgets-block-editor' );
+
+require __DIR__ . '/packages/footnotes/index.php';

lib/client-assets.php

@@ -449,6 +449,8 @@ function gutenberg_register_packages_styles( $styles ) {
  * @since 0.1.0
  */
 function gutenberg_enqueue_block_editor_assets() {
+	wp_enqueue_script( 'wp-footnotes' );
+
 	if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) {
 		$live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD;
 

package.json

@@ -49,6 +49,7 @@
 		"@wordpress/editor": "file:packages/editor",
 		"@wordpress/element": "file:packages/element",
 		"@wordpress/escape-html": "file:packages/escape-html",
+		"@wordpress/footnotes": "file:packages/footnotes",
 		"@wordpress/format-library": "file:packages/format-library",
 		"@wordpress/hooks": "file:packages/hooks",
 		"@wordpress/html-entities": "file:packages/html-entities",

packages/block-editor/src/components/block-list/index.js

@@ -7,7 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
-import { useRef, createContext, useState } from '@wordpress/element';
+import {
+	useRef,
+	createContext,
+	useState,
+	useContext,
+} from '@wordpress/element';
+import { withFilters } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -27,6 +33,12 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
 export const BlockNodes = createContext();
 export const SetBlockNodes = createContext();
 
+const WrapperRef = createContext();
+
+const FilteredBlockListItems = withFilters( 'blockEditor.BlockListItems' )(
+	BlockListItems
+);
+
 export default function BlockList( { className } ) {
 	const ref = useRef();
 	const [ blockNodes, setBlockNodes ] = useState( {} );
@@ -43,9 +55,11 @@ export default function BlockList( { className } ) {
 					className
 				) }
 			>
-				<SetBlockNodes.Provider value={ setBlockNodes }>
-					<BlockListItems wrapperRef={ ref } />
-				</SetBlockNodes.Provider>
+				<WrapperRef.Provider value={ ref }>
+					<SetBlockNodes.Provider value={ setBlockNodes }>
+						<FilteredBlockListItems />
+					</SetBlockNodes.Provider>
+				</WrapperRef.Provider>
 			</div>
 		</BlockNodes.Provider>
 	);
@@ -56,7 +70,6 @@ function Items( {
 	rootClientId,
 	renderAppender,
 	__experimentalAppenderTagName,
-	wrapperRef,
 } ) {
 	function selector( select ) {
 		const {
@@ -98,6 +111,7 @@ function Items( {
 		enableAnimation,
 		activeEntityBlockId,
 	} = useSelect( selector, [ rootClientId ] );
+	const wrapperRef = useContext( WrapperRef );
 
 	const dropTargetIndex = useBlockDropZone( {
 		element: wrapperRef,

packages/footnotes/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/footnotes/index.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Adds footnotes to the content.
+ *
+ * @package gutenberg
+ */
+
+add_filter( 'the_content', 'wp_footnotes_content_filter' );
+
+/**
+ * Adds footnotes to the content.
+ *
+ * @param {string} $content The content to filter.
+ */
+function wp_footnotes_content_filter( $content ) {
+	if ( strpos( $content, 'data-core-footnotes-id' ) === false ) {
+		return $content;
+	}
+
+	if ( ! preg_match_all( '/<a\s[^>]*data-core-footnotes-id="([^"]+)"[^>]*>/', $content, $matches, PREG_SET_ORDER ) ) {
+		return $content;
+	}
+
+	$list = '<ol>';
+
+	foreach ( $matches as $match ) {
+		list( $tag, $id ) = $match;
+
+		$list .= '<li id="' . $id . '">';
+		$list .= '<a id="' . $id . '" href="#' . $id . '-anchor" aria-label="' . __( 'Back to content', 'gutenberg' ) . '">↑</a>';
+
+		if ( preg_match( '/data-text="([^"]*)"/i', $tag, $text ) ) {
+			$list .= ' ' . $text[1];
+		}
+
+		$list .= '</li>';
+	}
+
+	$list .= '</ol>';
+
+	$style = '<style>body{counter-reset:footnotes}.note-anchor{counter-increment:footnotes}.note-anchor::after{margin-left:2px;content:"["counter(footnotes)"]";vertical-align:super;font-size:smaller;}</style>';
+
+	return $content . $list . $style;
+}

packages/footnotes/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@wordpress/footnotes",
+	"version": "1.0.0",
+	"description": "Footnotes for WordPress posts.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"footnotes"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/footnotes/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/footnotes"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@babel/runtime": "^7.12.5",
+		"@wordpress/block-editor": "file:../block-editor",
+		"@wordpress/components": "file:../components",
+		"@wordpress/data": "file:../data",
+		"@wordpress/element": "file:../element",
+		"@wordpress/hooks": "file:../hooks",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
+		"@wordpress/rich-text": "file:../rich-text",
+		"uuid": "^7.0.2"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}