Blog · Gutenberg

Learning Path block for WordPress

Display a structured learning path with steps, skill tags, durations and type indicators.

What it actually does

Display a structured learning path with steps, skill tags, durations and type indicators.

Inspector panels on this block: Path Settings, Steps, Layout Colors, Step Type Colors. Those titles come from index.js, not from a shared template.

Behavior controls: “Difficulty” options: Beginner, Intermediate, Advanced; “Type” options: 📖 Lesson, 🔨 Project, ✏️ Quiz, 📄 Reading, 🎬 Video.

Where to find it

Gutenberg inserter → Blog → search “Learning Path” (block name `blockenberg/learning-path` in block.json). Style it in the sidebar after insert.

How to use Learning Path block for WordPress

1. Install Blockenberg. Install from WordPress.org and activate the plugin.
2. Insert the block. Edit a page, click +, search for “Learning Path”, insert it. Category: Blog.
3. Configure inspector controls that exist on this block. Open Path Settings. Set “Path Title”, “Description”, “Show Description”, “Total Duration”.
4. 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

What the front-end script actually does

• The view script reads HTML data attributes: data-opts, data-rendered.

When this is the right block

• Display a structured learning path with steps, skill tags, durations and type indicators — that is the job of Learning Path, not a generic content block.
• Use it when you need the editor control labeled “Path Title”, which exists on this block’s inspector.
• It matches pages about learning, path, course.
• 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

Related blog blocks