Developers · Gutenberg
Code Playground block for WordPress
Interactive HTML/CSS/JS editor with live preview. Let visitors experiment with code directly on the page.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Interactive HTML/CSS/JS editor with live preview. Let visitors experiment with code directly on the page.
Inspector panels on this block: Content, Playground Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Horizontal (editors side by side), Vertical (stacked), Tabbed (one editor at a time).
Where to find it
Gutenberg inserter → Developers → search “Code Playground” (block name `blockenberg/code-playground` in block.json). Style it in the sidebar after insert.
How to use Code Playground block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Code Playground”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Editor Height (px)”, “Preview Height (px)”, “Auto-run on code change”, “Accent”.
- Check the published page. The view script reads HTML data attributes: data-lang, data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Horizontal (editors side by side); Vertical (stacked); Tabbed (one editor at a time). block.json default: horizontal. Saved as `layout`. |
| Editor Height (px) | Numeric range control in the inspector. Range 80–500. block.json default: 180. Saved as `editorHeight`. |
| Preview Height (px) | Numeric range control in the inspector. Range 100–800. block.json default: 260. Saved as `previewHeight`. |
| Auto-run on code change | On/off toggle in the inspector. On by default. Saved as `autoRun`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Editor Background | Color control in the inspector. block.json default: #1e1b4b. Saved as `editorBg`. |
| Editor Text | Color control in the inspector. block.json default: #e2e8f0. Saved as `editorText`. |
| Header Bar | Color control in the inspector. block.json default: #312e81. Saved as `headerBg`. |
| Preview Background | Color control in the inspector. block.json default: #ffffff. Saved as `previewBg`. |
| Section Background | Color control in the inspector. block.json default: #f8fafc. Saved as `sectionBg`. |
| Title Color | Color control in the inspector. block.json default: #1e1b4b. Saved as `titleColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-lang, data-opts.
- Keyboard handlers move focus between items.
When this is the right block
- Interactive HTML/CSS/JS editor with live preview. Let visitors experiment with code directly on the page — that is the job of Code Playground, not a generic content block.
- Use it when you need the editor control labeled “Editor Height (px)”, which exists on this block’s inspector.
- It matches pages about code, editor, html.
- Inserter grouping: docs sites, utilities, and developer landing pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Code Playground block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Code Playground”. It sits under Developers. After insert, open Content and set “Editor Height (px)”, “Preview Height (px)”, “Auto-run on code change”, “Accent”.
What makes Code Playground different from other Blockenberg blocks?
Interactive HTML/CSS/JS editor with live preview. Let visitors experiment with code directly on the page. Inspector labels on this block include “Editor Height (px)”, “Preview Height (px)”, “Auto-run on code change”, “Accent”.
Is the Code Playground Gutenberg block free?
Yes. Code Playground ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Code Playground to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Content, Playground Settings).
Related developers blocks
Markdown Preview
Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons.
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Code Comparison
Side-by-side code comparison block with syntax highlighting, diff markers, labeled panels, copy buttons, line numbers, and a draggable split divider.
Code Tabs
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Code Playground from the Gutenberg inserter.