Business · Gutenberg
Brand Kit block for WordPress
Brand style guide: colour swatches, typography specimens, logo variants, and brand values — all in one block.
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
Brand style guide: colour swatches, typography specimens, logo variants, and brand values — all in one block.
Inspector panels on this block: Sections, Colour Palette, Logo Usage, Brand Values, Text Style, Layout, UI Colors. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Business → search “Brand Kit” (block name `blockenberg/brand-kit` in block.json). Style it in the sidebar after insert.
How to use Brand Kit block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Brand Kit”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Sections. Set “Main title”, “Show main title”, “Show Colour Palette”, “Show Typography”.
- 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 |
|---|---|
| Main title | Text field in the inspector. block.json default: Brand Identity. Saved as `sectionTitle`. |
| Show main title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show Colour Palette | 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 `showTypography`. |
| Show Logo Usage | On/off toggle in the inspector. On by default. Saved as `showLogos`. |
| Show Brand Values | On/off toggle in the inspector. On by default. Saved as `showValues`. |
| Section label | Text field in the inspector. block.json default: Colour Palette. Saved as `colorsTitle`. |
| Swatch height (px) | Numeric range control in the inspector. Range 48–160. block.json default: 90. Saved as `swatchHeight`. |
| Swatch radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `swatchRadius`. |
| Show colour name | On/off toggle in the inspector. On by default. Saved as `showColorName`. |
| Show hex value | On/off toggle in the inspector. On by default. Saved as `showColorHex`. |
| Show copy hint | On/off toggle in the inspector. On by default. Saved as `showCopyHint`. |
| Section label (Typography Title) | Text field in the inspector. block.json default: Typography. Saved as `typographyTitle`. |
| Label | Text field in the inspector. Saved as `fonts`. |
| Family name | Text field in the inspector. Saved as `fonts`. |
| CSS font-family | Text field in the inspector. Saved as `fonts`. |
| Weights | Text field in the inspector. Saved as `fonts`. |
| Heading preview text | Text field in the inspector. Saved as `fonts`. |
| Body preview text | Text field in the inspector. Saved as `fonts`. |
| Source URL (optional) | Text field in the inspector. Saved as `fonts`. |
| Section label (Logos Title) | Text field in the inspector. block.json default: Logo Usage. Saved as `logosTitle`. |
| Label (Logos) | Text field in the inspector. Saved as `logos`. |
| Description | Text field in the inspector. Saved as `logos`. |
| Section label (Values Title) | Text field in the inspector. block.json default: Brand Values. Saved as `valuesTitle`. |
| Brand Values — Title | Text field in the inspector. Saved as `values`. |
| Description (Values) | Text field in the inspector. Saved as `values`. |
| Max width (px) | Numeric range control in the inspector. Range 600–1600. block.json default: 1000. Saved as `maxWidth`. |
| Container padding (px) | Numeric range control in the inspector. Range 0–120. block.json default: 48. Saved as `containerPadding`. |
| Section gap (px) | Numeric range control in the inspector. Range 16–120. block.json default: 56. Saved as `sectionGap`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 12–64. block.json default: 28. Saved as `cardPadding`. |
| Container Background | Color control in the inspector. Saved as `containerBg`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Heading Color | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Text Color | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Section Label Color | Color control in the inspector. block.json default: #6366f1. Saved as `sectionLabelColor`. |
| Section Label Background | Color control in the inspector. block.json default: #ede9fe. Saved as `sectionLabelBg`. |
| Value Icon Background | Color control in the inspector. block.json default: #f5f3ff. Saved as `valueIconBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Brand style guide: colour swatches, typography specimens, logo variants, and brand values — all in one block — that is the job of Brand Kit, not a generic content block.
- Use it when you need the editor control labeled “Main title”, which exists on this block’s inspector.
- It matches pages about brand, design, style guide.
- 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 Brand Kit block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Brand Kit”. It sits under Business. After insert, open Sections and set “Main title”, “Show main title”, “Show Colour Palette”, “Show Typography”.
What makes Brand Kit different from other Blockenberg blocks?
Brand style guide: colour swatches, typography specimens, logo variants, and brand values — all in one block. Inspector labels on this block include “Main title”, “Show main title”, “Show Colour Palette”, “Show Typography”.
Is the Brand Kit Gutenberg block free?
Yes. Brand Kit ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Brand 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: Sections, Colour Palette, Logo Usage, Brand Values).
Related business blocks
Media Kit
Downloadable brand and media kit with logos, colors, typography, and asset downloads.
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.
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.
Address Card
Business address card with contact details, opening hours, and optional map link.
App Screenshot
SaaS/app product screenshot section with annotated callout points, device frame, heading, subtext, and CTA. Perfect for software landing pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Brand Kit from the Gutenberg inserter.