Blog · Gutenberg
Study Notes block for WordPress
Cornell-style structured study notes with cue column, notes column, summary, and key terms.
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
Cornell-style structured study notes with cue column, notes column, summary, and key terms.
Inspector panels on this block: Note Details, Layout, Summary & Key Terms, Header Colors, Notes Area Colors, Summary & Key Terms Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Notes Layout” options: Cornell (Cue | Notes), Linear (stacked), Cards.
Where to find it
Gutenberg inserter → Blog → search “Study Notes” (block name `blockenberg/study-notes` in block.json). Style it in the sidebar after insert.
How to use Study Notes block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Study Notes”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Note Details. Set “Cue / Keyword”, “Notes”, “Topic / Title”, “Subject”.
- 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 |
|---|---|
| Cue / Keyword | Text field in the inspector. Saved as `notes`. |
| Notes | Multiline text field in the inspector. Saved as `notes`. |
| Topic / Title | Text field in the inspector. block.json default: Cell Division & Mitosis. Saved as `topic`. |
| Subject | Text field in the inspector. block.json default: Biology 101. Saved as `subject`. |
| Source / Professor | Text field in the inspector. block.json default: Prof. Johnson — Lecture 12. Saved as `source`. |
| Date | Text field in the inspector. block.json default: February 24, 2026. Saved as `noteDate`. |
| Show Subject Badge | On/off toggle in the inspector. On by default. Saved as `showSubject`. |
| Show Source | On/off toggle in the inspector. On by default. Saved as `showSource`. |
| Show Date | On/off toggle in the inspector. On by default. Saved as `showDate`. |
| Notes Layout | Select control; the chosen value is saved on the block. Options: Cornell (Cue | Notes); Linear (stacked); Cards. block.json default: cornell. Saved as `layout`. |
| Cue Column Width (%) | Numeric range control in the inspector. Range 20–45. block.json default: 30. Saved as `cueWidth`. |
| Show Summary | On/off toggle in the inspector. On by default. Saved as `showSummary`. |
| Summary Label | Text field in the inspector. block.json default: Summary. Saved as `summaryLabel`. |
| Show Key Terms | On/off toggle in the inspector. On by default. Saved as `showKeyTerms`. |
| Key Terms Label | Text field in the inspector. block.json default: Key Terms. Saved as `keyTermsLabel`. |
| Show Tags | On/off toggle in the inspector. On by default. Saved as `showTags`. |
| Tags (comma-separated) | Text field in the inspector. Saved as `tags`. |
| Summary Size (px) | Numeric range control in the inspector. Range 10–24. block.json default: 12. Saved as `summarySize`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `borderRadius`. |
| Header Background | Color control in the inspector. block.json default: #1e3a5f. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Accent / Stripe | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
| Block Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Notes Area Colors — Border | Color control in the inspector. block.json default: #d1d5db. Saved as `borderColor`. |
| Cue Column BG | Color control in the inspector. block.json default: #f8fafc. Saved as `cueBg`. |
| Cue Text / Keywords | Color control in the inspector. block.json default: #1e40af. Saved as `cueColor`. |
| Cue Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cueBorderColor`. |
| Notes Background | Color control in the inspector. block.json default: #ffffff. Saved as `notesBg`. |
| Notes Text | Color control in the inspector. block.json default: #374151. Saved as `notesColor`. |
| Row Divider | Color control in the inspector. block.json default: #e5e7eb. Saved as `rowBorderColor`. |
| Summary Background | Color control in the inspector. block.json default: #fefce8. Saved as `summaryBg`. |
| Summary Text | Color control in the inspector. block.json default: #1c1917. Saved as `summaryColor`. |
| Summary Border | Color control in the inspector. block.json default: #fde68a. Saved as `summaryBorderColor`. |
| Key Terms Background | Color control in the inspector. block.json default: #f0f9ff. Saved as `keyTermsBg`. |
| Key Terms Text | Color control in the inspector. block.json default: #0f172a. Saved as `keyTermsColor`. |
| Key Terms Border | Color control in the inspector. block.json default: #bae6fd. Saved as `keyTermsBorderColor`. |
| Term Word Color | Color control in the inspector. block.json default: #0369a1. Saved as `termColor`. |
| Tag Background | Color control in the inspector. block.json default: #e0e7ff. Saved as `tagBg`. |
| Tag Text | Color control in the inspector. block.json default: #3730a3. Saved as `tagColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Cornell-style structured study notes with cue column, notes column, summary, and key terms — that is the job of Study Notes, not a generic content block.
- Use it when you need the editor control labeled “Cue / Keyword”, which exists on this block’s inspector.
- It matches pages about study, notes, cornell.
- 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 Study Notes block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Study Notes”. It sits under Blog. After insert, open Note Details and set “Cue / Keyword”, “Notes”, “Topic / Title”, “Subject”.
What makes Study Notes different from other Blockenberg blocks?
Cornell-style structured study notes with cue column, notes column, summary, and key terms. Inspector labels on this block include “Cue / Keyword”, “Notes”, “Topic / Title”, “Subject”.
Is the Study Notes Gutenberg block free?
Yes. Study Notes ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Study Notes 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: Note Details, Layout, Summary & Key Terms, Header Colors).
Related blog blocks
Course Lesson
A complete course lesson with objectives, content sections, resources, and navigation.
Footnotes
Academic-style footnotes with numbered inline markers and a full reference list.
Learning Path
Display a structured learning path with steps, skill tags, durations and type indicators.
Reading Notes
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
Research Brief
Academic or industry research summary: study details, findings with significance, limitations, and key takeaways.
Changelog
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Study Notes from the Gutenberg inserter.