Business · Gutenberg
Resource Hub block for WordPress
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
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
Organized resource library with category filter pills, resource cards (guide, video, template, tool), and optional featured resource. For content marketing and lead gen pages.
Inspector panels on this block: Layout, Resources. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Grid, List, Featured First (large + grid); “Type” options: Guide, Video, Template, Tool, Podcast.
Where to find it
Gutenberg inserter → Business → search “Resource Hub” (block name `blockenberg/resource-hub` in block.json). Style it in the sidebar after insert.
How to use Resource Hub block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Resource Hub”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Layout. Set “Columns”, “Show Category Filter”, “Show Resource Type Badge”, “Card CTA Label”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Grid; List; Featured First (large + grid). block.json default: grid. Saved as `layout`. |
| Columns | Numeric range control in the inspector. Range 2–4. block.json default: 3. Saved as `columns`. |
| Show Category Filter | On/off toggle in the inspector. On by default. Saved as `showFilter`. |
| Show Resource Type Badge | On/off toggle in the inspector. On by default. Saved as `showType`. |
| Card CTA Label | Text field in the inspector. block.json default: Download Free. Saved as `ctaLabel`. |
| Max Width (px) | Numeric range control in the inspector. Range 600–1600. block.json default: 1200. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`. |
| Heading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headingTypo`. |
| Subtext | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtextTypo`. |
| Resources — Title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Category | Text field in the inspector. |
| Type | Select control; the chosen value is saved on the block. Options: Guide; Video; Template; Tool; Podcast; Other. |
| URL | Text field in the inspector. |
| Image URL (optional) | Text field in the inspector. |
| Featured (large card) | On/off toggle in the inspector. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Subtext | Color control in the inspector. block.json default: #6b7280. Saved as `subColor`. |
| Eyebrow | Color control in the inspector. block.json default: #6366f1. Saved as `eyebrowColor`. |
| Card BG | Color control in the inspector. block.json default: #f8fafc. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorder`. |
| Filter Pill BG | Color control in the inspector. block.json default: #f1f5f9. Saved as `filterBg`. |
| Filter Active BG | Color control in the inspector. block.json default: #6366f1. Saved as `filterActiveBg`. |
| CTA BG | Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Organized resource library with category filter pills, resource cards (guide, video, template, tool), and optional featured resource. For content marketing and lead gen pages — that is the job of Resource Hub, 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 resource, library, hub.
- 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 Resource Hub block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Resource Hub”. It sits under Business. After insert, open Layout and set “Columns”, “Show Category Filter”, “Show Resource Type Badge”, “Card CTA Label”.
What makes Resource Hub different from other Blockenberg blocks?
Organized resource library with category filter pills, resource cards (guide, video, template, tool), and optional featured resource. For content marketing and lead gen pages. Inspector labels on this block include “Columns”, “Show Category Filter”, “Show Resource Type Badge”, “Card CTA Label”.
Is the Resource Hub Gutenberg block free?
Yes. Resource Hub ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Resource Hub 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: Layout, Resources).
Related business blocks
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.
Media Kit
Downloadable brand and media kit with logos, colors, typography, and asset downloads.
Onboarding Steps
Step-by-step getting started / onboarding section for SaaS products, courses, and services. Numbered steps with icons, descriptions, and optional CTAs.
Portfolio Grid
Project showcase cards with category filter, hover overlay, tech tags and CTA links. Perfect for portfolio, case studies, and work samples.
Press Kit
Press/media kit section with brand assets (logos, colors, photos, documents), company blurb, and download buttons. Perfect for press pages and media rooms.
About Section
Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Resource Hub from the Gutenberg inserter.