How to use Document Outline Option in the Gutenberg Editor

Two features of the WordPress editor are the document outline and block navigation. The document outline is located under the Content Structure icon in the top left corner of the editor. Using the document outline you can see how your content is organized using headers.  They also provide a way for you to jump to different parts of the content without having to scroll through all of it to find a specific section. This is especially helpful when dealing with a large page or post with long paragraphs or large sections of text. We will show you how to use the document outline option in the Gutenberg editor and provide examples of how it works.

Note that the default editor has been replaced with the new Gutenberg editor as of WordPress 5.0.

Using the Document Outline Option in Content Structure

  1. Log into the WordPress Administrator if you’re not already in it.
  2. Open your page or post (or create one if you’re starting a new one).
  3. In the top left corn of the you will see the a circled “i”.  Please click on this icon.  If you hover over it, you will see that it is labeled Content Structure. When you click on this option you will see a small pop-up window appear giving you information about your page or post (if there is any content in it). The first line will summarize your Page or Post giving you the number of words, headings, paragraphs and blocks.  Underneath that will be the Document Outline.
  4. The Document Outline provides an outline of your content based on a title and headings used in your post/page. It is important that you use headings in order to keep your content orderly. If you click on a header, the editor will jump to that section within your post or page.

Using the Block Navigation Option

 

  1. The other tool that is provided is the Block Navigation option. To find this option look in the top left corner of the editor.  To the right of the circled “i” you will see an icon made up of 3 lines that look like a bulleted list. Click on that icon to see the Blocks that make up your post or page.
  2. If you click on a block the content in the editing column will jump to that section.  If you use specific blocks you will be able to see them in the list and then jump to that section to help with your editing tasks.

 

 

 

 

 

Identifying Errors in Header Order

The Document Outline also aids in identifying problems with the order of your headers.  In the screen shot at left you can see an example of headers being out of order.  When an error occurs, the header will be highlighted and an error will appear underneath it that says, “<em>(incorrect heading level)</em>”.  To correct it, simply go to the block with the incorrect header and choose the correct heading level.

 

 

 

This completes our tutorial on using the Document Outline feature in the Gutenberg editor. For more information on using the Gutenberg editor, check out our article on using Reusable blocks in Gutenberg.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

Leave a Reply