Blog · Gutenberg
Reading Card block for WordPress
Book, article, podcast or course recommendation card with cover image, rating, category badge and CTA link. Multiple visual styles.
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
Book, article, podcast or course recommendation card with cover image, rating, category badge and CTA link. Multiple visual styles.
Inspector panels on this block: Content, Style & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Content Type” options: 📚 Book, 📄 Article, 🎙️ Podcast, 🎓 Course, 🎬 Video; “Card Layout” options: Horizontal (cover left), Vertical (cover top), Minimal (inline).
Where to find it
Gutenberg inserter → Blog → search “Reading Card” (block name `blockenberg/reading-card` in block.json). Style it in the sidebar after insert.
How to use Reading Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Reading Card”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Content. Set “Content Type”, “Badge Label (override)”, “CTA Label”, “CTA URL”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Content Type | Select control; the chosen value is saved on the block. Options: 📚 Book; 📄 Article; 🎙️ Podcast; 🎓 Course; 🎬 Video. block.json default: book. Saved as `contentType`. |
| Badge Label (override) | Text field in the inspector. Saved as `badge`. |
| CTA Label | Text field in the inspector. block.json default: Get the book →. Saved as `ctaLabel`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Open in New Tab | On/off toggle in the inspector. On by default. Saved as `ctaIsExternal`. |
| Show Rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| Rating (stars) | Numeric range control in the inspector. Range 0–5. block.json default: 5. Saved as `rating`. |
| Card Layout | Select control; the chosen value is saved on the block. Options: Horizontal (cover left); Vertical (cover top); Minimal (inline). block.json default: horizontal. Saved as `layout`. |
| Cover Width (px; horizontal only) | Numeric range control in the inspector. Range 60–280. block.json default: 120. Saved as `coverWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–1200. block.json default: 720. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–120. block.json default: 32. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–120. block.json default: 32. Saved as `paddingBottom`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Author | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `authorTypo`. |
| Description | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `descTypo`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Badge BG | Color control in the inspector. block.json default: #7c3aed. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Author | Color control in the inspector. block.json default: #6b7280. Saved as `authorColor`. |
| Description | Color control in the inspector. block.json default: #374151. Saved as `descColor`. |
| Stars | Color control in the inspector. block.json default: #f59e0b. Saved as `ratingColor`. |
| CTA Link | Color control in the inspector. block.json default: #7c3aed. Saved as `ctaColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Book, article, podcast or course recommendation card with cover image, rating, category badge and CTA link. Multiple visual styles — that is the job of Reading Card, not a generic content block.
- Use it when you need the editor control labeled “Content Type”, which exists on this block’s inspector.
- It matches pages about book, reading, recommend.
- 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 Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Reading Card”. It sits under Blog. After insert, open Content and set “Content Type”, “Badge Label (override)”, “CTA Label”, “CTA URL”.
What makes Reading Card different from other Blockenberg blocks?
Book, article, podcast or course recommendation card with cover image, rating, category badge and CTA link. Multiple visual styles. Inspector labels on this block include “Content Type”, “Badge Label (override)”, “CTA Label”, “CTA URL”.
Is the Reading Card Gutenberg block free?
Yes. Reading Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Reading Card 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: Content, Style & Layout).
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.
Reading Notes
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
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.
Course Lesson
A complete course lesson with objectives, content sections, resources, and navigation.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Reading Card from the Gutenberg inserter.