Footnotes (again): MVP

lib/client-assets.php

@@ -565,3 +565,125 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 // Enqueue stored styles.
 add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_stored_styles' );
 add_action( 'wp_footer', 'gutenberg_enqueue_stored_styles', 1 );
+
+/**
+ * Given a string of HTML, replaces all matching <data> tags with the result of
+ * the callback function.
+ *
+ * @param string   $content  The HTML content.
+ * @param string   $type     The type of data.
+ * @param callable $callback The callback function, called with the data
+ *                           attributes and fallback content.
+ * 
+ * @return string The HTML content with the <data> tags replaced.
+ */
+function replaceDataByType( $content, $type, $callback ) {
+	if ( ! strpos( $content, '<data' ) ) {
+		return $content;
+	}
+
+	return preg_replace_callback(
+		'/<data ([^>]+)>(.*?)<\/data>/',
+		function( $matches ) use ( $type, $callback ) {
+			// shortcode_parse_atts works on HTML attributes too.
+			$attrs = shortcode_parse_atts( $matches[1] );
+			$fallback = $matches[2];
+
+			if ( ! isset( $attrs['value'] ) || $attrs['value'] !== $type ) {
+				return $matches[0];
+			}
+
+			$data = array();
+
+			foreach ( $attrs as $key => $value ) {
+				if ( strpos( $key, 'data-' ) === 0 ) {
+					$data[ substr( $key, 5 ) ] = $value;
+				}
+			}
+
+			return $callback( $data, $fallback );
+		},
+		$content
+	);
+}
+
+add_filter(
+	'render_block',
+	function( $block_content ) {
+		return replaceDataByType(
+			$block_content,
+			'core/current-year',
+			function() {
+				return '<time datetime=' . date( 'Y' ) . '>' . date( 'Y' ) . '</time>';
+			}
+		);
+	}
+);
+
+
+/**
+ * Add footnotes to the end of the content.
+ *
+ * @param string $content Content.
+ *
+ * @return string Content with footnotes.
+ */
+function gutenberg_footnotes_the_content( $content ) {
+	$notes = array();
+	$content = replaceDataByType(
+		$content,
+		'core/footnote',
+		function( $attributes, $note ) use ( &$notes ) {
+			$note = substr( $note, 1, -1 );
+			$id = md5( $note );
+
+			if ( isset( $notes[ $id ] ) ) {
+				$notes[ $id ]['count'] += 1;
+			} else {
+				$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( $notes ), true );
+			$count = $notes[ $id ]['count'];
+
+			return (
+				'<sup><a class="note-link" href="#' . $id . '" id="' . $id . '-link-' . $count . '">[' . $index . ']</a></sup>'
+			);
+		}
+	);
+
+	if ( empty( $notes ) ) {
+		return $content;
+	}
+
+	$list = '<ol>';
+
+	foreach ( $notes as $id => $info ) {
+		$note  = $info['note'];
+		$count = $info['count'];
+		$list .= '<li id="' . $id . '">';
+		$list .= $note;
+		$label = $count > 1 ?
+			/* translators: %s: footnote occurrence */
+			__( 'Back to content (%s)', 'gutenberg' ) :
+			__( 'Back to content', 'gutenberg' );
+		$links = '';
+		while ( $count ) {
+			$links = '<a href="#' . $id . '-link-' . $count . '" aria-label="' . sprintf( $label, $count ) . '">↩︎</a>' . $links;
+			$count--;
+		}
+		$list .= ' ' . $links;
+		$list .= '</li>';
+	}
+
+	$list .= '</ol>';
+
+	return $content . $list;
+}
+
+// To do: make it work with pagination, excerpt.
+add_filter( 'the_content', 'gutenberg_footnotes_the_content' );

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

@@ -33,4 +33,8 @@ export function BlockContextProvider( { value, children } ) {
 	return <Context.Provider value={ nextValue } children={ children } />;
 }
 
+export function useBlockContext() {
+	return useContext( Context );
+}
+
 export default Context;

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

@@ -16,7 +16,7 @@ export { default as __experimentalBlockFullHeightAligmentControl } from './block
 export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { default as __experimentalUseBlockOverlayActive } from './block-content-overlay';
-export { BlockContextProvider } from './block-context';
+export { BlockContextProvider, useBlockContext } from './block-context';
 export {
 	default as BlockControls,
 	BlockFormatControls,

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';
@@ -281,6 +282,7 @@ function RichTextWrapper(
 		getValue,
 		onChange,
 		ref: richTextRef,
+		replacementRefs,
 	} = useRichText( {
 		value: adjustedValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
@@ -414,6 +416,15 @@ function RichTextWrapper(
 					'rich-text'
 				) }
 			/>
+			{ replacementRefs.map( ( ref ) => {
+				const { render: Render } = formatTypes.find(
+					( { name } ) => name === ref.value
+				);
+				return (
+					ref &&
+					createPortal( <Render attributes={ ref.dataset } />, ref )
+				);
+			} ) }
 		</>
 	);
 }

packages/format-library/package.json

@@ -30,7 +30,9 @@
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
+		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
+		"@wordpress/date": "file:../date",
 		"@wordpress/element": "file:../element",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",

packages/format-library/src/current-year/index.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { insertObject } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { formatListNumbered } from '@wordpress/icons';
+import { dateI18n } from '@wordpress/date';
+
+const name = 'core/current-year';
+const title = __( 'Current Year' );
+
+function Time() {
+	const year = dateI18n( 'Y', new Date() );
+	return <time dateTime={ year }>{ year }</time>;
+}
+
+export const currentYear = {
+	name,
+	title,
+	tagName: 'data',
+	render: Time,
+	saveFallback: Time,
+	edit( { isObjectActive, value, onChange, onFocus } ) {
+		function onClick() {
+			const newValue = insertObject( value, {
+				type: name,
+			} );
+			newValue.start = newValue.end - 1;
+			onChange( newValue );
+			onFocus();
+		}
+
+		return (
+			<RichTextToolbarButton
+				icon={ formatListNumbered }
+				title={ title }
+				onClick={ onClick }
+				isActive={ isObjectActive }
+			/>
+		);
+	},
+};

packages/format-library/src/default-formats.js

@@ -13,6 +13,10 @@ import { subscript } from './subscript';
 import { superscript } from './superscript';
 import { keyboard } from './keyboard';
 import { unknown } from './unknown';
+import { currentYear } from './current-year';
+import { footnote } from './footnote';
+import { postDate } from './post-date';
+import { currentYear } from './current-year';
 
 export default [
 	bold,
@@ -27,4 +31,8 @@ export default [
 	superscript,
 	keyboard,
 	unknown,
+	currentYear,
+	footnote,
+	postDate,
+	currentYear,
 ];

packages/format-library/src/footnote/index.js

@@ -0,0 +1,112 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { insertObject, useAnchor } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { formatListNumbered } from '@wordpress/icons';
+import { Popover, TextControl } from '@wordpress/components';
+
+const name = 'core/footnote';
+const title = __( 'Footnote' );
+
+export const footnote = {
+	name,
+	title,
+	tagName: 'data',
+	attributes: {
+		note: ( element ) =>
+			element.innerHTML.replace( /^\[/, '' ).replace( /\]$/, '' ),
+	},
+	render() {
+		return (
+			<sup>
+				<a className="note-link" href="#placeholder">
+					{ '' }
+				</a>
+			</sup>
+		);
+	},
+	saveFallback( { attributes: { note } } ) {
+		return `[${ note }]`;
+	},
+	edit( {
+		isObjectActive,
+		value,
+		onChange,
+		onFocus,
+		contentRef,
+		activeObjectAttributes,
+	} ) {
+		function onClick() {
+			const newValue = insertObject( value, {
+				type: name,
+				attributes: {
+					note: '',
+				},
+			} );
+			newValue.start = newValue.end - 1;
+			onChange( newValue );
+			onFocus();
+		}
+
+		return (
+			<>
+				<RichTextToolbarButton
+					icon={ formatListNumbered }
+					title={ title }
+					onClick={ onClick }
+					isActive={ isObjectActive }
+				/>
+				{ isObjectActive && (
+					<InlineUI
+						value={ value }
+						onChange={ onChange }
+						activeObjectAttributes={ activeObjectAttributes }
+						contentRef={ contentRef }
+					/>
+				) }
+			</>
+		);
+	},
+};
+
+function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
+	const { note } = activeObjectAttributes;
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings: footnote,
+	} );
+
+	return (
+		<Popover
+			placement="bottom"
+			focusOnMount={ true }
+			anchor={ popoverAnchor }
+			className="block-editor-format-toolbar__image-popover"
+		>
+			<TextControl
+				className="block-editor-format-toolbar__image-container-value"
+				label={ __( 'Note' ) }
+				value={ note }
+				onChange={ ( newNote ) => {
+					const newReplacements = value.replacements.slice();
+
+					newReplacements[ value.start ] = {
+						tagName: 'data',
+						type: name,
+						attributes: {
+							...activeObjectAttributes,
+							note: newNote,
+						},
+					};
+
+					onChange( {
+						...value,
+						replacements: newReplacements,
+					} );
+				} }
+			/>
+		</Popover>
+	);
+}

packages/format-library/src/footnote/style.scss

@@ -0,0 +1,12 @@
+.editor-styles-wrapper {
+	counter-reset: footnotes;
+}
+
+.note-link {
+	counter-increment: footnotes;
+	pointer-events: none;
+}
+
+.note-link::after {
+	content: "[" counter(footnotes) "]";
+}