Charts · Gutenberg
Gantt Chart block for WordPress
Project timeline Gantt chart with tasks, phases, milestones, and a today indicator. Rendered in pure CSS — no library required.
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
Project timeline Gantt chart with tasks, phases, milestones, and a today indicator. Rendered in pure CSS — no library required.
Inspector panels on this block: Tasks, Display Options, Dimensions. Those titles come from index.js, not from a shared template.
Behavior controls: “View” options: Monthly, Weekly.
Where to find it
Gutenberg inserter → Charts → search “Gantt Chart” (block name `blockenberg/gantt-chart` in block.json). Style it in the sidebar after insert.
How to use Gantt Chart block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Gantt Chart”, insert it. Category: Charts.
- Configure inspector controls that exist on this block. Open Tasks. Set “Task Name”, “Phase / Group”, “Start Date”, “End Date”.
- 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 |
|---|---|
| Task Name | Text field in the inspector. |
| Phase / Group | Text field in the inspector. |
| Start Date | Text field in the inspector. |
| End Date | Text field in the inspector. |
| Progress % | Numeric range control in the inspector. Range 0–100. |
| Milestone (diamond marker) | On/off toggle in the inspector. |
| Assignee (optional) | Text field in the inspector. |
| View | Select control; the chosen value is saved on the block. Options: Monthly; Weekly. block.json default: month. Saved as `view`. |
| Show Phase Groups | On/off toggle in the inspector. On by default. Saved as `showPhases`. |
| Show Milestones | On/off toggle in the inspector. On by default. Saved as `showMilestones`. |
| Show Progress Fill | On/off toggle in the inspector. On by default. Saved as `showProgress`. |
| Show Assignee | On/off toggle in the inspector. Off by default. Saved as `showAssignee`. |
| Highlight Today | On/off toggle in the inspector. On by default. Saved as `highlightToday`. |
| Show Legend | On/off toggle in the inspector. On by default. Saved as `showLegend`. |
| Row Height (px) | Numeric range control in the inspector. Range 28–80. block.json default: 40. Saved as `rowHeight`. |
| Label Column Width (px) | Numeric range control in the inspector. Range 100–400. block.json default: 200. Saved as `labelWidth`. |
| Task Bar Radius | Numeric range control in the inspector. Range 0–20. block.json default: 4. Saved as `taskRadius`. |
| Max Width (0 = full) | Numeric range control in the inspector. Range 0–1400. block.json default: 0. Saved as `maxWidth`. |
| Padding Top | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingBottom`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Header / Phase Background | Color control in the inspector. block.json default: #f3f4f6. Saved as `headerBg`. |
| Row Background | Color control in the inspector. block.json default: #ffffff. Saved as `rowBg`. |
| Alternating Row Background | Color control in the inspector. block.json default: #f9fafb. Saved as `rowAltBg`. |
| Grid Lines | Color control in the inspector. block.json default: #e5e7eb. Saved as `gridColor`. |
| Header Text | Color control in the inspector. block.json default: #374151. Saved as `headerColor`. |
| Task Label Color | Color control in the inspector. block.json default: #111827. Saved as `labelColor`. |
| Phase Label Color | Color control in the inspector. block.json default: #6b7280. Saved as `phaseColor`. |
| Today Indicator | Color control in the inspector. block.json default: #ef4444. Saved as `todayLine`. |
| Milestone Color | Color control in the inspector. block.json default: #f59e0b. Saved as `milestoneColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Project timeline Gantt chart with tasks, phases, milestones, and a today indicator. Rendered in pure CSS — no library required — that is the job of Gantt Chart, not a generic content block.
- Use it when you need the editor control labeled “Task Name”, which exists on this block’s inspector.
- It matches pages about gantt, project, timeline.
- Inserter grouping: reports, dashboards, and data-heavy 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 Gantt Chart block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Gantt Chart”. It sits under Charts. After insert, open Tasks and set “Task Name”, “Phase / Group”, “Start Date”, “End Date”.
What makes Gantt Chart different from other Blockenberg blocks?
Project timeline Gantt chart with tasks, phases, milestones, and a today indicator. Rendered in pure CSS — no library required. Inspector labels on this block include “Task Name”, “Phase / Group”, “Start Date”, “End Date”.
Is the Gantt Chart Gutenberg block free?
Yes. Gantt Chart ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Gantt Chart 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: Tasks, Display Options, Dimensions).
Related charts blocks
Area Chart
Smooth filled area chart with multiple datasets, gradient fills, and animation using Chart.js (CDN). Great for showing trends over time.
Bar Chart
Vertical or horizontal bar chart with multiple datasets using Chart.js (CDN). Supports stacked, border radius, and custom colors.
Bubble Chart
Interactive bubble chart powered by Chart.js.
Doughnut Chart
Pie/doughnut chart with adjustable cutout, center label, and per-slice colors using Chart.js (CDN).
Dumbbell Chart
Horizontal dumbbell (connected dot) chart comparing two values per category — ideal for before/after, target vs actual, or two-group comparisons.
Heatmap Calendar
GitHub-style activity heatmap calendar showing intensity by day across a full year. 53 × 7 grid of colour-coded squares with month labels, day-of-week labels, and a configurable colour scale.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Gantt Chart from the Gutenberg inserter.