CodePen for WP

Write HTML, CSS and JS in a real code editor and display it as a live CodePen embed, sourced entirely from WordPress.

Description

CodePen for WP adds a Gutenberg block for writing HTML, CSS and JS in a real code editor — the same CodeMirror-backed editor WordPress' own Custom HTML block uses — and displaying it on the front end as a live, interactive CodePen embed.

The code itself always lives in WordPress. Nothing is created on, saved to, or fetched from a CodePen account to make this work.

Why there's no "API key"

CodePen doesn't offer an authenticated API for creating or reading pens, so there's nothing to put an API key into. What it provides instead, for free and without any account, is a Prefill Embed: a documented convention where your HTML/CSS/JS is placed directly in the page markup and a small script from CodePen turns it into an interactive editor/preview. See CodePen's own documentation: Prefill Embeds.

Features

• A "CodePen Snippet" block with HTML/CSS/JS fields under their own tabs, plus a Preview tab that builds a live embed right in the block editor from whatever's currently in the other tabs.
• A settings screen (Settings → CodePen for WP) for site-wide defaults: theme, height, which pane(s) show by default — check more than one (e.g. CSS + Result) for a split view instead of a single tab — and whether the embedded preview is editable by visitors. Every block can override these individually.
• Changing a block's display settings is remembered and applied to the next freshly-inserted block automatically, so you don't have to re-pick them every time.
• Dynamic (server-side) rendering: the embed markup is built from the stored attributes at render time.

External services

This plugin relies on CodePen (a third-party service, not affiliated with or endorsed by this plugin) to render the interactive embed:

• On any front-end page containing a CodePen Snippet block, and on the block editor's Preview tab, a script is loaded from https://public.codepenassets.com/embed/index.js (CodePen's own embed loader).
• That script builds an `