Content · Gutenberg
Toggle / Read More block for WordPress
A single expandable panel for 'Read More', spoilers, or collapsible content sections.
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
A single expandable panel for 'Read More', spoilers, or collapsible content sections.
Inspector panels on this block: Toggle Settings, Title Colors, Content Colors, Icon & Border Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Open by default” (Start the toggle in expanded state on page load); “Title Tag” options: H3, H4, H5, H6, p; “Layout” options: Default, Boxed, Minimal, Bordered Left; “Icon Type” options: Chevron, Plus / Minus, Arrow, None.
Where to find it
Gutenberg inserter → Content → search “Toggle / Read More” (block name `blockenberg/toggle` in block.json). Style it in the sidebar after insert.
How to use Toggle / Read More block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Toggle / Read More”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Toggle Settings. Set “Open by default”, “Title Tag”, “Icon Type”, “Icon Position”.
- Check the published page. The view script reads HTML data attributes: data-speed. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Open by default | On/off toggle in the inspector. Start the toggle in expanded state on page load. Off by default. Saved as `defaultOpen`. |
| Title Tag | Select control; the chosen value is saved on the block. Options: H3; H4; H5; H6; p; div. block.json default: h3. Saved as `titleTag`. |
| Layout | Select control; the chosen value is saved on the block. Options: Default; Boxed; Minimal; Bordered Left. block.json default: default. Saved as `layout`. |
| Icon Type | Select control; the chosen value is saved on the block. Options: Chevron; Plus / Minus; Arrow; None. block.json default: chevron. Saved as `iconType`. |
| Icon Position | Select control; the chosen value is saved on the block. Options: Right; Left. block.json default: right. Saved as `iconPosition`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `borderRadius`. |
| Padding (px) | Numeric range control in the inspector. Range 8–48. block.json default: 16. Saved as `padding`. |
| Animation Speed (ms) | Numeric range control in the inspector. Range 0–800. block.json default: 280. Saved as `animationSpeed`. |
| Title Colors — Text | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Title Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `titleBg`. |
| Background (Hover) | Color control in the inspector. block.json default: #f9fafb. Saved as `titleHoverBg`. |
| Text (Open) | Color control in the inspector. block.json default: #1d4ed8. Saved as `activeTitleColor`. |
| Background (Open) | Color control in the inspector. block.json default: #eff6ff. Saved as `activeTitleBg`. |
| Content Colors — Text | Color control in the inspector. block.json default: #374151. Saved as `contentColor`. |
| Content Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `contentBg`. |
| Icon & Border Colors — Icon | Color control in the inspector. block.json default: #6b7280. Saved as `iconColor`. |
| Icon (Open) | Color control in the inspector. block.json default: #2563eb. Saved as `iconActiveColor`. |
| Icon & Border Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Divider | Color control in the inspector. block.json default: #f3f4f6. Saved as `dividerColor`. |
| Toggle Title | Text field in the inspector. block.json default: Click to read more. Saved as `title`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-speed.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
- Keyboard handlers move focus between items.
When this is the right block
- A single expandable panel for 'Read More', spoilers, or collapsible content sections — that is the job of Toggle / Read More, not a generic content block.
- Use it when you need the editor control labeled “Open by default”, which exists on this block’s inspector.
- It matches pages about toggle, read more, spoiler.
- 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 Toggle / Read More block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Toggle / Read More”. It sits under Content. After insert, open Toggle Settings and set “Open by default”, “Title Tag”, “Icon Type”, “Icon Position”.
What makes Toggle / Read More different from other Blockenberg blocks?
A single expandable panel for 'Read More', spoilers, or collapsible content sections. Inspector labels on this block include “Open by default”, “Title Tag”, “Icon Type”, “Icon Position”.
Is the Toggle / Read More Gutenberg block free?
Yes. Toggle / Read More ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Toggle / Read More 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: Toggle Settings, Title Colors, Content Colors, Icon & Border Colors).
Related content blocks
Accordion
Collapsible accordion panels for FAQ, features, and more.
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.
Accordion Table
A data table where each row expands on click to reveal rich detail content — specs, bullet points, sub-data, or notes. Perfect for pricing tiers, product specs, API docs, and comparison matrices.
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.
Content Warning
Editorial content advisory or sensitivity notice, optionally collapsible.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Toggle / Read More from the Gutenberg inserter.