Version 9.0.0 of both the basic version and the PRO version of Advanced Sidebar Menu are now available with support for Gutenberg blocks!
Gutenberg blocks documentation may be found here.
A Long Road To Get Here
The first version of the Advanced Sidebar Menu plugin was released back in 2011. Over the past decade literally hundreds of tweaks and improvements have been made to the UX and functionality of the widgets to version 8.9.
Turns out, if you want to take massively intuitive widgets with dozens of options and turn them into blocks while keeping all the existing features your users love, you are in for a long project.
We spent thousands of hours designing, building, testing, and documenting the new blocks. All the while excited and heartened to be bringing it to life. We couldn’t be happier with the end result.
Manageable Options
Our widgets have a lot of form real estate to use so having many options fit within the expected UX is no problem. Blocks on the other hand support previews, which when done correctly, are a nice touch for users.
The first challenge was, “How do we fit all the options in the block UI without turning the preview into a form?”
We opted to use the Settings Sidebar to hold functionality settings related to menu structure so users can setup their menu without the preview being blocked in any way. We organized settings into intuitive panels which automatically open if their settings are enabled yet stay closed if not being used. At first glance you may immediately see settings affecting the menu without being distracted by things you don’t care about.
As the style options were simply too large to keep in the Settings Sidebar without creating an undesirable scrolling experience, we put the style settings within a dropdown on the block toolbar. This provides 2 UX traits:
- Style options are available via the toolbar so you don’t have to open the Settings Sidebar once your menu structure is set up.
- You can see all style options at once so related settings are obvious.
Ultimately we ended up with a UI that looks like this:
Custom Preview Experience
Out of the box Gutenberg supports using a ServerSideRender component to display what the block will look like on the site without building the markup within the React app. This allows customizing the rendering of the block without updating the post content. An absolute must for us to provide future updates to our users.
One limitation of the ServerSideRender is it does not send the context of the screen it’s being used on when rendering. As all our menus generate based on the current screen, the previews did not work out of the box.
We created our own preview experience which is context aware and shows you exactly what your menu will look like while editing.
Translations
As you probably could have guessed, all our blocks are written completely in TypeScript. This is really great for our developers to make sure updates are delivered reliably and don’t introduce side effects in the future. The reason I mention this, is the tools available for WordPress translations do not support TypeScript.
Of course, that didn’t stop us from using TypeScript based translations. We created our own tools for extracting and generating translations based on TypeScript sources.
We continue to maintain full translation support out of the box for the following languages:
- English (en_US)
- French (fr_FR)
- German (de_DE)
- Spanish (es_ES)
New Requirements
To provide the new features in a maintainable way we updated the minimum requirements of this plugin. Going forward your site must meet at least the following:
- PHP 7.0+.
- WordPress Core 5.8+.
Based on data from plugin updates, our active user base is already something like 97% qualified so this is most likely something you don’t need to worry about. The WordPress admin will let you know if you do.
Conclusion
We know you are going to love the new Gutenberg blocks! As this is our first version of them, please submit any feedback and we’ll use it to improve future versions.