• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To See The WordPress Blocks Outlines

Bhagwad Park

Published on: July 19, 2021

Categories: WordPress 0

WordPress Gutenberg changed the focus of the editor from writing, to “page building”. While a lot of people including myself hated it at first, its benefits have begun to grow on me. And with the bugs ironed out, I can unequivocally say that it’s far better than the original editor. Now I use blocks myself all the time within pages, allowing my content to be a lot more than just words. However, sometimes the elements get cluttered up too densely. I would like to see the WordPress blocks outlines while making changes and assigning CSS classes. Luckily, there’s an easy way to do this.

The Problem – No Block Outlines

The problem came into stark contrast for me the other day when I was creating content that was supposed to have two columns. I was writing an article comparing two products and wanted to show the features side by side.

The problem came when I wanted to style the columns. I wanted to write CSS targeting the entire block – both columns at once. But because the outer layer was so closely linked to the inner layer, it was hard for me to select what I wanted. More than once, I’ve made the mistake of applying the CSS class to the wrong container, leading to weird styling results.

For page builders who want to utilize Gutenberg’s potential to the maximum, the problem is even more severe. With all the blocks and nested content floating around, it’s necessary to be able to see which block is currently on focus, what its classes are, and which block resides under the mouse.

Using the Wayfinder Plugin

A new plugin on the WordPress repository released 4 days ago seems to fit the bill. You can download it here from wordpress.org or activate it directly on your site. When you download and install it, it takes effect immediately with no further action on your part.

Here’s a screenshot of how it looks with the plugin activated when you’re editing a post with a lot of nested blocks. I’ve removed the class names so that you can see the plugin in action more clearly:

Blocks Outlined in WordPress
Blocks Outlined in WordPress

Here you can see I have a two-column layout, and within each of them, I have a paragraph and a list. The outlines clearly show where one starts and ends. By moving your mouse or cursor, you can easily select the one you want. This makes it easy to assign individual CSS classes for more sophisticated styling.

Simple Settings to Show/Hide Info

In the WordPress Settings dashboard, you can find the settings for Wayfinder. They’re pretty simple. Here’s a screenshot:

Wayfinder Blocks Outline Settings
Wayfinder Blocks Outline Settings

For the first screenshot, I had unchecked the “Display block classes” box because it can get quite cluttered. But for debugging purposes, it’s quite useful as you can see at a glance which CSS styles apply to each nested block. If you want a clean look, you can even disable the block type display, since the outlines will likely be good enough for you to see where the blocks start and end.

This can be one of those plugins that you activate only when necessary. Say you’re working on a page and have to deal with some complex block formations. Just activate the plugin, finish your design, and then de-activate it when done. This will appeal to those who like to keep the plugins on their site to a minimum. It won’t interfere with your site performance when not needed.

A cool thing about the plugin is that it’s tiny – really really tiny. This version clocks in at just 3.1 KB, which is a pittance in today’s world of megabyte-sized files. So go ahead and use the Wayfinder plugin. It’s a highly specific tool and it gets the job done perfectly!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA