The Most Beautiful & Functional Blocks in WordPress
WP Documentation turns every code block into a first-class documentation citizen — with one-click copy, live preview tabs, syntax themes, line numbers, and perfect dark-mode support.
No plugins. No shortcodes. Just native Gutenberg blocks that work everywhere.
Try It Right Now (Copy Any Block Below)
Bash
# Install WP Documentation via WP-CLI
wp theme install wp-documentation --activate
JavaScript
// Alpine.js + WP Docs Pro = ❤️
document.addEventListener('alpine:init', () => {
Alpine.store('docs', {
sidebarOpen: false,
toggle() { this.sidebarOpen = !this.sidebarOpen }
})
})
HTML
<!-- Gutenberg block example -->
<div class="bg-frost-0 p-8">
<strong>Tip:</strong> You’re editing this with real Gutenberg blocks!
</div>
Tip: You’re editing this with real Gutenberg blocks!
All snippets above have:
- One-click Copy button (with success toast ✓)
- Automatic language detection
- Line highlighting on hover
- Responsive overflow handling
- Print-optimized (no buttons shown)
Tabbed Code Panels (Game Changer)
Show multiple languages in one place — readers switch instantly.
<nav class="docs-sidebar">…</nav>.docs-sidebar { … }document.querySelector('.toggle-sidebar').addEventListener('click', …)Features:
- Click tabs → instantly switch code
- Copy button copies only the active tab
- Remembers last selected tab per block
- Works perfectly in dark mode
Live Preview Tabs (See Code + Result)
Perfect for UI components, shortcodes, or Gutenberg patterns.
HTML
<div class="bg-white dark:bg-gray-900">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
<h2 class="max-w-2xl text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl dark:text-white">Boost your productivity. Start using our app today.</h2>
<div class="mt-10 flex items-center gap-x-6">
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500">Get started</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900 dark:text-gray-300 dark:hover:text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
Boost your productivity. Start using our app today.
Readers toggle between Result and Code — no external sandbox needed.