Lasso is a new commercial plugin developed by Nick Haskins, founder of AESOP Story Engine, that adds a front-end editor to WordPress.
After activating Lasso, users are greeted with an introduction that explains an article CSS class is needed. This class is typically used to house the content within a WordPress theme. This is a technical step that may prevent some users from properly configuring Lasso, but since the article class varies between themes, it’s a mandatory step in the setup process.
Lasso has built-in support for several WordPress themes. If you’re using a supported theme, it will automatically display the correct CSS class to use.
If you’re a theme developer and your theme’s post container is dedicated to content without using any other markup, you should send an email to Haskins with your theme’s text domain and CSS class. He’ll include support for it within Lasso’s opening status wizard.
While trying to locate the article class, I discovered that I couldn’t close the animated walk through making it impossible to find.
While troubleshooting the problem, I deactivated all plugins and determined that one of Jetpack’s modules was causing the issue. I reactivated each module individually, but was unable to determine which one caused the problem.
Once I was able to close the walk through, I used Firebug’s element inspection tool to locate my theme’s article class. The theme I used to test Lasso is a child theme of Stargazer and its CSS class for content is .entry-content. After configuring the article class, I was able to use Lasso on the frontend of WordPress.
Although Lasso is compatible with many of the most popular themes, I encountered a CSS conflict in my child theme. As you can see from the screenshot, two of the buttons in the editor are displayed at the bottom. I notified Haskins of the issue and after some troubleshooting, we discovered a CSS conflict between my child theme and Lasso.
The solution is to add !important to a specific CSS class, but as Haskins explains, it’s not an ideal solution:
Ensuring that markup styles in Lasso are consistent across all themes is a challenge, especially when it comes to unordered lists. The editor uses semantic markup, with its own margins and paddings. Theme styles will sometimes override this causing un-desired visual issues.
We can combat this by declaring !important, but this is a bad practice and will just upset developers who want to theme Lasso. In the end, we’re left with dealing with these issues as they come up through our support channels.
Lasso only shows up when viewing the single page view of a post or page. You can edit content already published or use it as the primary editor to create content when previewing a draft post. Lasso’s main menu has three buttons, edit post, post settings, and add post.
- Post settings gives you the option to switch the status of a post from draft to publish. You can also change the URL slug.
- Add new post allows you to create a new post.
- Edit post activates the editor.
When Lasso creates a new post, it automatically displays it on the frontend of WordPress. However, you can’t change the category or tags of a post using Lasso. This is something I’d like to see added to the post settings as it would come in handy, especially when creating new posts.
To edit content, you can either highlight words and click a formatting button or use keyboard shortcuts. One major drawback is that you can’t add images or media to posts. However, you can edit and manipulate media from the frontend if it’s already in a post. When I tried to edit an image, the buttons turned into unrecognizable codes.
When editing a post, there are two buttons on the bottom right portion of the screen. Depending on whether it’s a draft or published post, you’ll see a save and publish icon. I think these icons are too far away and should be integrated into the editor.
Wait For Lasso 1.0
Lasso is a beta product with plenty of things that need to be addressed before hitting 1.0. Haskins is aware of the issues I encountered and assures me they’ll be fixed in future versions. Now that it’s available for purchase, he plans to iterate quickly and release updates as they’re fixed.
Lasso is $129 for one site and includes 12 months of updates and support. I expect plugins at this price point to be polished and nearly bug free. Although none of the bugs I encountered prevented me from using the editor, I recommend waiting on 1.0 or later.
Great write up Jeff, although this only covers the text-editing feature of Lasso, and doesn’t go into the drag and drop capabilities, or real-time Aesop Story Engine component editing.
I’d like to add that adding media components is done with Aesop Story Engine. With this free plugin activated, it gives you 13 media components that are fully drag and drop within the article. Without Aesop Story Engine, Lasso is a front-end text editor.
Developers can also filter the restriction level and use it anywhere. By default, it’s limited to single posts, pages, and custom post types, but can be extended to custom fields as well.
Despite the theme conflicts that you came across, we’re pretty confident it’s stable. We’re launching as a beta (if you remember, Velocity Page took the same approach) so that we can better understand what our users want. Hence, many requests for adding categories. We viewed this as a content management task (not an editing task), however we’re quickly finding out that users want this. And we’ll iterate accordingly.
But if everyone waits until 1.0, as you recommend, iterations will be slow to come.