Card Builder

Cards are reusable post templates that control how each item renders inside a grid. They are built in a visual block editor, support dynamic data tags, conditional visibility rules, and custom CSS — and are referenced by grids via the card_id in grid_config.

Database Structure

Cards are stored in wp_gridpanda_cards:

Column	Type	Description
id	bigint unsigned	Auto-increment primary key
name	varchar(255)	Human-readable card name
slug	varchar(200) UNIQUE	URL-safe identifier
template	longtext	Card template — JSON block tree or raw HTML
styles	longtext	Scoped CSS styles for this card
created_at / updated_at	datetime	Record timestamps

Available Block Types

The card builder provides these block types, each with its own settings panel:

featured_image

Renders the post thumbnail. Settings: image size (thumbnail, medium, large, full, or custom WP size), aspect ratio, object-fit, placeholder image, hover zoom/pan effects.

post_title

Renders the post title. Settings: HTML tag (h2, h3, h4, span), link to post (bool), line-clamp (max lines), typography.

post_excerpt

Renders the post excerpt or auto-generated excerpt from content. Settings: character limit, word limit, read-more link.

post_date

Renders the publish or modified date. Settings: date format (PHP format string), show relative time (e.g. '3 days ago'), date type (published/modified).

post_author

Renders the post author name. Settings: link to author archive (bool), display field (display_name, first_name, last_name).

author_avatar

Renders the author's Gravatar or custom avatar. Settings: size (px), shape (circle/square), fallback icon.

categories

Renders comma-joined terms from a specific taxonomy. Settings: taxonomy slug, separator, link each term (bool), max terms to show.

post_meta

Renders a raw post meta value. Settings: meta_key, label (optional prefix), fallback (shown when empty).

acf_field

Renders an ACF field value. Settings: field name or key, output format (raw/formatted), ACF repeater support.

custom_html

Raw HTML block with dynamic tag support. Useful for custom markup not covered by other blocks.

button

Configurable button/CTA. Settings: label, URL (supports dynamic tags like {{permalink}}), style (primary/secondary/outline/ghost), size, target, rel.

badge

Small inline badge/pill. Settings: text (supports dynamic tags), background color, text color, conditional visibility (show only when certain condition is true).

wc_price

WooCommerce product price with sale/regular price display. Settings: show original price when on sale (bool), currency position. Requires WooCommerce.

wc_sale_badge

Displays an 'On Sale' or percentage-off badge. Only visible when the product has a sale price. Requires WooCommerce.

wc_rating

Star rating display. Settings: max stars, show review count, show numeric value, icon style. Requires WooCommerce.

wc_stock_badge

Displays In Stock / Out of Stock / Backorder status badge. Requires WooCommerce.

wc_add_to_cart

WooCommerce Add to Cart button. Renders the native WC AJAX add-to-cart button with quantity input option. Requires WooCommerce.

container

Wrapper container for grouping and styling child blocks. Settings: display (flex/grid), direction, alignment, gap, background, border, padding.

columns

Multi-column container. Settings: number of columns (1–6), gap, responsive collapse.

spacer

Fixed-height spacer block. Settings: height (CSS length).

divider

Horizontal rule. Settings: color, thickness, margin.

image

Static image block (not the featured image). Settings: URL, alt text, size, link.

icon

SVG icon block. Settings: icon name from built-in library or custom SVG, size, color.

progress_bar

Percentage progress bar populated from a meta field. Settings: meta_key, min, max, color, label format.

countdown

Countdown timer to a date from a meta field. Settings: meta_key (date), format, show/hide days/hours/minutes/seconds.

map_embed

Google Maps embed using an address from post meta. Settings: meta_key, zoom level, map type (roadmap/satellite).

Dynamic Tags

Dynamic tags are {{tag_name}} placeholders resolved at render time. They are available in text blocks, custom HTML, button URLs, badge labels, and any field that accepts text:

Tag	Resolves To
{{post_id}}	WordPress post ID integer
{{post_title}}	Post title (HTML-escaped)
{{post_excerpt}}	Post excerpt (wp_trim_words processed)
{{post_content}}	Full post content (with do_shortcode)
{{post_date}}	Publication date (site date format)
{{post_modified}}	Last modified date
{{post_author}}	Author display name
{{post_author_id}}	Author user ID
{{post_status}}	Post status slug (publish, draft, etc.)
{{post_type}}	Post type slug
{{permalink}}	Full post URL
{{featured_image_url}}	Featured image URL (full size)
{{featured_image_url:large}}	Featured image URL at specific registered size
{{meta:_meta_key}}	Post meta value for _meta_key
{{acf:field_name}}	ACF field value by field name
{{taxonomy:category}}	Comma-separated term names for category taxonomy
{{wc:price}}	WooCommerce formatted price HTML
{{wc:sale_price}}	WooCommerce sale price
{{wc:regular_price}}	WooCommerce regular price
{{wc:rating}}	Average rating (0.0–5.0 numeric)
{{wc:stock_status}}	Stock status: instock, outofstock, onbackorder
{{wc:sku}}	Product SKU
{{wc:weight}}	Product weight

Custom dynamic tags can be handled via the gridpanda/grid/dynamic_tags filter. Return a non-empty string to handle the tag and prevent the default resolution.

Conditional Visibility

Any block can have visibility conditions. If conditions are set, the block is only rendered when all conditions are met. Conditions can be grouped with AND/OR logic:

Source	Operators	Example Use
post_meta	equals, not_equals, contains, not_contains, empty, not_empty, greater_than, less_than	Show badge only when is_featured = '1'
taxonomy	has_term, not_has_term	Show sale section only if product is in category 'deals'
wc_stock	is_in_stock, is_out_of_stock, is_on_backorder	Show 'In Stock' badge only when product is in stock
wc_sale	is_on_sale, not_on_sale	Show original price only when product is on sale
dynamic_tag	equals, not_equals, contains, empty, not_empty	Hide date if {{wc:rating}} is empty
post_type	equals, not_equals	Render different layout section per post type in mixed grids

Conditional visibility is evaluated server-side during card rendering — hidden blocks produce no HTML output.

Custom CSS & Hover Effects

Each card can have scoped CSS styles written in the Styles editor. Styles are namespaced to the card's generated CSS class (.gridpanda-card-{card_id}) to prevent bleed.

.gridpanda-card-12 .card-image img {
  transition: transform 0.3s ease;
}
.gridpanda-card-12:hover .card-image img {
  transform: scale(1.05);
}
.gridpanda-card-12 .wc-price {
  color: #2563eb;
  font-weight: 700;
}

The block editor also includes built-in hover effect presets configurable per-block:

Image zoom

Image pan

Overlay fade

Color shift

Scale up

Shadow lift

Slide caption

Opacity fade

Card REST API

GET

/wp-json/gridpanda/v1/cards

List all card templates (admin)

GET

/wp-json/gridpanda/v1/cards/{id}

Get a card by ID (admin)

POST

/wp-json/gridpanda/v1/cards

Create a card (admin)

PUT

/wp-json/gridpanda/v1/cards/{id}

Update a card (admin)

DELETE

/wp-json/gridpanda/v1/cards/{id}

Delete a card (admin)

GET

/wp-json/gridpanda/v1/cards/sample-post

Get sample post data for card builder preview

GET

/wp-json/gridpanda/v1/cards/search-posts

Search posts for card builder preview (admin)

GET

/wp-json/gridpanda/v1/cards/acf-fields

List ACF field groups and fields (admin)

GET

/wp-json/gridpanda/v1/cards/meta-keys

List distinct post meta keys (admin)

GET

/wp-json/gridpanda/v1/cards/product-attributes

List WooCommerce product attributes (admin)

← Grids Indexer →