Business · Gutenberg
Media Kit block for WordPress
Downloadable brand and media kit with logos, colors, typography, and asset downloads.
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
Downloadable brand and media kit with logos, colors, typography, and asset downloads.
Inspector panels on this block: Brand Info, Logo Variants, Brand Colors, Text Sizes, Downloads & Contact, Sections, Appearance. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Business → search “Media Kit” (block name `blockenberg/media-kit` in block.json). Style it in the sidebar after insert.
How to use Media Kit block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Media Kit”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Brand Info. Set “Brand Name”, “Tagline”, “Label”, “Format”.
- 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 |
|---|---|
| Brand Name | Text field in the inspector. block.json default: Acme Corp. Saved as `brandName`. |
| Tagline | Text field in the inspector. block.json default: Building the future, one pixel at a time.. Saved as `brandTagline`. |
| Label | Text field in the inspector. Saved as `logoVariants`. |
| Format | Select control; the chosen value is saved on the block. Saved as `logoVariants`. |
| Download URL | Text field in the inspector. Saved as `logoVariants`. |
| Color Name | Text field in the inspector. Saved as `brandColors`. |
| Font Name | Text field in the inspector. Saved as `fonts`. |
| Role | Select control; the chosen value is saved on the block. Saved as `fonts`. |
| Preview Text | Text field in the inspector. Saved as `fonts`. |
| Google Font URL (optional) | Text field in the inspector. Saved as `fonts`. |
| Download All Label | Text field in the inspector. block.json default: Download All Assets (ZIP). Saved as `downloadAllLabel`. |
| Download All URL | Text field in the inspector. Saved as `downloadAllUrl`. |
| Guidelines Label | Text field in the inspector. block.json default: Download Brand Guidelines. Saved as `guidelinesLabel`. |
| Guidelines Download URL | Text field in the inspector. Saved as `guidelinesDownloadUrl`. |
| Press Email | Text field in the inspector. block.json default: press@example.com. Saved as `pressEmail`. |
| Website URL | Text field in the inspector. block.json default: https://example.com. Saved as `websiteUrl`. |
| Show Logos | On/off toggle in the inspector. On by default. Saved as `showLogos`. |
| Show Colors | On/off toggle in the inspector. On by default. Saved as `showColors`. |
| Show Typography | On/off toggle in the inspector. On by default. Saved as `showFonts`. |
| Show Downloads | On/off toggle in the inspector. On by default. Saved as `showDownloads`. |
| Show Contact | On/off toggle in the inspector. On by default. Saved as `showContact`. |
| Colors Per Row | Numeric range control in the inspector. Range 2–10. block.json default: 5. Saved as `colorsPerRow`. |
| Max Width (px) | Numeric range control in the inspector. Range 480–1400. block.json default: 900. Saved as `maxWidth`. |
| Section Border Radius | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `sectionBorderRadius`. |
| Padding Top | Numeric range control in the inspector. Range 0–160. block.json default: 40. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–160. block.json default: 40. Saved as `paddingBottom`. |
| Page Background | Color control in the inspector. block.json default: #f8fafc. Saved as `bgColor`. |
| Section Background | Color control in the inspector. block.json default: #ffffff. Saved as `sectionBg`. |
| Card Background | Color control in the inspector. block.json default: #f9fafb. Saved as `cardBg`. |
| Heading Text | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Body Text | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Label Text | Color control in the inspector. block.json default: #6b7280. Saved as `labelColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Download Button Background | Color control in the inspector. block.json default: #6366f1. Saved as `downloadBg`. |
| Download Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `downloadColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Downloadable brand and media kit with logos, colors, typography, and asset downloads — that is the job of Media Kit, not a generic content block.
- Use it when you need the editor control labeled “Brand Name”, which exists on this block’s inspector.
- It matches pages about brand, media kit, press.
- 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 Media Kit block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Media Kit”. It sits under Business. After insert, open Brand Info and set “Brand Name”, “Tagline”, “Label”, “Format”.
What makes Media Kit different from other Blockenberg blocks?
Downloadable brand and media kit with logos, colors, typography, and asset downloads. Inspector labels on this block include “Brand Name”, “Tagline”, “Label”, “Format”.
Is the Media Kit Gutenberg block free?
Yes. Media Kit ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Media Kit 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: Brand Info, Logo Variants, Brand Colors, Text Sizes).
Related business blocks
Brand Kit
Brand style guide: colour swatches, typography specimens, logo variants, and brand values — all in one block.
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.
Media Coverage
"As Featured In" press section with publication logos, grayscale hover effects, and an optional featured pull quote from a specific outlet. Common on landing pages and about pages. Different from Logo Wall (general) and Trust Bar (security badges).
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.
Story Section
Full-width founder or brand story section with photo, pull quote, and milestones.
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 Media Kit from the Gutenberg inserter.