{"id":287430,"date":"2026-03-09T06:53:49","date_gmt":"2026-03-09T06:53:49","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/hero-color-picker\/"},"modified":"2026-04-03T16:58:39","modified_gmt":"2026-04-03T16:58:39","slug":"hero-color-picker","status":"publish","type":"plugin","link":"https:\/\/ml.wordpress.org\/plugins\/hero-color-picker\/","author":756138,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.18","stable_tag":"1.0.18","tested":"6.9.4","requires":"5.9","requires_php":"7.3","requires_plugins":null,"header_name":"Hero Color Picker","header_author":"Marc T\u00f6nsing","header_description":"Adds a per-post color picker in the editor sidebar for hero styling.","assets_banners_color":"b2cfe1","last_updated":"2026-04-03 16:58:39","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/marc.tv\/out\/donate","header_plugin_uri":"https:\/\/github.com\/mtoensing\/hero-color-picker","header_author_uri":"https:\/\/toensing.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":380,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.10":{"tag":"1.0.10","author":"MarcDK","date":"2026-03-09 18:23:03"},"1.0.11":{"tag":"1.0.11","author":"MarcDK","date":"2026-03-09 18:30:15"},"1.0.12":{"tag":"1.0.12","author":"MarcDK","date":"2026-03-11 17:29:05"},"1.0.13":{"tag":"1.0.13","author":"MarcDK","date":"2026-03-11 17:36:14"},"1.0.14":{"tag":"1.0.14","author":"MarcDK","date":"2026-03-11 18:54:38"},"1.0.15":{"tag":"1.0.15","author":"MarcDK","date":"2026-03-11 19:11:03"},"1.0.16":{"tag":"1.0.16","author":"MarcDK","date":"2026-03-14 14:04:29"},"1.0.17":{"tag":"1.0.17","author":"MarcDK","date":"2026-03-16 19:41:48"},"1.0.18":{"tag":"1.0.18","author":"MarcDK","date":"2026-04-03 16:58:39"},"1.0.8":{"tag":"1.0.8","author":"MarcDK","date":"2026-03-09 06:53:37"},"1.0.9":{"tag":"1.0.9","author":"MarcDK","date":"2026-03-09 18:19:06"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"assets_icons":{"icon-1000x1000.png":{"filename":"icon-1000x1000.png","revision":3485022,"resolution":"1000x1000","location":"assets","locale":""},"icon-128x128.png":{"filename":"icon-128x128.png","revision":3485022,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3485022,"resolution":"256x256","location":"assets","locale":""},"icon.svg":{"filename":"icon.svg","revision":3485022,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3486743,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3486743,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3498390,"resolution":false,"location":"assets","locale":"","contents":"{\"landingPage\":\"\\\/wp-admin\\\/plugins.php\",\"preferredVersions\":{\"php\":\"8.0\",\"wp\":\"latest\"},\"phpExtensionBundles\":[\"kitchen-sink\"],\"features\":{\"networking\":true},\"steps\":[{\"step\":\"installPlugin\",\"options\":{\"activate\":true},\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"hero-color-picker\"}},{\"step\":\"login\",\"username\":\"admin\",\"password\":\"password\"}]}"}},"all_blocks":[],"tagged_versions":["1.0.10","1.0.11","1.0.12","1.0.13","1.0.14","1.0.15","1.0.16","1.0.17","1.0.18","1.0.8","1.0.9"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3478432,"resolution":"1","location":"assets","locale":""}},"screenshots":{"1":"Hero Color Picker sidebar panel with background color, font color, live preview, and WCAG status."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1953,148857,18838,148076,1956],"plugin_category":[],"plugin_contributors":[84390],"plugin_business_model":[],"class_list":["post-287430","plugin","type-plugin","status-publish","hentry","plugin_tags-accessibility","plugin_tags-block-editor","plugin_tags-color-picker","plugin_tags-gutenberg","plugin_tags-wcag","plugin_contributors-marcdk","plugin_committers-marcdk"],"banners":{"banner":"https:\/\/ps.w.org\/hero-color-picker\/assets\/banner-772x250.png?rev=3486743","banner_2x":"https:\/\/ps.w.org\/hero-color-picker\/assets\/banner-1544x500.png?rev=3486743","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/hero-color-picker\/assets\/icon.svg?rev=3485022","icon":"https:\/\/ps.w.org\/hero-color-picker\/assets\/icon.svg?rev=3485022","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/hero-color-picker\/assets\/screenshot-1.png?rev=3478432","caption":"Hero Color Picker sidebar panel with background color, font color, live preview, and WCAG status."}],"raw_content":"<!--section=description-->\n<p><strong>Hero Color Picker<\/strong> 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.<\/p>\n\n<p>Features:\n- Two color controls: <code>Background Color<\/code> and <code>Font Color<\/code>\n- On-demand color pickers in compact dropdown popovers\n- Live preview of both colors together directly in the sidebar\n- Applies selected colors to the editor post summary area for a closer backend preview\n- Removes the featured image preview outline while a custom background color is active\n- Accessibility check for <code>WCAG AAA Normal Text<\/code> with <code>PASS<\/code> \/ <code>FAILED<\/code> status\n- Panel is shown only while editing posts (<code>post<\/code>), not in template editing contexts\n- Adds a core-like posts list view <code>Hero Background<\/code> to show only posts with a custom hero background color\n- Works on elements that have the CSS class <code>hero-colored<\/code><\/p>\n\n<p>Stored as post meta:\n- <code>hero_color_picker_hero_color<\/code>\n- <code>hero_color_picker_font_color<\/code><\/p>\n\n<p>Frontend output (only when values are set):<\/p>\n\n<pre><code>.hero-colored {\n    background-color: $background;\n    color: $font;\n}\n<\/code><\/pre>\n\n<p>Important template setup:\n- Open your block theme template (for example <code>Single<\/code>) in the Site Editor.\n- Select the <code>Group<\/code> block that should receive the hero styles.\n- In block settings, add <code>hero-colored<\/code> to <code>Additional CSS class(es)<\/code>.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Place the plugin in <code>wp-content\/plugins\/hero-color-picker<\/code>.<\/li>\n<li>Activate the plugin in WordPress.<\/li>\n<li>Open <code>Appearance &gt; Editor<\/code> and edit your post template (for example <code>Single<\/code>).<\/li>\n<li>Select the target <code>Group<\/code> block and add the class <code>hero-colored<\/code> in <code>Additional CSS class(es)<\/code>.<\/li>\n<li>Optional: open <code>Posts &gt; All Posts<\/code> and click <code>Hero Background<\/code> to list posts with a custom hero background.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20do%20i%20add%20the%20%60hero-colored%60%20css%20class%20in%20templates%3F\"><h3>How do I add the `hero-colored` CSS class in templates?<\/h3><\/dt>\n<dd><ol>\n<li>Go to <code>Appearance &gt; Editor<\/code> and open the template you use for posts (for example <code>Single<\/code>).<\/li>\n<li>Create a <code>Group<\/code> block that wraps the elements you want to style, for example the title and featured image.<\/li>\n<li>Open the <code>Group<\/code> block settings, expand <code>Advanced<\/code>, and enter <code>hero-colored<\/code> in <code>Additional CSS class(es)<\/code>.<\/li>\n<li>Save the template.<\/li>\n<\/ol><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.18<\/h4>\n\n<ul>\n<li>Remove the manual textdomain loading and rely on the modern WordPress default translation flow.<\/li>\n<\/ul>\n\n<h4>1.0.17<\/h4>\n\n<ul>\n<li>Updated the WordPress.org icon assets.<\/li>\n<li>Added refreshed WordPress.org banner assets in <code>1544x500<\/code> and <code>772x250<\/code>.<\/li>\n<\/ul>\n\n<h4>1.0.16<\/h4>\n\n<ul>\n<li>Fixed loading of WordPress.org language packs for editor JavaScript strings.<\/li>\n<li>Marked the editor panel title as translatable.<\/li>\n<\/ul>\n\n<h4>1.0.15<\/h4>\n\n<ul>\n<li>Corrected and refined wording in the readme and editor preview text.<\/li>\n<\/ul>\n\n<h4>1.0.14<\/h4>\n\n<ul>\n<li>Refined the plugin description across plugin metadata and the WordPress.org readme.<\/li>\n<\/ul>\n\n<h4>1.0.13<\/h4>\n\n<ul>\n<li>Updated the editor FAQ link to point directly to the relevant WordPress.org FAQ entry.<\/li>\n<\/ul>\n\n<h4>1.0.12<\/h4>\n\n<ul>\n<li>Added an editor FAQ link for frontend setup troubleshooting.<\/li>\n<li>Expanded the WordPress.org FAQ with template setup instructions.<\/li>\n<\/ul>\n\n<h4>1.0.11<\/h4>\n\n<ul>\n<li>Bumped plugin version to <code>1.0.11<\/code>.<\/li>\n<li>Removed unused WordPress.org banner assets.<\/li>\n<\/ul>\n\n<h4>1.0.10<\/h4>\n\n<ul>\n<li>Bumped plugin version to <code>1.0.10<\/code>.<\/li>\n<\/ul>\n\n<h4>1.0.9<\/h4>\n\n<ul>\n<li>Bumped plugin version to <code>1.0.9<\/code>.<\/li>\n<\/ul>\n\n<h4>1.0.8<\/h4>\n\n<ul>\n<li>Bumped plugin version to <code>1.0.8<\/code>.<\/li>\n<li>Added release note entry for <code>1.0.8<\/code>.<\/li>\n<\/ul>\n\n<h4>1.0.7<\/h4>\n\n<ul>\n<li>Added <code>Hero Background<\/code> view on <code>Posts &gt; All Posts<\/code> to list posts with a custom hero background color.<\/li>\n<li>Editor preview now removes the featured image outline while a custom background color is active.<\/li>\n<li>Expanded documentation with newly added backend\/editor features.<\/li>\n<\/ul>\n\n<h4>1.0.6<\/h4>\n\n<ul>\n<li>Improved and expanded <code>Description<\/code> and <code>Installation<\/code> documentation.<\/li>\n<li>Added explicit setup steps for applying the <code>hero-colored<\/code> CSS class in block theme templates.<\/li>\n<\/ul>\n\n<h4>1.0.5<\/h4>\n\n<ul>\n<li>Added a second sidebar color control for <code>Font Color<\/code>.<\/li>\n<li>Frontend output now applies both <code>background-color<\/code> and <code>color<\/code> to <code>.hero-colored<\/code>.<\/li>\n<li>Sidebar color picker is now shown on demand via dropdown popover.<\/li>\n<li>Added <code>WCAG AAA Normal Text<\/code> status with <code>PASS<\/code> \/ <code>FAILED<\/code>.<\/li>\n<li>Improved spacing in the color value button.<\/li>\n<\/ul>","raw_excerpt":"Hero Color Picker adds per-post color selection in the editor sidebar for hero styling via CSS.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/287430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=287430"}],"author":[{"embeddable":true,"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/marcdk"}],"wp:attachment":[{"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=287430"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=287430"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=287430"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=287430"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=287430"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ml.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=287430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}