Easy Codepen Pen Embed As A Gutenberg Editor

A Gutenberg block for developers that makes it easier to embed Codepen pens into your WordPress website with ease.


  • Dark & Light theme.
  • Custom pen height.
  • Custom pen view: Result Only, HTML and Result, JavaScript and Result, or CSS and Result.
  • Click to load functionality to improve load speed.

How to use it:

1. Install and activate the CodePen Embed Block on the WordPress which has Gutenberg editor enabled.

2. Create a new Codepen Embed block on the editing page.

new Codepen Embed block

3. Enter a Codepen URL in the input field.

Codepen Embed block URL

4. Config the Codepen Embed block from the right-side panel. Possible settings:

Codepen Embed block Settings

5. Save changes and done.


Easy Codepen Pen Embed As A Gutenberg Editor

Download WordPress Plugin:

You can download this free WordPress plugin using the download button below. Unless otherwise stated, the WordPress plugin is available under GNU General Public License.

Author: Chris Coyier

Homepage: https://wordpress.org/plugins/codepen-embed-block/

Don’t forget to share this WordPress plugin and also check out other awesome plugins on our site.

Rate This Plugin
User Review
0 (0 votes)