Interactive · Gutenberg
Kanban Board block for WordPress
Visual Kanban-style column board with cards for displaying workflows, project status, or process stages.
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
Visual Kanban-style column board with cards for displaying workflows, project status, or process stages.
Inspector panels on this block: Board Settings, Layout, Columns & Cards. Those titles come from index.js, not from a shared template.
Behavior controls: “Priority” options: High, Medium, Low.
Kanban Board has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Interactive → search “Kanban Board” (block name `blockenberg/kanban-board` in block.json). Style it in the sidebar after insert.
How to use Kanban Board block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Kanban Board”, insert it. Category: Interactive.
- Configure inspector controls that exist on this block. Open Board Settings. Set “Column title”, “Card title”, “Description”, “Tag label”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Column title | Text field in the inspector. |
| Card title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Tag label | Text field in the inspector. |
| Priority | Select control; the chosen value is saved on the block. Options: High; Medium; Low. |
| Column min-width (px) | Numeric range control in the inspector. Range 160–400. block.json default: 240. Saved as `columnMinWidth`. |
| Gap (px) | Numeric range control in the inspector. Range 4–48. block.json default: 16. Saved as `gap`. |
| Column radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `columnRadius`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 8–32. block.json default: 14. Saved as `cardPadding`. |
| Column padding (px) | Numeric range control in the inspector. Range 8–32. block.json default: 12. Saved as `columnPadding`. |
| Show color bar | On/off toggle in the inspector. On by default. Saved as `showColorBar`. |
| Color bar height (px) | Numeric range control in the inspector. Range 2–12. block.json default: 4. Saved as `colorBarHeight`. |
| Show card count badge | On/off toggle in the inspector. On by default. Saved as `showCardCount`. |
| Show priority dots | On/off toggle in the inspector. On by default. Saved as `showPriority`. |
| Show tags | On/off toggle in the inspector. On by default. Saved as `showTags`. |
| Show description | On/off toggle in the inspector. On by default. Saved as `showDesc`. |
| Card shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingBottom`. |
| Column Background | Color control in the inspector. block.json default: #f3f4f6. Saved as `columnBg`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Column Title | Color control in the inspector. block.json default: #1f2937. Saved as `columnTitleColor`. |
| Card Title | Color control in the inspector. block.json default: #111827. Saved as `cardTitleColor`. |
| Card Description | Color control in the inspector. block.json default: #6b7280. Saved as `cardDescColor`. |
| Board Background | Color control in the inspector. Saved as `bgColor`. |
When this is the right block
- Visual Kanban-style column board with cards for displaying workflows, project status, or process stages — that is the job of Kanban Board, not a generic content block.
- Use it when you need the editor control labeled “Column title”, which exists on this block’s inspector.
- It matches pages about kanban, board, columns.
- Inserter grouping: quizzes, games, and click-to-reveal experiences.
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 Kanban Board block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Kanban Board”. It sits under Interactive. After insert, open Board Settings and set “Column title”, “Card title”, “Description”, “Tag label”.
What makes Kanban Board different from other Blockenberg blocks?
Visual Kanban-style column board with cards for displaying workflows, project status, or process stages. Inspector labels on this block include “Column title”, “Card title”, “Description”, “Tag label”.
Is the Kanban Board Gutenberg block free?
Yes. Kanban Board ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Kanban Board 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: Board Settings, Layout, Columns & Cards).
Related interactive blocks
Interactive Steps
Step-by-step wizard or process block with clickable numbered steps that reveal different content panels.
Memory Game
Interactive card-flip memory matching game with emoji themes, difficulty levels, move counter, timer, and best score tracking.
2048 Game
The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile.
Analog Clock
A beautiful live analog clock rendered with SVG. Fully customizable: clock style, timezone, colors, size, and optional date/time labels.
Bingo Card
Interactive 5×5 Bingo card with number calling, win detection, and celebration animations.
Content Score
Visual content or SEO scoring card with circular gauge, color-coded criteria rows, and overall grade.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Kanban Board from the Gutenberg inserter.