bricks_update_custom_element

UtilityAdvancedComplexity: 7/10

Update a custom elements controls or render code

Overview

Updates an existing custom Bricks element. You can modify the label, controls, render template, CSS, and/or builder template. Only the provided fields are updated — omitted fields remain unchanged.

This tool regenerates the PHP file in the child theme with the updated code. Existing instances on pages will immediately reflect the changes since the rendering is done at runtime via PHP.

Key Features

Partial Updates

Only the provided fields are updated. You can change just the CSS, just the render template, or just the controls without affecting other aspects.

Immediate Effect

Changes take effect immediately since custom elements render via PHP at runtime. No cache clearing needed.

Control Replacement

When updating controls, the entire control array is replaced. Ensure you include all controls you want to keep.

When to Use

When fixing bugs in the PHP render template of a custom element
When adding new controls to an existing custom element
When updating CSS styling for a custom element
When adding or improving the Vue.js builder template for WYSIWYG editing

Prerequisites

The custom element must already exist (created via bricks_create_custom_element)
Know the element name/slug to update

When NOT to Use

When creating a brand new custom element — use bricks_create_custom_element
When deleting a custom element — use bricks_delete_custom_element
When the change requires a new element name/slug (create new and delete old instead)

Parameters

6 Total Parameters1 Required5 Optional

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28

namestringREQUIRED

Element name/slug to update (e.g., "pricing-card")

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28

labelstringoptional

New display label

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28

controlsarrayoptional

Updated controls (replaces all existing controls). Same format as bricks_create_custom_element.

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28

render_htmlstringoptional

New PHP render template

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28

cssstringoptional

Updated CSS

Warning: Undefined array key "param_enum_values" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 28

builder_templatestringoptional

New Vue.js builder template for WYSIWYG editing. Set to empty string to remove.

Code Examples

Update CSS styling for a custom element

Changes only the CSS without affecting the controls or render template.

JSON

bricks_update_custom_element({
  name: "pricing-card",
  css: ".pricing-card { padding: 48px 36px; border-radius: 16px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.08); text-align: center; transition: transform 0.3s ease; }n.pricing-card:hover { transform: translateY(-4px); }n.pricing-card.highlighted { border: 2px solid var(--bricks-color-primary); transform: scale(1.05); }"
})

Response

{
  "success": true,
  "data": {
    "name": "pricing-card",
    "file": "/wp-content/themes/bricks-child/bricks-mcp/element-pricing-card.php"
  }
}

Common Mistakes

Updating controls without including all existing controls

When updating controls, the entire array is replaced. Use bricks_read_custom_element to get current controls first, then modify and send the complete array.

Wrong

// Only sending the new control — all other controls are lost!
bricks_update_custom_element({ name: "pricing-card", controls: [
  { key: "subtitle", type: "text", label: "Subtitle" }
] })

Correct

// First read existing controls, then add the new one
// bricks_read_custom_element({ name: "pricing-card" })
// Then include ALL controls:
bricks_update_custom_element({ name: "pricing-card", controls: [
  { key: "plan_name", type: "text", label: "Plan Name" },
  { key: "price", type: "text", label: "Price" },
  { key: "subtitle", type: "text", label: "Subtitle" }
  // ... all other existing controls
] })

Tips & Warnings

Tips & Warnings

Control replacement: When providing controls, the entire array replaces existing controls. Always read the current controls first with bricks_read_custom_element before updating.

Remove builder template: Set builder_template to an empty string to remove the Vue.js template and fall back to default builder rendering.

PHP file regeneration: The tool regenerates the entire PHP file in the child theme. Previous file contents are overwritten.

Return Values

Field	Type	Description
`success`	boolean	Whether the custom element was updated successfully
`data.name`	string	Element slug
`data.file`	string	Path to the updated PHP file

Related Tools

Technical Details

Tool ID

bricks_update_custom_element

API Endpoint

/bricks-mcp/v1/custom-elements/{name}

HTTP Method

PUT

Namespace

components

Source File

components/custom-elements.ts

Version

1.0

Min Bricks Version

1.9

Requires Auth

Yes

Changelog

v1.0

Initial release

20250101