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.
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.
Enhancements to Post Elements editor
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.
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.
- Checkboxes can now be unchecked.
- IE11 compatibility.