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).