Bricks - Transofrm JSON for Nestable API
Convert json from Builder > Structure Panel > Element > Right Click > Copy to json ready for Nestable API of custom elements
{
"inputCode": "{\"content\":[{\"id\":\"ycnnxo\",\"name\":\"section\",\"parent\":0,\"children\":[\"csxcsb\"],\"settings\":{\"_padding\":{\"top\":\"var(--bce--spacing-xl)\",\"bottom\":\"var(--bce--spacing-xl)\"},\"_rowGap\":\"var(--spacing-md)\"}},{\"id\":\"csxcsb\",\"name\":\"container\",\"parent\":\"ycnnxo\",\"children\":[\"uzvexd\",\"gfrvbf\"],\"settings\":{\"_display\":\"grid\",\"_gridTemplateColumns\":\"minmax(0,5fr) minmax(0,7fr)\",\"_gridGap\":\"var(--bce--spacing-lg)\"}},{\"id\":\"uzvexd\",\"name\":\"block\",\"parent\":\"csxcsb\",\"children\":[\"cnqbxr\",\"rxlwfa\"],\"settings\":{\"_display\":\"flex\",\"_direction\":\"column\",\"_justifyContent\":\"center\",\"_alignItems\":\"flex-start\",\"_rowGap\":\"var(--bce--spacing-md)\"}},{\"id\":\"cnqbxr\",\"name\":\"text\",\"parent\":\"uzvexd\",\"children\":[],\"settings\":{\"text\":\"<h2>Heading</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at dictum metus, sit amet aliquam odio. Sed ut massa nisi.</p>\",\"_cssGlobalClasses\":[\"azwebp\"]}},{\"id\":\"rxlwfa\",\"name\":\"block\",\"parent\":\"uzvexd\",\"children\":[\"mitmds\",\"lxrtod\"],\"settings\":{\"_display\":\"flex\",\"_direction\":\"row\",\"_flexWrap\":\"wrap\",\"_rowGap\":\"var(--bce--spacing-sm)\",\"_columnGap\":\"var(--bce--spacing-sm)\"}},{\"id\":\"mitmds\",\"name\":\"button\",\"parent\":\"rxlwfa\",\"children\":[],\"settings\":{\"text\":\"I am a button\",\"style\":\"primary\"}},{\"id\":\"lxrtod\",\"name\":\"button\",\"parent\":\"rxlwfa\",\"children\":[],\"settings\":{\"text\":\"I am a button\",\"style\":\"primary\",\"outline\":true}},{\"id\":\"gfrvbf\",\"name\":\"block\",\"parent\":\"csxcsb\",\"children\":[\"ptmpzl\"],\"settings\":[]},{\"id\":\"ptmpzl\",\"name\":\"image\",\"parent\":\"gfrvbf\",\"children\":[],\"settings\":{\"image\":{\"id\":3513,\"filename\":\"dummy-placeholder-2000x2000-1.jpeg\",\"size\":\"large\",\"full\":\"http://test-playground.local/wp-content/uploads/2024/07/dummy-placeholder-2000x2000-1.jpeg\",\"url\":\"http://test-playground.local/wp-content/uploads/2024/07/dummy-placeholder-2000x2000-1-1024x1024.jpeg\"}}}],\"source\":\"bricksCopiedElements\",\"sourceUrl\":\"https://test-playground.local\",\"version\":\"1.9.9\",\"globalClasses\":[{\"id\":\"azwebp\",\"name\":\"bce--prose\",\"settings\":{\"_cssCustom\":\".bafc--prose :where(p, ul, ol) {\\n margin-top: 1rem;\\n margin-bottom: 1rem;\\n}\\n\\n.bafc--prose :where(blockquote, pre) {\\n margin-top: 1.5rem;\\n margin-bottom: 1.5rem;\\n}\\n\\n.bafc--prose :where(figure) {\\n margin-top: 2em;\\n margin-bottom: 2em;\\n}\\n\\n.bafc--prose :where(figure figcaption) {\\n margin-top: 1.3em;\\n}\\n\\n.bafc--prose *:first-child,\\n.bafc--prose :where(:where(h2, h3, h4, h5, h6) + *) {\\n margin-top: 0;\\n}\\n\\n.bafc--prose :where(h1, h2, h3, h4, h5, h6) {\\n margin-top: 3.5rem;\\n margin-bottom: 1.25rem;\\n}\\n\\n.bafc--prose :where(li) {\\n margin-top: .5rem;\\n margin-bottom: .5rem;\\n}\"},\"modified\":1721686815,\"user_id\":1,\"category\":\"mdguvj\"}],\"globalElements\":[]}",
"outpuCode": "{\n \"content\": [\n {\n \"id\": \"ycnnxo\",\n \"name\": \"section\",\n \"parent\": 0,\n \"children\": [\n {\n \"id\": \"csxcsb\",\n \"name\": \"container\",\n \"parent\": \"ycnnxo\",\n \"children\": [\n {\n \"id\": \"uzvexd\",\n \"name\": \"block\",\n \"parent\": \"csxcsb\",\n \"children\": [\n {\n \"id\": \"cnqbxr\",\n \"name\": \"text\",\n \"parent\": \"uzvexd\",\n \"children\": [],\n \"settings\": {\n \"text\": \"<h2>Heading</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at dictum metus, sit amet aliquam odio. Sed ut massa nisi.</p>\",\n \"_cssGlobalClasses\": [\n \"azwebp\"\n ]\n }\n },\n {\n \"id\": \"rxlwfa\",\n \"name\": \"block\",\n \"parent\": \"uzvexd\",\n \"children\": [\n {\n \"id\": \"mitmds\",\n \"name\": \"button\",\n \"parent\": \"rxlwfa\",\n \"children\": [],\n \"settings\": {\n \"text\": \"I am a button\",\n \"style\": \"primary\"\n }\n },\n {\n \"id\": \"lxrtod\",\n \"name\": \"button\",\n \"parent\": \"rxlwfa\",\n \"children\": [],\n \"settings\": {\n \"text\": \"I am a button\",\n \"style\": \"primary\",\n \"outline\": true\n }\n }\n ],\n \"settings\": {\n \"_display\": \"flex\",\n \"_direction\": \"row\",\n \"_flexWrap\": \"wrap\",\n \"_rowGap\": \"var(--bce--spacing-sm)\",\n \"_columnGap\": \"var(--bce--spacing-sm)\"\n }\n }\n ],\n \"settings\": {\n \"_display\": \"flex\",\n \"_direction\": \"column\",\n \"_justifyContent\": \"center\",\n \"_alignItems\": \"flex-start\",\n \"_rowGap\": \"var(--bce--spacing-md)\"\n }\n },\n {\n \"id\": \"gfrvbf\",\n \"name\": \"block\",\n \"parent\": \"csxcsb\",\n \"children\": [\n {\n \"id\": \"ptmpzl\",\n \"name\": \"image\",\n \"parent\": \"gfrvbf\",\n \"children\": [],\n \"settings\": {\n \"image\": {\n \"id\": 3513,\n \"filename\": \"dummy-placeholder-2000x2000-1.jpeg\",\n \"size\": \"large\",\n \"full\": \"http://test-playground.local/wp-content/uploads/2024/07/dummy-placeholder-2000x2000-1.jpeg\",\n \"url\": \"http://test-playground.local/wp-content/uploads/2024/07/dummy-placeholder-2000x2000-1-1024x1024.jpeg\"\n }\n }\n }\n ],\n \"settings\": []\n }\n ],\n \"settings\": {\n \"_display\": \"grid\",\n \"_gridTemplateColumns\": \"minmax(0,5fr) minmax(0,7fr)\",\n \"_gridGap\": \"var(--bce--spacing-lg)\"\n }\n }\n ],\n \"settings\": {\n \"_padding\": {\n \"top\": \"var(--bce--spacing-xl)\",\n \"bottom\": \"var(--bce--spacing-xl)\"\n },\n \"_rowGap\": \"var(--spacing-md)\"\n }\n }\n ]\n}",
"status": "success"
}Input
Paste here Bricks code
Output
JSON code
You need to convert this to PHP array before using in Nestable API. Here is a converter for you.