Block Minimap

Long posts get hard to navigate in the block editor. Block Minimap adds a sidebar that draws the whole post in miniature, so you can see its structure at a glance and move around it quickly.

• Every block gets a shape. Headings, paragraphs, lists, quotes, tables, code, images, galleries, media and text, buttons, social links, embeds and more each render as a small sketch of what they look like in the post. Third party blocks without their own shape fall back to their block icon and title.
• Nested blocks show the document tree. Groups, covers and other container blocks draw their inner blocks inside them, and Columns sit side by side the way they do in the post.
• Scroll sync. The minimap and the editor canvas stay scrolled to the same content. Scroll the post and the minimap follows; scroll the minimap and the post follows.
• Compact sizes. Below 100%, body text draws as gray bars the length of each line while headings stay readable, so a long post fits in fewer sidebar screens. Automatic picks a size from the length of the post.
• Viewport spotlight. A frame marks the part of the minimap visible in the editor and dims the rest. Drag the frame to scroll the post.
• Safe previews. Custom HTML, shortcode and classic blocks render as escaped source rather than live markup.

Open the minimap from the Block Minimap item in the editor's Options menu. Development takes place in the GitHub repository. Issues and pull requests are welcome.

1.2.0

• A size control for the minimap: Automatic, 100%, 2/3 and 1/2. Below 100%, body text draws as gray bars while headings stay readable.
• A spotlight marks the part of the minimap visible in the editor and dims the rest, drawing it as a miniature of the editor. Drag it to scroll the post, or turn it off with Highlight visible area.

1.1.0

• Minimap representations for all block types, including third party blocks.
• Nested blocks render as the document tree, with Columns side by side.
• The minimap and the editor canvas scroll together: scrolling either one scrolls the other to the same content.
• Quotes, tables, code, galleries, media, buttons, social links, embeds and document chrome each render in their own shape.
• Custom HTML, shortcode and classic blocks render as escaped source rather than live markup.

1.0.1

• Confirm compatibility with WordPress 7.1.
• Declare the editor script dependencies (lodash, wp-components, wp-data, wp-edit-post, wp-element, wp-i18n, wp-plugins). Without them the minimap failed to load with "lodash is not defined".

1.0.0 Added

• Initial plugin release 🎉