Blog · Gutenberg
Course Curriculum block for WordPress
Expandable course curriculum / syllabus with sections and lessons. Each lesson shows duration, type, and free/locked status. Perfect for online courses and training pages.
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
Expandable course curriculum / syllabus with sections and lessons. Each lesson shows duration, type, and free/locked status. Perfect for online courses and training pages.
Inspector panels on this block: Course Info, CTA Button, Sizing. Those titles come from index.js, not from a shared template.
Behavior controls: “Course meta line” (e.g. "12 sections • 48 lessons • 24h").
Where to find it
Gutenberg inserter → Blog → search “Course Curriculum” (block name `blockenberg/course-curriculum` in block.json). Style it in the sidebar after insert.
How to use Course Curriculum block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Course Curriculum”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Course Info. Set “Course meta line”, “Show course meta”, “Show search bar”, “Expand all by default”.
- Check the published page. The view script reads HTML data attributes: data-default-open, data-expand-all. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Course meta line | Text field in the inspector. e.g. "12 sections • 48 lessons • 24h". block.json default: 12 sections • 48 lessons • 24 hours total. Saved as `courseMeta`. |
| Show course meta | On/off toggle in the inspector. On by default. Saved as `showCourseMeta`. |
| Show search bar | On/off toggle in the inspector. Off by default. Saved as `showSearch`. |
| Expand all by default | On/off toggle in the inspector. Off by default. Saved as `expandAll`. |
| Default open section (0 = first) | Numeric range control in the inspector. block.json default: 0. Saved as `defaultOpen`. |
| Show CTA button | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| Button label | Text field in the inspector. block.json default: Enroll Now. Saved as `ctaLabel`. |
| Button URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Section radius (px) | Numeric range control in the inspector. Range 0–20. block.json default: 10. Saved as `sectionRadius`. |
| Button radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 8. Saved as `btnRadius`. |
| Course Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Section Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSection`. |
| Lesson Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLesson`. |
| Padding top | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingTop`. |
| Padding bottom | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-default-open, data-expand-all.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
- Keyboard handlers move focus between items.
When this is the right block
- Expandable course curriculum / syllabus with sections and lessons. Each lesson shows duration, type, and free/locked status. Perfect for online courses and training pages — that is the job of Course Curriculum, not a generic content block.
- Use it when you need the editor control labeled “Course meta line”, which exists on this block’s inspector.
- It matches pages about course, curriculum, syllabus.
- 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 Course Curriculum block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Course Curriculum”. It sits under Blog. After insert, open Course Info and set “Course meta line”, “Show course meta”, “Show search bar”, “Expand all by default”.
What makes Course Curriculum different from other Blockenberg blocks?
Expandable course curriculum / syllabus with sections and lessons. Each lesson shows duration, type, and free/locked status. Perfect for online courses and training pages. Inspector labels on this block include “Course meta line”, “Show course meta”, “Show search bar”, “Expand all by default”.
Is the Course Curriculum Gutenberg block free?
Yes. Course Curriculum ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Course Curriculum 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: Course Info, CTA Button, Sizing).
Related blog blocks
Course Lesson
A complete course lesson with objectives, content sections, resources, and navigation.
Learning Path
Display a structured learning path with steps, skill tags, durations and type indicators.
Content Outline
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time.
Lesson Objectives
"What You'll Learn" educational objectives box with bullet points, level badge, and estimated read time.
Reading Card
Book, article, podcast or course recommendation card with cover image, rating, category badge and CTA link. Multiple visual styles.
Study Notes
Cornell-style structured study notes with cue column, notes column, summary, and key terms.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Course Curriculum from the Gutenberg inserter.