Blog · Gutenberg
Category Grid block for WordPress
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
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
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Inspector panels on this block: Query, Layout, Content, Card Style, Color Mode. Those titles come from index.js, not from a shared template.
Behavior controls: “Order By” options: Post Count, Name (A–Z), ID, Slug; “Order” options: Descending, Ascending; “Card Style” options: Card (shadow), Card with accent bar, Icon circle, Minimal (no background); “Icon Position” options: Top, Left (inline).
Where to find it
Gutenberg inserter → Blog → search “Category Grid” (block name `blockenberg/category-grid` in block.json). Style it in the sidebar after insert.
How to use Category Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Category Grid”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Query. Set “Max Categories”, “Order By”, “Order”, “Hide Empty Categories”.
- Check the published page. The view script reads HTML data attributes: data-accent, data-animate, data-bg-hover, data-border-color, data-card-bg, data-card-bg-hover, data-card-border, data-card-padding. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Max Categories | Numeric range control in the inspector. Range 1–50. block.json default: 9. Saved as `maxCategories`. |
| Order By | Select control; the chosen value is saved on the block. Options: Post Count; Name (A–Z); ID; Slug. block.json default: count. Saved as `orderBy`. |
| Order | Select control; the chosen value is saved on the block. Options: Descending; Ascending. block.json default: desc. Saved as `order`. |
| Hide Empty Categories | On/off toggle in the inspector. On by default. Saved as `hideEmpty`. |
| Include IDs (comma-separated) | Text field in the inspector. Saved as `includeIds`. |
| Exclude IDs (comma-separated) | Text field in the inspector. Saved as `excludeIds`. |
| Columns | Numeric range control in the inspector. Range 1–6. block.json default: 3. Saved as `columns`. |
| Gap (px) | Numeric range control in the inspector. Range 0–48. block.json default: 16. Saved as `gap`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Card (shadow); Card with accent bar; Icon circle; Minimal (no background). block.json default: card. Saved as `cardStyle`. |
| Icon Position | Select control; the chosen value is saved on the block. Options: Top; Left (inline). block.json default: top. Saved as `iconPosition`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Link Target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. block.json default: _self. Saved as `linkTarget`. |
| Show Icon / Emoji | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon Size (px) | Numeric range control in the inspector. Range 16–80. block.json default: 36. Saved as `iconSize`. |
| Show Post Count | On/off toggle in the inspector. On by default. Saved as `showCount`. |
| Count Label | Text field in the inspector. block.json default: posts. Saved as `countLabel`. |
| Show Description | On/off toggle in the inspector. Off by default. Saved as `showDescription`. |
| Max Description Length | Numeric range control in the inspector. Range 20–200. block.json default: 80. Saved as `maxDescriptionLength`. |
| Show Arrow → | On/off toggle in the inspector. On by default. Saved as `showArrow`. |
| Animate on Hover | On/off toggle in the inspector. On by default. Saved as `animateOnHover`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardRadius`. |
| Padding (px) | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `cardPadding`. |
| Show Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Show Border | On/off toggle in the inspector. Off by default. Saved as `cardBorder`. |
| Color Mode | Select control; the chosen value is saved on the block. Options: Single accent; Multi-color. block.json default: single. Saved as `colorMode`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Hover Background | Color control in the inspector. block.json default: #f5f3ff. Saved as `cardBgHover`. |
| Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Name Text | Color control in the inspector. block.json default: #1e1e1e. Saved as `nameColor`. |
| Post Count Badge | Color control in the inspector. block.json default: #6c3fb5. Saved as `countColor`. |
| Count Badge Bg | Color control in the inspector. block.json default: #ede9fe. Saved as `countBg`. |
| Description | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-accent, data-animate, data-bg-hover, data-border-color, data-card-bg, data-card-bg-hover, data-card-border, data-card-padding.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
When this is the right block
- Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options — that is the job of Category Grid, not a generic content block.
- Use it when you need the editor control labeled “Max Categories”, which exists on this block’s inspector.
- It matches pages about category, categories, grid.
- 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 Category Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Category Grid”. It sits under Blog. After insert, open Query and set “Max Categories”, “Order By”, “Order”, “Hide Empty Categories”.
What makes Category Grid different from other Blockenberg blocks?
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options. Inspector labels on this block include “Max Categories”, “Order By”, “Order”, “Hide Empty Categories”.
Is the Category Grid Gutenberg block free?
Yes. Category Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Category Grid 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: Query, Layout, Content, Card Style).
Related blog blocks
Taxonomy List
Display categories, tags or custom taxonomy as a styled list, grid, chips or cards — with icons, counts and links.
Post Grid
Display posts or custom post types in a responsive card grid. Powered by the built-in REST API endpoint.
Article Series
Multi-part series navigator showing all articles with the current one highlighted and progress indicator.
Chapter Navigation
Multi-part guide and series navigation with progress, prev/next, and chapter list.
Content Outline
Structured article outline with numbered sections, sub-points, optional status badges, and estimated reading time.
Post Carousel
A responsive carousel of posts with autoplay, arrows, and dots.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Category Grid from the Gutenberg inserter.