Developers · Gutenberg
Color Swatch block for WordPress
Display a branded color palette as a grid of swatches with names, HEX, RGB, and usage notes.
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 a branded color palette as a grid of swatches with names, HEX, RGB, and usage notes.
Inspector panels on this block: Settings, Swatches. Those titles come from index.js, not from a shared template.
Color Swatch has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Developers → search “Color Swatch” (block name `blockenberg/color-swatch` in block.json). Style it in the sidebar after insert.
How to use Color Swatch block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Color Swatch”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Settings. Set “Settings — Title”, “Show Title”, “Subtitle”, “Show Subtitle”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Settings — Title | Text field in the inspector. block.json default: Brand Color Palette. Saved as `title`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Subtitle | Text field in the inspector. block.json default: Official colors for all print and digital materials. Saved as `subtitle`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Columns | Numeric range control in the inspector. Range 1–8. block.json default: 4. Saved as `columns`. |
| Show Name | On/off toggle in the inspector. On by default. Saved as `showName`. |
| Show HEX/RGB | On/off toggle in the inspector. On by default. Saved as `showHex`. |
| Show Usage | On/off toggle in the inspector. On by default. Saved as `showUsage`. |
| Show Tag | On/off toggle in the inspector. On by default. Saved as `showTag`. |
| Swatch Height | Numeric range control in the inspector. Range 40–200. block.json default: 100. Saved as `swatchHeight`. |
| Border Radius | Numeric range control in the inspector. Range 0–28. block.json default: 12. Saved as `borderRadius`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLabel`. |
| Wrapper BG | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Card BG | Color control in the inspector. block.json default: #f9fafb. Saved as `cardBg`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Heading | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Subtitle | Color control in the inspector. block.json default: #6b7280. Saved as `subtitleColor`. |
| Name | Color control in the inspector. block.json default: #111827. Saved as `nameColor`. |
| Meta/HEX | Color control in the inspector. block.json default: #6b7280. Saved as `metaColor`. |
| Name | Text field in the inspector. |
| Tag | Text field in the inspector. |
| Usage | Text field in the inspector. |
When this is the right block
- Display a branded color palette as a grid of swatches with names, HEX, RGB, and usage notes — that is the job of Color Swatch, not a generic content block.
- Use it when you need the editor control labeled “Settings — Title”, which exists on this block’s inspector.
- Inserter grouping: docs sites, utilities, and developer landing pages.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Color Swatch block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Color Swatch”. It sits under Developers. After insert, open Settings and set “Settings — Title”, “Show Title”, “Subtitle”, “Show Subtitle”.
What makes Color Swatch different from other Blockenberg blocks?
Display a branded color palette as a grid of swatches with names, HEX, RGB, and usage notes. Inspector labels on this block include “Settings — Title”, “Show Title”, “Subtitle”, “Show Subtitle”.
Is the Color Swatch Gutenberg block free?
Yes. Color Swatch ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Color Swatch 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: Settings, Swatches).
Related developers blocks
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Barcode Generator
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Color Swatch from the Gutenberg inserter.