Filter Bar
A generic "filter controls + active-filters row" skeleton, with one shared seam-gap custom property. Renders template-parts/organisms/filter-bar.
Neither section carries its own vertical padding — the parent .filter-bar's
own flex gap is the single source of spacing between them. That gap is exposed as a
shared, global knob — --filter-bar-seam-gap (default var(--spacing-6)).
Background color is a fixed default, not meant to be overridden per caller. Used by the Insights
Block, whose own filters are
an Accordion in its 'filter_row' => true variant, and
whose active-filters row is a script-populated set of Filter
Chips + a Clear All Button (this demo below server-renders
that same content statically, for a live preview — the real block builds it via JS after every
AJAX refresh instead).
Filters + active filters
No active filters (row collapses)
Playground
Change a value below to update the preview live.
Usage
get_template_part( 'template-parts/organisms/filter-bar', null, [
'filters' => function () { ... }, // required — callable (preferred) or a wp_kses_post'd
// string; the actual filter controls (e.g. an
// accordion with 'filter_row' => true)
'active_filters' => '', // optional — callable or string; usually left empty for a script
// to populate/replace after render (see the Insights Block's
// own script.js renderActiveFilters())
'active_filters_id' => '', // optional — id for the active-filters section
'id' => '', // optional — id for the outer wrapper
'classes' => '', // optional, appended alongside the filter-bar class
] );