feat: useLayoutWrapper

wp-content/themes/moonshine/app/components/sections/SectionAuthConnexion.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
 const { isLoggedIn } = useAuth();
 const { isRedirecting } = useAuthConnexion();
+const layoutSettings: LayoutWrapperProps = {
+  container: "lg",
+};
 </script>
 
 <template>
-  <section data-section-name="auth-connexion" class="py-12">
-    <div class="container-sm">
-      <AuthState>
-        <AuthRedirecting v-if="isRedirecting" />
-        <template v-else>
-          <AuthLogoutForm v-if="isLoggedIn" />
-          <AuthLoginForm v-else />
-        </template>
-      </AuthState>
-    </div>
-  </section>
+  <LayoutWrapper data-section-name="auth-connexion" :layout-settings="layoutSettings">
+    <AuthState>
+      <AuthRedirecting v-if="isRedirecting" />
+      <template v-else>
+        <AuthLogoutForm v-if="isLoggedIn" />
+        <AuthLoginForm v-else />
+      </template>
+    </AuthState>
+  </LayoutWrapper>
 </template>

wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.fragment.gql

@@ -2,4 +2,8 @@ fragment SectionHeroSplit on GroupAbstractBuilderSectionsHeroSplitLayout {
   content
   reverse
   ...AcfMedia
+  layoutSettings {
+    ...LayoutColored
+    ...LayoutPadded
+  }
 }

wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue

@@ -3,8 +3,8 @@ import { tv, type VariantProps } from "tailwind-variants";
 import type { SectionHeroSplitFragment } from "#graphql/operations";
 
 const tvSectionHeroSplit = tv({
+  extend: tvLayoutWrapper,
   slots: {
-    base: "py-6",
     container: "container flex flex-col items-center gap-6",
     content: "flex-1",
     media: "w-full basis-1/2",
@@ -27,6 +27,7 @@ const tvSectionHeroSplit = tv({
 const props = defineProps<SectionHeroSplitFragment>();
 const classes = tvSectionHeroSplit({
   reverse: props.reverse,
+  ...props.layoutSettings,
 } as VariantProps<typeof tvSectionHeroSplit>);
 </script>
 

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

@@ -1,6 +1,8 @@
 fragment SectionTextBlock on GroupAbstractBuilderSectionsTextBlockLayout {
   content
   layoutSettings {
+    ...LayoutColored
     ...LayoutContained
+    ...LayoutPadded
   }
 }

wp-content/themes/moonshine/app/components/sections/SectionTextBlock.global.vue

@@ -5,7 +5,7 @@ defineProps<SectionTextBlockFragment>();
 </script>
 
 <template>
-  <LayoutContained data-section-type="text-block" v-bind="layoutSettings!">
+  <LayoutWrapper data-section-type="text-block" :layout-settings="layoutSettings">
     <UiProse :content="content" />
-  </LayoutContained>
+  </LayoutWrapper>
 </template>