Brigade Blocks Docs v1.1.0

Interactive module

Tab block

One panel of a Tabs block, with its title, optional icon and any blocks inside.

Overview

A Tab is one panel of a Tabs block. Its title appears as a button in the tab bar; its content — any blocks — shows when that button is selected. It can only be used inside Tabs.

At a glance

Block name
wpbb/tab
Module
Interactive
Find it by searching
Tab
Used inside
Tabs (it cannot be used on its own)
Loads JavaScript on the site
No

When and why to use it

  • One section of tabbed content.

Example scenarios

  • Product: a “Specifications” tab with a table, and a list icon in the tab button.

How to add the Tab block

  1. Add the parent block. The Tab block only exists inside a Tabs block. Insert a Tabs first (search for “Tabs” in the block inserter); it already contains a few Tab blocks with sample content.
  2. Add another Tab. Click the + at the end of the tab row of the Tabs block.
  3. Select it. Click inside the Tab — or pick it in the List View (the three-lines icon in the top toolbar) — to see its own settings in the sidebar.
  4. Edit the content. Type the title in the tab row, then add content to the panel (“Tab content…”). Click Select this tab’s settings under the panel to set an icon.
  5. Reorder or remove. Use the up/down arrows in the block toolbar to move it, or the block menu (⋮) → Delete to remove it.
  6. Style it. Design settings for all items are made on the parent Tabs block, in its Styles tab, so every item stays consistent.
  7. Save or publish. Click Save draft, Preview or Publish / Update.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Content

What it does
The content shown when this tab is selected.
What to enter or choose
Any blocks — paragraphs, lists, images, buttons, even another Brigade block.
How to use it
Click in the content area (it starts with “Tab content…” or sample text) and type, or use the + to add blocks.
When to use it
Always.
Example
A paragraph and a Button.
Result
The blocks appear inside.

Settings panel: Tab

Title

What it does
The label on the tab button (the same text you can type in the tab row).
What to enter or choose
A short label.
Default
Empty
How to use it
Type into the text field. Changes appear in the preview right away.
When to use it
Always.
Example
“Specifications”.
Result
The tab button shows it. Empty titles show as “Tab 1”, “Tab 2”…

Icon

What it does
An optional icon before the title in the tab button.
What to enter or choose
An icon from the library, or None.
Default
Empty
How to use it
Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
When to use it
To make tabs easier to scan.
Example
“list” for Specifications.
Result
An 18px icon appears in the tab button.

Design & styling

Tabs are styled on the parent Tabs block (Tab, Tab bar and Panel), so all tabs look the same.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

This block adapts to the screen width on its own and has no per-device settings.

Advanced options

  • HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
  • Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
  • This block cannot be turned into a synced pattern on its own; make a pattern from its parent block instead.

HTML anchor becomes the panel’s ID. Link to #your-anchor from anywhere to open this tab directly.

How it works on your site

A role="tabpanel" element, hidden with hidden="until-found" when not selected.

Limitations and notes

  • Only works inside a Tabs block.