Blog · Gutenberg
Interview Q&A block for WordPress
Magazine-style interview Q&A with styled questions and answers, speaker info, and 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
Magazine-style interview Q&A with styled questions and answers, speaker info, and multiple visual styles.
Inspector panels on this block: Speaker Info, Q&A Style, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout Style” options: Classic (prefix badge), Magazine (large Q), Card (each item in card), Minimal (subtle divider).
Where to find it
Gutenberg inserter → Blog → search “Interview Q&A” (block name `blockenberg/interview-block` in block.json). Style it in the sidebar after insert.
How to use Interview Q&A block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Interview Q&A”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Speaker Info. Set “Show Speaker Header”, “Interviewee Name”, “Interviewee Role / Title”, “Interviewer Name (optional)”.
- 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 |
|---|---|
| Show Speaker Header | On/off toggle in the inspector. On by default. Saved as `showSpeakerHeader`. |
| Interviewee Name | Text field in the inspector. block.json default: Jane Smith. Saved as `intervieweeName`. |
| Interviewee Role / Title | Text field in the inspector. block.json default: CEO & Co-Founder. Saved as `intervieweeRole`. |
| Interviewer Name (optional) | Text field in the inspector. Saved as `interviewerName`. |
| Layout Style | Select control; the chosen value is saved on the block. Options: Classic (prefix badge); Magazine (large Q); Card (each item in card); Minimal (subtle divider). block.json default: classic. Saved as `layout`. |
| Question Prefix Label | Text field in the inspector. block.json default: Q. Saved as `questionPrefix`. |
| Answer Prefix Label | Text field in the inspector. block.json default: A. Saved as `answerPrefix`. |
| Show Prefix Labels (Q / A) | On/off toggle in the inspector. On by default. Saved as `showPrefixLabel`. |
| Show Dividers Between Items | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Name Size (px) | Numeric range control in the inspector. Range 12–32. block.json default: 18. Saved as `nameSize`. |
| Prefix Size (px) | Numeric range control in the inspector. Range 10–24. block.json default: 13. Saved as `prefixSize`. |
| Question Color | Color control in the inspector. block.json default: #111827. Saved as `questionColor`. |
| Answer Color | Color control in the inspector. block.json default: #374151. Saved as `answerColor`. |
| Prefix Badge BG | Color control in the inspector. block.json default: #7c3aed. Saved as `prefixBg`. |
| Prefix Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `prefixColor`. |
| Accent Color | Color control in the inspector. block.json default: #7c3aed. Saved as `accentColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Header Background | Color control in the inspector. block.json default: #f9fafb. Saved as `headerBg`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Max Width (px) | Numeric range control in the inspector. Range 400–1200. block.json default: 800. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Magazine-style interview Q&A with styled questions and answers, speaker info, and multiple visual styles — that is the job of Interview Q&A, not a generic content block.
- Use it when you need the editor control labeled “Show Speaker Header”, which exists on this block’s inspector.
- It matches pages about interview, question, answer.
- 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 Interview Q&A block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Interview Q&A”. It sits under Blog. After insert, open Speaker Info and set “Show Speaker Header”, “Interviewee Name”, “Interviewee Role / Title”, “Interviewer Name (optional)”.
What makes Interview Q&A different from other Blockenberg blocks?
Magazine-style interview Q&A with styled questions and answers, speaker info, and multiple visual styles. Inspector labels on this block include “Show Speaker Header”, “Interviewee Name”, “Interviewee Role / Title”, “Interviewer Name (optional)”.
Is the Interview Q&A Gutenberg block free?
Yes. Interview Q&A ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Interview Q&A 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: Speaker Info, Q&A Style, Layout).
Related blog blocks
Media Quote
Quote with embedded video thumbnail (play button overlay) or image and speaker attribution. Perfect for podcast clips, interview excerpts, and video testimonials.
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.
Podcast Episode
Complete podcast episode show notes with guests, chapter timestamps, listen links, resources, and transcript excerpt.
Pullquote Pro
Eye-catching quotation with large typography, decorative marks, author avatar, and alignment options.
Reading Notes
Annotated reading notes for books and articles with quotes, insights, questions, and a star rating.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Interview Q&A from the Gutenberg inserter.