Blog · Gutenberg
Content Outline block for WordPress
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time.
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
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time.
Inspector panels on this block: Title & Intro, Sections, Display, Spacing & Shape, Layout Colors, Text Colors, Status Badge Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Display — Style” options: Card, List, Compact.
Where to find it
Gutenberg inserter → Blog → search “Content Outline” (block name `blockenberg/content-outline` in block.json). Style it in the sidebar after insert.
How to use Content Outline block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Content Outline”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Title & Intro. Set “Show title”, “Title & Intro — Title”, “Show intro”, “Intro text”.
- 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 title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Title & Intro — Title | Text field in the inspector. block.json default: Article Outline. Saved as `outlineTitle`. |
| Show intro | On/off toggle in the inspector. On by default. Saved as `showIntro`. |
| Intro text | Multiline text field in the inspector. block.json default: A structured overview of what this article covers.. Saved as `intro`. |
| Description | Text field in the inspector. Saved as `sections`. |
| Estimated read time (min) | Numeric range control in the inspector. Range 0–60. Saved as `sections`. |
| Display — Style | Select control; the chosen value is saved on the block. Options: Card; List; Compact. block.json default: card. Saved as `style`. |
| Show section numbers | On/off toggle in the inspector. On by default. Saved as `showNumbers`. |
| Show status badges | On/off toggle in the inspector. On by default. Saved as `showStatus`. |
| Show read time | On/off toggle in the inspector. On by default. Saved as `showReadTime`. |
| Show section descriptions | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show sub-points | On/off toggle in the inspector. On by default. Saved as `showPoints`. |
| Border radius | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Gap between sections | Numeric range control in the inspector. Range 4–48. block.json default: 16. Saved as `gap`. |
| Outline Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Section Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSection`. |
| Point font size | Numeric range control in the inspector. Range 11–20. block.json default: 14. Saved as `fontSize`. |
| Layout Colors — Background | Color control in the inspector. block.json default: #f8fafc. Saved as `bgColor`. |
| Card bg | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Layout Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Number bg | Color control in the inspector. block.json default: #6366f1. Saved as `numberBg`. |
| Number text | Color control in the inspector. block.json default: #ffffff. Saved as `numberColor`. |
| Outline title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Section title | Color control in the inspector. block.json default: #1e293b. Saved as `sectionTitleColor`. |
| Description | Color control in the inspector. block.json default: #64748b. Saved as `descriptionColor`. |
| Point text | Color control in the inspector. block.json default: #374151. Saved as `pointColor`. |
| Intro | Color control in the inspector. block.json default: #64748b. Saved as `introColor`. |
| Done background | Color control in the inspector. block.json default: #dcfce7. Saved as `doneBg`. |
| Done text | Color control in the inspector. block.json default: #166534. Saved as `doneColor`. |
| In Progress background | Color control in the inspector. block.json default: #fef9c3. Saved as `inProgressBg`. |
| In Progress text | Color control in the inspector. block.json default: #854d0e. Saved as `inProgressColor`. |
| Planned background | Color control in the inspector. block.json default: #f1f5f9. Saved as `plannedBg`. |
| Planned text | Color control in the inspector. block.json default: #475569. Saved as `plannedColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time — that is the job of Content Outline, not a generic content block.
- Use it when you need the editor control labeled “Show title”, which exists on this block’s inspector.
- It matches pages about outline, contents, structure.
- 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 Content Outline block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Content Outline”. It sits under Blog. After insert, open Title & Intro and set “Show title”, “Title & Intro — Title”, “Show intro”, “Intro text”.
What makes Content Outline different from other Blockenberg blocks?
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time. Inspector labels on this block include “Show title”, “Title & Intro — Title”, “Show intro”, “Intro text”.
Is the Content Outline Gutenberg block free?
Yes. Content Outline ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Content Outline 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: Title & Intro, Sections, Display, Spacing & Shape).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Chapter Navigation
Multi-part guide and series navigation with progress, prev/next, and chapter list.
Course Curriculum
Expandable course curriculum / syllabus with sections and lessons. Each lesson shows duration, type, and free/locked status. Perfect for online courses and training pages.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Content Outline from the Gutenberg inserter.