refactor: SectionWrapper

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

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

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>