University of Wisconsin–Madison

Intro to the Block Editor

Last updated:

UW Theme 2.0 uses the WordPress Block Editor, also called Gutenberg, WordPress Editor, or Gutenberg editor, and is the new way of publishing content in WordPress. This guide provides a brief overview of the editor as you get started with the theme.

Visit the WordPress Block Editor guide for demos and videos of the editor.

On this page

Block Editor workspace

The WordPress block editor is made up of a few key areas that open and close as you work, as shown below. It’s normal for the interface to change as you select blocks, open tools, or adjust settings. This is how the editor is designed to work.

WordPress block editor highlighting four primary areas of the interface: top toolbar, block inserter, main content area, and the settings sidebar.

The elements highlighted are:

  1. Top toolbar: Global tools for adding content, opening panels, previewing, and publishing
  2. Block Inserter: Browse and add blocks, patterns, and media
  3. Editor canvas: Where you write, edit, and arrange page content
  4. Settings sidebar: Page-level and block-level settings that change based on what’s selected
Back to top

Top toolbar

The top toolbar contains global actions you’ll use while building and publishing pages. When you open a new page, the top toolbar will look like the image below. This list is meant to help you recognize what’s available as you explore the editor.

WordPress block editor top toolbar with numbered callouts highlighting key controls, such as adding blocks, opening settings, and publishing content.

The elements highlighted are:

  1. View posts / pages: Return to the list of posts or pages.
  2. Block Inserter (plus icon): Add blocks, patterns, and media to the page.
  3. Undo/redo: Reverse or reapply recent changes.
  4. Document Overview: Open List View to see all blocks on the page, or Outline to review heading structure.
  5. Command Palette: Search for editor actions and settings using the keyboard. Learn more about the Command Palette.
  6. Save draft: Save draft changes if the page is unpublished.
  7. View page: Preview how the page will appear on different screen sizes.
  8. Settings sidebar: Open the post/page sidebar settings and the block settings.
  9. Publish/Save: Make your page live or update an already published page with changes.
  10. More options (three-dot menu): Access additional editor options and preferences.

For detailed explanations of these editor tools and controls, visit the official WordPress block editor documentation.

Back to top

Settings sidebar

The Settings sidebar displays a panel on the right that shows page/post-level settings or block-level settings depending on what is selected. Open the Settings sidebar from the top toolbar.

For a full overview of page and post settings, see the WordPress documentation on the Page/Post Settings sidebar.

page settings sidebar showing options for editing status, page link, accessing revisions, and more.
Example of Page settings
Block settings sidebar showing options for a selected UW Group of Links block, including style, column layout, spacing, and advanced settings.
Example of Block settings
Back to top

Document Overview / List View

The Document Overview allows you to access List View and Outline sections.

List View helps you see all blocks on the page and reorder or manage them. You can group, duplicate, delete, or add blocks before or after a selection using More options (three-dot menu).

The Outline section allows you to review your page and confirm that heading levels follow a logical structure. Using headings in order (H1 > H2 > H3, and so on) makes content easier to read and helps assistive technologies interpret the page structure.

List View of blocks on the page including the Title block, paragraph, Heading, Stack, Group, and Image blocks.
Example of List View
Document outline of heading structure on a page and highlights the incorrect order of h4 after an h2.
Example of Document Outline

Tip: Keep List view open by default

You can set List View to open by default. Open More options (three-dot menu) in the top toolbar, select Preferences, then enable Always open List View under General settings.

Back to top