Blog · Gutenberg
Reading Notes block for WordPress
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
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
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
Inspector panels on this block: Book / Article Details, Display, Notes (, Spacing & Shape, Header Colors, Note Type Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: List, Masonry Grid; “Type” options: 💬 Quote, 💡 Insight, ❓ Question, 📝 Summary.
Where to find it
Gutenberg inserter → Blog → search “Reading Notes” (block name `blockenberg/reading-notes` in block.json). Style it in the sidebar after insert.
How to use Reading Notes block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Reading Notes”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Book / Article Details. Set “Book / Article Details — Title”, “Author”, “Genre / Category”, “Date Read”.
- 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 |
|---|---|
| Book / Article Details — Title | Text field in the inspector. block.json default: Atomic Habits. Saved as `bookTitle`. |
| Author | Text field in the inspector. block.json default: James Clear. Saved as `author`. |
| Genre / Category | Text field in the inspector. block.json default: Self-Development. Saved as `genre`. |
| Date Read | Text field in the inspector. Saved as `dateRead`. |
| Rating (stars) | Numeric range control in the inspector. Range 0–5. block.json default: 5. Saved as `rating`. |
| Show Header | On/off toggle in the inspector. On by default. Saved as `showHeader`. |
| Show Author | On/off toggle in the inspector. On by default. Saved as `showAuthor`. |
| Show Genre | On/off toggle in the inspector. On by default. Saved as `showGenre`. |
| Show Rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Show Date Read | On/off toggle in the inspector. On by default. Saved as `showDateRead`. |
| Layout | Select control; the chosen value is saved on the block. Options: List; Masonry Grid. block.json default: list. Saved as `layout`. |
| Type | Select control; the chosen value is saved on the block. Options: 💬 Quote; 💡 Insight; ❓ Question; 📝 Summary. Saved as `notes`. |
| Source / Page (optional) | Text field in the inspector. Saved as `notes`. |
| Spacing & Shape — Gap | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `gap`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Note Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `noteTypo`. |
| Header Background | Color control in the inspector. block.json default: #1e293b. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Star Color | Color control in the inspector. block.json default: #f59e0b. Saved as `starColor`. |
| Block Background | Color control in the inspector. Saved as `bgColor`. |
| Quote Background | Color control in the inspector. block.json default: #fdf2f8. Saved as `quoteBg`. |
| Quote Text Color | Color control in the inspector. block.json default: #86198f. Saved as `quoteColor`. |
| Quote Accent | Color control in the inspector. block.json default: #d946ef. Saved as `quoteAccent`. |
| Insight Background | Color control in the inspector. block.json default: #eff6ff. Saved as `insightBg`. |
| Insight Text Color | Color control in the inspector. block.json default: #1d4ed8. Saved as `insightColor`. |
| Insight Accent | Color control in the inspector. block.json default: #3b82f6. Saved as `insightAccent`. |
| Question Background | Color control in the inspector. block.json default: #fffbeb. Saved as `questionBg`. |
| Question Text Color | Color control in the inspector. block.json default: #92400e. Saved as `questionColor`. |
| Question Accent | Color control in the inspector. block.json default: #f59e0b. Saved as `questionAccent`. |
| Summary Background | Color control in the inspector. block.json default: #f0fdf4. Saved as `summaryBg`. |
| Summary Text Color | Color control in the inspector. block.json default: #14532d. Saved as `summaryColor`. |
| Summary Accent | Color control in the inspector. block.json default: #22c55e. Saved as `summaryAccent`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Annotated reading notes for books and articles with quotes, insights, questions, and a star rating — that is the job of Reading Notes, not a generic content block.
- Use it when you need the editor control labeled “Book / Article Details — Title”, which exists on this block’s inspector.
- It matches pages about reading, notes, book.
- 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 Reading Notes block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Reading Notes”. It sits under Blog. After insert, open Book / Article Details and set “Book / Article Details — Title”, “Author”, “Genre / Category”, “Date Read”.
What makes Reading Notes different from other Blockenberg blocks?
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating. Inspector labels on this block include “Book / Article Details — Title”, “Author”, “Genre / Category”, “Date Read”.
Is the Reading Notes Gutenberg block free?
Yes. Reading Notes ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Reading 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: Book / Article Details, Display, Notes (, Spacing & Shape).
Related blog blocks
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
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.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
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 Reading Notes from the Gutenberg inserter.