Blog · Gutenberg
Show Notes block for WordPress
Podcast show notes with sponsors, chapters, links, resources, and featured quotes.
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
Podcast show notes with sponsors, chapters, links, resources, and featured quotes.
Inspector panels on this block: Episode Info, Introduction, Featured Quote, Sponsors, Chapters, Links Mentioned, Resources, Tags. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Blog → search “Show Notes” (block name `blockenberg/show-notes` in block.json). Style it in the sidebar after insert.
How to use Show Notes block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Show Notes”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Episode Info. Set “Podcast Name”, “Episode Title”, “Episode #”, “Season”.
- 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 |
|---|---|
| Podcast Name | Text field in the inspector. block.json default: Dev Insights Podcast. Saved as `podcastName`. |
| Episode Title | Text field in the inspector. block.json default: Building in Public with Marie Kim. Saved as `episodeTitle`. |
| Episode # | Text field in the inspector. block.json default: Ep. 142. Saved as `episodeNumber`. |
| Season | Text field in the inspector. block.json default: Season 3. Saved as `season`. |
| Date | Text field in the inspector. block.json default: February 24, 2026. Saved as `publishDate`. |
| Duration | Text field in the inspector. block.json default: 62 min. Saved as `duration`. |
| Show Ep # | On/off toggle in the inspector. On by default. Saved as `showEpisodeMeta`. |
| Show Date/Dur | On/off toggle in the inspector. On by default. Saved as `showMeta`. |
| Show Introduction | On/off toggle in the inspector. On by default. Saved as `showIntro`. |
| Intro Text | Multiline text field in the inspector. block.json default: Marie Kim, founder of ShipFast and author of Build in Public, joins us to talk about radical transparency in building a startup — what to share, what not to, and why vulnerability is a growth engine, not a liability.. Saved as `intro`. |
| Show Quote | On/off toggle in the inspector. On by default. Saved as `showQuote`. |
| Quote | Multiline text field in the inspector. block.json default: The moment you share your revenue dashboard is the moment you stop feeling like an impostor and start feeling like a founder. Vulnerability isn't weakness — it's your best marketing strategy.. Saved as `quoteHighlight`. |
| Speaker | Text field in the inspector. block.json default: Marie Kim. Saved as `quoteSpeaker`. |
| Show Sponsors | On/off toggle in the inspector. On by default. Saved as `showSponsors`. |
| Section Label | Text field in the inspector. block.json default: Sponsors. Saved as `sponsorsLabel`. |
| Sponsor Name | Text field in the inspector. Saved as `sponsors`. |
| Description | Multiline text field in the inspector. Saved as `sponsors`. |
| URL | Text field in the inspector. Saved as `sponsors`. |
| Promo Code | Text field in the inspector. Saved as `sponsors`. |
| Show Chapters | On/off toggle in the inspector. On by default. Saved as `showChapters`. |
| Section Label (Chapters Label) | Text field in the inspector. block.json default: Chapters. Saved as `chaptersLabel`. |
| Show Links | On/off toggle in the inspector. On by default. Saved as `showLinks`. |
| Section Label (Links Label) | Text field in the inspector. block.json default: Links Mentioned. Saved as `linksLabel`. |
| Links Mentioned — Title | Text field in the inspector. Saved as `links`. |
| URL (Links) | Text field in the inspector. Saved as `links`. |
| Description (Links) | Text field in the inspector. Saved as `links`. |
| Show Resources | On/off toggle in the inspector. On by default. Saved as `showResources`. |
| Section Label (Resources Label) | Text field in the inspector. block.json default: Episode Resources. Saved as `resourcesLabel`. |
| Show Tags | On/off toggle in the inspector. On by default. Saved as `showTags`. |
| Podcast Name Size (px) | Numeric range control in the inspector. Range 9–18. block.json default: 11. Saved as `podcastNameSize`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Header BG | Color control in the inspector. block.json default: #0f172a. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Meta Text | Color control in the inspector. block.json default: #94a3b8. Saved as `metaColor`. |
| Block BG | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Header & Layout Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
| Intro BG | Color control in the inspector. block.json default: #f8fafc. Saved as `introBg`. |
| Intro Text | Color control in the inspector. block.json default: #374151. Saved as `introColor`. |
| Sponsor BG | Color control in the inspector. block.json default: #fffbeb. Saved as `sponsorBg`. |
| Sponsor Border | Color control in the inspector. block.json default: #fbbf24. Saved as `sponsorBorder`. |
| Chapter Time BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `chapterTimeBg`. |
| Chapter Time | Color control in the inspector. block.json default: #475569. Saved as `chapterTimeColor`. |
| Link Color | Color control in the inspector. block.json default: #2563eb. Saved as `linkColor`. |
| Quote BG | Color control in the inspector. block.json default: #f0f9ff. Saved as `quoteBg`. |
| Quote Text | Color control in the inspector. block.json default: #0369a1. Saved as `quoteColor`. |
| Quote Border | Color control in the inspector. block.json default: #3b82f6. Saved as `quoteBorder`. |
| Tag BG | Color control in the inspector. block.json default: #eff6ff. Saved as `tagBg`. |
| Tag Text | Color control in the inspector. block.json default: #1d4ed8. Saved as `tagColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Podcast show notes with sponsors, chapters, links, resources, and featured quotes — that is the job of Show Notes, not a generic content block.
- Use it when you need the editor control labeled “Podcast Name”, which exists on this block’s inspector.
- It matches pages about podcast, show notes, episode.
- 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 Show Notes block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Show Notes”. It sits under Blog. After insert, open Episode Info and set “Podcast Name”, “Episode Title”, “Episode #”, “Season”.
What makes Show Notes different from other Blockenberg blocks?
Podcast show notes with sponsors, chapters, links, resources, and featured quotes. Inspector labels on this block include “Podcast Name”, “Episode Title”, “Episode #”, “Season”.
Is the Show Notes Gutenberg block free?
Yes. Show Notes ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Show Notes 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: Episode Info, Introduction, Featured Quote, Sponsors).
Related blog blocks
Podcast Episode
Complete podcast episode show notes with guests, chapter timestamps, listen links, resources, and transcript excerpt.
Link Roundup
Curated links collection — weekly/monthly digest with categories.
Media Quote
Quote with embedded video thumbnail (play button overlay) or image and speaker attribution. Perfect for podcast clips, interview excerpts, and video testimonials.
Reading Card
Book, article, podcast or course recommendation card with cover image, rating, category badge and CTA link. Multiple visual styles.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Show Notes from the Gutenberg inserter.