Interactive module
Process Step block
One step of a Process Steps block: marker, title and a short description.
Overview
A Process Step is one step of a Process Steps block. It has a title, a short text and — when the parent uses icon markers — an icon.
At a glance
- Block name
wpbb/process-step- Module
- Interactive
- Find it by searching
- Process Step
- Used inside
- Process Steps (it cannot be used on its own)
- Loads JavaScript on the site
- No
How to add the Process Step block
- Add the parent block. The Process Step block only exists inside a Process Steps block. Insert a Process Steps first (search for “Process Steps” in the block inserter); it already contains a few Process Step blocks with sample content.
- Add another Process Step. Select the Process Steps block and click the + at its end.
- Select it. Click inside the Process Step — or pick it in the List View (the three-lines icon in the top toolbar) — to see its own settings in the sidebar.
- Edit the content. Type the title (“Step title”) and text (“What happens in this step?”).
- Reorder or remove. Use the up/down arrows in the block toolbar to move it, or the block menu (⋮) → Delete to remove it.
- Style it. Design settings for all items are made on the parent Process Steps block, in its Styles tab, so every item stays consistent.
- Save or publish. Click Save draft, Preview or Publish / Update.
Content settings
You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.
On the block (in the editor canvas)
Title
- What it does
- The step name (an H3).
- What to enter or choose
- One or two words (plain text).
- Default
- Empty
- How to use it
- Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
- When to use it
- Always.
- Example
- “Discover”.
- Result
- Shown below the marker.
Text
- What it does
- A short description.
- What to enter or choose
- One sentence.
- Default
- Empty
- How to use it
- Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
- When to use it
- Usually.
- Example
- “We learn about your goals.”
- Result
- Shown below the title.
- Good to know
- A step with no title and no text is not shown.
Settings panel: Step icon
Only shown when the parent’s Marker is Icon.
Icon
- What it does
- The icon in this step’s marker.
- What to enter or choose
- An icon from the library.
- Default
- star
- How to use it
- Click the icon button to open the icon library, search by name (for example “arrow” or “phone”) and click an icon. “None” removes it.
- When to use it
- With icon markers.
- Example
- “search” for Discover.
- Result
- A 26px icon in the marker.
Design & styling
Styled on the parent Process Steps block.
Responsive settings
Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.
This block adapts to the screen width on its own and has no per-device settings.
Advanced options
- Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
- This block cannot be turned into a synced pattern on its own; make a pattern from its parent block instead.
This block has only the Additional CSS class(es) field in Advanced (no HTML anchor).