Grid Filter

Isotope category filter bar (.grid-filter) that drives Isotope-filterable grids. Source items from a taxonomy or a manual list. It is shown in the block inserter as Canvas Grid Filter and registered as canvas-core/grid-filter.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

• Dropdown StyleDefaultOff

  Render as a dropdown button instead of an inline filter bar.

• Dropdown Button LabelDefaultFilter

  Wording on the button that opens the list of filters.

  Shown when Dropdown Style is on

• Wrapper RowDefaultOff

  Wrap the filter in a .grid-filter-wrap flex row (enables alignment and the shuffle button).

• AlignmentDefaultEmpty

  Where the row of filters sits across the width available to it.

  ChoicesLeft (default) (empty)CenterRightShown when Wrapper Row is on

• Row ClassesDefaultEmpty

  Extra classes on the row holding the bar and its shuffle button, for cross-aligning two children of different heights, which the alignment choice above cannot express.

  Shown when Wrapper Row is on

• Shuffle ButtonDefaultOff

  Show a shuffle button that randomly re-orders the grid.

  Shown when Wrapper Row is on

• Shuffle Button ClassesDefaultrounded

  Shape classes on the shuffle button, e.g. rounded, or d-none d-lg-block to hide it on small screens. Empty gives a square button.

  Shown when Wrapper Row is on and Shuffle Button is on

• Hash Deep-LinkDefaultOff

  Reflect the active filter in the URL hash (#filter=…) and restore it on page load, so filtered views are shareable.

• Filter Link ClassesDefaultEmpty

  Utility classes applied to each filter link itself: designs routinely set the weight or size on the anchor rather than the list.

• Base List ClassDefaultgrid-filter

  The list's own component class. A design whose filter is a sidebar rather than a bar names it differently; the front-end script is pointed at that class from the demo's own JS.

• Mark the first item activeDefaultOn

  Adds "activeFilter" to the first entry. Designs that style the active state from the link itself leave it off.

• Active ClassDefaultEmpty

  The class the front-end script moves between entries as the selection changes. Empty keeps the default "activeFilter"; a sidebar filter names its own.

• Control TypeDefaultFilter (show a subset)

  A sort list re-orders the same grid instead of narrowing it; each entry names an order rather than a selector.

  ChoicesFilter (show a subset)Sort (re-order the grid)

• What the Bar FiltersDefaultA laid-out grid (Isotope)

  Isotope re-lays a grid out. Fade suits a stack that is not a grid: a list of FAQs, cards or rows: hiding the entries that do not match and fading the rest back in.

  ChoicesA laid-out grid (Isotope)A plain stack of elements (fade)Shown when Control Type is "Filter (show a subset)"

• Entry SelectorDefaultEmpty

  The entries inside the target container this bar narrows, e.g. ".faq". Each entry also carries the category classes the filters name.

  Shown when What the Bar Filters is "A plain stack of elements (fade)"

• Show Match CountsDefaultOff

  Appends the number of grid items each entry matches, counted from the live grid.

  Shown when Control Type is "Filter (show a subset)"

• Target Container IDDefaultEmpty

  The id of the Isotope grid container this filter bar controls (without the leading #).

• Source Taxonomy (Optional)DefaultEmpty

  When set, filter items are generated automatically from this taxonomy's terms (as ".pf-{slug}") instead of the manual Items list below.

• All LabelDefaultAll

  Wording of the first filter, the one that clears the others and shows everything again.

  Shown when Source Taxonomy (Optional) is set

• StyleDefaultDefault (Pill)

  How the filter buttons are drawn, and how the chosen one is marked: a pill, an underline, a solid block or a sliding rule.

  ChoicesDefault (Pill)Style 2 (Underline)Style 3 (Solid Active)Style 4 (Sliding Underline)Style 5Style 6Shown when Dropdown Style is off

Items

• ItemsDefaulta preset list of 1 rows

  The filters offered, in the order listed here. Used when the bar is written by hand rather than built from a category.

  Shown when Source Taxonomy (Optional) is empty

  Each row of Items takes:

  • LabelDefaultCategory

    Wording of this filter button.

  • FilterDefault*

    Isotope selector: "*" for All, or ".pf-slug" to match a grid item class.

  • Sort KeyDefaultEmpty

    Used when the control type is Sort: "original-order", "name", "price_lh" or "price_hl".

  • ClassDefaultEmpty

    Extra classes on the wrapping for this filter (e.g. ms-auto to push it to the right).

  • Link ClassDefaultEmpty

    Classes on this entry's own link. Overrides the bar-wide Filter Link Classes for this row only.

  • Rule instead of a linkDefaultOff

    Renders this row as a horizontal rule, the way a grouped sidebar filter divides its sections.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Layout: Column, Container, Copyrights, Footer About, Footer Contacts, Footer Instagram.