Private Note-Taking and Journaling With the Hypernotes WordPress Plugin

Ella van Durpe, a core WordPress contributor and software engineer at Automattic, released a note-taking plugin earlier today. Hypernotes is a simple custom post type that allows end-users to take private notes or serve as a journaling tool.

I have seen similar plugins in the past. I even began building one years ago before ultimately abandoning it for a simple Markdown solution in a private repository.

What makes Hypernotes unique is its handling of “folders,” which essentially work like categories. However, each folder gets its own sub-menu link under the Notes section in the WordPress admin.

Folder system for the Hypernotes plugin shown in the left WordPress admin sidebar.
Hypernotes’ folder system.

This more closely mimics other note-taking apps where users can switch between various folders to quickly find notes.

The code to make this happen is simple; the idea is ingenious. It is the sort of outside-the-box thinking I love to see from plugin developers.

There are a few trivial issues with it, such as the folder names not being highlighted when viewing their screens. However, that is a WordPress-specific bug. A simple dash before each folder name could spruce up the UI a bit too. They sit below the “All Notes” menu item, so it would create more of a folder effect.

On the whole, the plugin works well as a note-taking application.

WordPress post editor showcasing the Hypernotes plugin.
Writing a note in the WordPress editor.

The plugin description does have a security note for users who are wondering just how private their content is:

Only you will be able to see your notes within the WordPress admin, but the notes are NOT encrypted at the moment, so anyone with database access will be able to read them.

Hypernotes also ensures that no post is ever accidentally published for all the world to see. Under the hood, it automatically sets all notes to the “private” status. The plugin’s post type cannot be publicly queried on the front end either.

It is worth mentioning that the plugin does not create custom capabilities (permissions) for its post type and taxonomy. Any registered user on the site with the right post-editing capabilities can access others’ notes in the backend, such as people with the Editor role.

This is unlikely an issue given the nature of the plugin. I imagine the primary audience will be made up of solo bloggers who want a simple note-taking solution.

I ran into one not-so-trivial issue when I began trying out Hypernotes, believing my website was broken. This is usually because of a patch I am testing for the Gutenberg plugin or just one of its run-of-the-mill updates. However, the typical culprit was not to blame. After a half-hour or so trying to figure out why my theme styles were not appearing for Note posts, I finally cracked the issue.

Hypernotes disables all theme editor styles. The beautiful typography of my currently active theme was gone, which would work well with a note or journaling plugin.

This was easy enough to overrule with a few lines of custom code. If I was going to save a few quotes that I liked as personal notes, I at least wanted to do it in style:

Re-adding custom theme editor styles to the Hypernotes plugin and showcasing a quote in the editor.
Bringing back my theme’s custom quotes style.

The plugin also attempts to disable wide/full alignment and theme editor font sizes. The code it uses works for traditional WordPress themes but not for block themes, which have a different mechanism for registering such support. This was also one of the reasons it was tough to track down the issue. Everything else from my theme was working but custom editor styles.

I understand the idea behind removing support for those features. Themes design the front end of the site, and Hypernotes is purely a backend tool. However, I would rather see an option for letting the user control what gets disabled. Some theme editor styles would pair well with the plugin.

Disabling these features has other implications too. For example, all of my theme’s custom block style variations were registered and usable from the editor. However, because my styles were not loaded, they did not work correctly.

Another option would be for the plugin to provide its own editor styles. There would still be some complications going that route, such as the block style variations issue, but the plugin could become a beautifully designed note-taking app in its own right.

For a version 1.0 outing, I am a fan of the simplicity. More so, I am impressed with the clever method of handling note “folders.” I am eager to see how this plugin evolves over future iterations.

2

2 responses to “Private Note-Taking and Journaling With the Hypernotes WordPress Plugin”

  1. David Artiss says:

    Looks really good and I’m going to give it a whirl but… not yet. It’s worth noting that the plugin has a minimum requirement of WordPress 5.8, which isn’t due to be released until July 20th.

    Report

  2. Thank you! This plugin is something that I am and will continue to use personally for personal and work notes. It’s a good way for me to test Gutenberg every day. I might add an end-to-end encryption option option later on, but for most people it will just make the notes harder to access. I could add custom capabilities if there’s demand.

    I indeed disabled the theme styles, because it doesn’t seem desirable to have notes styled the same way as the front-end. I’ll refine the styling a bit in the future, but generally I’d like to keep them simple, similar to a note taking app like Apple Notes.

    Another thing that is worth mentioning: this plugin is meant to be used with the recently added Progressive Web App capabilities in Gutenberg (https://github.com/WordPress/gutenberg/pull/33102), which will hopefully be in the next Gutenberg release as an experimental thing. Would love to see more testing there. It allows the WP admin to be added as an app on iOS, Android and macOS (through Chrome), so it’s a lot easier to access the notes and generally writing with WordPress.

    Report

Newsletter

Subscribe Via Email

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

%d bloggers like this: