Blog · Gutenberg
HowTo Schema block for WordPress
Step-by-step How-To guide with automatic Schema.org HowTo JSON-LD structured data for Google rich results. Includes supplies, tools, total time, cost estimate, and numbered steps with images.
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
Step-by-step How-To guide with automatic Schema.org HowTo JSON-LD structured data for Google rich results. Includes supplies, tools, total time, cost estimate, and numbered steps with images.
Inspector panels on this block: Step, Steps, Supplies, Tools, Guide Info, Display. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Blog → search “HowTo Schema” (block name `blockenberg/howto-schema` in block.json). Style it in the sidebar after insert.
How to use HowTo Schema block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “HowTo Schema”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Step. Set “Step title”, “Step description”, “Show supplies section”, “Show tools section”.
- Check the published page. The view script reads HTML data attributes: data-animate. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Step title | Text field in the inspector. |
| Step description | Multiline text field in the inspector. |
| Show supplies section | On/off toggle in the inspector. On by default. Saved as `showSupplies`. |
| Show tools section | On/off toggle in the inspector. On by default. Saved as `showTools`. |
| Total time (ISO 8601 – e.g. PT30M, PT2H) | Text field in the inspector. block.json default: PT2H. Saved as `totalTime`. |
| Time label (displayed) | Text field in the inspector. block.json default: 2 hours. Saved as `totalTimeLabel`. |
| Estimated cost (number only) | Text field in the inspector. block.json default: 15. Saved as `estimatedCost`. |
| Currency (e.g. USD, EUR) | Text field in the inspector. block.json default: USD. Saved as `costCurrency`. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show meta bar (time/cost) | On/off toggle in the inspector. On by default. Saved as `showMeta`. |
| Numbered steps | On/off toggle in the inspector. On by default. Saved as `showStepNumbers`. |
| Show step images | On/off toggle in the inspector. On by default. Saved as `showStepImages`. |
| Step number size (px) | Numeric range control in the inspector. Range 12–32. block.json default: 18. Saved as `stepNumSize`. |
| 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`. |
| Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Colors — Title | Color control in the inspector. block.json default: #1e1b4b. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #374151. Saved as `descColor`. |
| Step number background | Color control in the inspector. block.json default: #6c3fb5. Saved as `stepNumBg`. |
| Step number text | Color control in the inspector. block.json default: #ffffff. Saved as `stepNumColor`. |
| Step title | Color control in the inspector. block.json default: #1e1b4b. Saved as `stepNameColor`. |
| Step text | Color control in the inspector. block.json default: #374151. Saved as `stepTextColor`. |
| Meta bar background | Color control in the inspector. block.json default: #f5f3ff. Saved as `metaBg`. |
| Meta bar border | Color control in the inspector. block.json default: #ede9fe. Saved as `metaBorder`. |
| Meta bar text | Color control in the inspector. block.json default: #374151. Saved as `metaColor`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Supply/tool background | Color control in the inspector. block.json default: #f9fafb. Saved as `supplyBg`. |
| Supply/tool border | Color control in the inspector. block.json default: #e5e7eb. Saved as `supplyBorder`. |
| Block background | Color control in the inspector. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Step-by-step How-To guide with automatic Schema.org HowTo JSON-LD structured data for Google rich results. Includes supplies, tools, total time, cost estimate, and numbered steps with images — that is the job of HowTo Schema, not a generic content block.
- Use it when you need the editor control labeled “Step title”, which exists on this block’s inspector.
- It matches pages about howto, how-to, schema.
- Inserter grouping: posts, magazines, and editorial WordPress 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 HowTo Schema block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “HowTo Schema”. It sits under Blog. After insert, open Step and set “Step title”, “Step description”, “Show supplies section”, “Show tools section”.
Does HowTo Schema output FAQ schema?
Yes, when the schema toggle on this block is on. The front-end script injects FAQPage JSON-LD. That is not the same as Yoast/Rank Math site-wide schema.
Is the HowTo Schema Gutenberg block free?
Yes. HowTo Schema ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style HowTo Schema 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: Step, Steps, Supplies, Tools).
Related blog blocks
Tutorial Card
A structured tutorial block with steps, prerequisites, materials, learning outcomes, and progress tracking.
Knowledge Base Article
Full knowledge base / help center article with category, difficulty, table of contents, sections, and related articles.
Learning Path
Display a structured learning path with steps, skill tags, durations and type indicators.
Lesson Objectives
"What You'll Learn" educational objectives box with bullet points, level badge, and estimated read time.
Recipe Card
Full-featured recipe card with ingredients, steps, nutrition facts, ratings, and Recipe JSON-LD structured data.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert HowTo Schema from the Gutenberg inserter.