Footnotes (stored inline)

docs/reference-guides/core-blocks.md

@@ -278,6 +278,15 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 -	**Supports:** align, anchor, color (background, gradients, link, ~~text~~)
 -	**Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
 
+## Footnotes
+
+ ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/footnotes))
+
+-	**Name:** core/footnotes
+-	**Category:** text
+-	**Supports:** ~~html~~
+-	**Attributes:** 
+
 ## Classic
 
 Use the classic WordPress editor. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/freeform))

lib/experimental/class-wp-footnote-processor.php

@@ -0,0 +1,242 @@
+<?php
+/**
+ * This is a silly file that replaces inline footnotes with links to
+ * footnotes and a trailing footer with a list of footnote items.
+ *
+ * @package gutenberg
+ *
+ * @since 6.3.0
+ */
+
+/**
+ * Replaces inline footnotes with inline links and a footer list.
+ *
+ * So many things about this are fragile, broken, ad-hoc, and
+ * coupling to internal details of the Tag Processor. This is
+ * meant to unlock footnote rendering on the server and should
+ * not be followed as an example.
+ *
+ * @since 6.3.0
+ */
+class WP_Footnote_Processor extends WP_HTML_Tag_Processor {
+	/**
+	 * Stores referenced footnotes, hash, and count of links referring to them.
+	 *
+	 * @var array[]
+	 */
+	public $notes = array();
+
+	/**
+	 * Replaces inline footnotes in a given HTML document with
+	 * links with anchors produced by `$this->get_footer()`.
+	 *
+	 * @return string Transformed HTML with links instead of inline footnotes.
+	 */
+	public function replace_footnotes() {
+		while ( $this->find_opener() ) {
+			if ( ! $this->find_balanced_closer() ) {
+				return $this->get_updated_html();
+			}
+
+			$note = substr( $this->get_note_content(), 2, -1 );
+			$id   = md5( $note );
+
+			if ( isset( $this->notes[ $id ] ) ) {
+				$this->notes[ $id ]['count'] += 1;
+			} else {
+				$this->notes[ $id ] = array(
+					'note'  => $note,
+					'count' => 1,
+				);
+			}
+
+			// List starts at 1. If the note already exists, use the existing index.
+			$index = 1 + array_search( $id, array_keys( $this->notes ), true );
+			$count = $this->notes[ $id ]['count'];
+
+			$footnote_content = sprintf(
+				'<sup title="%s"><a class="note-link" href="#%s" id="%s-link-%d">[%d]</a></sup>',
+				esc_attr( $note ),
+				$id,
+				$id,
+				$count,
+				$index
+			);
+
+			$this->replace_footnote( $footnote_content );
+		}
+
+		return $this->get_updated_html();
+	}
+
+	/**
+	 * Generates a list of footnote items that can be linked to in the post.
+	 *
+	 * @return string The list of footnote items, if any, otherwise an empty string.
+	 */
+	public function get_footer() {
+		if ( empty( $this->notes ) ) {
+			return '';
+		}
+
+		$output = '<ol>';
+		foreach ( $this->notes as $id => $info ) {
+			$note    = $info['note'];
+			$count   = $info['count'];
+			$output .= sprintf( '<li id="%s">', $id );
+			$output .= $note;
+			$label   = $count > 1 ?
+				/* translators: %s: footnote occurrence */
+				__( 'Back to content (%s)', 'gutenberg' ) :
+				__( 'Back to content', 'gutenberg' );
+			$links = '';
+			while ( $count ) {
+				$links .= sprintf(
+					'<a href="#%s-link-%d" aria-label="%s">↩︎</a>',
+					$id,
+					$count,
+					sprintf( $label, $count )
+				);
+				$count--;
+			}
+			$output .= ' ' . $links;
+			$output .= '</li>';
+		}
+		$output .= '</ol>';
+
+		return $output;
+	}
+
+	/**
+	 * Finds the start of the next footnote.
+	 *
+	 * Looks for a superscript tag with the `value=footnote` attribute.
+	 *
+	 * @return bool
+	 */
+	private function find_opener() {
+		while ( $this->next_tag( array( 'tag_name' => 'sup' ) ) ) {
+			if ( 'fn' === $this->get_attribute( 'class' ) ) {
+				$this->set_bookmark( 'start' );
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Naively finds the end of the current footnote.
+	 *
+	 * @return bool Whether the end of the current footnote was found.
+	 */
+	private function find_balanced_closer() {
+		$depth = 1;
+		$query = array(
+			'tag_name'    => 'sup',
+			'tag_closers' => 'visit',
+		);
+
+		while ( $this->next_tag( $query ) ) {
+			if ( ! $this->is_tag_closer() ) {
+				$depth++;
+			} else {
+				$depth--;
+			}
+
+			if ( 0 <= $depth ) {
+				$this->set_bookmark( 'end' );
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns the content inside footnote superscript tags.
+	 *
+	 * @return string The content found inside footnote superscript tags.
+	 */
+	private function get_note_content() {
+		$open  = $this->bookmarks['start'];
+		$close = $this->bookmarks['end'];
+
+		return substr( $this->html, $open->end, $close->start - $open->end );
+	}
+
+	/**
+	 * Replaces the footnote entirely with new HTML.
+	 *
+	 * @param string $new_content Content to store in place of the existing footnote.
+	 *
+	 * @return void
+	 */
+	private function replace_footnote( $new_content ) {
+		$start                   = $this->bookmarks['start']->start;
+		$end                     = $this->bookmarks['end']->end + 1;
+		$this->lexical_updates[] = new WP_HTML_Text_Replacement( $start, $end, $new_content );
+		$this->get_updated_html();
+
+		$this->bookmarks['start']->start = $start;
+		$this->bookmarks['start']->end   = $end;
+		$this->seek( 'start' );
+	}
+}
+
+add_filter(
+	'block_parser_class',
+	/**
+	 * Hack to inject a per-render singleton footnote processor.
+	 */
+	function ( $parser_class ) {
+		$notes = array();
+
+		add_filter(
+			'render_block',
+			function ( $html, $block ) use ( &$notes ) {
+				if ( 'core/footnotes' === $block['blockName'] ) {
+					if ( 0 === count( $notes ) ) {
+						return $html;
+					}
+
+					$p        = new WP_Footnote_Processor( $html );
+					$p->notes = $notes;
+					$list     = $p->get_footer();
+					$notes    = array();
+
+					return $html . $list;
+				}
+
+				$p        = new WP_Footnote_Processor( $html );
+				$p->notes = $notes;
+				$p->replace_footnotes();
+				$notes = $p->notes;
+
+				return $p->get_updated_html();
+			},
+			1000,
+			2
+		);
+
+		add_filter(
+			'the_content',
+			function ( $html ) use ( &$notes ) {
+				if ( 0 === count( $notes ) ) {
+					return $html;
+				}
+
+				$p        = new WP_Footnote_Processor( $html );
+				$p->notes = $notes;
+				$list     = $p->get_footer();
+				$notes    = array();
+
+				return $html . $list;
+			},
+			1000,
+			1
+		);
+
+		return $parser_class;
+	}
+);

lib/load.php

@@ -115,6 +115,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
 require __DIR__ . '/experimental/block-editor-settings.php';
 require __DIR__ . '/experimental/blocks.php';
+require __DIR__ . '/experimental/class-wp-footnote-processor.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/kses.php';
 require __DIR__ . '/experimental/l10n.php';

packages/block-editor/src/components/rich-text/index.js

@@ -12,6 +12,7 @@ import {
 	useCallback,
 	forwardRef,
 	createContext,
+	createPortal,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { children as childrenSource } from '@wordpress/blocks';
@@ -280,6 +281,7 @@ function RichTextWrapper(
 		getValue,
 		onChange,
 		ref: richTextRef,
+		replacementRefs,
 	} = useRichText( {
 		value: adjustedValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
@@ -413,6 +415,41 @@ function RichTextWrapper(
 					'rich-text'
 				) }
 			/>
+			{ Object.keys( replacementRefs ).map( ( index ) => {
+				const ref = replacementRefs[ index ];
+				const { render: Render } = formatTypes.find(
+					( { name } ) => name === ref.value
+				);
+				const i = parseInt( index, 10 );
+				function setAttributes( attributes ) {
+					const newReplacements = value.replacements.slice();
+					const currentObject = newReplacements[ i ];
+					newReplacements[ i ] = {
+						...currentObject,
+						attributes: {
+							...currentObject.attributes,
+							...attributes,
+						},
+					};
+					onChange( {
+						...value,
+						replacements: newReplacements,
+					} );
+				}
+				return (
+					ref &&
+					createPortal(
+						<Render
+							attributes={ ref.dataset }
+							setAttributes={ setAttributes }
+							isSelected={
+								value.start === i && value.end === i + 1
+							}
+						/>,
+						ref
+					)
+				);
+			} ) }
 		</>
 	);
 }

packages/block-library/src/editor.scss

@@ -52,6 +52,7 @@
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
 @import "./post-comments-form/editor.scss";
+@import "./footnotes/editor.scss";
 
 @import "./editor-elements.scss";
 

packages/block-library/src/footnotes/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/footnotes",
+	"title": "Footnotes",
+	"category": "text",
+	"description": "",
+	"keywords": [ "references" ],
+	"textdomain": "default",
+	"supports": {
+		"html": false
+	},
+	"editorStyle": "wp-block-footnotes-editor",
+	"style": "wp-block-footnotes"
+}