Bricks Builder Integration

What Is the Bricks Builder Integration?

Orbital integrates with Bricks Builder through dynamic data tags and custom query loops.

The Bricks Builder integration allows you to display Orbital task data dynamically in your Bricks templates using dynamic data tags. Instead of hardcoding task information, your templates automatically pull current task details, parent post relationships, and field values – all through Bricks Builder’s visual interface.

This integration targets Bricks Builder users who need to create custom task displays, client dashboards, or data-driven interfaces without manual coding.

Why Use the Bricks Builder Integration?

  • Automatic Updates: Task information updates in real-time without template modifications
  • Visual Design: Use Bricks Builder’s interface instead of writing custom PHP or HTML
  • Parent Context: Show which post or page each task belongs to with one dynamic tag
  • Filter Interfaces: Create interactive priority/status filters using query loops
  • Time Savings: Build complex task displays in minutes instead of hours

Real-world Example: A marketing agency creates a client dashboard showing all website tasks. When they mark a task “Approved” in WordPress, the client dashboard automatically updates the status display and moves it to the completed section.

How to Use the Bricks Builder Integration

Access Requirements

Currently requires WordPress administrator privileges. This security restriction will be updated to support role-based permissions in future releases.

Available Dynamic Tags

The integration provides two types of dynamic tags:

Task Field Tags – Display data from individual tasks:

  • {orb_cf_priority} – Shows “High”, “Normal”, or “Low”
  • {orb_cf_approval_status} – Shows “Pending Review”, “Approved”, “Rejected”, or “Needs Revision”
  • {orb_cf_assignee} – Shows assigned user’s display name
  • {orb_cf_start_date} – Shows formatted start date
  • {orb_cf_due_date} – Shows formatted due date or “Not Set”
  • {orb_cf_closed} – Shows “Yes” or “No”
  • {orb_parent_post_title} – Shows the parent post’s title
  • {orb_parent_post_link} – Shows link to parent post

Query Loop Tags – Used within Orbital query loops for filters:

  • {orb_priority_key} – Shows option key (“high”, “normal”, “low”)
  • {orb_priority_value} – Shows display label (“High”, “Normal”, “Low”)
  • {orb_approval_status_key} – Shows status key (“pending”, “approved”, etc.)
  • {orb_approval_status_value} – Shows status label (“Pending Review”, “Approved”, etc.)
  • {orb_assignee_key} – Shows user ID
  • {orb_assignee_value} – Shows user display name

Basic Setup Steps

  1. Create a Bricks Template: Navigate to Bricks → Templates → Add New
  2. Add Text Element: Insert any text element where you want task data
  3. Open Dynamic Data: Click the dynamic data icon (database symbol) in the element
  4. Select Orbital Group: Find “Orbital” in the dynamic data groups
  5. Choose Your Tag: Select the appropriate tag for your needs

Screenshot: Bricks Builder dynamic data popup showing Orbital group with available tags

Creating Query Loops for Filters

Query loops let you create dynamic filter buttons or analytics displays:

  1. Add Query Loop Element: Insert a Query Loop element in your template
  2. Set Query Type: Choose from available Orbital query types:
    • “Orbital: Priority”
    • “Orbital: Approval Status”
    • “Orbital: Assignee”
  3. Configure Loop Content: Inside the loop, use the corresponding tags
  4. Style as Needed: Apply CSS classes for visual design

Screenshot: Bricks Builder query loop settings showing Orbital query types

Quick Start Examples

Basic Task Display

Show task information in any Bricks text element:

Task: Bricks Builder Integration
Priority: {orb_cf_priority}
Status: {orb_cf_approval_status}
Due: {orb_cf_due_date}
Project: {orb_parent_post_title}

Priority Filter Buttons

Inside an “Orbital: Priority” query loop:

<button data-filter="{orb_priority_key}">
    {orb_priority_value} Priority
</button>

Task Card Layout

Combine multiple tags for a complete task card:

<div class="task-card">
    <h3>Bricks Builder Integration</h3>
    <span class="priority-{orb_cf_priority}">{orb_cf_priority}</span>
    <p>Status: {orb_cf_approval_status}</p>
    <p>Assigned to: {orb_cf_assignee}</p>
    <p>Due: {orb_cf_due_date}</p>
    <a href="{orb_parent_post_link}">View {orb_parent_post_title}</a>
</div>

Advanced Usage

CSS Styling with Dynamic Classes

Use the tag values as CSS classes for conditional styling:

.priority-high { color: red; }
.priority-normal { color: orange; }
.priority-low { color: green; }

.status-approved { background: lightgreen; }
.status-pending { background: lightyellow; }

Available Query Loop Types

When creating Query Loop elements, these Orbital types are available:

  • Orbital: Priority – Loops through High, Normal, Low options
  • Orbital: Approval Status – Loops through Pending Review, Approved, Rejected, Needs Revision
  • Orbital: Assignee – Loops through all WordPress users
  • Orbital: Closed – Loops through Yes, No options

Technical Requirements

System Requirements

  • Active Bricks Builder installation
  • WordPress administrator privileges (temporary security requirement)
  • Orbital plugin v1.2.2 or higher

Default Fields Available

  • priority: High, Normal, Low (select dropdown)
  • approval_status: Pending Review, Approved, Rejected, Needs Revision (select dropdown)
  • assignee: All WordPress users (select dropdown)
  • start_date: Date field with WordPress date format
  • due_date: Date field with “Not Set” fallback for empty values
  • closed: Yes/No checkbox field

Custom Fields Support

Any custom fields you add to Orbital automatically become available as dynamic tags using the format {orb_cf_FIELD_KEY}. Supported field types:

  • Text, Textarea, Number, Email, URL fields
  • Select dropdowns and Radio buttons (with options)
  • Checkboxes (displays “Yes”/”No”)
  • Date fields (formatted using WordPress date settings)

Security and Permissions

Current Access Control

  • Admin-Only: Currently requires manage_options capability
  • Future Updates: Permission-based access planned for next release
  • Data Security: All output is sanitized and escaped
  • Privacy: Respects WordPress post visibility and user permissions

Troubleshooting

Tags Display as Plain Text

  • Check Admin Access: Verify you have administrator privileges
  • Verify Syntax: Ensure correct tag format {orb_cf_field_name}
  • Test Simple Tag: Start with {orb_cf_priority} to verify integration works

Query Loops Show No Results

  • Check Field Type: Only select, radio, and checkbox fields support query loops
  • Verify Data: Ensure tasks exist with values for that field
  • Match Query Type: Query type “Orbital: Priority” only works with priority field

Data Not Updating

  • Clear Cache: Clear all caching plugins and Bricks Builder cache
  • Verify Save: Check that task data was properly saved in WordPress admin
  • Test on Different Task: Try the tag on a task with known data values

Tips and Best Practices

Template Organization

  • Create reusable task card templates that you can apply across different pages
  • Use Bricks Builder’s template conditions to show different layouts based on task priority or status
  • Group related dynamic tags in container elements for easier styling

Performance Optimization

  • Limit query loops to essential data – each loop runs a database query
  • Use Bricks Builder’s built-in caching when possible
  • Consider using standard Posts query loops with post type “orb_task” for better performance on large task lists

Design Consistency

  • Use the tag values as CSS classes (e.g., priority-{orb_cf_priority}) for consistent styling across priority levels
  • Create a design system for different approval statuses using background colors or icons
  • Keep parent post links styled consistently to help users understand task context