Block Navigation
Explore this tool and check the official listing for its latest features and requirements.
About this tool.
Demo – Documentation – GitHub
Block Navigation provides a sidebar with the current post/page’s blocks and some tools to facilitate the editing process in the new Gutenberg editor.
Features
The features are especially useful for nested blocks – blocks that are inside parent blocks which are difficult to select or move in the editor.
Inside the panel several utilities are included to enhance the UX, such as:
- Dragging blocks to a different location
- Moving blocks by click
- Selecting blocks
- Easily recognising the block from a small snippet of the block’s content
The user can select a dark or light color scheme, from the multiple included.
Plugin and Theme developers
The plugin also provides some features for Plugin and Theme developers, such as:
- Click and Copy the block’s clientId
- Click to console.log helpful data from the block
Usage
Inside the Post editor on the right side of the top Block’s Toolbar the plugin icon/button should appear (if not, please read the FAQ below). Click the icon/button to open the plugin sidebar.
Credits
Images from the readme banner and screenshots belong to Charles Postiaux .
Getting started.
Installation from the WordPress admin.
- 01Log in to the WordPress admin and navigate to Plugins > Add New.
- 02Type “Block Navigation” in the Search field.
- 03In the results list Block Navigation plugin should appear, click Install Now button.
- 04Once it finished installing, click the Activate button.
- 05That’s it, now you can go to any post where Gutenberg is enabled and start using the plugin.
Frequently asked questions.
I do not see the plugin icon in the post editor
Alternatively the Plugin can be opened from the Show More button (the 3 dots on the right side of the Editor Top Bar). Click the More button and inside the menu list click on the plugin name “Block Navigation”.