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

acf/group_6261bc658dd80.json

@@ -6,6 +6,7 @@
             "key": "field_6262e24ce0672",
             "label": "Background",
             "name": "",
+            "aria-label": "",
             "type": "accordion",
             "instructions": "",
             "required": 0,
@@ -19,27 +20,11 @@
             "multi_expand": 1,
             "endpoint": 0
         },
-    {
-      "key": "field_6262df5194500",
-      "label": "Background Color",
-      "name": "background_color",
-      "type": "color_picker",
-      "instructions": "",
-      "required": 0,
-      "conditional_logic": 0,
-      "wrapper": {
-        "width": "",
-        "class": "",
-        "id": ""
-      },
-      "default_value": "",
-      "enable_opacity": 0,
-      "return_format": "string"
-    },
         {
             "key": "field_6261bc723d308",
             "label": "Background Image",
             "name": "background_image",
+            "aria-label": "",
             "type": "image",
             "instructions": "",
             "required": 0,
@@ -64,6 +49,7 @@
             "key": "field_62a9e85035329",
             "label": "Background Position",
             "name": "background_position",
+            "aria-label": "",
             "type": "group",
             "instructions": "",
             "required": 0,
@@ -86,6 +72,7 @@
                     "key": "field_62a9e87c3532a",
                     "label": "Size",
                     "name": "size",
+                    "aria-label": "",
                     "type": "select",
                     "instructions": "",
                     "required": 0,
@@ -106,12 +93,15 @@
                     "ui": 0,
                     "return_format": "value",
                     "ajax": 0,
-          "placeholder": ""
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
                 },
                 {
                     "key": "field_62a9e8ef3532b",
                     "label": "Scale",
                     "name": "scale",
+                    "aria-label": "",
                     "type": "range",
                     "instructions": "",
                     "required": 0,
@@ -140,6 +130,7 @@
                     "key": "field_62a9e92e3532c",
                     "label": "X",
                     "name": "x",
+                    "aria-label": "",
                     "type": "range",
                     "instructions": "",
                     "required": 0,
@@ -160,6 +151,7 @@
                     "key": "field_62a9e98c3532d",
                     "label": "Y",
                     "name": "y",
+                    "aria-label": "",
                     "type": "range",
                     "instructions": "",
                     "required": 0,
@@ -182,6 +174,7 @@
             "key": "field_6262df6394501",
             "label": "Background End",
             "name": "",
+            "aria-label": "",
             "type": "accordion",
             "instructions": "",
             "required": 0,
@@ -199,6 +192,7 @@
             "key": "field_6262df8794502",
             "label": "Overlay",
             "name": "",
+            "aria-label": "",
             "type": "accordion",
             "instructions": "",
             "required": 0,
@@ -216,6 +210,7 @@
             "key": "field_6261bfcb2d09c",
             "label": "Overlay Color",
             "name": "overlay_color",
+            "aria-label": "",
             "type": "color_picker",
             "instructions": "",
             "required": 0,
@@ -227,12 +222,16 @@
             },
             "default_value": "",
             "enable_opacity": 0,
-      "return_format": "string"
+            "return_format": "string",
+            "custom_palette_source": "",
+            "palette_colors": "",
+            "show_color_wheel": true
         },
         {
             "key": "field_6262df9994503",
             "label": "Overlay Image",
             "name": "overlay_image",
+            "aria-label": "",
             "type": "image",
             "instructions": "",
             "required": 0,
@@ -257,6 +256,7 @@
             "key": "field_6261c02e08b7f",
             "label": "Overlay Opacity",
             "name": "overlay_opacity",
+            "aria-label": "",
             "type": "range",
             "instructions": "",
             "required": 0,
@@ -290,6 +290,7 @@
             "key": "field_62a9e9ab3532e",
             "label": "Overlay Position",
             "name": "overlay_position",
+            "aria-label": "",
             "type": "group",
             "instructions": "",
             "required": 0,
@@ -312,6 +313,7 @@
                     "key": "field_62a9e9ab3532f",
                     "label": "Size",
                     "name": "size",
+                    "aria-label": "",
                     "type": "select",
                     "instructions": "",
                     "required": 0,
@@ -332,12 +334,15 @@
                     "ui": 0,
                     "return_format": "value",
                     "ajax": 0,
-          "placeholder": ""
+                    "placeholder": "",
+                    "create_options": 0,
+                    "save_options": 0
                 },
                 {
                     "key": "field_62a9e9ab35330",
                     "label": "Scale",
                     "name": "scale",
+                    "aria-label": "",
                     "type": "range",
                     "instructions": "",
                     "required": 0,
@@ -366,6 +371,7 @@
                     "key": "field_62a9e9ab35331",
                     "label": "X",
                     "name": "x",
+                    "aria-label": "",
                     "type": "range",
                     "instructions": "",
                     "required": 0,
@@ -386,6 +392,7 @@
                     "key": "field_62a9e9ab35332",
                     "label": "Y",
                     "name": "y",
+                    "aria-label": "",
                     "type": "range",
                     "instructions": "",
                     "required": 0,
@@ -408,6 +415,7 @@
             "key": "field_6262e26be0673",
             "label": "Overlay End",
             "name": "",
+            "aria-label": "",
             "type": "accordion",
             "instructions": "",
             "required": 0,
@@ -425,6 +433,7 @@
             "key": "field_6262dfbb94504",
             "label": "Theme",
             "name": "",
+            "aria-label": "",
             "type": "accordion",
             "instructions": "",
             "required": 0,
@@ -442,6 +451,7 @@
             "key": "field_6261c14931371",
             "label": "Is Dark",
             "name": "is_dark",
+            "aria-label": "",
             "type": "true_false",
             "instructions": "",
             "required": 0,
@@ -461,6 +471,7 @@
             "key": "field_6262e2b1e0674",
             "label": "Theme End",
             "name": "",
+            "aria-label": "",
             "type": "accordion",
             "instructions": "",
             "required": 0,
@@ -478,6 +489,7 @@
             "key": "field_6262eadf25dae",
             "label": "Content",
             "name": "",
+            "aria-label": "",
             "type": "accordion",
             "instructions": "",
             "required": 0,
@@ -495,6 +507,7 @@
             "key": "field_6262eb0025db0",
             "label": "Content Width",
             "name": "content_width",
+            "aria-label": "",
             "type": "select",
             "instructions": "",
             "required": 0,
@@ -514,12 +527,15 @@
             "ui": 0,
             "return_format": "value",
             "ajax": 0,
-      "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
         },
         {
             "key": "field_6262eaeb25daf",
             "label": "Content End",
             "name": "",
+            "aria-label": "",
             "type": "accordion",
             "instructions": "",
             "required": 0,
@@ -552,5 +568,8 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-  "modified": 1655311426
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1781362192
 }

views/blocks/section/block.json

@@ -1,5 +1,6 @@
 {
     "name": "acf/section",
+    "apiVersion": 3,
     "title": "Section",
     "description": "Content section",
     "style": [
@@ -12,14 +13,21 @@
         "content"
     ],
     "acf": {
+        "blockVersion": 3,
         "mode": "preview",
         "renderTemplate": "section.php"
     },
     "supports": {
         "align": true,
         "anchor": true,
-    "color": true,
+        "color": {
-    "html": true,
+            "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';