Identify and Select Blocks via the Wayfinder WordPress Plugin

Christopher John, a Seattle-based designer and UX engineer, released his first project to the plugin directory yesterday. Announced via Twitter to high praise, Wayfinder is a block outline solution for the WordPress editor.

Like similar plugins, the goal is to make it easier for end-users to select nested blocks, which can sometimes be tough to pin down. Wayfinder outlines each block in the editor on hover. It then displays the block name at the upper left of the box.

My favorite feature that you will not find elsewhere is the addition of each block’s classes at the bottom right of the box. This makes it easy for designers or users who want to quickly find a class for styling.

Outline of a heading block between two paragraphs via the Wayfinder plugin.
Outline of a Heading block.

Users can also enable or disable the pieces of the UI they want to appear via the plugin’s setting screen. However, any changes affect all of the site’s user experiences. Currently, there are no per-user settings.

At first glance, the plugin seemed to work great. The hover outline experience felt smooth, and I did not need to change the default options. Wayfinder almost seemed to be everything one might look for in a block-outline solution. It was besting existing plugins in nearly every way.

However, things soon began rolling downhill when writing a typical blog post with nothing other than Heading, Paragraph, and Image blocks. I first noticed that I could not type the same number of words as usual on one line. My perfectly-tuned typography was breaking sooner than it should have. Spacing between paragraphs seemed a bit too large. My wide-aligned images were just a little smaller than usual.

The user experience still felt good until this point, but the little oddities were stacking up. Something was not right. The plugin had been showered with praise on Twitter and already received three five-star reviews in its first 24 hours. Maybe my custom theme was the issue. However, similar problems arose when testing several others, such as Twenty Twenty-One, Nutmeg, and Eksell — each a well-rounded theme catered to the block editor.

As clean as the plugin’s UI is, it more often than not wrecks the theme’s default block spacing. This becomes more noticeable as users begin adding nested layers of blocks.

The problem is the plugin adds 18 pixels of padding around every block via its stylesheet.

.wp-block:not(.block-list-appender) {
    position: relative;
    outline: 1px dashed transparent;
    padding: 18px;
    overflow: visible !important;
}

To the untrained eye, this may not be a visible issue in many cases. It will affect each site differently, but 18 pixels of extra padding on every block will undoubtedly mess things up to some degree unless the theme itself uses that exact same spacing in its design.

The more noticeable issues are seen with blocks like Social Icons:

Enlarged social icons when using the Wayfinder plugin.
Holy moly! Those are some gigantic social icons!

But, even something as basic as a List block can be misaligned:

Viewing a list block in the editor where the Wayfinder plugin's padding misaligns it.
List block shifted out of alignment.

Theme authors can write custom CSS to overrule the plugin’s padding. However, the last thing the WordPress community needs is a specificity war between themes and plugins. Themers already have to do this enough to wrangle blocks now.

Removing that one padding rule from the plugin’s editor-style.css killed 99% of its issues. Afterward, things were running like a well-oiled machine.

As a developer, I would explore outline-offset for spacing between the block and its outline, maybe cutting that 18px down a bit. Because outlines are not a part of the CSS box model, it would not affect spacing. Adjustments may be necessary on a per-block basis, especially when those blocks are nested or small (e.g., Social Icons, Navigation). It would carry its own challenges but should be a less destructive course.

To a lesser extent, the plugin’s overflow rule breaks the theme design from time to time. Its position and outline rules could overrule some edge-case block styles too, but they are necessary for the plugin to actually do its job. In particular, I could see positioning being problematic with sticky headers as we get into site editing.

The only other issue might be themes that use ::before and ::after pseudo-elements on blocks, but the plugin also needs to overwrite those to display the block name and classes list. This is likely another edge case.

Despite the issues, the plugin is ahead of the pack at this point.

Gutenberg Editor Full Width Blocks Border (a bit of a mouthful), another recent plugin to offer similar functionality, breaks custom theme design across the board. It does accomplish the job of making blocks easier to select, but the sacrifice of a WYSIWYG is not worth it.

The Editor Block Outline plugin has been my go-to recommendation for a while. It has a few design issues of its own, but some of those are adjustable on a per-user basis. However, as of late, it has made the editor feel sluggish. Plus, its misuse of the WordPress admin notice system for Twitter followers makes it something I’d prefer to steer clear of.

EditorsKit has a similar “block guidelines” feature that uses a box-shadow instead of padding and an outline. It does not muck up most theme layouts with that technique. However, I have hit other style conflicts with the plugin. Plus, EditorsKit is overkill for users who simply want just one feature.

That leaves us with Wayfinder. Warts and all, it is the best standalone option right now. Maybe that’s not saying much, but it is saying something. This is a feature that is hard to nail down. I do not envy the developers who are trying to make miracles happen.

It is sure to please many who have been on the lookout for a block outline solution. It is in a position to pull farther ahead of the competition with its relatively solid first outing. With more thorough theme testing and a bit of adjustment to its approach, it could be even better. I am eager to test future iterations.

14

14 responses to “Identify and Select Blocks via the Wayfinder WordPress Plugin”

  1. Nick says:

    Thanks for the heads up for the 18px padding. I do agree that getting rid of it things look better.

    That said, the real question here is: Why aren’t block borders in the core?

    Report

  2. Li-An says:

    Great question from Nick. I just begin to work with Gutenberg and searching for blocks in the editor is quite boring.

    Report

  3. This is a life saver for me. I literally pull out my hair trying to select nested blocks in the block editor. Thanks for the heads up.

    Report

    • Hi Trishan! I’m sorry to hear you struggled to select nested blocks. To address this, the Gutenberg team has been working on enhancing the user experience with improvements such as the List View:
      https://make.wordpress.org/core/2021/06/09/core-editor-improvement-improve-your-workflow-with-list-view/
      It was first introduced in Gutenberg 10.7 and will be included in core in WordPress 5.8. Please let us hear your feedback on it :)

      Report

      • Nick says:

        Very true about the list view… also we have the breadcrumbs to navigate the nested blocks as well.

        However, they are not as helpful in having the visual borders right inside the editor, and with the listed nav. menu it’s much less convenient for screen resolutions are less than 1920px, as it squeezes the content when the list view is open.

        We have to admit though that the list view is much better now… I just wish we could rename the labels of the items in the list view, and move the blocks around right from within the list view as well, you know, like most decent page builders…

        Report

        • Hi Nick! Thanks for the feedback, we will take it into account to keep improving the List View. As an example, Gutenberg 11.1, to be released tomorrow July 21st, will allow dragging & dropping items directly in the List View.

          Report

      • Steve Grant says:

        The updated list view is a much much better IMO.

        The three further improvements I’d like to see are:
        1. To enable drag& drop re-ordering and nesting from within that list
        2. A contextual menu on items allowing copy / duplicate. Currently keyboard commands for copy/paste sometimes work, on some items (paragraphs, but not groups or columns for example) leading to a sense of functional confusion and disconnect “am I doing anything?!”.
        3. A tear-off side panel floating window variant, which is re-sizable. For cases when the list is long, and the editor needs to focus on one small section.

        Report

  4. Jamie Warburton says:

    Gutenberg plug-in has a block navigator in the left sidebar now, so finding blocks is now very easy. No need for these plugins anymore

    Report

    • Benjamin says:

      Big issue is for those editing content on the go with smaller screens, the precious real-estate of the block editor canvas gets EVEN smaller with the fly-out left sidebar of the Outline list view block navigator. It seemed to be perfectly fine as a drop-down in the current location. I really don’t like the new panel and it makes content creation even MORE cramped when using the Block Editor

      Report

  5. Stiest says:

    Great job Christopher, i think am going to try this plugin.

    Report

  6. Wow, thanks for reviewing my plugin, Justin! Lots to think about here and I’m definitely going to keep working on this to make it better. Your suggestions are exactly what I needed for the next update.

    Report

  7. Version 1.0.2 is a “feedback update” based on this review!

    I’ve improved the display and styling for the following block types: columns, lists, paragraphs, images and social buttons.

    I tried to minimize padding as much as possible, but yeah, some is needed to separate and make space for the Wayfinder labels.

    Report

  8. Serafín says:

    I love this! Will try it right away.
    I’m surprised something like this is not core in Gutenberg. The experience of trying to select the right block is terrible when you have columns, groups, etc.

    Kudos to the author

    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: