Marc Tönsing

Hero Color Picker adds per-post background and font color controls to the editor sidebar for hero styling via CSS on elements with the <code>hero-colored</code> class.
Features: 
– Two color controls: <code>Background Color</code> and <code>Font Color</code> 
– On-demand color pickers in compact dropdown popovers 
– Live preview of both colors together directly in the sidebar 
– Applies selected colors to the editor post summary area for a closer backend preview 
– Removes the featured image preview outline while a custom background color is active 
– Accessibility check for <code>WCAG AAA Normal Text</code> with <code>PASS</code> / <code>FAILED</code> status 
– Panel is shown only while editing posts (<code>post</code>), not in template editing contexts 
– Adds a core-like posts list view <code>Hero Background</code> to show only posts with a custom hero background color 
– Works on elements that have the CSS class <code>hero-colored</code>
Stored as post meta: 
– <code>hero_color_picker_hero_color</code> 
– <code>hero_color_picker_font_color</code>
Frontend output (only when values are set):
<pre><code>.hero-colored {
 background-color: $background;
 color: $font;
}

.hero-colored a {
 color: $font;
}
</code></pre>
Important template setup: 
– Open your block theme template (for example <code>Single</code>) in the Site Editor. 
– Select the <code>Group</code> block that should receive the hero styles. 
– In block settings, add <code>hero-colored</code> to <code>Additional CSS class(es)</code>.

Hero Color Picker

Hero Color Picker adds per-post color selection in the editor sidebar for hero styling via CSS.

mosaiclifecreative

Doohickey’s Dev Tools puts a full suite of developer utilities right inside your WordPress admin. No more juggling browser tabs and bookmarking random websites — everything you need is one click away.
<h4>Free Tools</h4>
CSS Tools 
* Gradient Generator — Linear and radial gradients with unlimited color stops 
* Box Shadow Generator — Visual box-shadow builder with layered shadows 
* Border Generator — Shorthand and per-side border controls 
* Border Radius Generator — Per-corner radius with visual preview 
* Clip-Path Maker — Polygon, circle, ellipse, and inset clip paths 
* Flexbox Generator — Visual flexbox playground with container controls 
* CSS Grid Generator — Set columns, rows, gaps, and alignment visually
Color Tools 
* Color Picker — HSV color picker with HEX, RGB, and HSL output 
* Contrast Checker — WCAG 2.1 AA/AAA compliance testing 
* Color Converter — Convert between HEX, RGB, HSL, and CMYK
Code Tools 
* String Utilities — Case conversion, reverse, slug, character/word count 
* Encoder / Decoder — Base64, URL encoding, HTML entities, and more
Generators 
* Placeholder Image — Custom-sized placeholder images for mockups 
* Lorem Ipsum — Paragraphs, sentences, or words of filler text 
* QR Code Generator — Instant QR codes from any text or URL
SEO & Meta 
* Schema.org Generator — Structured data for Article, Local Business, and FAQ 
* Meta Tag Generator — SEO meta tags, Open Graph, and Twitter Cards
Converters 
* SVG to PNG — Client-side SVG conversion with scale options 
* HTML to Markdown — Convert HTML markup to clean Markdown 
* Markdown Preview — Live Markdown editor with rendered preview 
* Aspect Ratio Calculator — Calculate ratios from dimensions, scale with locked ratios, common size presets
<h4>Pro Version</h4>
Upgrade to Doohickey’s Dev Tools Pro for additional tools and features:
<ul>
<li>Palette Generator — Interactive color wheel with 7 harmony modes. Export as CSS or SCSS variables.</li>
<li>Code Formatter — Auto-format JSON, HTML, CSS, JavaScript, and SQL</li>
<li>Diff Checker — Side-by-side text comparison with highlighted differences</li>
<li>HTML Table Generator — Visual table builder with CSV import</li>
<li>Test Data Generator — Generate realistic fake data (names, emails, addresses, etc.)</li>
<li>Flexbox — Per-item controls (flex-grow, flex-shrink, flex-basis, align-self, order)</li>
<li>CSS Grid — Templates (Holy Grail, Dashboard, 12-Col, etc.), custom definitions, per-cell spans</li>
<li>Placeholder Image — Social media presets and Data URI export</li>
<li>Schema.org — 5 additional types (Product, Person, Organization, Event, Recipe)</li>
<li>QR Code — Custom logo overlay</li>
</ul>
<h4>Why Doohickey’s Dev Tools?</h4>
<ul>
<li>Zero external dependencies — Everything runs client-side in your browser</li>
<li>No data leaves your site — Your code and content stay private</li>
<li>Copy-ready output — One-click copy for all generated CSS, HTML, and code</li>
<li>Consistent interface — Every tool follows the same clean, intuitive layout</li>
<li>Lightweight — Single JavaScript bundle, loads only on the tools page</li>
</ul>
<h3>Source Code & Build Instructions</h3>
The full source code for this plugin, including uncompiled JavaScript and CSS, is available at: 
https://github.com/mosaiclifecreative/doohickeys-dev-tools
To build from source:
<ol>
<li>Clone the repository</li>
<li>Run <code>npm install</code> to install dependencies</li>
<li>Run <code>npm run build</code> to compile the production bundle</li>
<li>The compiled files are output to the <code>build/</code> directory</li>
</ol>
The project uses <code>@wordpress/scripts</code> for building. Source files are in <code>admin/js/</code> (JSX) and <code>admin/css/</code> (CSS).

Doohickey's Dev Tools

Essential web development utilities right in your WordPress dashboard — CSS generators, color tools, code formatters, and more.

Hero Color Picker vs Doohickey's Dev Tools