## Update block styles `PATCH /v1/pages/:pageId/blocks/:blockId/styles` Changes the CSS classes and inline styles of block nodes on a site page. Nodes are selected by selectors from the block manifest; a single call can change several nodes. ## Parameters | Parameter | Type | Required | Description | |----------|-----|:-----:|----------| | `pageId` (path) | number | yes | Page ID. List: [`GET /v1/pages`](/docs/entities/pages/list) | | `blockId` (path) | number | yes | ID of a block on this page. List: [`GET /v1/pages/:pageId/blocks`](/docs/entities/pages/blocks/list) | | `scope` (query) | string | no | Site area: `KNOWLEDGE` — knowledge base, `GROUP` — workgroup pages, `MAINPAGE` — home pages. Omit the parameter for pages of all other sites | ## Request fields (body) | Field | Type | Required | Description | |------|-----|:-----:|----------| | `styles` | object | yes | An object of the form "selector → changes". Must not be empty. The body has no other fields | | `styles.` | object | yes | The key is a node selector `.class` or `.class@N`, where `N` is a zero-based index among the nodes with that class. Without `@N`, the change applies to all nodes with that class. Valid selectors are the keys of `style.nodes` in the response of [`GET /v1/pages/:pageId/blocks/:blockId/content`](/docs/entities/pages/block-content). The value is an object with a `classList` field, a `style` field, or both | | `styles..classList` | string[] | no | The new list of node classes. Each element is a non-empty string without spaces. If the field is omitted, the node classes do not change | | `styles..style` | object | no | Inline node styles as "property → value" pairs, for example `{"color": "#ff0000"}`. They are written to the node's `style` attribute | ## Examples ### curl — personal key ```bash curl -X PATCH "https://vibecode.bitrix24.com/v1/pages/42/blocks/7/styles" \ -H "X-Api-Key: YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "styles": { ".landing-block-node-title": { "classList": ["landing-block-node-title", "g-color-red", "g-mb-20"] } } }' ``` ### curl — OAuth application ```bash curl -X PATCH "https://vibecode.bitrix24.com/v1/pages/42/blocks/7/styles" \ -H "X-Api-Key: YOUR_APP_KEY" \ -H "Authorization: Bearer USER_SESSION_TOKEN" \ -H "Content-Type: application/json" \ -d '{ "styles": { ".landing-block-node-title": { "classList": ["landing-block-node-title", "g-color-red", "g-mb-20"] } } }' ``` ### JavaScript — personal key ```javascript const res = await fetch('https://vibecode.bitrix24.com/v1/pages/42/blocks/7/styles', { method: 'PATCH', headers: { 'X-Api-Key': 'YOUR_API_KEY', 'Content-Type': 'application/json', }, body: JSON.stringify({ styles: { '.landing-block-node-title': { classList: ['landing-block-node-title', 'g-color-red', 'g-mb-20'], }, }, }), }) const { success, data } = await res.json() ``` ### JavaScript — OAuth application ```javascript const res = await fetch('https://vibecode.bitrix24.com/v1/pages/42/blocks/7/styles', { method: 'PATCH', headers: { 'X-Api-Key': 'YOUR_APP_KEY', 'Authorization': 'Bearer USER_SESSION_TOKEN', 'Content-Type': 'application/json', }, body: JSON.stringify({ styles: { '.landing-block-node-title': { classList: ['landing-block-node-title', 'g-color-red', 'g-mb-20'], }, }, }), }) const { success, data } = await res.json() ``` ## Response fields | Field | Type | Description | |------|-----|----------| | `success` | boolean | `true` on success | | `data.id` | number | Block ID | | `data.pageId` | number | Page ID | | `data.anchor` | string | Block anchor. An automatic anchor has the form `b`, for example `b7` | | `data.content` | string | The full block HTML, read back after the change | | `data.nodes` | object | Empty object. The block state is in `content` | | `data.styles` | object | Empty object. The block state is in `content` | | `data.attrs` | object | Empty object. The block state is in `content` | | `data.cards` | object | Empty object. The block state is in `content` | | `data.active` | boolean | Whether the block is active | ## Response example The paragraph text in `content` is shortened with an ellipsis; the markup is unchanged. ```json { "success": true, "data": { "id": 7, "pageId": 42, "anchor": "b7", "content": "
\r\n\t
\r\n\t\t

Spring sale

\r\n\t\t
\r\n\t\t\tSed feugiat porttitor nunc, non dignissim ipsum vestibulum in…\r\n\t\t
\r\n\t
\r\n
", "nodes": {}, "styles": {}, "attrs": {}, "cards": {}, "active": true } } ``` ## Error response example 400 — `classList` contains a class with a space: ```json { "success": false, "error": { "code": "INVALID_PARAMS", "message": "Styles accept classList string tokens and a style object" } } ``` ## Errors | HTTP | Code | Description | |------|-----|----------| | 400 | `INVALID_PARAMS` | The value for a selector is not an object with `classList` and `style`: an extra key, a class with a space or an empty string, or `style` is not an object | | 400 | `INVALID_PARAMS` | The selector is not in the `.class` or `.class@N` format. Service keys are not accepted in place of a selector | | 400 | `INVALID_PARAMS` | The selector is not among the block's `style.nodes`, or the `@N` index exceeds the number of nodes with that class. The message lists the available selectors | | 400 | `INVALID_PARAMS` | The body contains a field other than `styles` | | 400 | `INVALID_PARAMS` | `pageId` or `blockId` is not a positive integer | | 400 | `MISSING_REQUIRED_FIELDS` | The body is not a JSON object, it has no `styles` field, or `styles` is an empty object | | 400 | `INVALID_SCOPE` | `scope` is not `KNOWLEDGE`, `GROUP` or `MAINPAGE` | | 404 | `ENTITY_NOT_FOUND` | The page does not exist, the block does not exist, or the block belongs to another page | | 404 | `ENTITY_NOT_FOUND` | The change was accepted, but the block could not be read back afterwards | | 409 | `LANDING_MODULE_NOT_ENABLED` | The Sites module is not enabled on the Bitrix24 account | | 409 | `PORTAL_ADDRESS_CHANGED` | The self-hosted Bitrix24 moved to a new address, but the key's webhook was issued for the old one. Reissue the key's webhook | | 422 | `BITRIX_ERROR` | Bitrix24 did not confirm the block change | | 403 | `WRITE_BLOCKED_READONLY_KEY` | The key is read-only. The request is refused before any call to the Bitrix24 account | | 403 | `SCOPE_DENIED` | The key does not have the `landing` scope | | 401 | `TOKEN_MISSING` | The API key has no Bitrix24 access tokens | Full list of common API errors — [Errors](/docs/errors). ## Known specifics - **`classList` replaces the node classes entirely.** Classes missing from the passed list are removed from the node. In the example above, the heading with the classes `landing-block-node-title js-animation fadeIn g-mb-20 g-color` ended up with `landing-block-node-title g-color-red g-mb-20` after the call. To add a class to the existing ones, first read the node's current classes in `content` and pass the full list. - **Classes the manifest uses to address the node are preserved.** If `classList` omits the selector class, for example `landing-block-node-title`, it still stays on the node. So the node is still found by the same selector in subsequent calls. - **The set of selectors for styles is wider than for text.** `style.nodes` includes containers that are not among the editable nodes, for example `.landing-block-node-text-container`. The style of such a node can be changed with this method, but its text cannot be changed via [`PATCH …/nodes`](/docs/entities/pages/block-nodes). ## See also - [Update block text and images](/docs/entities/pages/block-nodes) - [Update block attributes](/docs/entities/pages/block-attrs) - [Change a block node tag](/docs/entities/pages/block-tags) - [Read block content](/docs/entities/pages/block-content) - [List page blocks](/docs/entities/pages/blocks/list) - [Errors](/docs/errors)