wip: Builder features

wp-content/themes/ccat/app/assets/css/containers.css

@@ -0,0 +1,23 @@
+@layer components {
+  .container {
+    @apply mx-auto;
+  }
+  .container-fluid {
+    @apply w-full max-w-screen px-4 sm:px-6 lg:px-8;
+  }
+  .container-full {
+    @apply w-full max-w-screen;
+  }
+  .container-sm {
+    @apply container max-w-screen-sm mx-auto;
+  }
+  .container-md {
+    @apply container max-w-screen-md mx-auto;
+  }
+  .container-lg {
+    @apply container max-w-screen-lg mx-auto;
+  }
+  .container-xl {
+    @apply container max-w-screen-xl mx-auto;
+  }
+}

wp-content/themes/ccat/app/assets/css/helpers.css

@@ -1,7 +1,4 @@
 @layer components {
-  .container-fluid {
-    @apply w-full max-w-screen px-4 sm:px-6 lg:px-8;
-  }
   .flex-break-words {
     @apply min-w-0 break-words;
   }

wp-content/themes/ccat/app/assets/css/main.css

@@ -1,7 +1,10 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+@import "./containers.css";
 @import "./helpers.css";
 
+@source "../../../acf-json";
+
 @theme {
   --z-index-main: 10;
 }

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

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

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

@@ -6,6 +6,7 @@ defineProps<SectionTextBlockFragment>();
 
 <template>
   <section data-section-type="text-block">
-    <div v-html="content" />
+    <div :class="layoutSettings?.contentWidth" v-html="content" />
+    <pre>{{ layoutSettings }}</pre>
   </section>
 </template>