Blog · Gutenberg
Key Takeaways block for WordPress
A styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options.
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 styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options.
Inspector panels on this block: Content, Bullet Style, Sizing. Those titles come from index.js, not from a shared template.
Behavior controls: “Bullet Style” options: ✓ Checkmark, ✔ Bold Check, → Arrow, ● Circle, ★ Star; “Border Position” options: Left Border, Top Border, All Sides, No Border.
Where to find it
Gutenberg inserter → Blog → search “Key Takeaways” (block name `blockenberg/key-takeaways` in block.json). Style it in the sidebar after insert.
How to use Key Takeaways block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Key Takeaways”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Content. Set “Show Heading”, “Heading Text”, “Show Heading Icon”, “Divider Below Heading”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Heading | On/off toggle in the inspector. On by default. Saved as `showHeading`. |
| Heading Text | Text field in the inspector. block.json default: Key Takeaways. Saved as `heading`. |
| Show Heading Icon | On/off toggle in the inspector. On by default. Saved as `showHeadingIcon`. |
| Divider Below Heading | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Bullet Style | Select control; the chosen value is saved on the block. Options: ✓ Checkmark; ✔ Bold Check; → Arrow; ● Circle; ★ Star; ◆ Diamond; — Dash; Custom Symbol. block.json default: check. Saved as `bulletStyle`. |
| Custom Symbol | Text field in the inspector. block.json default: →. Saved as `customBullet`. |
| Border Position | Select control; the chosen value is saved on the block. Options: Left Border; Top Border; All Sides; No Border. block.json default: left. Saved as `borderPosition`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–12. block.json default: 4. Saved as `borderWidth`. |
| Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Card Background | Color control in the inspector. block.json default: #f5f3ff. Saved as `cardBg`. |
| Border Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `borderColor`. |
| Heading Color | Color control in the inspector. block.json default: #1e1b4b. Saved as `headingColor`. |
| Item Text Color | Color control in the inspector. block.json default: #374151. Saved as `itemColor`. |
| Bullet Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `bulletColor`. |
| Icon Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconBg`. |
| Icon Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `iconColor`. |
| Item Gap (px) | Numeric range control in the inspector. Range 4–40. block.json default: 14. Saved as `itemGap`. |
| Padding Vertical (px) | Numeric range control in the inspector. Range 8–80. block.json default: 28. Saved as `paddingV`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 8–80. block.json default: 28. Saved as `paddingH`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `cardRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 320–1400. block.json default: 760. Saved as `maxWidth`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options — that is the job of Key Takeaways, not a generic content block.
- Use it when you need the editor control labeled “Show Heading”, which exists on this block’s inspector.
- It matches pages about key takeaways, summary, highlights.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
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 Key Takeaways block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Key Takeaways”. It sits under Blog. After insert, open Content and set “Show Heading”, “Heading Text”, “Show Heading Icon”, “Divider Below Heading”.
What makes Key Takeaways different from other Blockenberg blocks?
A styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options. Inspector labels on this block include “Show Heading”, “Heading Text”, “Show Heading Icon”, “Divider Below Heading”.
Is the Key Takeaways Gutenberg block free?
Yes. Key Takeaways ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Key Takeaways 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: Content, Bullet Style, Sizing).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Event Recap
Post-event summary with key stats, highlights and next event info.
Content Outline
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time.
Knowledge Base Article
Full knowledge base / help center article with category, difficulty, table of contents, sections, and related articles.
Post Carousel
A responsive carousel of posts with autoplay, arrows, and dots.
Post Grid
Display posts or custom post types in a responsive card grid. Powered by the built-in REST API endpoint.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Key Takeaways from the Gutenberg inserter.