Bricks Builder Reference

Technical documentation for using Respira with Bricks Builder.

About Bricks

Bricks Builder is a modern, performance-focused WordPress page builder that stores content as lightweight JSON. It's known for clean code output, developer-friendly features, and over 80 elements. Respira has full native support for Bricks — including 20 dedicated Deep Intelligence tools that go beyond content editing into design system inspection, ACSS integration, query loops, and component management.

Support Level

Bricks has Full Native Support — the deepest integration level available in Respira:

• Element-level read/write with proper flat-array round-tripping
• 20 dedicated Bricks Deep Intelligence tools
• Design system inspection (colors, typography, theme styles, global classes)
• ACSS (Automatic.css) detection and import
• Query loop inspection
• Component management
• Widget shortcuts for all common Bricks element types
• CSS regeneration after every content change
• Cache invalidation on duplicate approval

Data Structure

Bricks stores page structure as JSON in post meta (_bricks_page_content_2). Elements are organized in a flat array — each element carries both a parent reference (pointing up) and a children array (pointing down by ID string). Respira handles this round-trip automatically.

{
  "elements": [
    {
      "id": "abc123",
      "name": "section",
      "parent": 0,
      "children": ["def456", "ghi789"],
      "settings": { "tag": "section" }
    },
    {
      "id": "def456",
      "name": "heading",
      "parent": "abc123",
      "children": [],
      "settings": {
        "text": "Welcome to Our Site",
        "_cssId": "hero-heading"
      }
    },
    {
      "id": "ghi789",
      "name": "basic-text",
      "parent": "abc123",
      "children": [],
      "settings": {
        "text": "<p>Body copy goes here.</p>"
      }
    }
  ]
}

Note: parent: 0 means the element is a top-level root. Child IDs in children are strings, not integers.

Common Elements

Widget Shortcuts

When using respira_add_* shortcut tools, Respira maps generic widget names to the correct Bricks type automatically:

Element Targeting

By CSS ID (Recommended)

Set in Bricks: Element → Style → CSS → ID. Then target with:

{ "css_id": "hero-heading" }

By Admin Label

Label important elements in the structure panel. Then target with:

{ "admin_label": "Hero CTA Button" }

By Type and Content

{ "type": "button", "match_content": "Get Started" }

By Path

{ "path": "elements[2]" }

Bricks Deep Intelligence Tools (v5.4.0+)

Respira ships 20 dedicated tools for deep Bricks inspection and management. These go beyond content editing — use them to audit and maintain the design system.

Design System

Global Classes

Components & Templates

Health & Intelligence

Element-Level Tools

These tools work with Bricks (and all other supported builders) for targeted edits without touching the full page structure:

Example Prompts

Content updates:

• "Change the heading with CSS ID 'hero-heading' to 'Welcome Home'"
• "Update all button text 'Learn More' to 'Get Started'"
• "Replace the phone number in the footer section"

Design system:

• "Show me the full Bricks design system for this site"
• "What colors are defined in the Bricks color palette?"
• "Update the primary color to #E03D3D"
• "List all global classes that use font-size"

Structure & intelligence:

• "Run a Bricks health check on this site"
• "Find all query loops and list their sources"
• "Search for all elements with the class 'hero-btn'"
• "Is ACSS installed on this site?"

Page-level:

• "Extract the full Bricks structure for page 42"
• "Build a hero section with a heading, subheading, and CTA button"
• "Convert this HTML mockup to Bricks elements"

Global Elements & Templates

Bricks global elements and templates are accessible through Respira:

"List all Bricks templates" → respira_list_bricks_components
"Get the global header component" → respira_get_bricks_component
"Apply the hero template to page 12" → respira_apply_bricks_component

Limitations

• Complex interactions: Bricks scroll/click triggers are preserved but require the visual builder to configure
• Query loop data sources: Inspectable via respira_bricks_query_loops, but changing the data source requires the builder
• Display conditions: Preserved as-is; not directly editable via MCP
• Per-element custom CSS: Preserved; complex styling changes may be easier in the builder

See Also

• respira_find_element — Find elements by content, type, or class
• respira_update_element — Update a single element
• respira_extract_builder_content — Get full page structure
• respira_inject_builder_content — Replace full page structure
• respira_bricks_design_system — Full design system snapshot
• Page Builder Overview — Compare all supported builders

v5.4.0 Elemental — Bricks Goes Deep

v5.4.0 ("Elemental series, part 2") shipped full native Bricks support including:

• 20 Bricks Deep Intelligence tools — design system, ACSS, global classes, components, health check, query loops, element search
• Element-level round-trip fix — children arrays are now correctly rebuilt from parent references after every write, so pages no longer appear blank in the editor after MCP edits
• Widget shortcuts — respira_add_text, respira_add_button, etc. now map to correct Bricks types automatically
• Validation bypass fix — batch_update and structural operations no longer fail with "Content validation failed" on valid Bricks JSON

v5.2.0 Elemental — Foundation

v5.2.0 established the Bricks integration foundation:

• CSS Regeneration — Respira fires do_action('bricks/generate_css_file', $post_id) after every inject_content() call, so the frontend reflects changes immediately without a manual CSS rebuild
• Cache Invalidation on Approval — When a duplicate is approved, Respira clears Bricks' page cache and triggers CSS regeneration on the original post