bricks_update_global_class
Overview
Updates an existing global CSS class by deep-merging new settings into the current ones. Only the provided keys are changed; all other settings remain untouched. You can rename the class, change its category, modify CSS styles, or replace selectors.
This is ideal for iterative refinement of classes after initial creation, such as tweaking hover colors, adjusting spacing, or adding responsive breakpoint overrides without losing existing settings.
Key Features
When to Use
To rename a class — the CSS selector is updated site-wide automatically
To move a class to a different category
To add or replace hover/focus/pseudo-element selectors on an existing class
When audit feedback suggests adjusting class styles (contrast, spacing, font-size)
When NOT to Use
When you want to completely replace all settings — still works, but be aware it deep-merges (to remove a key, set it to null)
When you need to update multiple classes at once — there is no batch update tool; call this individually per class
Parameters
class_idstringREQUIREDnamestringoptionalcategorystringoptionalsettingsobjectoptionalselectorsarrayoptionalCode Examples
Update font-size and add hover selector
Deep-merges a new font-size into existing typography settings and replaces selectors with a hover color effect.
// Update font-size and add a hover color to an existing class
bricks_update_global_class({
class_id: "abc123",
settings: {
"_typography": { "font-size": "18px" }
},
selectors: [
{
selector: "&:hover",
settings: {
"_typography": { "color": { "raw": "var(--bricks-color-primary)" } }
}
}
]
}){
"id": "abc123",
"name": "text-body",
"message": "Global class 'text-body' updated successfully."
}Rename class and change category
Renames a class from its old name to "btn-cta" and moves it to the "Buttons" category. The CSS selector updates site-wide.
// Rename a class and move it to a different category
bricks_update_global_class({
class_id: "def456",
name: "btn-cta",
category: "Buttons"
}){
"id": "def456",
"name": "btn-cta",
"message": "Global class 'btn-cta' updated successfully."
}Common Mistakes
// Trying to add :focus while keeping existing :hover
bricks_update_global_class({
class_id: "abc123",
selectors: [{ selector: "&:focus", settings: { ... } }]
})
// RESULT: :hover selector is LOST!// Include both :hover AND :focus in the array
bricks_update_global_class({
class_id: "abc123",
selectors: [
{ selector: "&:hover", settings: { ... } },
{ selector: "&:focus", settings: { ... } }
]
})bricks_update_global_class({ class_id: "btn-primary", settings: { ... } })// First: bricks_get_global_classes({ search: "btn-primary" })
// Returns: { id: "d4e5f6", name: "btn-primary" }
bricks_update_global_class({ class_id: "d4e5f6", settings: { ... } })Tips & Warnings
Deep merge behavior: Settings are deep-merged, meaning you only need to send the keys you want to change. For example, sending {"_typography": {"font-size": "18px"}} preserves existing color, font-weight, etc.
Important: Selectors are NOT deep-merged — they are fully replaced. Always include all selectors you want to keep when updating.
Remember: Call bricks_regenerate_assets after updating classes to recompile CSS.