Blog · Gutenberg
Post Navigation block for WordPress
Previous / Next article navigation with styled arrows, post titles, and optional thumbnails. Supports four layout styles: minimal text links, large arrow cards, split full-width divider, and pill buttons.
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
Previous / Next article navigation with styled arrows, post titles, and optional thumbnails. Supports four layout styles: minimal text links, large arrow cards, split full-width divider, and pill buttons.
Inspector panels on this block: Previous Article, Next Article, Style & Display. Those titles come from index.js, not from a shared template.
Behavior controls: “Style & Display — Style” options: Cards, Minimal, Arrows, Pills, Split.
Post Navigation 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 Navigation” (block name `blockenberg/post-navigation` in block.json). Style it in the sidebar after insert.
How to use Post Navigation block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Post Navigation”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Previous Article. Set “Label”, “Post Title”, “URL”, “Label (Next Label)”.
- 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 |
|---|---|
| Label | Text field in the inspector. block.json default: Previous Article. Saved as `prevLabel`. |
| Post Title | Text field in the inspector. block.json default: How to Build a Design System from Scratch. Saved as `prevTitle`. |
| URL | Text field in the inspector. block.json default: #. Saved as `prevUrl`. |
| Label (Next Label) | Text field in the inspector. block.json default: Next Article. Saved as `nextLabel`. |
| Post Title (Next Title) | Text field in the inspector. block.json default: 10 Principles Every Product Designer Should Know. Saved as `nextTitle`. |
| URL (Next Url) | Text field in the inspector. block.json default: #. Saved as `nextUrl`. |
| Style & Display — Style | Select control; the chosen value is saved on the block. Options: Cards; Minimal; Arrows; Pills; Split. block.json default: cards. Saved as `style`. |
| Show Direction Labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Show Arrows | On/off toggle in the inspector. On by default. Saved as `showArrows`. |
| Show Center Divider | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Max Width (px) | Numeric range control in the inspector. Range 480–1400. block.json default: 860. Saved as `maxWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 14. Saved as `borderRadius`. |
| Gap (px) | Numeric range control in the inspector. Range 0–64. block.json default: 16. Saved as `gap`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 48. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 48. Saved as `paddingBottom`. |
| Label Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Title Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Arrow Size (px) | Numeric range control in the inspector. Range 14–40. block.json default: 22. Saved as `arrowSize`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Card BG | Color control in the inspector. block.json default: #f8fafc. Saved as `cardBg`. |
| Colors — Text | Color control in the inspector. block.json default: #0f172a. Saved as `textColor`. |
| Label | Color control in the inspector. block.json default: #94a3b8. Saved as `labelColor`. |
| Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Hover BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `hoverBg`. |
When this is the right block
- Previous / Next article navigation with styled arrows, post titles, and optional thumbnails. Supports four layout styles: minimal text links, large arrow cards, split full-width divider, and pill buttons — that is the job of Post Navigation, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about post navigation, prev next, previous next.
- Inserter grouping: posts, magazines, and editorial WordPress pages.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Post Navigation block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Post Navigation”. It sits under Blog. After insert, open Previous Article and set “Label”, “Post Title”, “URL”, “Label (Next Label)”.
What makes Post Navigation different from other Blockenberg blocks?
Previous / Next article navigation with styled arrows, post titles, and optional thumbnails. Supports four layout styles: minimal text links, large arrow cards, split full-width divider, and pill buttons. Inspector labels on this block include “Label”, “Post Title”, “URL”, “Label (Next Label)”.
Is the Post Navigation Gutenberg block free?
Yes. Post Navigation ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Post Navigation 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: Previous Article, Next Article, Style & Display).
Related blog blocks
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.
Book Review
Rich book review block with cover image, star rating, details grid, pros & cons, and Schema.org Book + Review structured data for SEO.
Book Shelf
A visual reading list with a realistic bookshelf view, cards layout, or list — complete with ratings, reading status, and genre tags.
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Changelog
Versioned release-notes block with colour-coded categories (New, Improved, Fixed, Deprecated). Perfect for SaaS product pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Post Navigation from the Gutenberg inserter.