refactor: SectionWrapper

wp-content/themes/ccat/acf-json/group_section_container.json

@@ -38,7 +38,7 @@
             "show_in_graphql": 1,
             "graphql_description": "",
             "graphql_field_name": "contentWidth",
-            "graphql_non_null": 1,
+            "graphql_non_null": 0,
             "ajax": 0,
             "placeholder": "",
             "create_options": 0,
@@ -75,5 +75,5 @@
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1758564033
+    "modified": 1758742387
 }

wp-content/themes/ccat/acf-json/group_section_theme.json

@@ -26,21 +26,22 @@
             "return_format": "value",
             "multiple": 0,
             "max": "",
-            "allow_custom": 0,
-            "placeholder": "",
-            "search_placeholder": "",
             "prepend": "",
             "append": "",
+            "required_message": "",
             "allow_null": 0,
             "allow_in_bindings": 0,
             "ui": 0,
             "show_in_graphql": 1,
             "graphql_description": "",
             "graphql_field_name": "bgColor",
-            "graphql_non_null": 1,
+            "graphql_non_null": 0,
             "ajax": 0,
+            "placeholder": "",
             "create_options": 0,
             "save_options": 0,
+            "allow_custom": 0,
+            "search_placeholder": "",
             "min": ""
         }
     ],
@@ -71,5 +72,5 @@
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1758564696
+    "modified": 1758742399
 }

wp-content/themes/ccat/app/components/sections/SectionTextBlock.fragment.gql

@@ -1,8 +1,6 @@
 fragment SectionTextBlock on GroupAbstractBuilderSectionsTextBlockLayout {
   content
   layoutSettings {
-    __typename
+    ...SectionWrapper
-    contentWidth
-    bgColor
   }
 }

wp-content/themes/ccat/app/components/sections/SectionWrapper.fragment.gql

@@ -0,0 +1,4 @@
+fragment SectionWrapper on GroupAbstractBuilderSectionsLayoutSettings {
+  bgColor
+  contentWidth
+}

wp-content/themes/ccat/app/components/sections/SectionWrapper.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { SectionWrapperFragment } from "#graphql-operations";
+
+defineProps<SectionWrapperFragment>();
+</script>
+
+<template>
+  <section :class="bgColor">
+    <div :class="contentWidth">
+      <slot />
+    </div>
+  </section>
+</template>

wp-content/themes/ccat/app/components/sections/TheSections.vue

@@ -6,5 +6,7 @@ const sections = props.sections.filter(Boolean).map((section) => useSection(sect
 </script>
 
 <template>
-  <component :is="component" v-for="({ component, attrs }, i) in sections" :key="i" v-bind="attrs" />
+  <SectionWrapper v-for="({ component, attrs }, i) in sections" :key="i" v-bind="attrs.layoutSettings || {}">
+    <component :is="component" v-bind="attrs" />
+  </SectionWrapper>
 </template>

wp-content/themes/ccat/server/schema.graphql

@@ -6669,12 +6669,12 @@ type GroupAbstractBuilderSectionsLayoutSettings implements AcfFieldGroup & AcfFi
   """
   Field of the "select" Field Type added to the schema as part of the "SectionTheme" Field Group
   """
-  bgColor: [String]!
+  bgColor: [String]
 
   """
   Field of the "select" Field Type added to the schema as part of the "SectionContainer" Field Group
   """
-  contentWidth: [String]!
+  contentWidth: [String]
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
@@ -21726,7 +21726,7 @@ type SectionContainer implements AcfFieldGroup & AcfFieldGroupFields & SectionCo
   """
   Field of the "select" Field Type added to the schema as part of the "SectionContainer" Field Group
   """
-  contentWidth: [String]!
+  contentWidth: [String]
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
@@ -21739,7 +21739,7 @@ interface SectionContainer_Fields implements AcfFieldGroup & AcfFieldGroupFields
   """
   Field of the "select" Field Type added to the schema as part of the "SectionContainer" Field Group
   """
-  contentWidth: [String]!
+  contentWidth: [String]
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
@@ -21752,7 +21752,7 @@ type SectionTheme implements AcfFieldGroup & AcfFieldGroupFields & SectionTheme_
   """
   Field of the "select" Field Type added to the schema as part of the "SectionTheme" Field Group
   """
-  bgColor: [String]!
+  bgColor: [String]
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
@@ -21765,7 +21765,7 @@ interface SectionTheme_Fields implements AcfFieldGroup & AcfFieldGroupFields {
   """
   Field of the "select" Field Type added to the schema as part of the "SectionTheme" Field Group
   """
-  bgColor: [String]!
+  bgColor: [String]
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")