Quick Tip: Breadcrumb Bar for WordPress Block Navigation

As I transition WordPress sites to the block editor, one of the most challenging issues I’ve had is with nested blocks.

For example, in the GeneratePress theme, I use Generate Blocks to create complex layouts with rows and columns.

Which for some designs means I’ll create a content section for a page with a Container block.

Then I’ll add a Grid block.

Within each grid item, I’ll add paragraphs, lists, or images.

Prior to WordPress 5.4.2, I struggled to select the Grid or Container blocks to customize padding and margin.

I would inadvertently select the Grid block when I really wanted the Container block.

It was one of the most frustrating issues I had with converting sites to the block editor.

Until WordPress 5.4.2 was released.

One of the less well-known features of the WordPress 5.4.2 release, the breadcrumb bar for block navigation has been part of the Gutenberg plugin since October 2019.

When the feature was merged into core for WordPress 5.4.2, WordPress users finally had a quick way to select and edit nested blocks from the breadcrumb bar at the bottom of the page.

Users can select any item in the breadcrumb bar to navigate to that block.

breadcrumb navigation for nested block for document, container, grid, container, paragraph.

For designers using nested blocks, the breadcrumb bar is a huge enhancement!

For me, no more trying to select a Grid block only to get the Container block instead.

Phew!

Have you discovered the block breadcrumb bar?

Photo of author

About the Author

Deborah Edwards-Oñoro enjoys birding, gardening, taking photos, reading, and watching tennis. She's retired from a 25+ year career in web design, usability, and accessibility.