Content · Gutenberg
Step Progress block for WordPress
Horizontal wizard progress bar showing current step out of N with labels and colors.
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
Horizontal wizard progress bar showing current step out of N with labels and colors.
Inspector panels on this block: Steps, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Connector Style” options: Solid, Dashed, Dotted.
Step Progress 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 → Content → search “Step Progress” (block name `blockenberg/step-progress` in block.json). Style it in the sidebar after insert.
How to use Step Progress block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Step Progress”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Steps. Set “Step”, “Current Step”, “Show Step Numbers”, “Circle Size (px)”.
- 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 |
|---|---|
| Step | Text field in the inspector. Saved as `steps`. |
| Current Step | Numeric range control in the inspector. block.json default: 2. Saved as `currentStep`. |
| Show Step Numbers | On/off toggle in the inspector. On by default. Saved as `showNumbers`. |
| Circle Size (px) | Numeric range control in the inspector. Range 24–60. block.json default: 36. Saved as `circleSize`. |
| Bar / Connector Height (px) | Numeric range control in the inspector. Range 2–12. block.json default: 4. Saved as `barHeight`. |
| Connector Style | Select control; the chosen value is saved on the block. Options: Solid; Dashed; Dotted. block.json default: solid. Saved as `connectorStyle`. |
| Completed | Color control in the inspector. block.json default: #22c55e. Saved as `completedColor`. |
| Active / Current | Color control in the inspector. block.json default: #6c3fb5. Saved as `activeColor`. |
| Pending | Color control in the inspector. block.json default: #e5e7eb. Saved as `pendingColor`. |
When this is the right block
- Horizontal wizard progress bar showing current step out of N with labels and colors — that is the job of Step Progress, not a generic content block.
- Use it when you need the editor control labeled “Step”, which exists on this block’s inspector.
- It matches pages about step, progress, wizard.
- Inserter grouping: articles, cards, lists, and long-form layouts.
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 Step Progress block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Step Progress”. It sits under Content. After insert, open Steps and set “Step”, “Current Step”, “Show Step Numbers”, “Circle Size (px)”.
What makes Step Progress different from other Blockenberg blocks?
Horizontal wizard progress bar showing current step out of N with labels and colors. Inspector labels on this block include “Step”, “Current Step”, “Show Step Numbers”, “Circle Size (px)”.
Is the Step Progress Gutenberg block free?
Yes. Step Progress ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Step Progress 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: Steps, Appearance).
Related content blocks
Numbered List
Visual numbered or icon section — each item has a styled badge, heading, description, optional image and optional link. Ideal for steps, benefits, and 'why choose us' sections.
Progress Bar
Display animated progress bars with customizable styles and labels.
Interactive Checklist
A fully interactive checklist with progress tracking, emoji icons, add/remove items, and optional persistence via localStorage. Rich color and layout controls.
Progress Circle
Animated SVG circular progress rings — perfect for skills, stats, and KPIs.
Search Bar
Styled search field and button for site search with live AJAX suggestions option.
Accordion
Collapsible accordion panels for FAQ, features, and more.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Step Progress from the Gutenberg inserter.