Blog · Gutenberg
Opinion Box block for WordPress
Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary.
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
Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary.
Inspector panels on this block: Badge, Author. Those titles come from index.js, not from a shared template.
Behavior controls: “Style — Style” options: Featured (card with background), Inline (left accent bar), Quote (large quote mark).
Where to find it
Gutenberg inserter → Blog → search “Opinion Box” (block name `blockenberg/opinion-box` in block.json). Style it in the sidebar after insert.
How to use Opinion Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Opinion Box”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Badge. Set “Show Badge”, “Badge Text”, “Show Avatar”, “Author Name”.
- 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 |
|---|---|
| Show Badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Badge Text | Text field in the inspector. block.json default: My Take. Saved as `badgeText`. |
| Show Avatar | On/off toggle in the inspector. On by default. Saved as `showAvatar`. |
| Author Name | Text field in the inspector. Saved as `authorName`. |
| Author Title / Role | Text field in the inspector. Saved as `authorTitle`. |
| Style — Style | Select control; the chosen value is saved on the block. Options: Featured (card with background); Inline (left accent bar); Quote (large quote mark). block.json default: featured. Saved as `style`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `borderRadius`. |
| Padding Top (×8px) | Numeric range control in the inspector. Range 0–10. block.json default: 4. Saved as `paddingTop`. |
| Padding Bottom (×8px) | Numeric range control in the inspector. Range 0–10. block.json default: 4. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #fefce8. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #fde047. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #ca8a04. Saved as `accentColor`. |
| Badge BG | Color control in the inspector. block.json default: #ca8a04. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
| Opinion Text | Color control in the inspector. block.json default: #1c1917. Saved as `textColor`. |
| Author Name | Color control in the inspector. block.json default: #57534e. Saved as `authorColor`. |
| Author Title | Color control in the inspector. block.json default: #78716c. Saved as `titleColor`. |
| Avatar BG | Color control in the inspector. block.json default: #d97706. Saved as `avatarBg`. |
| Avatar Initials | Color control in the inspector. block.json default: #ffffff. Saved as `avatarColor`. |
| Quote Mark | Color control in the inspector. block.json default: #fde047. Saved as `quoteMarkColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary — that is the job of Opinion Box, not a generic content block.
- Use it when you need the editor control labeled “Show Badge”, which exists on this block’s inspector.
- It matches pages about opinion, my take, editorial.
- 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 Opinion Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Opinion Box”. It sits under Blog. After insert, open Badge and set “Show Badge”, “Badge Text”, “Show Avatar”, “Author Name”.
What makes Opinion Box different from other Blockenberg blocks?
Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary. Inspector labels on this block include “Show Badge”, “Badge Text”, “Show Avatar”, “Author Name”.
Is the Opinion Box Gutenberg block free?
Yes. Opinion Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Opinion Box 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: Badge, Author).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Contributor Box
Multi-author attribution block with avatars, bios and social links.
Expert Roundup
Collect expert opinions, tips, or predictions on a topic. Each expert has a photo, name, title, and their contributed insight. Great for SEO-rich editorial articles.
Fact Check
Editorial fact-check verdict box with claim, verdict rating, explanation, and sources.
Listicle
Rich numbered list article format for Top 10, Best of, and ranked editorial content. Each item has number badge, title, image, description, verdict and tags.
Post Meta Bar
A configurable post metadata row: author, date, reading time, categories, tags, and comment count.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Opinion Box from the Gutenberg inserter.