Blog · Gutenberg
TL;DR Box block for WordPress
Article TL;DR / executive summary box with optional bullet points and read-time indicator.
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
Article TL;DR / executive summary box with optional bullet points and read-time indicator.
Inspector panels on this block: Content, Style & Spacing. Those titles come from index.js, not from a shared template.
Behavior controls: “Style & Spacing — Style” options: Highlight (accent fill), Minimal (clean border), Card (shadow), Sidebar (left stripe).
Where to find it
Gutenberg inserter → Blog → search “TL;DR Box” (block name `blockenberg/tldr-box` in block.json). Style it in the sidebar after insert.
How to use TL;DR Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “TL;DR Box”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Content. Set “Show Icon”, “Heading Text”, “Show Bullet Points”, “Show Read Time”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Heading Text | Text field in the inspector. block.json default: TL;DR. Saved as `heading`. |
| Show Bullet Points | On/off toggle in the inspector. On by default. Saved as `showPoints`. |
| Show Read Time | On/off toggle in the inspector. Off by default. Saved as `showReadTime`. |
| Read Time | Text field in the inspector. Saved as `readTime`. |
| Expandable (show/hide toggle) | On/off toggle in the inspector. Off by default. Saved as `expandable`. |
| Collapse Label | Text field in the inspector. block.json default: Read full article. Saved as `collapseLabel`. |
| Expand Label | Text field in the inspector. block.json default: Show less. Saved as `expandLabel`. |
| Style & Spacing — Style | Select control; the chosen value is saved on the block. Options: Highlight (accent fill); Minimal (clean border); Card (shadow); Sidebar (left stripe). block.json default: highlight. Saved as `style`. |
| Border Radius | Numeric range control in the inspector. Range 0–30. block.json default: 10. Saved as `borderRadius`. |
| Padding Top | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–100. block.json default: 0. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #fef9c3. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #fde047. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #ca8a04. Saved as `accentColor`. |
| Heading | Color control in the inspector. block.json default: #713f12. Saved as `headingColor`. |
| Colors — Icon | Color control in the inspector. block.json default: #ca8a04. Saved as `iconColor`. |
| Summary | Color control in the inspector. block.json default: #1c1917. Saved as `summaryColor`. |
| Bullet Points | Color control in the inspector. block.json default: #292524. Saved as `pointColor`. |
| Meta / Read Time | Color control in the inspector. block.json default: #a8a29e. Saved as `metaColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Article TL;DR / executive summary box with optional bullet points and read-time indicator — that is the job of TL;DR Box, not a generic content block.
- Use it when you need the editor control labeled “Show Icon”, which exists on this block’s inspector.
- It matches pages about tldr, summary, abstract.
- 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 TL;DR Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “TL;DR Box”. It sits under Blog. After insert, open Content and set “Show Icon”, “Heading Text”, “Show Bullet Points”, “Show Read Time”.
What makes TL;DR Box different from other Blockenberg blocks?
Article TL;DR / executive summary box with optional bullet points and read-time indicator. Inspector labels on this block include “Show Icon”, “Heading Text”, “Show Bullet Points”, “Show Read Time”.
Is the TL;DR Box Gutenberg block free?
Yes. TL;DR Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style TL;DR Box 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, Style & Spacing).
Related blog blocks
Event Recap
Post-event summary with key stats, highlights and next event info.
Key Takeaways
A styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options.
Rating Summary
Aggregated review rating with overall score, star breakdown bars (5★ 80%, 4★ 15%…), total count, and optional platform badge.
Reading Notes
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
Study Notes
Cornell-style structured study notes with cue column, notes column, summary, and key terms.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert TL;DR Box from the Gutenberg inserter.