Marketing · Gutenberg
Button Group block for WordPress
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking.
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
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking.
Inspector panels on this block: Buttons, Layout, Global Button Style, Primary Button, Outline & Ghost Button. Those titles come from index.js, not from a shared template.
Behavior controls: “Buttons — Style” options: Primary (filled), Outline, Ghost / Text, Link; “Buttons — Size” options: Small, Medium, Large; “Buttons — Icon” options: None, → Arrow Right, ↗ External, ▶ Play, ★ Star; “Icon Position” options: Left, Right.
Button Group has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Marketing → search “Button Group” (block name `blockenberg/button-group` in block.json). Style it in the sidebar after insert.
How to use Button Group block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Button Group”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Buttons. Set “Label”, “URL”, “Open in new tab”, “Buttons — Style”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. |
| URL | Text field in the inspector. |
| Open in new tab | On/off toggle in the inspector. |
| Buttons — Style | Select control; the chosen value is saved on the block. Options: Primary (filled); Outline; Ghost / Text; Link. |
| Buttons — Size | Select control; the chosen value is saved on the block. Options: Small; Medium; Large. |
| Buttons — Icon | Select control; the chosen value is saved on the block. Options: None; → Arrow Right; ↗ External; ▶ Play; ★ Star; ↓ Download. |
| Icon Position | Select control; the chosen value is saved on the block. Options: Left; Right. |
| Layout — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `alignment`. |
| Direction | Select control; the chosen value is saved on the block. Options: Row (horizontal); Column (vertical). block.json default: row. Saved as `direction`. |
| Gap (px) | Numeric range control in the inspector. Range 4–48. block.json default: 12. Saved as `gap`. |
| Stack on mobile | On/off toggle in the inspector. On by default. Saved as `mobileStack`. |
| Full width on mobile | On/off toggle in the inspector. Off by default. Saved as `fullWidthMobile`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `btnRadius`. |
| Padding Vertical (px) | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `btnPaddingV`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 8–64. block.json default: 24. Saved as `btnPaddingH`. |
| Global Button Style — Shadow | Select control; the chosen value is saved on the block. Options: None; Small; Medium. block.json default: none. Saved as `btnShadow`. |
| Hover Effect | Select control; the chosen value is saved on the block. Options: Lift (translate up); Scale; Darken; None. block.json default: lift. Saved as `hoverEffect`. |
| Primary Button — Background | Color control in the inspector. block.json default: #2563eb. Saved as `btnBg`. |
| Primary Button — Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Outline Border | Color control in the inspector. block.json default: #2563eb. Saved as `outlineBorderColor`. |
| Outline Text | Color control in the inspector. block.json default: #2563eb. Saved as `outlineColor`. |
| Ghost / Link Text | Color control in the inspector. block.json default: #2563eb. Saved as `ghostColor`. |
When this is the right block
- Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking — that is the job of Button Group, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about buttons, cta, call to action.
- Inserter grouping: landing pages, campaign sections, and conversion 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 Button Group block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Button Group”. It sits under Marketing. After insert, open Buttons and set “Label”, “URL”, “Open in new tab”, “Buttons — Style”.
What makes Button Group different from other Blockenberg blocks?
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking. Inspector labels on this block include “Label”, “URL”, “Open in new tab”, “Buttons — Style”.
Is the Button Group Gutenberg block free?
Yes. Button Group ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Button Group 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: Buttons, Layout, Global Button Style, Primary Button).
Related marketing blocks
CTA Band
Full-width colored band with headline, supporting text and a call-to-action button.
CTA Pulsing Button
An animated Call-to-Action button with pulsing ring/glow effects, rich typography, hover colors, icon, badge, and subtext controls.
Floating CTA
Fixed-position floating call-to-action button that sticks during scroll. Configurable position, icon, label, and trigger delay.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Card CTA Grid
A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Button Group from the Gutenberg inserter.