University of Wisconsin–Madison

Block fundamentals

Last updated:

This guide covers the essential skills for working with UW Theme and WordPress blocks, including how to add, organize, style, and hide blocks.

For a detailed explanations of block concepts and editor behavior, visit the WordPress Working with blocks guide.

On this page

What are blocks

Like LEGO bricks, blocks are the basic building pieces of every page. Each piece of content you add in the editor is a block, including text, lists, images, buttons, links, and layout containers.

View the list of available blocks in UW Theme.

Pattern in UW Theme with image on left and group of links with a heading on right with each block used to create the pattern highlighted.
An example of a pattern in UW Theme built by combining different types of blocks.

Tip: Start with patterns

Patterns are combinations of blocks that are already assembled for you. They help you create layouts quickly and follow UW–Madison branding and accessibility best practices.

Learn more about Patterns

Add blocks

You can add blocks in a few common ways:

  • Use the Block Inserter (plus icon) in the top toolbar of the block editor
  • Type a forward slash (/) in the editor to search for a block
  • Click an Add block (plus icon) button that appears in the editor

View examples and learn more in the WordPress guide on Adding a new block.

Tip: Show most-used blocks

You can set your preferences to show a list of your
most-used blocks at the top of the Block Inserter, which can speed up common workflows. Learn how set your editor preferences to enable this feature.

Block Inserter showing a “Most Used” section with a list of frequently used blocks.

Manage blocks in List View

List View shows every block on your page in a structured list. It helps you select and manage blocks, especially in nested layouts or complex pages with layered content.

You can access List View from the top toolbar of the editor. Use it to select blocks in nested layouts, reorder blocks, and understand how your content is organized on the page.

Learn more in WordPress List View documentation.

Selecting a Heading block in List View also selects it in the page editor.
Selecting a Heading block in List View also selects it on the page.

More options menu

You can also make changes to individual blocks using the More options (three-dot menu) in List View. This menu will display a dropdown selection of actions you can take for blocks like copy, cut, duplicate, remove, and more.

Clicking on the three-dot "Options" menu in List View displays a drop down of actions you can select for individual blocks.

Block toolbar

When you select a block, the block toolbar appears above it. The toolbar includes quick actions such as alignment, formatting, move controls, transform options, and more options. Available actions vary by block type.

Block toolbar overlay that appears when the Paragraph block is selected. It shows formatting options like alignment, bold, italics, and position arrows for moving the block up and down on the page.
Example of the block toolbar for the Image block

The highlighted controls below show a few key features of the block toolbar you may use often:

Block toolbar with key controls highlighted for a selected Heading block.
Example of the block toolbar for the Heading block
  1. Indicates the selected block type and allows you to transform it into a similar block.
  2. Drag/drop handle (six dots)
  3. Move block up or down
  4. Align options to manage content width or image alignment
  5. Link text options
  6. Additional text settings and options
  7. More options (three-dot menu) opens additional actions

View examples and detailed explanations in the WordPress Block toolbar documentation.

How to move blocks

Use the drag/drop handle or the move up and down controls in the block toolbar to reposition a block on the page. You can also drag blocks directly in List View, which is especially helpful for grouped or nested content.

For step-by-step guidance, visit the WordPress guide on Moving blocks.

Style and customize blocks

When a block is selected, open the Settings sidebar in the top toolbar of the block editor to view style and layout settings.

These settings vary by block but often include the following options:

Settings also includes block-specific options like selecting the number of columns to use in the Columns block.

For guidance on making accessible, consistent design choices, visit Design best practices.

Today.wisc.edu settings including the events URL, number of events to display, and "more link" options.
Example of block settings for the today.wisc.edu block
Heading block settings including styles for the minibar, text color, and additional type settings.
Example of block settings for the Heading block

Can’t find a setting?

Some block settings may be unavailable in the UW Theme. This usually means the option has been intentionally limited to support accessibility, branding, or consistency across UW sites—or it’s currently under review.

If you think a setting is missing in error, contact the UW Theme team and let us know what you were trying to do.

Organize blocks

As your pages grow and become more complex, organizing and structuring blocks helps keep your content easier to edit, update, and maintain over time.

Rename blocks

As pages grow, naming sections can make them easier to manage and navigate. You can rename Group blocks and other blocks to describe the purpose of a section, such as “Intro,” “About,” or “Related links.”

Rename blocks by selecting Rename under More options (three-dot menu) in the block toolbar or List View.

Rename modal includes an input field for changing block name in List View to keep page sections organized.
Modal that appears when renaming a block

Group blocks together

You can group blocks together to create a custom section. Grouping lets you treat multiple blocks as a single unit, making it easier to move, style, and manage related content. Group blocks by selecting Group from the More options (three-dot menu) in the block toolbar or List View.

Learn more about the Group block.

Select the Group option in List View under the three dot menu when multiple blocks are selected.
Example of grouping multiple blocks together from List View

Change block and content width

Visit the Managing content width guide to learn more about changing the content width.

Hide blocks and page content

Visit the Hide blocks and page content guide to learn more about hiding blocks.