Blog · Gutenberg
Article Header block for WordPress
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
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
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Inspector panels on this block: Category & Headline, Author & Meta, Hero Image & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Simple (left-aligned), Centered.
Where to find it
Gutenberg inserter → Blog → search “Article Header” (block name `blockenberg/article-header` in block.json). Style it in the sidebar after insert.
How to use Article Header block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Article Header”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Category & Headline. Set “Show Category Badge”, “Show Subheadline”, “Headline Tag”, “Show Author”.
- 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 Category Badge | On/off toggle in the inspector. On by default. Saved as `showCategory`. |
| Show Subheadline | On/off toggle in the inspector. On by default. Saved as `showSubheadline`. |
| Headline Tag | Select control; the chosen value is saved on the block. block.json default: h1. Saved as `headlineTag`. |
| Show Author | On/off toggle in the inspector. On by default. Saved as `showAuthor`. |
| Show Date | On/off toggle in the inspector. On by default. Saved as `showDate`. |
| Show Reading Time | On/off toggle in the inspector. On by default. Saved as `showReadingTime`. |
| Show Hero Image | On/off toggle in the inspector. On by default. Saved as `showHeroImage`. |
| Image Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `heroRadius`. |
| Layout | Select control; the chosen value is saved on the block. Options: Simple (left-aligned); Centered. block.json default: simple. Saved as `layout`. |
| Max Width (px) | Numeric range control in the inspector. Range 480–1400. block.json default: 860. 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: 48. Saved as `paddingBottom`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Category BG | Color control in the inspector. block.json default: #7c3aed. Saved as `categoryBg`. |
| Category Text | Color control in the inspector. block.json default: #ffffff. Saved as `categoryColor`. |
| Headline | Color control in the inspector. block.json default: #111827. Saved as `headlineColor`. |
| Subheadline | Color control in the inspector. block.json default: #6b7280. Saved as `subColor`. |
| Meta / Date | Color control in the inspector. block.json default: #9ca3af. Saved as `metaColor`. |
| Divider | Color control in the inspector. block.json default: #e5e7eb. Saved as `dividerColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image — that is the job of Article Header, not a generic content block.
- Use it when you need the editor control labeled “Show Category Badge”, which exists on this block’s inspector.
- It matches pages about article, header, blog.
- 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 Article Header block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Article Header”. It sits under Blog. After insert, open Category & Headline and set “Show Category Badge”, “Show Subheadline”, “Headline Tag”, “Show Author”.
What makes Article Header different from other Blockenberg blocks?
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image. Inspector labels on this block include “Show Category Badge”, “Show Subheadline”, “Headline Tag”, “Show Author”.
Is the Article Header Gutenberg block free?
Yes. Article Header ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Article Header 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: Category & Headline, Author & Meta, Hero Image & Layout).
Related blog blocks
Key Takeaways
A styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options.
Opinion Box
Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary.
Post Slider
Hero-style slider cycling through posts with full-width background images and overlay captions.
Content Outline
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time.
Contributor Box
Multi-author attribution block with avatars, bios and social links.
Fact Check
Editorial fact-check verdict box with claim, verdict rating, explanation, and sources.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Article Header from the Gutenberg inserter.