lubus

Ajit Bohra

Punit Verma

Color Palette Block helps you create and showcase curated color collections directly in the WordPress block editor. 
It is ideal for design systems, brand documentation, UI references, and visual style guides.
With Color Palette Block, you can add multiple swatches, switch between unique display styles, and copy each color in common code formats for development and handoff.
<h3>Key Features</h3>
<ul>
<li>Multiple display styles – Choose from Square, Polaroid, Circle, and Droplet swatch presentations.</li>
<li>Flexible color code output – Copy color values in HEX, RGB, HSL, and CSS variable formats.</li>
<li>Zero Dependencies No jQuery or heavy JS frameworks powered by the Interactivity API.</li>
<li>Theme color integration – Pull colors directly from your active theme palette.</li>
<li>Random palette generation – Quickly generate swatches and auto-suggest names.</li>
<li>Responsive by Default – Palettes adapt cleanly across desktop and mobile.</li>
</ul>
<h3>Why Choose BlaBlaBlocks Color Palette Block?</h3>
Because color decisions need to be both visual and usable. 
Color Palette Block makes it easy to present colors clearly for designers, clients, and developers while keeping everything inside the native Gutenberg workflow.
<ul>
<li>No shortcodes or custom HTML required.</li>
<li>Editor-first workflow with instant visual feedback.</li>
<li>Great for brand kits, style guides, and component libraries.</li>
</ul>
<h3>How It Works</h3>
<ol>
<li>Insert the Color Palette block in any post or page.</li>
<li>Add swatches manually, import from theme colors, or generate random swatches.</li>
<li>Select your preferred display style and swatch sizing.</li>
<li>Copy color values in the format you need while previewing changes instantly.</li>
</ol>
<h3>Use Cases</h3>
<ul>
<li>Build a brand color reference page for teams or clients.</li>
<li>Publish design system palettes with reusable values.</li>
<li>Share developer-ready color specs with copyable code formats.</li>
<li>Create inspiration boards with quick random generation.</li>
</ul>
<h3>Available Display Styles</h3>
<h4>1. Square</h4>
Classic rectangular swatches for clean, structured palette layouts.
<h4>2. Polaroid</h4>
Card-style swatches with a framed visual treatment.
<h4>3. Circle</h4>
Rounded swatches for compact, modern palette presentations.
<h4>4. Droplet</h4>
Teardrop-inspired swatches for a more expressive visual style.
<h3>Customization Options</h3>
<ul>
<li>Swatch display style</li>
<li>Swatch sizing controls</li>
<li>Theme color import</li>
<li>Random palette generation</li>
<li>Auto-generated swatch naming</li>
<li>Per-swatch code copy in multiple formats</li>
</ul>
<h3>Performance & Optimization</h3>
<ul>
<li>Designed for the block editor workflow with straightforward controls.</li>
<li>Keeps palette management simple for both content creators and developers.</li>
<li>Responsive output helps maintain consistent presentation across devices.</li>
</ul>
<h3>Open Source and Free</h3>
BlaBlaBlocks Color Palette Block is open source and free to use. Contributions and feedback are welcome.
<ul>
<li>
Source Code: 
<a href="https://github.com/lubusIN/color-palette-block" rel="nofollow ugc">https://github.com/lubusIN/color-palette-block</a>
</li>
<li>
Report Issues: 
<a href="https://github.com/lubusIN/color-palette-block/issues" rel="nofollow ugc">https://github.com/lubusIN/color-palette-block/issues</a>
</li>
<li>
Changelog: 
<a href="https://github.com/lubusIN/color-palette-block/blob/master/CHANGELOG.md" rel="nofollow ugc">https://github.com/lubusIN/color-palette-block/blob/master/CHANGELOG.md</a>
</li>
</ul>

Color Palette Block

Build and share beautiful color palettes with multiple display styles and easy color code copying.

Coddium

Settings Manager for Elementor provides granular control over Elementor settings export and import with more flexibility than native tools.
Why is granular important? It allows you to export or import only what you need, e.g., you may create several variants of breakpoints settings, which you can later reuse on the same site or some other site without overwriting other settings.
<h4>Features</h4>
<ul>
<li>Site Settings – Export/import site settings (Site Settings from Elementor editor)</li>
<li>Backend Settings – Export/import backend settings (Elementor > Editor > Settings from WP admin dashboard)</li>
<li>Hello Theme Settings – Export frontend and backend Hello Elementor theme settings</li>
<li>Selective Export/Import – Export/import only the categories you need</li>
<li>20+ Categories – Granular control over export/import for minimum errors and maximum flexibility</li>
<li>Merge or Replace – Choose how Global Colors and Global Fonts are imported (keep or remove existing custom items)</li>
<li>Media Separation – Export site name without logo, background style without image</li>
<li>Clean JSON format – Version control friendly</li>
<li>Multisite Network Import – Import to multiple sites at once (PRO)</li>
<li>WP-CLI Automation – Command-line export/import for DevOps workflows (PRO)</li>
<li>Automatic Backup – Creates a backup before every import for easy recovery</li>
</ul>
<h4>Available Categories</h4>
Design System 
* Global Colors – Predefined and custom global colors 
* Global Fonts – Predefined and custom global fonts
Theme Style 
* Typography – Body, headings, links, paragraph spacing 
* Buttons – Default button styling and hover states 
* Images – Border, shadow, filters for images 
* Form Fields – Label, field, and focus state styling 
* Hello Theme Header/Footer Settings (when Hello Elementor is active)
Settings 
* Site Identity (Text) – Site name and description 
* Site Identity (Media) – Logo and favicon (separate from text) 
* Background (Style) – Color, gradient, and settings 
* Background (Image) – Background image (separate from style) 
* Layout – Container width, padding, widget spacing 
* Breakpoints – Responsive breakpoint values 
* Lightbox – Colors and behavior 
* Page Transitions – Page transition animations (requires Elementor Pro) (PRO) 
* Preloader Settings – Animation and style (requires Elementor Pro) (PRO) 
* Preloader Media – Icon and image (requires Elementor Pro) (PRO) 
* Custom CSS – Global custom CSS code (requires Elementor Pro) (PRO)
Backend Settings 
* General – Post types, colors, fonts, tracking 
* Integrations – API keys (Google Maps, reCAPTCHA, etc.) 
* Advanced – Editor settings, file uploads, Google Fonts 
* Performance – CSS print method, lazy loading 
* Features – Elementor experiments and stable features 
* Hello Theme Settings (when Hello Elementor is active)
<h4>Extra PRO Features</h4>
Multisite Network Import: 
* Import settings to multiple network sites simultaneously 
* Real-time progress tracking with site-by-site status 
* Cancel import anytime 
* Sites without Elementor are automatically skipped
WP-CLI Commands:
<pre><code>wp semfe export <file> [--categories=<categories>]
</code></pre>
Export settings to JSON file.
<pre><code>wp semfe import <file|url> [--categories=<categories>] [--strategy=merge|replace] [--sites=<sites>]
</code></pre>
Import settings from file or URL. Use –sites for multisite network import.
<pre><code>wp semfe list-categories [--format=table|json]
</code></pre>
List available categories.
<h4>Use Cases</h4>
<ul>
<li>Development to Production – Export from staging, import to live site with selected categories</li>
<li>Client Projects – Create reusable brand guideline templates</li>
<li>Multisite Networks – Sync design system across network sites (PRO)</li>
<li>Backup & Recovery – Create versioned backups of your settings</li>
<li>Team Collaboration – Share settings files between team members</li>
</ul>
<blockquote>
⚠️ Important: 
 This plugin manages Elementor settings only. 
 It does not export content, templates, themes, plugins, or custom files.
</blockquote>
<h4>Requirements</h4>
<ul>
<li>WordPress 6.0+</li>
<li>Elementor 3.23.0+</li>
<li>PHP 7.4+</li>
</ul>

Settings Manager for Elementor

Granular export and import for Elementor settings. Select exactly which settings categories to export and import.

Color Palette Block vs Settings Manager for Elementor