Widgets & Blocks

Grid Panda ships native Gutenberg blocks and Elementor widgets so you can embed grids and filter panels without writing shortcodes. All blocks and widgets are powered by the same underlying PHP rendering and accept the same parameters as their shortcode equivalents.

Gutenberg Blocks

Grid Panda registers two blocks under the gridpanda/ namespace. Both blocks render server-side — the block editor shows a placeholder preview and the real output is rendered in PHP via the block's render_callback. This means the initial HTML is SEO-crawlable, not dependent on JavaScript.

gridpanda/gridGrid Panda Grid Block

Renders a complete grid with all facets, cards, and pagination. Add it from the block inserter by searching "Grid Panda Grid".

Block Attributes (Inspector Panel)

AttributeTypeDescription
gridIdintegerSelect grid by numeric ID from a dropdown of all saved grids
gridSlugstringAlternatively type the grid slug directly
limitintegerOverride the grid's per_page setting. Leave empty to use the grid's own value.
gridpanda/facetsGrid Panda Facets Block

Renders one or more facet filter widgets. Place this block anywhere on the page — Grid Panda JavaScript automatically connects it to any Grid Panda Grid on the same page.

Block Attributes (Inspector Panel)

AttributeTypeDescription
facetIdsstringComma-separated facet IDs to render
postTypestringOptionally scope to facets for a specific post type
Common pattern: In a two-column layout, place the Grid Panda Facets block in the left column and the Grid Panda Grid block in the right column. Grid Panda JS connects them automatically via data attributes in the rendered HTML.

Elementor Widgets

When Elementor is active, Grid Panda registers two widgets in the Grid Panda widget category. Both use Elementor's server-side rendering (render() method) so the output is included in the initial HTML response for SEO.

Grid Panda Grid (Elementor Widget)

Drag this widget onto any Elementor section. It renders a full Grid Panda grid with all associated facets and pagination. The widget settings panel mirrors the shortcode attributes:

SettingDescription
GridSelect from a dropdown list of all saved Grid Panda grids
Items Per Page OverrideOverride the grid's configured per_page value
Grid Panda Facets (Elementor Widget)

Renders one or more facet filter widgets. Can be placed in a sidebar column or any section above/beside the grid:

SettingDescription
Facet IDsComma-separated IDs of facets to render
Post TypeOptionally scope displayed facets to a specific post type

Classic Editor, Divi, WPBakery & Others

Any page builder or editor that processes WordPress shortcodes supports Grid Panda via the[gridpanda_grid] and[gridpanda_facets] shortcodes. Use a Text/HTML element in your page builder and paste the shortcode:

[gridpanda_grid id="5"]
[gridpanda_facets ids="1,2,3" post_type="product"]

See the Shortcodes documentation for all available attributes.