Hello, Admin Bar PRO

Last year I rewrote part of the Craft CMS plugin, Admin Bar, to solve some major CSS clashing issues and to make it easier to use the toolbar portion of Admin Bar across headless front-end frameworks. I published this blog post that outlined the problem and my solution and in writing that post I did a short retrospective on where the plugin began. I mentioned a feature, called Admin Bar Widgets, that never took off due to it relying on getting other plugin developers to add hooks and templates to their plugins.

I’ve always liked the idea around the feature, but that implementation wasn’t right. On top of asking developers to add and maintain something in their plugins, there remained the issue of CSS from your front-end templates overriding the widget CSS and making a mess of them.

As we’re coming up on 10 years of Admin Bar being available as a free Craft CMS plugin, I’ve decided to introduce a PRO edition that brings back Admin Bar Widgets in—what I think—is the right way to do it. Read on to find out more.

Admin Bar Widgets integrate Craft CMS and other Craft CMS plugins to display links and statuses related to the current page you are on in your Craft CMS site. For example, there’s an SEOmatic widget that shows you the meta information for the current page, and another widget that tells you how many times the page has been visited—as collected by the View Count plugin.

Just like everything else Admin Bar, widgets are all about flexibility. Widgets are all opt-in by default, so you can head over to the Admin Bar Plugin Settings page on an environment that lets you make admin changes. From there you’ll see a new section, called Admin Bar Widgets:

If you haven’t picked up the PRO edition yet, this section will be disabled but you’ll still be able to see what widgets will be available to your site. If a widget is an integration for a Craft CMS plugin, it would show up in the list of available widgets when the plugin is both installed and enabled for your project.

If Admin Bar supports a plugin that you don’t have installed on your site, it will appear in a list of available widgets in the right-hand column.

Enabling a widget and then hitting the Save button will update the Admin Bar in the Preview section at the top of the page. The Preview area will try to find an entry on your site that has a URI and it will use that entry to show you what the Admin Bar would look like on that entry’s page. A random entry is loaded every time the Settings page loads to show a variety of Admin Bar scenarios.

Now your enabled widgets will appear and you can get a feel for how they will work on your site. Here is a rundown of all of the widgets that will be available at the launch of Admin Bar PRO:

The New Entry widget is a quick way to create a new entry. The logged-in content author will see a list of entry sections that they have permission to create, and by clicking on one of the links they will be brought back into the CMS and onto the New Entry edit page for that entry type.

The Guide widget displays a list of guides that have been assigned to that entry in the Guide Organizer. Clicking on one of these links will bring you to the page for that guide in the Control Panel.

Below the list of guides, there is a link to the CMS Guide page in the Guide Control Panel section.

The SEOmatic widget shows you a preview of SEO meta data for the current page. This shows these SEO values for the entry:

• The schema.org Main Entity
• og:image
• Page Title
• Page Description
• Canonical URL

The Sites widget shows you the current Craft CMS Site. If the page you are on is propagated to other Sites, a menu will appear with links to that page on all related sites.

This can be an easy way to jump between your project’s Sites.

The Blitz widget shows the Blitz cache status for the current page you are on. If the page is cached, clicking on the status will show the date and time the page was cached.

The View Count widget displays the amount of times the current page has been viewed—as collected by View Count.

All of these widgets have a default view that’s meant to keep them compact on the Admin Bar toolbar. There's also another setting on the Admin Bar Settings page that enables more verbose labels that show the title of the widget.

The core of Admin Bar will continue to live on in the free LITE edition. The PRO edition will be focused mostly on the Admin Bar Widgets feature and integrations with third-party plugins.

The PRO edition will be introduced at $19 and you can upgrade to it on the Craft CMS Plugin Store. Moving back down to the LITE edition can be done at any time.

What is different about Admin Bar where it makes sense to re-introduce the Admin Bar Widgets feature?

Aside from managing integrations from within Admin Bar now, the biggest change is how Admin Bar Widgets utilize the Shadow DOM in Admin Bar Component to isolate them from the CSS on your front-end templates. While the widgets are themeable via Admin Bar’s CSS Custom Properties, you should no longer see your CSS making a big impact on the rest of the widgets’ content.

Speaking of integrations, Admin Bar PRO is based around working well with third-party plugins, so it’s important that when a plugin gets updated it will not break Admin Bar or any other portion of your site’s front-end. Admin Bar Widgets will check plugins for their installed version and use that info to decide which version of its widget should be shown.

If a plugin is updated to a major SEMVER version (for example, from 1.0.0 to 2.0.0), the widget that requires it is then disabled by default. Once Admin Bar has been tested with the new version then an update to Admin Bar will re-enable the updated plugin’s widget.

Admin Bar Widgets use a feature that was recently added to the Admin Bar Component, utilizing HTML popovers and CSS anchor positioning. As of this writing, popover support is widely available across evergreen browsers, however, anchor positioning support is limited to Chrome and Chromium-based browsers.

So in Google Chrome, when you use the SEOmatic widget you should see something like this:

In browser that don’t yet support anchor positioning, the popover will be displayed in the center of the screen and a mask will blur out the page behind it. So in Safari or Firefox, you may see the SEOmatic widget look like this:

Once anchor positioning support is brought to these browsers the affected widgets will automatically change their behavior to match the first screenshot.

More widgets are planned for future releases, and I’d love to hear from other plugin developers who would like to integrate Admin Bar with their plugin. If you have an idea for a new widget, please start a new post on the Admin Bar GitHub Discussions page or contact me.

Thanks to everyone who has enjoyed the last 10 years of Admin Bar and I hope the next 10 have just gotten much more useful for you and your clients.