Blog · Gutenberg
Media Quote block for WordPress
Quote with embedded video thumbnail (play button overlay) or image and speaker attribution. Perfect for podcast clips, interview excerpts, and video testimonials.
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
Quote with embedded video thumbnail (play button overlay) or image and speaker attribution. Perfect for podcast clips, interview excerpts, and video testimonials.
Inspector panels on this block: Media, Layout & Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Media Type” options: ▶ Video, 🎙️ Podcast/Audio, 🖼️ Image; “Layout” options: Media left, quote right, Media right, quote left, Media top, quote below, Quote only (no media); “Card Style” options: Card (shadow bg), Bordered, Minimal (accent bar), Flat.
Where to find it
Gutenberg inserter → Blog → search “Media Quote” (block name `blockenberg/media-quote` in block.json). Style it in the sidebar after insert.
How to use Media Quote block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Media Quote”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Media. Set “Show Media Panel”, “Media Type”, “Video URL (for link)”, “Show Media Label”.
- 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 Media Panel | On/off toggle in the inspector. On by default. Saved as `showVideo`. |
| Media Type | Select control; the chosen value is saved on the block. Options: ▶ Video; 🎙️ Podcast/Audio; 🖼️ Image. block.json default: video. Saved as `mediaType`. |
| Video URL (for link) | Text field in the inspector. Saved as `videoUrl`. |
| Show Media Label | On/off toggle in the inspector. On by default. Saved as `showMediaLabel`. |
| Media Label | Text field in the inspector. block.json default: Watch the full episode. Saved as `mediaLabel`. |
| Thumbnail Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `mediaRadius`. |
| Layout | Select control; the chosen value is saved on the block. Options: Media left, quote right; Media right, quote left; Media top, quote below; Quote only (no media). block.json default: media-left. Saved as `layout`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Card (shadow bg); Bordered; Minimal (accent bar); Flat. block.json default: card. Saved as `style`. |
| Show Opening Quote Mark | On/off toggle in the inspector. On by default. Saved as `showQuoteIcon`. |
| Card Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `borderRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 400–1400. block.json default: 900. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 64. Saved as `paddingBottom`. |
| Section BG | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Card BG | Color control in the inspector. block.json default: #f9fafb. Saved as `cardBg`. |
| Accent / Border | Color control in the inspector. block.json default: #7c3aed. Saved as `accentColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Quote Text | Color control in the inspector. block.json default: #111827. Saved as `quoteColor`. |
| Speaker Meta | Color control in the inspector. block.json default: #374151. Saved as `speakerColor`. |
| Play Button BG | Color control in the inspector. block.json default: #ffffff. Saved as `playBtnBg`. |
| Play Button Icon | Color control in the inspector. block.json default: #7c3aed. Saved as `playBtnColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Quote with embedded video thumbnail (play button overlay) or image and speaker attribution. Perfect for podcast clips, interview excerpts, and video testimonials — that is the job of Media Quote, not a generic content block.
- Use it when you need the editor control labeled “Show Media Panel”, which exists on this block’s inspector.
- It matches pages about quote, video, media.
- 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 Media Quote block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Media Quote”. It sits under Blog. After insert, open Media and set “Show Media Panel”, “Media Type”, “Video URL (for link)”, “Show Media Label”.
What makes Media Quote different from other Blockenberg blocks?
Quote with embedded video thumbnail (play button overlay) or image and speaker attribution. Perfect for podcast clips, interview excerpts, and video testimonials. Inspector labels on this block include “Show Media Panel”, “Media Type”, “Video URL (for link)”, “Show Media Label”.
Is the Media Quote Gutenberg block free?
Yes. Media Quote ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Media Quote 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: Media, Layout & Style).
Related blog blocks
Interview Q&A
Magazine-style interview Q&A with styled questions and answers, speaker info, and multiple visual styles.
Podcast Episode
Complete podcast episode show notes with guests, chapter timestamps, listen links, resources, and transcript excerpt.
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.
Press Release
Structured press release with dateline, headline, body paragraphs, boilerplate, and media contact block.
Pullquote Pro
Eye-catching quotation with large typography, decorative marks, author avatar, and alignment options.
Rating Summary
Aggregated review rating with overall score, star breakdown bars (5★ 80%, 4★ 15%…), total count, and optional platform badge.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Media Quote from the Gutenberg inserter.