Tabs block

The Tabs block organizes content into tabbed sections, where a visitor can click a tab button to reveal the panel of content behind it. In this guide, you will learn how to add the Tabs block, add content to each tab, and style the tab buttons on your WordPress site.

Use tabs to present related content in a compact space so visitors can switch between sections without scrolling. Tabs work well for content that visitors browse selectively. Here are some popular ways to use them:

• Pricing options: Compare plans or packages side by side.
• FAQs: Group related questions under labeled tabs.
• Feature comparisons: Organize details by category.
• Instructions: Split steps for different devices or methods.
• Content by audience: Show information tailored to different visitor types.

Follow these steps to add the Tabs block to a page or post:

1. Visit your site’s dashboard.
2. Go to Pages or Posts and click the page or post where you want to add tabs.
3. Click the + block inserter button.
4. Search for Tabs and select the Tabs block to add it.

The Tabs block is added with two empty tabs to start:

The Tabs block is made up of these parts:

• Tab List displays the row of tab names.
• Tab Panels is the container for each individual tab.
• Tab Panel contains the content shown when its tab is selected.

To set up your tabs, follow these steps:

1. Open List View by clicking the three horizontal lines icon in the upper-left corner. List View highlights which tab or panel you are editing.
2. Select the first tab and type the label you want visitors to see for that tab.
3. With that tab selected, click where it says “Type / to choose a block” to add your content. You can add any other blocks, including text, images, and videos.
4. Select the Tabs block in List View, then click the “Add tab” option in the toolbar to add another tab.
5. Add a label and content to the new tab, and repeat to add more tabs as needed.
6. Click Save or Publish to save your changes.

To reorder or remove a tab, follow these steps:

1. Select the tab you want to change in List View.
2. To move a tab, use the arrow buttons in the toolbar.
3. To remove a tab, select it and click the “Remove tab” option in the toolbar.

The Tabs block has settings for the tab list and for each tab panel. To access these settings, select the block in List View and open the block settings in the right sidebar.

The Tab List block has a Label setting that describes the group of tabs for people using a screen reader. To add a label, follow these steps:

1. Select the Tab List block in List View.
2. In the block settings sidebar, enter a short description in the Label field, such as “Event information” or “Account settings.”

The default tab is the tab a visitor sees first when the page loads. The first tab is the automatic default, and you can choose a different one if needed. To set the default tab, follow these steps:

1. In List View, select the Tab Panel block for the tab you want to show first.
2. In the block settings sidebar, enable the “Default tab” option:

The tab buttons have their own color, typography, border, and spacing controls, so you can fine-tune how they are styled. You can apply these styles to the whole Tabs block or to an individual sub-block (the Tab List, Tab Panels, or a Tab Panel). Select the block you want to style, then open the Styles tab in the block settings to find these options:

• Colors: Set background and text colors for the tab buttons.
• Typography: Adjust the font size and style for the tab labels.
• Border: Add a border around the tab buttons.
• Dimensions: Control the padding and spacing around the tab buttons.