TLDR: We have an official "block" for CodePen Embeds in WordPress Gutenberg.
If you're a WordPress user, you're probably aware of the Gutenberg editor that shipped in WordPress 5.0 about a year ago. It's a massive change to the editor, and everyone has their opinion.
I'm a fan, myself, and no moreso than in the last few weeks when I've finally flipped it on for my blog CSS-Tricks and starting authoring new posts in it. It feels like an especially big upgrade for us, since we were essentially writing HTML for all posts before!
But the biggest ah ha moment came from installing new blocks and even creating our own. For example, using the <details> and <summary> elements can be mighty helpful in blog posts and pages, but that's not a native block in Gutenberg. I could just write HTML for them, which Gutenberg supports, but there is a nice little plugin to make it a proper "block".
In action:
Even better, we created a few of our own blocks that are specific to our site. Fortunately, create-guten-block is a wonderful project for making scaffolding those up easy and providing a pleasant modern dev environment. We even have a whole series on Gutenberg right on CSS-Tricks if you're interested in a deep dive.
One block we created was for our special code blocks. We have a set of languages we support for syntax highlighting and highlighting certain lines and such. Our block has all that functionality, and also looks a bit like the code block will when published.
That one isn't open source just because it's so specific to CSS-Tricks it probably isn't very useful.
But there is another that is very useful, a block for CodePen Embeds!
After activating the plugin, you'll see "CodePen Embed" as a new block.
Select it to be prompted to put in a CodePen Pen URL.
Once you have, it will show you the embed itself, along with options for controlling the embed (which you don't have if you embed it with oEmbed, where you just paste in the URL and get a basic embed).
And on the published post itself, of course you'll have the embed, just like you set up:
If that's useful to you on your site, snag the plugin.
The post A Gutenberg Block for CodePen Embeds on WordPress appeared first on CodePen Blog.