Skip to main content

WPW Greenshift TOC Automation

Overview​

Version 1.0.6 by wpwhite.com. Automates Greenshift Table of Contents integration for single posts. Normalizes existing TOC blocks, injects a sticky TOC for posts without one, and provides WP-CLI commands for batch operations.

Automation Pipeline​

Post render
  → Normalize existing Greenshift TOC block attributes
    → If no TOC block found and post has <h2> headings:
      → Auto-inject sticky TOC via render_block()
        → Enqueue frontend assets with inline CSS/JS

Block Normalization​

When a Greenshift TOC block (greenshift-blocks/toc) is detected in post content, its attributes are normalized:

AttributeForced Value
dynamicTOCtrue
seoschematrue
stickyPaneltrue
stickyPanelOnlytrue
stickyPoint2000
offset150
headingTagh2

Custom attributes like className, animation, and inlineCssStyles are preserved.

Auto-Injection​

If no Greenshift TOC block exists and the post has <h2> headings, a TOC is automatically injected at the beginning of post content via the_content filter at priority 11. The injected TOC:

  • Renders a sticky side panel on desktop (right side, ~42% from top)
  • Shows a collapsible Table of Contents on click
  • Highlights current section on scroll
  • Collapses to a narrow toggle button when not active

Heading ID Generation​

Headings without explicit id attributes get auto-generated IDs using sanitize_title_with_dashes().

Frontend CSS​

Two CSS layers are injected as inline styles:

1. Base CSS​

Positions the sticky TOC, styles the TOC list, toggle button, and mobile responsive breakpoints.

2. Opshell Theme CSS​

Dark theme overrides matching the opshell.dev brand:

  • Dark background (#161b22, #0d1117)
  • Green accent (#3fb950)
  • Terminal-style header: $ toc --post
  • Monospace font for header, sans-serif for links
  • Custom button styles with green hover state

Frontend JavaScript​

Two JS snippets injected inline:

1. Base JS​

Scroll tracking that highlights the current TOC item using IntersectionObserver-like scroll event handling with requestAnimationFrame.

2. Opshell Theme JS​

Toggle behavior for the TOC panel: click/keyboard handling, aria-expanded management, and event propagation stopping.

WP-CLI Commands​

CommandDescription
wp wpstrategist-toc apply <post-id>Inject or normalize TOC block in post content
wp wpstrategist-toc remove <post-id>Remove all Greenshift TOC blocks from post content

The apply command adds a TOC block if none exists or normalizes existing ones. The remove command strips all Greenshift TOC blocks.

Conditional Loading​

Assets only enqueue when:

  • Not admin
  • Is a single post (is_singular('post'))
  • Post has <h2> headings