How to use Document Outline Option in the Gutenberg Editor

One of the nice new features of the Gutenberg Editor is the document outline. This option provides a way to organize your content 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.

Using the Document Outline in the Gutenberg Editor

    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. To the right of the Gutenberg editor, you will see the options for the document that you’re editing. Make sure that the column is set to Document. Click on Document if necessary. If you don’t see the column, click on the gear icon in order to make sure the options appear.
    4. Scroll down to the Document Option in the right column. If it is not showing, click on the drop-down arrow in order to expand the section.
    5. Note that entries for the Document Outline will not be displayed if there are no heading entries in your page or post. In order to add an outline section, simply add a header to your page or post. The top hierarchy of the document outline is the h2 header. The h3 and h4 header types add subsections to the Document Outline.
    6. Here’s a series of screenshots that demonstrate how it works:H2 header – This is the top tier of the document outline. If you don’t fill it in at first you will the outline section indicating (Empty Heading)

       

      H3 header – Second level heading in the document outline

       

      H4 header – Last level heading in the document outline

      Note that if you place a header in the wrong level, then you will see an indication in the right sidebar under the Document Outline indicating the Incorrect 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.

Leave a Reply