🐞 fix: Remove ACF color picker and add gradient background support

views/blocks/section/block.json

@@ -1,27 +1,35 @@
 {
-  "name": "acf/section",
-  "title": "Section",
-  "description": "Content section",
-  "style": [
-    "file:./section.css"
-  ],
-  "category": "vdi-blocks",
-  "icon": "align-wide",
-  "keywords": [
-    "setion",
-    "content"
-  ],
-  "acf": {
-    "mode": "preview",
-    "renderTemplate": "section.php"
-  },
-  "supports": {
-    "align": true,
-    "anchor": true,
-    "color": true,
-    "html": true,
-    "jsx": true,
-    "mode": true,
-    "multiple": true
-  }
+    "name": "acf/section",
+    "apiVersion": 3,
+    "title": "Section",
+    "description": "Content section",
+    "style": [
+        "file:./section.css"
+    ],
+    "category": "vdi-blocks",
+    "icon": "align-wide",
+    "keywords": [
+        "setion",
+        "content"
+    ],
+    "acf": {
+        "blockVersion": 3,
+        "mode": "preview",
+        "renderTemplate": "section.php"
+    },
+    "supports": {
+        "align": true,
+        "anchor": true,
+        "color": {
+            "background": true,
+            "gradients": true,
+            "__experimentalDefaultControls": {
+                "background": true
+            }
+        },
+        "html": false,
+        "jsx": true,
+        "mode": true,
+        "multiple": true
+    }
 }

views/blocks/section/section.php

@@ -20,7 +20,7 @@ $ovlImage     = get_field( 'overlay_image' );
 $ovlOpacity   = get_field( 'overlay_opacity' ) ? get_field( 'overlay_opacity' ) / 100 : 1;
 
 // Set classes
-$classes = 'section';
+$classes = 'section relative';
 
 if ( $contentWidth === 'full' ) {
 	$classes .= ' mx-break-out';