Blog · Gutenberg
Book Shelf block for WordPress
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
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 visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Inspector panels on this block: Shelf Settings, Spine Size, Books (' + a.books.length +. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Shelf (spines), Cards (covers), List; “Status” options: ✓ Read, ▶ Reading, ○ Want to read.
Where to find it
Gutenberg inserter → Blog → search “Book Shelf” (block name `blockenberg/book-shelf` in block.json). Style it in the sidebar after insert.
How to use Book Shelf block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Book Shelf”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Shelf Settings. Set “Shelf Settings — Title”, “Show title”, “Show rating”, “Show status”.
- 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 |
|---|---|
| Shelf Settings — Title | Text field in the inspector. block.json default: My Reading List. Saved as `shelfTitle`. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Layout | Select control; the chosen value is saved on the block. Options: Shelf (spines); Cards (covers); List. block.json default: shelf. Saved as `layout`. |
| Show rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Show status | On/off toggle in the inspector. On by default. Saved as `showStatus`. |
| Show genre | On/off toggle in the inspector. On by default. Saved as `showGenre`. |
| Show author | On/off toggle in the inspector. On by default. Saved as `showAuthor`. |
| Show year | On/off toggle in the inspector. On by default. Saved as `showYear`. |
| Spine width (px) | Numeric range control in the inspector. Range 28–80. block.json default: 46. Saved as `spineWidth`. |
| Spine height (px) | Numeric range control in the inspector. Range 80–320. block.json default: 190. Saved as `spineHeight`. |
| Border radius | Numeric range control in the inspector. Range 0–32. block.json default: 14. Saved as `borderRadius`. |
| Spine font size | Numeric range control in the inspector. Range 8–18. block.json default: 11. Saved as `spineFontSize`. |
| Books (' + a.books.length + — Title | Text field in the inspector. Saved as `books`. |
| Author | Text field in the inspector. Saved as `books`. |
| Genre | Text field in the inspector. Saved as `books`. |
| Year | Text field in the inspector. Saved as `books`. |
| Status | Select control; the chosen value is saved on the block. Options: ✓ Read; ▶ Reading; ○ Want to read. Saved as `books`. |
| Rating (0–5) | Numeric range control in the inspector. Range 0–5. Saved as `books`. |
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 visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags — that is the job of Book Shelf, not a generic content block.
- Use it when you need the editor control labeled “Shelf Settings — Title”, which exists on this block’s inspector.
- It matches pages about book, reading, shelf.
- 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 Book Shelf block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Book Shelf”. It sits under Blog. After insert, open Shelf Settings and set “Shelf Settings — Title”, “Show title”, “Show rating”, “Show status”.
What makes Book Shelf different from other Blockenberg blocks?
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags. Inspector labels on this block include “Shelf Settings — Title”, “Show title”, “Show rating”, “Show status”.
Is the Book Shelf Gutenberg block free?
Yes. Book Shelf ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Book Shelf 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: Shelf Settings, Spine Size, Books (' + a.books.length +).
Related blog blocks
Reading List
Curated book or article reading list with cover image, title, author, genre, star rating, read-status badge (Reading / Read / Want to Read / Recommended), description, and optional link.
Reading Notes
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
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.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Link Roundup
Curated links collection — weekly/monthly digest with categories.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Book Shelf from the Gutenberg inserter.