Cancel

Jeff Chandler

Note by Slocum Studio is a Real-Time Customizable Text Widget

Note by Slocum Studio Featured Image

Note is a simple and easy to use widget for editing bits of text, within the widget via the customizer developed by Slocum Studio. Although you can edit text widgets in the customizer, it’s a boring experience and requires HTML knowledge to format text. Note enables you to add and edit content live from within the widget similar to a frontend editor.

Note Widget in Action
Note Widget in Action

From within the customizer, you can add a Title, apply a CSS class, or click the button which is like a shortcut to edit the widget’s content. One thing I noticed immediately is that applying a title doesn’t match the behavior of other widgets in WordPress. As you can see in the screenshot, the widget title doesn’t inherit the same style as the others. According to Matt Medeiros of Slocum Studio, this behavior is intentional.

We wanted the writing experience to be as pure as possible when using Note. We decided to omit displaying widget titles as part of that experience in the first version, but plan to revisit that in an upcoming release.

It may be intentional, but it gives me a sense that either the widget or my theme is broken. At its most basic level, Note should function the same way as a default text widget. Hopefully in a future version, the team will change the behavior to match that of a regular widget with an option to show or hide the title.

Not only can you edit the widget’s content without visiting the backend, you can do it in style. Simply highlight text within the widget and a toolbar shows up allowing you to format the text. Note has a What You See Is What You Get interface. This is convenient since you no longer have to edit content, click save and publish, then refresh the page to see the changes.

Note Toolbar
Note Toolbar

One feature missing from Note is the ability to add media, but Medeiros confirmed it will be added in a future release. While testing Note, I encountered a bug that added a / to every word that has an apostrophe. For example, I’ve turned into I/’ve. The bug presents itself when the customizer is open and a page refresh occurs. The team is aware of the bug and is working on a fix.

Overall, I like what I see from Note. Once a few bugs are squashed and the ability to display the widget title is added, it will be a great replacement for the default Text widget. Note is available for free on the WordPress plugin directory. You can also follow development of Note on Github where you can also file bug reports and contribute patches.

Category:
Tags: , ,
9

9 responses to “Note by Slocum Studio is a Real-Time Customizable Text Widget”

  2. For those asking themselves what’s the difference between this and other editor-in-widget plugins out there, like BlackStudio TinyMCE, I took it for a quick test drive. There are two main differences I could see:

    1. The BlackStudio TinyMCE editor appears in a panel on the left beside the widget in the customizer. The updates are still automatic (no refresh required), but there is a distinction between the editor where you type and the content block where your type appears on the live preview. By contrast, Note has no separate editor. You type straight into the content block on the live preview. It is a more immediate experience but can be a bit disorienting depending on your expectations in the customizer.

    2. Note is not a full HTML editor. It offers a small subset of markup options (just those in the screenshot above). I can see that being useful for client projects, where I don’t want them to go crazy. But having the full TinyMCE editor, including the Add Media button, is also pretty useful.

    At first glance, I wasn’t sure why this warranted a post on WP Tavern. But now I can see how the streamlined UX approach Note is working towards has something unique to offer for editing small snippets. The only real barrier I had was figuring out how to find the markup buttons when typing. Perhaps they could implement a similar approach as the Focus v2 feature coming in 4.1 and display the markup options when the mouse goes hunting.

    Create forum topic from comment
    Reply

    • Thanks for sharing your thoughts, Nate.

      I’m glad you found the distinction and the use case for Note. Indeed, it is (hopefully) a super-simple and unobtrusive experience for writing bits of text and copy throughout your site. It’s important that the experience is as natural as we can get it, directly in the context of your site’s design/layout.

      For instance, say you’re on a 13″ laptop and your site is responsive. Chances are, when the customizer is loaded, your site is going to shrink and fit the condensed view while you’re editing content. This means your text area display is most likely condensed and only snaps back to original size once you’re done. Sure, you can dock the customizer pane, but then you lose the ability to edit the text (the purpose of being in the customizer!)

      A small nuance for sure, but again, we’re shooting for the most pure experience we can get.

      I like your idea about improving the toolbar — something we’ll certainly look at. Thanks again for checking it out!

      Create forum topic from comment
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Discover more from WP Tavern

Subscribe now to keep reading and get access to the full archive.

Continue reading