Load Content Late - Add IDs After Others Have Addd Theirs

[ronalfy]

Relates to #58, Resolves #79

Continues #75

This is a draft PR demonstrating loading late and adding SimpleTOC after content has been parsed.

Features of Running Late

1. Works on already-parsed content, relying on other plugins to add IDs first, and only adding IDs if they are missing.
2. Can render headings in synced patterns.
3. Doesn't escape early, preventing conflicts with other plugins needing dynamic content.
4. Shortcode allows a placeholder, which can be replaced in the content much later.

Caveats of loading late:

1. Headline logic is greedy. The default of this PR assumes skipping headlines in containers by default, which may be an incorrect assumption. This can be disabled via the filter simpletoc_skip_in_wrapper (default false). If this is enabled, it'll get all headlines, even in other blocks and shortcode output.

• Perhaps including containers should be enabled by default (still filterable)
• Add an admin option to control behavior.
• Add container-aware classes that exclude or include headlines in container-like elements.

2. We lose context of what's a block and what's not.

This flowchart shows the logic.

Block and Original Content Output

This runs whenever the block is initially output to the frontend (content priority 10) or when it is server-side rendered.

If the block is server-side rendered (in REST), then a sample TOC is generated from block content, but only the TOC is returned, not the content.

Content Prority 800 - Add IDs Late

This assumes a shortcode is present in the content, which we'll replace later. In this iteration of content parsing, we're adding IDs to any headlines that don't already have them and storing all headlines for later retrieval.

TOC Rendering

TOC rendering is after all other content has finished running, and returns a rendered TOC. If it's parsed on regular content, a shortcode will be present and replaced with the TOC HTML.

This render is also part of the block server-side rendering, which passes attributes and wrapper classes. If a TOC-only flag is set, then only the TOC HTML is returned, and not the full content. This is useful for server-side rendering.

Test Pattern

Here is the Test Pattern I used.

<!-- wp:simpletoc/toc /-->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="contribute">Contribute</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="test-2-custom-anchor">Test 2</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:generateblocks/text {"uniqueId":"a7ef1de4","tagName":"h2"} -->
<h2 class="gb-text">GenerateBlocks Headline (exclude)</h2>
<!-- /wp:generateblocks/text -->

<!-- wp:generateblocks/text {"uniqueId":"69c852a7","tagName":"h2","className":"simpletoc-include"} -->
<h2 class="gb-text simpletoc-include">GenerateBlocks Headline In Container (Include)</h2>
<!-- /wp:generateblocks/text --></div>
<!-- /wp:group -->

<!-- wp:generateblocks/text {"uniqueId":"93f062bf","tagName":"a","styles":{"display":"block"},"css":".gb-text-93f062bf{display:block}","htmlAttributes":{"href":"{{post_permalink}}"}} -->
<a class="gb-text gb-text-93f062bf" href="{{post_permalink}}">Example</a>
<!-- /wp:generateblocks/text -->

<!-- wp:heading {"className":"simpletoc-excluded"} -->
<h2 class="wp-block-heading simpletoc-excluded">Example 2 (Exclude me)</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Test 2</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example 2</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Contribute</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example 3</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Example</h3>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Example</h2>
<!-- /wp:heading -->