Shortcake v0.2.0: JS abstraction, ‘Add Post Element’ enhancements, inner content field


Last fall the Fusion Tech + Product team shipped Shortcake. Shortcake is a WordPress plugin to add UI to WordPress shortcodes, the code-like snippets you put in your post content to create pull quotes, add graphs, and perform other complex tasks. We believe deeply in open source, so putting the code on Github was a natural first step for us.

Since then, we’ve been asked more than a few times – why wasn’t this introduced earlier? That’s the kind of reception we’ve been getting. Really, being frequent developers and users of shortcodes, we can’t even think of using them now without Shortcake.

Today we are happy to bring you Shortcake v0.2.0. We’ve retooled our JavaScript abstraction using Browserify, enhanced the post element interface, and made the inner content of shortcodes easier to use. v0.2.0 also means Shortcake is available for download from plugins directory.

Release leads for v0.2.0 were Matthew Haines-Young, Daniel Bachhuber, and me. Special thanks to the contributors in this release include: bfintal, coderaaron, phh, sanchothefat, and Caleb Stauffer.

JavaScript abstraction with Browserify

When we built the first version of Shortcake, it was easier to bootstrap the existing Backbone model used by the WordPress media manager. But as we added features, maintenance became a nightmare. We decided to retool using an MVC architecture.

Specifically, we decided to use Browserify. It’s much easier to compartmentalize models, views, and controllers into different directories and then simply “require” them into your main JavaScript file, rather than having to create a self-contained and fully-fledged Backbone app.

And, as it turns out, the project is also using Browserify to split apart the media library JavaScript.

Enhancements to Post Elements editor

This is what the "Insert Post Element" experience currently looks like on

This is what the “Insert Post Element” experience currently looks like on

We want a great user experience for inserting new Post Elements. In v0.2.0, here are a few ways we’ve improved the UI:

  • Shortcodes are sorted alphabetically, making it easier to skim and find shortcodes.
  • Shortcodes can be filtered by name using the “Search” field, reducing complexity when a site has many dozens of shortcodes.
  • The “Insert Element” button is disabled until a post element is selected, providing a visual cue to the user.

Inner content is now its own field

One of the most common uses of shortcodes is treating them like custom HTML tags – put your content inside the shortcode, and then expand the opening and closing tags to whatever arbitrary code you had to get on the page.

Previously, this was viable with Shortcake using content as a special shortcode attribute. With v0.2.0, we’ve made inner_content its own argument, with a corresponding model, view, and controller. This gives us an added layer of abstraction to the inner content of shortcodes, and prevents a collision when a shortcode has content as an argument.


'label' => 'Lede',
'listItemImage' => 'dashicons-editor-textcolor',
'attrs' => array(
'label' => 'Text',
'attr' => 'content',
'type' => 'textarea',

view raw
hosted with ❤ by GitHub


'label' => 'Lede',
'listItemImage' => 'dashicons-editor-textcolor',
‘inner_content’ => array(
'label' => 'Text',

view raw
hosted with ❤ by GitHub

In v0.2.0, we support both registration approaches. But in v0.3.0, we will remove backwards compatibility support for the old approach.

Additional changes in v0.2.0


  • It’s now much easier to click to select shortcode previews that use iframes.
  • We’ve added compatibility for the changes to TinyMCE views coming in WordPress 4.2.
  • Developers can now use a new color picker field for their shortcodes.

Bug fixes:

  • Checkboxes can now be unchecked.
  • IE11 compatibility.

Take a look in Github for all closed issues in this release. Want to get involved in development? Join us in an upcoming Slack chat.