Marketing · Gutenberg
How It Works block for WordPress
Numbered process steps section — show a 3-6 step sequence with large step numbers, icons, titles, descriptions, and optional connectors. Perfect for onboarding flows and feature walkthroughs.
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
Numbered process steps section — show a 3-6 step sequence with large step numbers, icons, titles, descriptions, and optional connectors. Perfect for onboarding flows and feature walkthroughs.
Inspector panels on this block: Layout, Steps. Those titles come from index.js, not from a shared template.
Behavior controls: “Direction” options: Horizontal (left→right), Vertical (top→bottom); “Number style” options: Circle, Square, Plain, Outlined; “Card style” options: Plain, Card (bg), Bordered, Shadow; “Text align” options: Left, Center.
Where to find it
Gutenberg inserter → Marketing → search “How It Works” (block name `blockenberg/how-it-works` in block.json). Style it in the sidebar after insert.
How to use How It Works block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “How It Works”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Direction”, “Number style”, “Card style”, “Text align”.
- Check the published page. The view script reads HTML data attributes: data-delay. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Direction | Select control; the chosen value is saved on the block. Options: Horizontal (left→right); Vertical (top→bottom). block.json default: horizontal. Saved as `layout`. |
| Number style | Select control; the chosen value is saved on the block. Options: Circle; Square; Plain; Outlined. block.json default: circle. Saved as `numberStyle`. |
| Card style | Select control; the chosen value is saved on the block. Options: Plain; Card (bg); Bordered; Shadow. block.json default: plain. Saved as `cardStyle`. |
| Text align | Select control; the chosen value is saved on the block. Options: Left; Center. block.json default: center. Saved as `textAlign`. |
| Gap (px) | Numeric range control in the inspector. Range 16–80. block.json default: 40. Saved as `gap`. |
| Card padding (px) | Numeric range control in the inspector. Range 12–56. block.json default: 28. Saved as `cardPadding`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardRadius`. |
| Show connector | On/off toggle in the inspector. On by default. Saved as `showConnector`. |
| Connector style | Select control; the chosen value is saved on the block. Options: Solid line; Dashed; Dotted; Arrow. block.json default: line. Saved as `connectorStyle`. |
| Show emoji icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Animate on scroll | On/off toggle in the inspector. On by default. Saved as `animate`. |
| Number size (px) | Numeric range control in the inspector. Range 14–40. block.json default: 22. Saved as `numberSize`. |
| Number badge size (px) | Numeric range control in the inspector. Range 36–88. block.json default: 52. Saved as `numberBgSize`. |
| Icon size (px) | Numeric range control in the inspector. Range 20–64. block.json default: 36. Saved as `iconSize`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
| Steps — Title | Text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-delay.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Numbered process steps section — show a 3-6 step sequence with large step numbers, icons, titles, descriptions, and optional connectors. Perfect for onboarding flows and feature walkthroughs — that is the job of How It Works, not a generic content block.
- Use it when you need the editor control labeled “Direction”, which exists on this block’s inspector.
- It matches pages about how it works, steps, process.
- Inserter grouping: landing pages, campaign sections, and conversion 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 How It Works block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “How It Works”. It sits under Marketing. After insert, open Layout and set “Direction”, “Number style”, “Card style”, “Text align”.
What makes How It Works different from other Blockenberg blocks?
Numbered process steps section — show a 3-6 step sequence with large step numbers, icons, titles, descriptions, and optional connectors. Perfect for onboarding flows and feature walkthroughs. Inspector labels on this block include “Direction”, “Number style”, “Card style”, “Text align”.
Is the How It Works Gutenberg block free?
Yes. How It Works ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style How It Works 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: Layout, Steps).
Related marketing blocks
Comparison Guide
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons.
Multi-Step Form
A wizard-style multi-step lead capture form with step indicator, per-step fields, and success message.
Product Tour
An interactive product walkthrough with numbered steps, descriptions and screenshots. Tabs-style navigation — perfect for onboarding flows and feature showcases.
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Affiliate Review Box
Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
Affiliate Section
Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert How It Works from the Gutenberg inserter.