Content · Gutenberg
Tabs block for WordPress
Tabbed content panels with full WYSIWYG editing per tab.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Tabbed content panels with full WYSIWYG editing per tab.
Inspector panels on this block: Tabs, Layout, Icons & Labels, Tab Button Style, Content Area, Wrapper. Those titles come from index.js, not from a shared template.
Behavior controls: “Tab Style” options: Underline, Pills / Rounded, Boxed, Minimal; “Tab Position” options: Top, Left; “Tab Alignment” options: Left, Center, Right, Full Width; “Animation” options: None, Fade, Slide Up.
Where to find it
Gutenberg inserter → Content → search “Tabs” (block name `blockenberg/tabs` in block.json). Style it in the sidebar after insert.
How to use Tabs block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Tabs”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Tabs. Set “Tab Label”, “Icon (dashicons class)”, “Tab Style”, “Tab Position”.
- Check the published page. Keyboard handlers move focus between items. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Tab Label | Text field in the inspector. |
| Icon (dashicons class) | Text field in the inspector. |
| Tab Style | Select control; the chosen value is saved on the block. Options: Underline; Pills / Rounded; Boxed; Minimal. block.json default: underline. Saved as `tabStyle`. |
| Tab Position | Select control; the chosen value is saved on the block. Options: Top; Left. block.json default: top. Saved as `tabPosition`. |
| Tab Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right; Full Width. block.json default: left. Saved as `tabAlign`. |
| Animation | Select control; the chosen value is saved on the block. Options: None; Fade; Slide Up. block.json default: fade. Saved as `animationType`. |
| Tab Gap | Numeric range control in the inspector. Range 0–24. block.json default: 4. Saved as `tabGap`. |
| Box Shadow | Select control; the chosen value is saved on the block. Options: None; Small; Medium; Large. block.json default: none. Saved as `boxShadow`. |
| Show Icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show Labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Icon Position | Select control; the chosen value is saved on the block. Options: Left of label; Right of label; Above label. block.json default: left. Saved as `iconPosition`. |
| Vertical Padding (px) | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `tabPaddingV`. |
| Horizontal Padding (px) | Numeric range control in the inspector. Range 8–60. block.json default: 20. Saved as `tabPaddingH`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 6. Saved as `tabBorderRadius`. |
| Indicator Height (px) | Numeric range control in the inspector. Range 1–8. block.json default: 3. Saved as `indicatorHeight`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–80. block.json default: 28. Saved as `contentPaddingTop`. |
| Padding Right (px) | Numeric range control in the inspector. Range 0–80. block.json default: 28. Saved as `contentPaddingRight`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–80. block.json default: 28. Saved as `contentPaddingBottom`. |
| Padding Left (px) | Numeric range control in the inspector. Range 0–80. block.json default: 28. Saved as `contentPaddingLeft`. |
| Border Radius (px) (Content Border Radius) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `contentBorderRadius`. |
| Min Height (px, 0 = auto) | Numeric range control in the inspector. Range 0–800. block.json default: 0. Saved as `contentMinHeight`. |
| Padding Top (px) (Wrapper Padding Top) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `wrapperPaddingTop`. |
| Padding Right (px) (Wrapper Padding Right) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `wrapperPaddingRight`. |
| Padding Bottom (px) (Wrapper Padding Bottom) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `wrapperPaddingBottom`. |
| Padding Left (px) (Wrapper Padding Left) | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `wrapperPaddingLeft`. |
| Border Radius (px) (Wrapper Border Radius) | Numeric range control in the inspector. Range 0–40. block.json default: 0. Saved as `wrapperBorderRadius`. |
What the front-end script actually does
- Keyboard handlers move focus between items.
When this is the right block
- Tabbed content panels with full WYSIWYG editing per tab — that is the job of Tabs, not a generic content block.
- Use it when you need the editor control labeled “Tab Label”, which exists on this block’s inspector.
- It matches pages about tabs, tabbed, panel.
- Inserter grouping: articles, cards, lists, and long-form layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Tabs block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Tabs”. It sits under Content. After insert, open Tabs and set “Tab Label”, “Icon (dashicons class)”, “Tab Style”, “Tab Position”.
What makes Tabs different from other Blockenberg blocks?
Tabbed content panels with full WYSIWYG editing per tab. Inspector labels on this block include “Tab Label”, “Icon (dashicons class)”, “Tab Style”, “Tab Position”.
Is the Tabs Gutenberg block free?
Yes. Tabs ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Tabs to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Tabs, Layout, Icons & Labels, Tab Button Style).
Related content blocks
Callout
Highlighted panel for tips, warnings or success messages with icon, title and dismissible option.
Content Box
Styled content container with optional icon/emoji, badge label, title, rich body text, style variants (info/warning/success/tip/quote), border, background, and rounded corners.
Content Slider
Full-slide carousel with custom backgrounds per slide (color, gradient, or image) and rich text content.
Content Switcher
Two-panel toggle block — a pill/tab switch with a label for each state, each panel containing its own headline, body text, bullet list, image, and CTA. Great for Individual/Team, Starter/Pro, Before/After content.
Link Card Grid
Visual navigation card grid for resource hubs and docs pages. Each card has icon, title, description, and URL.
Link List
An organized, styled list of links with icons, titles, descriptions, and optional badges.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Tabs from the Gutenberg inserter.