Layout · Gutenberg
Pagination block for WordPress
Styled numeric pagination preview with prev/next, colors, shape and alignment controls.
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
Styled numeric pagination preview with prev/next, colors, shape and alignment controls.
Inspector panels on this block: Labels. Those titles come from index.js, not from a shared template.
Behavior controls: “Style — Alignment” options: Left, Center, Right; “Item Style” options: Rounded, Square, Minimal, Outline.
Pagination 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 → Layout → search “Pagination” (block name `blockenberg/pagination` in block.json). Style it in the sidebar after insert.
How to use Pagination block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Pagination”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Labels. Set “Previous Label”, “Next Label”, “Page Range (around current)”, “Style — Alignment”.
- 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 |
|---|---|
| Previous Label | Text field in the inspector. block.json default: ← Previous. Saved as `prevLabel`. |
| Next Label | Text field in the inspector. block.json default: Next →. Saved as `nextLabel`. |
| Page Range (around current) | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `pageRange`. |
| Style — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `alignment`. |
| Item Style | Select control; the chosen value is saved on the block. Options: Rounded; Square; Minimal; Outline. block.json default: rounded. Saved as `style`. |
| Item Size (px) | Numeric range control in the inspector. Range 28–60. block.json default: 40. Saved as `itemSize`. |
| Gap (px) | Numeric range control in the inspector. Range 2–20. block.json default: 6. Saved as `gap`. |
| Active Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `activeBg`. |
| Active Text | Color control in the inspector. block.json default: #ffffff. Saved as `activeText`. |
| Normal Background | Color control in the inspector. block.json default: #f3f4f6. Saved as `normalBg`. |
| Normal Text | Color control in the inspector. block.json default: #374151. Saved as `normalText`. |
| Hover Background | Color control in the inspector. block.json default: #ede9fe. Saved as `hoverBg`. |
When this is the right block
- Styled numeric pagination preview with prev/next, colors, shape and alignment controls — that is the job of Pagination, not a generic content block.
- Use it when you need the editor control labeled “Previous Label”, which exists on this block’s inspector.
- It matches pages about pagination, pages, nav.
- Inserter grouping: page structure, sections, and composition.
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 Pagination block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Pagination”. It sits under Layout. After insert, open Labels and set “Previous Label”, “Next Label”, “Page Range (around current)”, “Style — Alignment”.
What makes Pagination different from other Blockenberg blocks?
Styled numeric pagination preview with prev/next, colors, shape and alignment controls. Inspector labels on this block include “Previous Label”, “Next Label”, “Page Range (around current)”, “Style — Alignment”.
Is the Pagination Gutenberg block free?
Yes. Pagination ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Pagination 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: Labels).
Related layout blocks
Mega Footer
Full-featured site footer with logo, tagline, link columns, social links, and a bottom bar.
Mega Menu
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Minimal Footer
Clean, minimal site footer with logo (image or text), navigation columns, social icon links, and copyright line. A lighter alternative to the mega-footer.
Page List
A styled list of pages or links with optional icons, hierarchy, and rich color controls.
Sticky Header
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Pagination from the Gutenberg inserter.