Content · Gutenberg
Content Switcher block for WordPress
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.
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
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.
Inspector panels on this block: Switch Control, Panel Layout, Panels. Those titles come from index.js, not from a shared template.
Behavior controls: “Switch style” options: Pill slider, Tabs, Buttons; “Switch Control — Alignment” options: Left, Center, Right; “Image position” options: Image right, Image left, Image top, Text only; “Image aspect ratio” options: 16/9, 4/3, 1/1, 3/4.
Where to find it
Gutenberg inserter → Content → search “Content Switcher” (block name `blockenberg/content-switcher` in block.json). Style it in the sidebar after insert.
How to use Content Switcher block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Content Switcher”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Switch Control. Set “Switch style”, “Switch Control — Alignment”, “Switch radius (px)”, “Image position”.
- Check the published page. The view script reads HTML data attributes: data-panel, data-target. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Switch style | Select control; the chosen value is saved on the block. Options: Pill slider; Tabs; Buttons. block.json default: pill. Saved as `switchStyle`. |
| Switch Control — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `switchAlign`. |
| Switch radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 99. Saved as `switchRadius`. |
| Image position | Select control; the chosen value is saved on the block. Options: Image right; Image left; Image top; Text only. block.json default: image-right. Saved as `panelLayout`. |
| Image aspect ratio | Select control; the chosen value is saved on the block. Options: 16/9; 4/3; 1/1; 3/4. block.json default: 4/3. Saved as `imageRatio`. |
| Image radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `imageRadius`. |
| Image shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Show bullets | On/off toggle in the inspector. On by default. Saved as `showBullets`. |
| Bullet icon | Select control; the chosen value is saved on the block. Options: Check ✓; Arrow →; Dot. block.json default: check. Saved as `bulletIcon`. |
| CTA radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 8. Saved as `ctaRadius`. |
| Animate on scroll | On/off toggle in the inspector. On by default. Saved as `animate`. |
| Switch label (px) | Numeric range control in the inspector. Range 12–20. block.json default: 15. Saved as `switchSize`. |
| Bullets (px) | Numeric range control in the inspector. Range 12–20. block.json default: 14. Saved as `bulletSize`. |
| Badge (px) | Numeric range control in the inspector. Range 10–17. block.json default: 13. Saved as `badgeSize`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
| Switch label | Text field in the inspector. |
| Show badge | On/off toggle in the inspector. |
| Badge text | Text field in the inspector. |
| CTA label | Text field in the inspector. |
| CTA URL | Text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-panel, data-target.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- 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 — that is the job of Content Switcher, not a generic content block.
- Use it when you need the editor control labeled “Switch style”, which exists on this block’s inspector.
- It matches pages about switcher, toggle, panels.
- 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 Content Switcher block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Content Switcher”. It sits under Content. After insert, open Switch Control and set “Switch style”, “Switch Control — Alignment”, “Switch radius (px)”, “Image position”.
What makes Content Switcher different from other Blockenberg blocks?
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. Inspector labels on this block include “Switch style”, “Switch Control — Alignment”, “Switch radius (px)”, “Image position”.
Is the Content Switcher Gutenberg block free?
Yes. Content Switcher ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Content Switcher 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: Switch Control, Panel Layout, Panels).
Related content blocks
Accordion
Collapsible accordion panels for FAQ, features, and more.
Debate Block
Two-column argument block for presenting Pro vs Con, Side A vs Side B, or any two-position debate.
Icon Accordion
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows.
Spoiler / Reveal
Hide content behind a click-to-reveal button. Perfect for spoilers, quiz answers, bonus tips, or any content that should stay hidden until the reader chooses to see it.
Tabs
Tabbed content panels with full WYSIWYG editing per tab.
Toggle / Read More
A single expandable panel for 'Read More', spoilers, or collapsible content sections.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Content Switcher from the Gutenberg inserter.