Hero Color Picker
Hero Color Picker adds per-post background and font color controls to the editor sidebar for hero styling via CSS on elements with the hero-colored class.
Features:
— Two color controls: Background Color and Font Color
— 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 WCAG AAA Normal Text with PASS / FAILED status
— Panel is shown only while editing posts (post), not in template editing contexts
— Adds a core-like posts list view Hero Background to show only posts with a custom hero background color
— Works on elements that have the CSS class hero-colored
Stored as post meta:
— hero_color_picker_hero_color
— hero_color_picker_font_color
Frontend output (only when values are set):
.hero-colored {
background-color: $background;
color: $font;
}
.hero-colored a {
color: $font;
}
Important template setup:
— Open your block theme template (for example Single) in the Site Editor.
— Select the Group block that should receive the hero styles.
— In block settings, add hero-colored to Additional CSS class(es).