Developers · Gutenberg
Color Thief block for WordPress
Upload an image to automatically extract its dominant color palette using canvas pixel analysis.
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
Upload an image to automatically extract its dominant color palette using canvas pixel analysis.
Inspector panels on this block: Image, Palette Settings, Swatch Appearance, Color Labels. Those titles come from index.js, not from a shared template.
Behavior controls: “Object Fit” options: Cover, Contain, Fill; “Sampling Quality” (Lower = more accurate, slower); “Layout” options: Row (flex), Grid, List; “Copy Format” options: HEX (#rrggbb), RGB, HSL.
Where to find it
Gutenberg inserter → Developers → search “Color Thief” (block name `blockenberg/color-thief` in block.json). Style it in the sidebar after insert.
How to use Color Thief block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Color Thief”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Image. Set “Show Image Preview”, “Preview Height (px)”, “Object Fit”, “Number of Colors”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Image Preview | On/off toggle in the inspector. On by default. Saved as `showImagePreview`. |
| Preview Height (px) | Numeric range control in the inspector. Range 80–600. block.json default: 200. Saved as `imageHeight`. |
| Object Fit | Select control; the chosen value is saved on the block. Options: Cover; Contain; Fill. block.json default: cover. Saved as `imageObjectFit`. |
| Number of Colors | Numeric range control in the inspector. Range 2–12. block.json default: 6. Saved as `paletteSize`. |
| Sampling Quality | Numeric range control in the inspector. Lower = more accurate, slower. Range 1–20. block.json default: 10. Saved as `quality`. |
| Show Dominant Color Banner | On/off toggle in the inspector. On by default. Saved as `showDominant`. |
| Layout | Select control; the chosen value is saved on the block. Options: Row (flex); Grid; List. block.json default: row. Saved as `layout`. |
| Grid Columns | Numeric range control in the inspector. Range 2–12. block.json default: 6. Saved as `swatchColumns`. |
| Swatch Size (px) | Numeric range control in the inspector. Range 24–150. block.json default: 60. Saved as `swatchSize`. |
| Corner Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 8. Saved as `swatchRadius`. |
| Gap (px) | Numeric range control in the inspector. Range 2–40. block.json default: 8. Saved as `swatchGap`. |
| Show Copy Button | On/off toggle in the inspector. On by default. Saved as `showCopyButton`. |
| Copy Format | Select control; the chosen value is saved on the block. Options: HEX (#rrggbb); RGB; HSL. block.json default: hex. Saved as `copyFormat`. |
| Show HEX Values | On/off toggle in the inspector. On by default. Saved as `showHexValues`. |
| Show RGB Values | On/off toggle in the inspector. Off by default. Saved as `showRgbValues`. |
| Show HSL Values | On/off toggle in the inspector. Off by default. Saved as `showHslValues`. |
| Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLabel`. |
| Block Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`. |
| Padding (px) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `padding`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Label Text | Color control in the inspector. block.json default: #374151. Saved as `labelColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Drawing happens on a canvas element after the page loads.
When this is the right block
- Upload an image to automatically extract its dominant color palette using canvas pixel analysis — that is the job of Color Thief, not a generic content block.
- Use it when you need the editor control labeled “Show Image Preview”, which exists on this block’s inspector.
- It matches pages about color, palette, image.
- Inserter grouping: docs sites, utilities, and developer landing 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 Color Thief block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Color Thief”. It sits under Developers. After insert, open Image and set “Show Image Preview”, “Preview Height (px)”, “Object Fit”, “Number of Colors”.
What makes Color Thief different from other Blockenberg blocks?
Upload an image to automatically extract its dominant color palette using canvas pixel analysis. Inspector labels on this block include “Show Image Preview”, “Preview Height (px)”, “Object Fit”, “Number of Colors”.
Is the Color Thief Gutenberg block free?
Yes. Color Thief ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Color Thief 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: Image, Palette Settings, Swatch Appearance, Color Labels).
Related developers blocks
Color Palette
Display brand color swatches with HEX, RGB, and CSS variable labels. Perfect for style guides and design systems.
Color Harmony
Pick a base color and instantly see complementary, triadic, analogous, and other harmonic palettes. Click any swatch to copy its hex value.
Color Mixer
Interactive color mixing tool. Pick two colors, blend them at any ratio, view the result in HEX/RGB/HSL, generate color harmonies, and copy any value instantly.
Color Tokens
Design-system colour token reference. Displays named colour swatches grouped into palettes (Primary, Neutral, Semantic, etc.) with hex/RGB values. Visitors can click any swatch to copy its hex code.
Color Converter
Live Hex ↔ RGB ↔ HSL color converter with a real-time color preview swatch.
Contrast Checker
WCAG color contrast accessibility checker. Test foreground/background color combinations against AA and AAA standards.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Color Thief from the Gutenberg inserter.