Try rendering below content again.

WordPress · Feb 2, 2023 · e5d9b93 · e5d9b93
1 parent d64efb8
commit e5d9b93
Showing 1 changed file with 97 additions and 63 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -568,69 +568,103 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 
 
 // We'd like to do some custom handling without attribute parsing.
-add_shortcode( '#', function( $attr, $content, $tag ) {
-	return $content;
-} );
+// add_shortcode( '#', function( $attr, $content, $tag ) {
+// 	return $content;
+// } );
+
+// add_filter( 'do_shortcode_tag' , function( $output, $tag, $attr, $m ) {
+// 	if ( $tag !== '#' ) {
+// 		return $output;
+// 	}
+
+// 	// $m is the match:
+// 	// $m[0] is the full match.
+// 	// $m[1] is to check shortcode escaping.
+// 	// $m[2] is the shortcode name.
+// 	// $m[3] is the contents within the shortcode after the name. This includes
+// 	// the space between the name and the contents.
+// 	// $m[5] is the contents between the opening and closing shortcode tags (if
+// 	// any).
+// 	$note = $m[3];
+// 	$content = isset( $m[5] ) ? $m[5] : '';
+
+// 	// To do: find the most accessible markup.
+// 	return (
+// 		'<span data-core-footnote tabindex="0">' .
+// 			$content .
+// 		'</span>' .
+// 		'<span role="note">' .
+// 			$note .
+// 		'</span>' .
+// 		// To do: move to a proper stylesheet.
+// 		// The numbering is just a stylistic choice, it could also just be an
+// 		// asterisk or something else. We're not creating a numbered list so it
+// 		// doesn't matter.
+// 		'<style>
+// 			body {
+// 				counter-reset: footnotes;
+// 			}
+// 			[data-core-footnote] {
+// 				counter-increment: footnotes;
+// 			}
+// 			[data-core-footnote]::after,
+// 			[data-core-footnote] + span::before {
+// 				content: "[" counter(footnotes) "]";
+// 				vertical-align: super;
+// 				font-size: smaller;
+// 			}
+// 			[data-core-footnote]:focus {
+// 				outline: 1px dotted black;
+// 			}
+// 			[data-core-footnote] + span {
+// 				display: none;
+// 			}
+// 			[data-core-footnote]:focus + span {
+// 				display: block;
+// 				position: fixed;
+// 				bottom: 0;
+// 				padding: 10px;
+// 				border-top: 1px solid black;
+// 				background: white;
+// 			}
+// 			[data-core-footnote]:focus,
+// 			[data-core-footnote]:focus + span::before {
+// 				background: yellow;
+// 			}
+// 		</style>'
+// 	);
+// }, 10, 4 );
+
+// To do: make it work with pagination, excerpt.
+add_filter( 'the_content', function( $content ) {
+	if ( strpos( $content, '[#' ) === false ) {
+		return $content;
+	}
+
+	$notes = array();
+
+	$content = preg_replace_callback( '/\[#\s([^\]]+)\]/', function( $matches ) use ( &$notes ) {
+		$notes[] = $matches[1];
+		$id = md5( $matches[1] );
+		return '<a class="note-link" href="#' . $id . '" id="' . $id . '-link"></a>';
+	}, $content );
+
+	$list = '<ol>';
 
-add_filter( 'do_shortcode_tag' , function( $output, $tag, $attr, $m ) {
-	if ( $tag !== '#' ) {
-		return $output;
+	foreach ( $notes as $note ) {
+		$id = md5( $note );
+
+		$list .= '<li id="' . $id . '">';
+		$list .= '<a id="' . $id . '" href="#' . $id . '-link" aria-label="' . __( 'Back to content', 'gutenberg' ) . '">↑</a>';
+		$list .= ' ' . $note;
+		$list .= '</li>';
 	}
 
-	// $m is the match:
-	// $m[0] is the full match.
-	// $m[1] is to check shortcode escaping.
-	// $m[2] is the shortcode name.
-	// $m[3] is the contents within the shortcode after the name. This includes
-	// the space between the name and the contents.
-	// $m[5] is the contents between the opening and closing shortcode tags (if
-	// any).
-	$note = $m[3];
-	$content = isset( $m[5] ) ? $m[5] : '';
-
-	// To do: find the most accessible markup.
-	return (
-		'<span data-core-footnote tabindex="0">' .
-			$content .
-		'</span>' .
-		'<span role="note">' .
-			$note .
-		'</span>' .
-		// To do: move to a proper stylesheet.
-		// The numbering is just a stylistic choice, it could also just be an
-		// asterisk or something else. We're not creating a numbered list so it
-		// doesn't matter.
-		'<style>
-			body {
-				counter-reset: footnotes;
-			}
-			[data-core-footnote] {
-				counter-increment: footnotes;
-			}
-			[data-core-footnote]::after,
-			[data-core-footnote] + span::before {
-				content: "[" counter(footnotes) "]";
-				vertical-align: super;
-				font-size: smaller;
-			}
-			[data-core-footnote]:focus {
-				outline: 1px dotted black;
-			}
-			[data-core-footnote] + span {
-				display: none;
-			}
-			[data-core-footnote]:focus + span {
-				display: block;
-				position: fixed;
-				bottom: 0;
-				padding: 10px;
-				border-top: 1px solid black;
-				background: white;
-			}
-			[data-core-footnote]:focus,
-			[data-core-footnote]:focus + span::before {
-				background: yellow;
-			}
-		</style>'
-	);
-}, 10, 4 );
+	$list .= '</ol>';
+
+	// To do: move to a proper stylesheet.
+	// To do: need to add a post class instead of using .entry-content.
+	$style = '<style>.entry-content{counter-reset:footnotes}.note-link{counter-increment:footnotes}.note-link::after{margin-left:2px;content:"["counter(footnotes)"]";vertical-align:super;font-size:smaller;}</style>';
+
+	return $content . $list . $style;
+} );