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.

Respira reads Bricks' real per-element control schemas (around 75 elements, the complete control set) so the agent knows what each element actually accepts. Ask for them with get_builder_inline_schemas. Every create path mints native 6-character element IDs that match Bricks' own #brxe- selectors, the bricks_components library is reachable, and CSS is regenerated on every write.

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

Prompting for great results on Bricks

For the full prompting guide, see Get Great Results: How to Prompt. A few things matter most on Bricks:

• Ask the agent to read your design system first. Bricks has real global classes, theme styles, a color palette, and typography. For anything beyond a one-off edit, tell the agent to read the design system and build with your existing global classes, not new inline styles. This keeps the site consistent and maintainable.
• Ask for native Bricks elements, never raw HTML. A Bricks page is a tree of elements (section, container, heading, text-basic, image, button). Raw HTML dropped into the page bypasses Bricks and breaks the editor.
• Prime once at the start. "Detect my builder, read my Bricks design system and global classes, then build using those. Native elements only, and duplicate any live page before editing."

Build a pricing section on [page] using native Bricks elements. First read my Bricks global classes and color palette and reuse them instead of inline styles. Duplicate the page first and show me a preview.

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

Recent capabilities (plugin v7.5.x)

• Real per-element control schemas. A scanner captured every Bricks element's full runtime control schema (around 75 elements, the complete control set). The element registry and get_builder_inline_schemas now surface those real controls, so the agent builds against what each element accepts instead of guessing from names. Off-contract controls are flagged in the write notes (warn only, never rejected).
• Native 6-character element IDs everywhere. Every create path — build_page, HTML convert, section presets, in-place inserts, and the pattern library — mints native 6-character IDs, so the editor's duplicate, copy, paste, and save work and front-end #brxe- selectors match.
• Component library reachable. Respira reads the bricks_components option, so find/replace and the analyzers resolve component instances and a guarded patch path can edit a component definition with an automatic snapshot and rollback.
• CSS regenerated on writes, so the front end reflects a change immediately without a manual rebuild.
• SEO, schema, and readability analyzers read Bricks content. Bricks stores the page in postmeta rather than post_content; the analyzers now build analyzable HTML from the element tree, so they no longer report 0 words on a page that renders fine.

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