Blog · Gutenberg
Post Meta Bar block for WordPress
A configurable post metadata row: author, date, reading time, categories, tags, and comment count.
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
A configurable post metadata row: author, date, reading time, categories, tags, and comment count.
Inspector panels on this block: Visible Items, Demo Values, Layout & Separator. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Horizontal, Vertical, Minimal; “Separator” options: • Bullet, | Pipe, — Em dash, / Slash, Custom.
Post Meta Bar has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Blog → search “Post Meta Bar” (block name `blockenberg/post-meta` in block.json). Style it in the sidebar after insert.
How to use Post Meta Bar block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Post Meta Bar”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Visible Items. Set “Author avatar”, “Author name”, “Date”, “Reading time”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Author avatar | On/off toggle in the inspector. On by default. Saved as `showAvatar`. |
| Author name | On/off toggle in the inspector. On by default. Saved as `showAuthor`. |
| Date | On/off toggle in the inspector. On by default. Saved as `showDate`. |
| Reading time | On/off toggle in the inspector. On by default. Saved as `showReadingTime`. |
| Categories | On/off toggle in the inspector. On by default. Saved as `showCategories`. |
| Tags | On/off toggle in the inspector. Off by default. Saved as `showTags`. |
| Comment count | On/off toggle in the inspector. On by default. Saved as `showComments`. |
| Author label | Text field in the inspector. block.json default: By. Saved as `authorLabel`. |
| Author name (Author Name) | Text field in the inspector. block.json default: Jane Doe. Saved as `authorName`. |
| Author URL | Text field in the inspector. block.json default: #. Saved as `authorUrl`. |
| Avatar URL (leave blank for initial) | Text field in the inspector. Saved as `authorAvatarUrl`. |
| Date value | Text field in the inspector. block.json default: June 12, 2025. Saved as `dateValue`. |
| Reading time value | Text field in the inspector. block.json default: 5 min read. Saved as `readingTimeValue`. |
| Comments value | Text field in the inspector. block.json default: 14 comments. Saved as `commentsCount`. |
| Comments URL | Text field in the inspector. block.json default: #. Saved as `commentsUrl`. |
| Layout | Select control; the chosen value is saved on the block. Options: Horizontal; Vertical; Minimal. block.json default: horizontal. Saved as `layout`. |
| Separator | Select control; the chosen value is saved on the block. Options: • Bullet; | Pipe; — Em dash; / Slash; Custom. block.json default: •. Saved as `separator`. |
| Custom separator | Text field in the inspector. Saved as `customSeparator`. |
| Gap between items (px) | Numeric range control in the inspector. Range 0–60. block.json default: 14. Saved as `gap`. |
| Padding vertical (px) | Numeric range control in the inspector. Range 0–40. block.json default: 0. Saved as `paddingV`. |
| Padding horizontal (px) | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `paddingH`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 0. Saved as `borderRadius`. |
| Text Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `textTypo`. |
| Avatar size (px) | Numeric range control in the inspector. Range 20–64. block.json default: 32. Saved as `avatarSize`. |
| Tag padding V (px) | Numeric range control in the inspector. Range 0–12. block.json default: 2. Saved as `tagPaddingV`. |
| Tag padding H (px) | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `tagPaddingH`. |
| Tag border radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `tagRadius`. |
| Text color | Color control in the inspector. block.json default: #64748b. Saved as `textColor`. |
| Link color | Color control in the inspector. block.json default: #6c3fb5. Saved as `linkColor`. |
| Link hover color | Color control in the inspector. block.json default: #4f2d99. Saved as `linkColorHover`. |
| Separator color | Color control in the inspector. block.json default: #cbd5e1. Saved as `separatorColor`. |
| Colors — Background | Color control in the inspector. block.json default: transparent. Saved as `bgColor`. |
| Avatar border | Color control in the inspector. block.json default: #e2e8f0. Saved as `avatarBorderColor`. |
| Tag background | Color control in the inspector. block.json default: #f1f5f9. Saved as `tagBg`. |
| Tag text color | Color control in the inspector. block.json default: #475569. Saved as `tagColor`. |
When this is the right block
- A configurable post metadata row: author, date, reading time, categories, tags, and comment count — that is the job of Post Meta Bar, not a generic content block.
- Use it when you need the editor control labeled “Author avatar”, which exists on this block’s inspector.
- It matches pages about meta, author, date.
- 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 Post Meta Bar block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Post Meta Bar”. It sits under Blog. After insert, open Visible Items and set “Author avatar”, “Author name”, “Date”, “Reading time”.
What makes Post Meta Bar different from other Blockenberg blocks?
A configurable post metadata row: author, date, reading time, categories, tags, and comment count. Inspector labels on this block include “Author avatar”, “Author name”, “Date”, “Reading time”.
Is the Post Meta Bar Gutenberg block free?
Yes. Post Meta Bar ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Post Meta Bar 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: Visible Items, Demo Values, Layout & Separator).
Related blog blocks
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Contributor Box
Multi-author attribution block with avatars, bios and social links.
Dynamic Date
Outputs the current date, time or copyright year automatically, with live clock option.
Opinion Box
Editorial 'My Take' opinion callout with author attribution, badge, and signed commentary.
Pullquote Pro
Eye-catching quotation with large typography, decorative marks, author avatar, and alignment options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Post Meta Bar from the Gutenberg inserter.