Business · Gutenberg
Portfolio Grid block for WordPress
Project showcase cards with category filter, hover overlay, tech tags and CTA links. Perfect for portfolio, case studies, and work samples.
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
Project showcase cards with category filter, hover overlay, tech tags and CTA links. Perfect for portfolio, case studies, and work samples.
Inspector panels on this block: Grid, Filter Bar, Display, Projects. Those titles come from index.js, not from a shared template.
Behavior controls: “Image ratio” options: 3:2, 4:3, 1:1, 16:9; “Card shadow” options: None, Small, Medium, Large; “Hover style” options: Overlay, Slide up, Lift; “Filter style” options: Pills, Tabs.
Where to find it
Gutenberg inserter → Business → search “Portfolio Grid” (block name `blockenberg/portfolio-grid` in block.json). Style it in the sidebar after insert.
How to use Portfolio Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Portfolio Grid”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Grid. Set “Columns”, “Gap (px)”, “Image ratio”, “Border radius (px)”.
- Check the published page. The view script reads HTML data attributes: data-category, data-filter. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Columns | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `columns`. |
| Gap (px) | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `gap`. |
| Image ratio | Select control; the chosen value is saved on the block. Options: 3:2; 4:3; 1:1; 16:9. block.json default: 3/2. Saved as `imageRatio`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 14. Saved as `borderRadius`. |
| Card shadow | Select control; the chosen value is saved on the block. Options: None; Small; Medium; Large. block.json default: md. Saved as `cardShadow`. |
| Hover style | Select control; the chosen value is saved on the block. Options: Overlay; Slide up; Lift. block.json default: overlay. Saved as `hoverStyle`. |
| Animate on scroll | On/off toggle in the inspector. On by default. Saved as `animate`. |
| Show filter bar | On/off toggle in the inspector. On by default. Saved as `filterEnabled`. |
| Filter style | Select control; the chosen value is saved on the block. Options: Pills; Tabs. block.json default: pills. Saved as `filterStyle`. |
| "All" label | Text field in the inspector. block.json default: All. Saved as `showAllLabel`. |
| Show description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show tech tags | On/off toggle in the inspector. On by default. Saved as `showTechTags`. |
| Show CTA link | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| Title Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Description Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `descTypo`. |
| Tag size (px) | Numeric range control in the inspector. Range 9–16. block.json default: 11. Saved as `tagSize`. |
| CTA size (px) | Numeric range control in the inspector. Range 11–20. block.json default: 14. Saved as `ctaSize`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 40. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 40. Saved as `paddingBottom`. |
| Projects — Title | Text field in the inspector. |
| Category | Text field in the inspector. |
| Description | Text field in the inspector. |
| Tech tags (comma-separated) | Text field in the inspector. |
| Link URL | Text field in the inspector. |
| Link label | Text field in the inspector. |
| Open in new tab | On/off toggle in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-category, data-filter.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Project showcase cards with category filter, hover overlay, tech tags and CTA links. Perfect for portfolio, case studies, and work samples — that is the job of Portfolio Grid, not a generic content block.
- Use it when you need the editor control labeled “Columns”, which exists on this block’s inspector.
- It matches pages about portfolio, projects, cases.
- Inserter grouping: company, service, and operations 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 Portfolio Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Portfolio Grid”. It sits under Business. After insert, open Grid and set “Columns”, “Gap (px)”, “Image ratio”, “Border radius (px)”.
What makes Portfolio Grid different from other Blockenberg blocks?
Project showcase cards with category filter, hover overlay, tech tags and CTA links. Perfect for portfolio, case studies, and work samples. Inspector labels on this block include “Columns”, “Gap (px)”, “Image ratio”, “Border radius (px)”.
Is the Portfolio Grid Gutenberg block free?
Yes. Portfolio Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Portfolio 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: Grid, Filter Bar, Display, Projects).
Related business blocks
Case Study
Client case study section with logo, challenge, solution, quantified before/after metrics and a pull quote. Perfect for agency, SaaS and consulting landing pages.
FAQ Categories
Categorized FAQ with a sidebar (or top tab bar) category navigator and an accordion for each category. Ideal for comprehensive help centers and support pages.
FAQ Grid
Display frequently asked questions as a scannable card grid — ideal for pricing pages and knowledge bases.
Job Listing
Display a job posting card with title, company, location, salary, job type, skills, apply CTA, and rich styling options.
Job Openings
Careers section with filterable job listings, department tags, location info, and apply links.
Resource Hub
Organized resource library with category filter pills, resource cards (guide, video, template, tool), and optional featured resource. For content marketing and lead gen pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Portfolio Grid from the Gutenberg inserter.