Admin Bar 5.4

Admin Bar PRO now includes two new plugin integrations:

The SEO Admin Bar Widget shows SEO meta content for the current page.
The Navigation Admin Bar Widget shows breadcrumbs for all of the navigations that the current page has been selected.

SEO and Admin Bar Widget Twig Config

Admin Bar PRO now supports sites that use the SEO plugin to manage their site’s SEO. The SEO widget shows the following fields:

og:image
Title
Description
Canonical URL or entry URL

Admin Bar 5.4 introduces a new option to configure Admin Bar Widgets on a per-page basis via the {{ adminBar() }} Twig function. There is now a widgets param that you may pass in and it follows this pattern: widgets.[PLUGIN HANDLE].[CONFIG PARAM].

For example, by default the SEO widget will assume your SEO field has a handle, called seo, but you may have a different handle for your SEO field or you may have multiple SEO fields for different entry types in your project. To set the SEO field handle for the entry passed into Admin Bar you may add the following config:

The Twig file used to embed Admin Bar

{{ adminBar({
  entry,
  widgets: {
    seo: {
      handle: 'seoPluginFieldHandle',
    }
  },
}) }}

In this case, the SEO widget will look for the entry.seoPluginFieldHandle field and will use its data to populate the SEO preview.

The SEO widget is currently the only widget that supports the new widgets param, but as new config options are added they will be documented on the Admin Bar README.

Breadcrumbs and Managing Navigations

The Navigation widget lists all of the navigations that include the current page entry. Each item in the list shows a breadcrumb to the current page and lets you quickly navigate to parent pages.

Hovering over a navigation title will show a settings gear. Clicking on the gear will take you to the edit page for that navigation.

Checking for Admin Bar to Render

Admin Bar does a set of checks to determine if it should be rendered onto the page. It checks to see if there is a logged-in user, makes sure Admin Bar isn’t shown in Live Preview, and a few other checks for specific contexts. This is all done within the {{ adminBar() }} Twig function to keep things simple for developers.

In 5.4, the new adminBarCanRender() Twig function was added so you can now use the same checks that Admin Bar does so you can make adjustments to your Twig template based on if Admin Bar will get embedded onto the page. This can be useful if you wanted to tweak CSS or add classes or attributes onto a part of the page near where Admin Bar is loaded.

If you’re using Admin Bar’s Twig methods to optimize CSS and JavaScript you can use this check to make sure Admin Bar’s assets aren’t loaded unless you want them to be. For example you can do this:

The Twig file used to embed Admin Bar

{# Embed Admin Bar but don’t load default CSS and JavaScript files #}
{{ adminBar({
    entry,
    useCss: false,
    useJs: false,
}) }}

{% if adminBarCanRender() %}
    {# Load Admin Bar Component’s CSS file #}
    {% css adminBarCssFile() %}
    {# Load custom CSS from settings and CSS that belongs on the page #}
    {% css adminBarOnPageCss() %}
    {# Load Admin Bar’s JavaScript #}
    {% js adminBarJsFile() %}
{% endif %}

🏆🗺️