Blog · Gutenberg
Course Lesson block for WordPress
A complete course lesson with objectives, content sections, resources, and navigation.
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
A complete course lesson with objectives, content sections, resources, and navigation.
Inspector panels on this block: Lesson Info, Introduction, Learning Objectives, Prerequisites, Content Sections, Resources, Lesson Navigation, Header Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Difficulty” options: 🟢 Beginner, 🟡 Intermediate, 🔴 Advanced; “Type” options: Text, 💡 Tip, ⚠️ Warning, 📝 Note; “Type (Resources)” options: 📄 Article, 🎥 Video, ⬇️ Download, ✏️ Exercise, 🔗 Link.
Where to find it
Gutenberg inserter → Blog → search “Course Lesson” (block name `blockenberg/course-lesson` in block.json). Style it in the sidebar after insert.
How to use Course Lesson block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Course Lesson”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Lesson Info. Set “Lesson Title”, “Module Title”, “Show Module”, “Show Lesson #”.
- 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
| Control | What the code does |
|---|---|
| Lesson Title | Text field in the inspector. block.json default: Building REST APIs with Node.js. Saved as `lessonTitle`. |
| Module Title | Text field in the inspector. block.json default: Module 4: APIs & Data. Saved as `moduleTitle`. |
| Show Module | On/off toggle in the inspector. On by default. Saved as `showModule`. |
| Show Lesson # | On/off toggle in the inspector. On by default. Saved as `showLessonNumber`. |
| Lesson Number (e.g. Lesson 3 of 8) | Text field in the inspector. block.json default: Lesson 3 of 8. Saved as `lessonNumber`. |
| Duration | Text field in the inspector. block.json default: 45 min. Saved as `duration`. |
| Instructor | Text field in the inspector. block.json default: Alex Martinez. Saved as `instructor`. |
| Difficulty | Select control; the chosen value is saved on the block. Options: 🟢 Beginner; 🟡 Intermediate; 🔴 Advanced. block.json default: intermediate. Saved as `difficulty`. |
| Duration (Show Duration) | On/off toggle in the inspector. On by default. Saved as `showDuration`. |
| Difficulty (Show Difficulty) | On/off toggle in the inspector. On by default. Saved as `showDifficulty`. |
| Instructor (Show Instructor) | On/off toggle in the inspector. On by default. Saved as `showInstructor`. |
| Show Introduction | On/off toggle in the inspector. On by default. Saved as `showIntro`. |
| Intro Text | Multiline text field in the inspector. block.json default: In this lesson, you'll build a fully functional REST API using Express.js. We'll cover everything from project setup and route definition to data validation and database integration — all with real-world patterns you can use immediately.. Saved as `intro`. |
| Show Objectives | On/off toggle in the inspector. On by default. Saved as `showObjectives`. |
| Section Label | Text field in the inspector. block.json default: What You'll Learn. Saved as `objectivesLabel`. |
| Show Prerequisites | On/off toggle in the inspector. On by default. Saved as `showPrerequisites`. |
| Section Label (Prerequisites Label) | Text field in the inspector. block.json default: Prerequisites. Saved as `prerequisitesLabel`. |
| Show Content Sections | On/off toggle in the inspector. On by default. Saved as `showSections`. |
| Type | Select control; the chosen value is saved on the block. Options: Text; 💡 Tip; ⚠️ Warning; 📝 Note. Saved as `sections`. |
| Heading | Text field in the inspector. Saved as `sections`. |
| Content Sections — Content | Multiline text field in the inspector. Saved as `sections`. |
| Show Resources | On/off toggle in the inspector. On by default. Saved as `showResources`. |
| Section Label (Resources Label) | Text field in the inspector. block.json default: Resources. Saved as `resourcesLabel`. |
| Type (Resources) | Select control; the chosen value is saved on the block. Options: 📄 Article; 🎥 Video; ⬇️ Download; ✏️ Exercise; 🔗 Link. Saved as `resources`. |
| Resources — Title | Text field in the inspector. Saved as `resources`. |
| URL | Text field in the inspector. Saved as `resources`. |
| Show Prev/Next Navigation | On/off toggle in the inspector. On by default. Saved as `showNav`. |
| Previous Lesson Title | Text field in the inspector. block.json default: HTTP Fundamentals & Status Codes. Saved as `prevLesson`. |
| Previous URL | Text field in the inspector. block.json default: #. Saved as `prevLessonUrl`. |
| Next Lesson Title | Text field in the inspector. block.json default: Authentication with JWT. Saved as `nextLesson`. |
| Next URL | Text field in the inspector. block.json default: #. Saved as `nextLessonUrl`. |
| Lesson Title (Typo Title) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Body Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBody`. |
| Module Title Size (px) | Numeric range control in the inspector. Range 9–18. block.json default: 11. Saved as `moduleTitleSize`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Header BG | Color control in the inspector. block.json default: #0f172a. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Meta Text | Color control in the inspector. block.json default: #94a3b8. Saved as `metaColor`. |
| Block BG | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Body & Section Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
| Body Text | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Section Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Intro BG | Color control in the inspector. block.json default: #f0f9ff. Saved as `introBg`. |
| Intro Text | Color control in the inspector. block.json default: #0369a1. Saved as `introColor`. |
| Objectives BG | Color control in the inspector. block.json default: #f0fdf4. Saved as `objectiveBg`. |
| Objectives Text | Color control in the inspector. block.json default: #14532d. Saved as `objectiveColor`. |
| Prereq BG | Color control in the inspector. block.json default: #f8fafc. Saved as `prereqBg`. |
| Resource BG | Color control in the inspector. block.json default: #f8fafc. Saved as `resourceBg`. |
| Nav BG | Color control in the inspector. block.json default: #f8fafc. Saved as `navBg`. |
| Tip BG | Color control in the inspector. block.json default: #fefce8. Saved as `tipBg`. |
| Tip Text | Color control in the inspector. block.json default: #713f12. Saved as `tipColor`. |
| Tip Border | Color control in the inspector. block.json default: #fbbf24. Saved as `tipBorder`. |
| Warning BG | Color control in the inspector. block.json default: #fff7ed. Saved as `warningBg`. |
| Warning Text | Color control in the inspector. block.json default: #9a3412. Saved as `warningColor`. |
| Warning Border | Color control in the inspector. block.json default: #f97316. Saved as `warningBorder`. |
| Note BG | Color control in the inspector. block.json default: #eff6ff. Saved as `noteBg`. |
| Note Text | Color control in the inspector. block.json default: #1e40af. Saved as `noteColor`. |
| Note Border | Color control in the inspector. block.json default: #3b82f6. Saved as `noteBorder`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- A complete course lesson with objectives, content sections, resources, and navigation — that is the job of Course Lesson, not a generic content block.
- Use it when you need the editor control labeled “Lesson Title”, which exists on this block’s inspector.
- It matches pages about course, lesson, module.
- 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 Lesson block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Course Lesson”. It sits under Blog. After insert, open Lesson Info and set “Lesson Title”, “Module Title”, “Show Module”, “Show Lesson #”.
What makes Course Lesson different from other Blockenberg blocks?
A complete course lesson with objectives, content sections, resources, and navigation. Inspector labels on this block include “Lesson Title”, “Module Title”, “Show Module”, “Show Lesson #”.
Is the Course Lesson Gutenberg block free?
Yes. Course Lesson ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Course Lesson 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: Lesson Info, Introduction, Learning Objectives, Prerequisites).
Related blog blocks
Learning Path
Display a structured learning path with steps, skill tags, durations and type indicators.
Course Curriculum
Expandable course curriculum / syllabus with sections and lessons. Each lesson shows duration, type, and free/locked status. Perfect for online courses and training pages.
Lesson Objectives
"What You'll Learn" educational objectives box with bullet points, level badge, and estimated read time.
Study Notes
Cornell-style structured study notes with cue column, notes column, summary, and key terms.
Tutorial Card
A structured tutorial block with steps, prerequisites, materials, learning outcomes, and progress tracking.
HowTo Schema
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
Install Blockenberg from WordPress.org, then insert Course Lesson from the Gutenberg inserter.