Dynamic Attributes

Pro adds two new tabs to the Vector Expressions sidebar — HTML for attribute bindings and CSS for scoped styles. Together they let you bind expression-driven values to any HTML attribute and write per-block CSS with {{ }} tokens.

Preset Bindings

For known block types, the HTML tab shows purpose-built fields with labels, icons, help text, and placeholder examples. No configuration needed — just type an expression.

Supported Blocks

Block	Preset Fields	Target Element
Image (`core/image`)	Image Source, Alt Text, Title, Width, Height	`img`
Button (`core/button`)	Link URL, Link Target	`a`
Cover (`core/cover`)	Background Image	`img`
Navigation Link (`core/navigation-link`)	Link URL	`a`
Video (`core/video`)	Video Source, Poster Image	`video`

Example — dynamic image source:

{{ post.meta.hero_image_url | default "/wp-content/uploads/fallback.jpg" }}

NOTE

When you bind src on an image, the evaluator automatically strips srcset and sizes attributes so the browser uses the dynamic source at full resolution instead of picking from the original responsive set. The same applies to poster on video blocks.

Extending Presets

The preset registry is extensible via the vectorExpressions.bindings.blockPresets JavaScript filter. Third-party plugins can register their own block-specific preset fields without touching the core codebase.

Custom Attribute Bindings

Below the presets, the Add Binding section lets you create arbitrary attribute bindings with three fields per binding:

Field	Description
Target Element	CSS selector for a descendant element (e.g., `img`, `a.wp-block-button__link`). Leave empty to target the block root (`:scope`).
Attribute	The HTML attribute name (e.g., `href`, `aria-label`, `data-id`)
Expression	The expression template to evaluate

Example — dynamic aria-label on a button:

Target:    a
Attribute: aria-label
Expression: {{ post.meta.cta_label | default "Learn more about {post.title}" }}

The `original` Context Root

During binding evaluation, expressions can reference {{ original }} to access the element’s existing attribute value. This enables patterns like appending to a class or transforming an existing URL rather than replacing it entirely:

{{-- Append a dynamic class to the existing ones --}}
{{ original }} featured-{{ post.meta.card_style | default "standard" }}

{{-- Add a query param to an existing href --}}
{{ original }}?ref={{ user.roles[0] | default "guest" }}

Permissions

The Dynamic Attributes panel is only available to administrators (users with the unfiltered_html capability). Non-admin editors do not see the preset fields or custom binding rows. The capability check is filterable via vector_expressions_pro/bindings/capability.

Security

URL attributes (action, formaction, href, src, xlink:href, poster) are automatically sanitized through esc_url()
Event handlers — all on* attributes are blocked regardless of permission level

For the full security model, see the Security reference. For expression-driven CSS, see Scoped Dynamic CSS.