University of Wisconsin–Madison
UW red background with subtle geometric shapes that alternative between dark and light red.

Block Fundamentals

Overview

Last updated:

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

For a deeper dive into block concepts and editor behavior, visit the Working with blocks WordPress guide.

On this page

Before you start

This guide assumes basic familiarity with the WordPress block editor. For an overview of the editor interface, review Building a Page before continuing.

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: Use patterns to build layouts faster

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

Back to top

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
  • Learn more in the WordPress guide on Add a new block.

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.
Back to top

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.
Back to top

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

Key features

The highlighted controls 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.

Moving blocks

Use the drag handle or the move up and down controls 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.

Tip: You can also access the “More options” menu in List View

In additional to the block toolbar, you can also access More options for each block in List View. More options are indicated by three vertical dots.

Back to top

How to style and customize blocks

When a block is selected, open the Page/Post 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.

Back to top

How to 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.

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

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
Back to top

Change block and content width

Content width controls how wide a block appears on the page. In the UW Theme, width is applied per block rather than for the entire page. This allows different sections of a page to use different widths.

You can change the content width of a block using the Align option in the block toolbar. The active width option is shown with a white icon on a black background shown below:

Example of content width options in the Align dropdown for the Columns block showing. Wide width selected.
Content width options in the Align menu for a Columns block, with Wide width selected.

Block width options

Not all blocks support width options. The ones that do generally support three different width options that control how wide the content appears on the page:

  1. None (default): Standard content width. Best choice for most text content.
  2. Wide width: Expands the block wider than the default, leaves margins on either side.
  3. Full width: Expands the block to the edges of the screen.

Note: Layout examples are responsive and may appear differently depending on screen size.

WordPress icon for none content alignment

None

WordPress icon for wide content alignment

Wide width

WordPress icon for full width content alignment

Full width

Content width in nested layouts

For blocks that contain other blocks, such as Group, Columns, or Grid, content width settings are applied to the parent block, not the individual inner blocks.

Below shows the parent Columns block selected, which contains two inner Column blocks.

Columns block selected in List View and contains two inner Column blocks.

If you are unsure which block controls the width of a section, use List View to select the parent block before adjusting the width.

Tip: Toggle off inner content width

In some blocks, such as Group and Query Loop, you can also toggle off the Inner blocks use content width the block Settings sidebar so that nested blocks fill the width of the parent container.

Learn more about content width in the WordPress Layout Settings overview guide.

Toggle for inner content width in the Group block under the Layout section in block settings

Accessible content widths

Default width (“None“) results in a narrower content area, which helps limit line length for text-heavy content like lists, paragraphs, and headings.

Accessibility guidance recommends a line length of 80 characters or fewer. Shorter line lengths make text easier to read and scan for people with visual and cognitive disabilities.

For examples of best practices, visit the Patterns Showcase to learn how the UW Theme uses content width for different types of layouts.

Back to top

Hide blocks and page content

You may want to keep content in the editor without showing it on the published page. For example, when working on draft content, layouts, or hiding seasonal content.

Content is hidden using WordPress’s built-in Hide block feature. In the UW Theme, this option is intentionally limited to the Group and Cover blocks to ensure hidden content behaves predictably and is easy to manage.

Hidden blocks:

  • Are not visible in the block editor until unhidden
  • Do not appear on the published page
  • Are not read by screen readers
  • Are not indexed by search engines
  • Display a slashed eye icon in List View
Group block in the List View with slashed eye icon indicating it's hidden from view.
Example of Group block hidden in List View

Hide content using a Group or Cover block

When you hide a Group or Cover block, all content inside it is hidden as well. To hide multiple items, group them together first and hide the Group.

  1. In List View, select the Group or Cover block.
  2. Open the More options (three-dot menu) and select Hide.
  3. The block appears with a slashed eye icon in List View, indicating it’s hidden.

For a video walkthrough and more details, see the WordPress documentation on hiding blocks.

Back to top