Blog · Gutenberg
Knowledge Base Article block for WordPress
Full knowledge base / help center article with category, difficulty, table of contents, sections, and related articles.
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
Full knowledge base / help center article with category, difficulty, table of contents, sections, and related articles.
Inspector panels on this block: Article Info, Introduction, Table of Contents, Sections (, Tags & Related Articles, Helpful Votes, Appearance, Header Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Difficulty” options: 🟢 Beginner, 🟡 Intermediate, 🟠 Advanced, 🔴 Expert; “Type” options: Normal, Step, Info / Tip, Warning.
Where to find it
Gutenberg inserter → Blog → search “Knowledge Base Article” (block name `blockenberg/kb-article` in block.json). Style it in the sidebar after insert.
How to use Knowledge Base Article block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Knowledge Base Article”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Article Info. Set “Article Title”, “Category”, “Subcategory”, “Last Updated”.
- 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 |
|---|---|
| Article Title | Text field in the inspector. block.json default: How to Reset Your Password. Saved as `articleTitle`. |
| Category | Text field in the inspector. block.json default: Account & Security. Saved as `category`. |
| Subcategory | Text field in the inspector. block.json default: Password Management. Saved as `subcategory`. |
| Last Updated | Text field in the inspector. block.json default: February 24, 2026. Saved as `lastUpdated`. |
| Read Time | Text field in the inspector. block.json default: 3 min read. Saved as `readTime`. |
| Applies To | Text field in the inspector. block.json default: All plans. Saved as `appliesTo`. |
| Difficulty | Select control; the chosen value is saved on the block. Options: 🟢 Beginner; 🟡 Intermediate; 🟠 Advanced; 🔴 Expert. block.json default: beginner. Saved as `difficulty`. |
| Category (Show Category) | On/off toggle in the inspector. On by default. Saved as `showCategory`. |
| Difficulty (Show Difficulty) | On/off toggle in the inspector. On by default. Saved as `showDifficulty`. |
| Read Time (Show Read Time) | On/off toggle in the inspector. On by default. Saved as `showReadTime`. |
| Last Updated (Show Last Updated) | On/off toggle in the inspector. On by default. Saved as `showLastUpdated`. |
| Applies To (Show Applies To) | On/off toggle in the inspector. On by default. Saved as `showAppliesTo`. |
| Show Introduction | On/off toggle in the inspector. On by default. Saved as `showIntro`. |
| Intro Paragraph | Multiline text field in the inspector. block.json default: Forgot your password? No problem. This guide walks you through every way to reset your password and regain access to your account within minutes.. Saved as `intro`. |
| Show Table of Contents | On/off toggle in the inspector. On by default. Saved as `showToc`. |
| TOC Label | Text field in the inspector. block.json default: In this article. Saved as `tocLabel`. |
| Heading | Text field in the inspector. Saved as `sections`. |
| Sections ( — Content | Multiline text field in the inspector. Saved as `sections`. |
| Type | Select control; the chosen value is saved on the block. Options: Normal; Step; Info / Tip; Warning. Saved as `sections`. |
| Show Tags | On/off toggle in the inspector. On by default. Saved as `showTags`. |
| Tags (comma-separated) | Text field in the inspector. Saved as `tags`. |
| Show Related Articles | On/off toggle in the inspector. On by default. Saved as `showRelated`. |
| Related Section Label | Text field in the inspector. block.json default: Related Articles. Saved as `relatedLabel`. |
| Show Helpful Votes Section | On/off toggle in the inspector. On by default. Saved as `showHelpful`. |
| Helpful Label | Text field in the inspector. block.json default: Was this article helpful?. Saved as `helpfulLabel`. |
| 👍 Yes | Numeric range control in the inspector. Range 0–999. block.json default: 48. Saved as `helpfulYes`. |
| 👎 No | Numeric range control in the inspector. Range 0–999. block.json default: 5. Saved as `helpfulNo`. |
| Max Width (px) | Numeric range control in the inspector. Range 500–1200. block.json default: 820. Saved as `maxWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `borderRadius`. |
| Header Background | Color control in the inspector. block.json default: #f8fafc. Saved as `headerBg`. |
| Title Color | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Category Text | Color control in the inspector. block.json default: #64748b. Saved as `categoryColor`. |
| Header Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Body Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Body Colors — Text | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Heading | Color control in the inspector. block.json default: #0f172a. Saved as `headingColor`. |
| Accent | Color control in the inspector. block.json default: #2563eb. Saved as `accentColor`. |
| Section Divider | Color control in the inspector. block.json default: #e5e7eb. Saved as `sectionBorderColor`. |
| TOC Background | Color control in the inspector. block.json default: #f1f5f9. Saved as `tocBg`. |
| TOC Text | Color control in the inspector. block.json default: #1e293b. Saved as `tocColor`. |
| TOC Links | Color control in the inspector. block.json default: #2563eb. Saved as `tocLinkColor`. |
| Step # Background | Color control in the inspector. block.json default: #2563eb. Saved as `stepNumberBg`. |
| Step # Text | Color control in the inspector. block.json default: #ffffff. Saved as `stepNumberColor`. |
| Info Background | Color control in the inspector. block.json default: #eff6ff. Saved as `infoBg`. |
| Info Text | Color control in the inspector. block.json default: #1e40af. Saved as `infoColor`. |
| Info Border | Color control in the inspector. block.json default: #93c5fd. Saved as `infoBorderColor`. |
| Warning Background | Color control in the inspector. block.json default: #fffbeb. Saved as `warningBg`. |
| Warning Text | Color control in the inspector. block.json default: #92400e. Saved as `warningColor`. |
| Warning Border | Color control in the inspector. block.json default: #fcd34d. Saved as `warningBorderColor`. |
| Tag Background | Color control in the inspector. block.json default: #f1f5f9. Saved as `tagBg`. |
| Tag Text | Color control in the inspector. block.json default: #475569. Saved as `tagColor`. |
| 👍 Yes Background | Color control in the inspector. block.json default: #dcfce7. Saved as `helpfulYesBg`. |
| 👍 Yes Text | Color control in the inspector. block.json default: #14532d. Saved as `helpfulYesColor`. |
| 👎 No Background | Color control in the inspector. block.json default: #fee2e2. Saved as `helpfulNoBg`. |
| 👎 No Text | Color control in the inspector. block.json default: #991b1b. Saved as `helpfulNoColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Full knowledge base / help center article with category, difficulty, table of contents, sections, and related articles — that is the job of Knowledge Base Article, not a generic content block.
- Use it when you need the editor control labeled “Article Title”, which exists on this block’s inspector.
- It matches pages about knowledge base, help, article.
- 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 Knowledge Base Article block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Knowledge Base Article”. It sits under Blog. After insert, open Article Info and set “Article Title”, “Category”, “Subcategory”, “Last Updated”.
What makes Knowledge Base Article different from other Blockenberg blocks?
Full knowledge base / help center article with category, difficulty, table of contents, sections, and related articles. Inspector labels on this block include “Article Title”, “Category”, “Subcategory”, “Last Updated”.
Is the Knowledge Base Article Gutenberg block free?
Yes. Knowledge Base Article ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Knowledge Base Article 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: Article Info, Introduction, Table of Contents, Sections ().
Related blog blocks
Troubleshooting Guide
Structured problem/cause/solution guide with severity levels, search, and multiple layout options.
HowTo Schema
Step-by-step How-To guide with automatic Schema.org HowTo JSON-LD structured data for Google rich results. Includes supplies, tools, total time, cost estimate, and numbered steps with images.
Lesson Objectives
"What You'll Learn" educational objectives box with bullet points, level badge, and estimated read time.
Tutorial Card
A structured tutorial block with steps, prerequisites, materials, learning outcomes, and progress tracking.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Chapter Navigation
Multi-part guide and series navigation with progress, prev/next, and chapter list.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Knowledge Base Article from the Gutenberg inserter.