feat: Initial AcfLayout field

wp-content/themes/headless/acf-json/group_layout_color.json

@@ -1,64 +1,62 @@
 {
-    "key": "group_layout_color",
+  "key": "group_layout_color",
-    "title": "Layout - Color",
+  "title": "Layout - Color",
-    "fields": [
+  "fields": [
-        {
+    {
-            "key": "field_693c8c945ce51",
+      "key": "field_693c8c945ce51",
-            "label": "Variante de couleur",
+      "label": "Variante de couleur",
-            "name": "color",
+      "name": "color",
-            "aria-label": "",
+      "aria-label": "",
-            "type": "button_group",
+      "type": "button_group",
-            "instructions": "",
+      "instructions": "",
-            "required": 1,
+      "required": 1,
-            "conditional_logic": 0,
+      "conditional_logic": 0,
-            "wrapper": {
+      "wrapper": {
-                "width": "",
+        "width": "",
-                "class": "",
+        "class": "",
-                "id": ""
+        "id": ""
-            },
+      },
-            "choices": {
+      "choices": {
-                "default": "Par défaut",
+        "default": "Par défaut",
-                "muted": "Atténué",
+        "muted": "Atténué",
-                "inverted": "Inversé",
+        "inverted": "Inversé",
-                "primary": "Primaire"
+        "primary": "Primaire"
-            },
+      },
-            "default_value": "default",
+      "default_value": "default",
-            "return_format": "value",
+      "return_format": "value",
-            "allow_null": 0,
+      "allow_null": 0,
-            "allow_in_bindings": 0,
+      "allow_in_bindings": 0,
-            "layout": "horizontal",
+      "layout": "horizontal",
-            "show_in_graphql": 1,
+      "show_in_graphql": 1,
-            "graphql_description": "",
+      "graphql_description": "",
-            "graphql_field_name": "color",
+      "graphql_field_name": "color",
-            "graphql_non_null": 0
+      "graphql_non_null": 0
-        }
+    }
-    ],
+  ],
-    "location": [
+  "location": [
-        [
+    [
-            {
+      {
-                "param": "abstract"
+        "param": "abstract"
-            }
+      }
-        ]
+    ]
-    ],
+  ],
-    "menu_order": 0,
+  "menu_order": 0,
-    "position": "normal",
+  "position": "normal",
-    "style": "seamless",
+  "style": "seamless",
-    "label_placement": "top",
+  "label_placement": "top",
-    "instruction_placement": "label",
+  "instruction_placement": "label",
-    "hide_on_screen": "",
+  "hide_on_screen": "",
-    "active": true,
+  "active": true,
-    "description": "",
+  "description": "",
-    "show_in_rest": 0,
+  "show_in_rest": 0,
-    "display_title": "",
+  "display_title": "",
-    "acfe_autosync": [
+  "acfe_autosync": ["json"],
-        "json"
+  "acfe_form": 0,
-    ],
+  "show_in_graphql": 1,
-    "acfe_form": 0,
+  "graphql_field_name": "GroupLayoutColor",
-    "show_in_graphql": 1,
+  "map_graphql_types_from_location_rules": 0,
-    "graphql_field_name": "GroupLayoutColor",
+  "graphql_types": "",
-    "map_graphql_types_from_location_rules": 0,
+  "acfe_meta": "",
-    "graphql_types": "",
+  "acfe_note": "",
-    "acfe_meta": "",
+  "modified": 1774616167
-    "acfe_note": "",
-    "modified": 1774616167
 }

wp-content/themes/headless/acf-json/group_layout_padding.json

@@ -18,9 +18,9 @@
             },
             "choices": {
                 "none": "Aucun",
-                "sm": "Petit (12px)",
+                "sm": "Petit (24px)",
-                "md": "Medium (24px)",
+                "md": "Medium (48px)",
-                "lg": "Grand (48px)"
+                "lg": "Grand (96px)"
             },
             "default_value": "md",
             "return_format": "value",
@@ -60,5 +60,5 @@
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1774616314
+    "modified": 1774873127
 }

wp-content/themes/headless/app/components/acf/AcfLayout.gql

@@ -0,0 +1,18 @@
+fragment LayoutColor on GroupLayoutColor_Fields {
+  color @nullToUndefined @enum(values: ["default", "muted", "inverted", "primary"])
+}
+
+fragment LayoutContainer on GroupLayoutContainer_Fields {
+  container @nullToUndefined @enum(values: ["default", "xl", "lg", "md", "sm", "fluid", "none"])
+}
+
+fragment LayoutPadding on GroupLayoutPadding_Fields {
+  verticalPadding @nullToUndefined @enum(values: ["none", "sm", "md", "lg"])
+}
+
+fragment AcfLayout on GroupAbstractBuilderSectionsLayoutSettings_Fields {
+  __typename
+  ...LayoutColor
+  ...LayoutContainer
+  ...LayoutPadding
+}

wp-content/themes/headless/app/components/acf/AcfLayout.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+
+import type { AcfLayoutFragment } from "#graphql/types";
+
+const props = defineProps<{ layout: AcfLayoutFragment }>();
+
+const tvLayoutVariants = tv({
+  slots: {
+    base: "",
+    inner: "",
+  },
+  variants: {
+    display: {
+      block: { inner: "block" },
+      flex: { inner: "flex flex-col gap-6" },
+      grid: { inner: "grid" },
+    },
+
+    color: {
+      default: { base: "bg-default" },
+      muted: { base: "bg-muted" },
+      inverted: { base: "bg-inverted text-inverted" },
+      primary: { base: "bg-primary text-inverted" },
+    },
+
+    container: {
+      default: { inner: "container" },
+      xl: { inner: "container-xl" },
+      lg: { inner: "container-lg" },
+      md: { inner: "container-md" },
+      sm: { inner: "container-sm" },
+      fluid: { inner: "container-fluid" },
+      none: { inner: "container-none" },
+    },
+
+    verticalPadding: {
+      none: { base: "py-0" },
+      sm: { base: "py-6" },
+      md: { base: "py-12" },
+      lg: { base: "py-24" },
+    },
+  },
+  defaultVariants: {
+    display: "block",
+    color: "default",
+    container: "default",
+    verticalPadding: "md",
+  },
+});
+
+const { base, inner } = tvLayoutVariants(props.layout);
+</script>
+
+<template>
+  <section :class="base()">
+    <div :class="inner()">
+      <slot />
+    </div>
+  </section>
+</template>

wp-content/themes/headless/app/components/sections/SectionProse.gql

@@ -1,3 +1,6 @@
 fragment SectionProse on GroupAbstractBuilderSectionsProseLayout {
   content
+  layout: layoutSettings @nonNull {
+    ...AcfLayout
+  }
 }

wp-content/themes/headless/app/components/sections/SectionProse.vue

@@ -5,5 +5,7 @@ defineProps<{ section: SectionProseFragment }>();
 </script>
 
 <template>
-  <div class="prose" v-html="section.content"></div>
+  <AcfLayout :layout="section.layout">
+    <div class="prose" v-html="section.content"></div>
+  </AcfLayout>
 </template>

wp-content/themes/headless/nuxt.config.ts

@@ -54,7 +54,13 @@ export default defineNuxtConfig({
 
   vite: {
     optimizeDeps: {
-      include: ["@vue/devtools-core", "@vue/devtools-kit", "es-toolkit", "zod"],
+      include: [
+        "@vue/devtools-core",
+        "@vue/devtools-kit",
+        "es-toolkit",
+        "tailwind-variants",
+        "zod",
+      ],
     },
   },
 });

wp-content/themes/headless/package.json

@@ -19,15 +19,18 @@
   "dependencies": {
     "@iconify-json/cib": "^1.2.3",
     "@iconify-json/lucide": "^1.2.100",
-    "@lewebsimple/nuxt-graphql": "^0.7.7",
+    "@lewebsimple/graphql-codegen-zod": "^0.2.2",
+    "@lewebsimple/nuxt-graphql": "^0.7.8",
     "@nuxt/ui": "^4.6.0",
     "@nuxtjs/seo": "^4.0.2",
     "defu": "^6.1.4",
     "es-toolkit": "^1.45.1",
+    "graphql-codegen-zod": "link: @lewebsimple/graphql-codegen-zod",
     "jwt-decode": "^4.0.0",
     "nuxt": "^4.4.2",
     "nuxt-auth-utils": "^0.5.29",
     "nuxt-svgo": "^4.2.6",
+    "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.2",
     "vue": "^3.5.31",
     "vue-router": "^4.6.4"

wp-content/themes/headless/pnpm-lock.yaml

@@ -14,9 +14,12 @@ importers:
       '@iconify-json/lucide':
         specifier: ^1.2.100
         version: 1.2.100
+      '@lewebsimple/graphql-codegen-zod':
+        specifier: ^0.2.2
+        version: 0.2.2(graphql@16.13.1)(zod@4.3.6)
       '@lewebsimple/nuxt-graphql':
-        specifier: ^0.7.7
+        specifier: ^0.7.8
-        version: 0.7.7(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6)
+        version: 0.7.8(@lewebsimple/graphql-codegen-zod@0.2.2(graphql@16.13.1)(zod@4.3.6))(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6)
       '@nuxt/ui':
         specifier: ^4.6.0
         version: 4.6.0(@tiptap/extensions@3.21.0(@tiptap/core@3.21.0(@tiptap/pm@3.21.0))(@tiptap/pm@3.21.0))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.7)(y-protocols@1.0.7(yjs@13.6.30))(yjs@13.6.30))(db0@0.3.4)(embla-carousel@8.6.0)(ioredis@5.10.1)(jwt-decode@4.0.0)(magicast@0.5.2)(tailwindcss@4.2.2)(typescript@5.9.3)(vite@7.3.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.46.1)(yaml@2.8.3))(vue-router@4.6.4(vue@3.5.31(typescript@5.9.3)))(vue@3.5.31(typescript@5.9.3))(yjs@13.6.30)(zod@4.3.6)
@@ -29,6 +32,9 @@ importers:
       es-toolkit:
         specifier: ^1.45.1
         version: 1.45.1
+      graphql-codegen-zod:
+        specifier: "link:\_@lewebsimple/graphql-codegen-zod"
+        version: "link:\_@lewebsimple/graphql-codegen-zod"
       jwt-decode:
         specifier: ^4.0.0
         version: 4.0.0
@@ -41,6 +47,9 @@ importers:
       nuxt-svgo:
         specifier: ^4.2.6
         version: 4.2.6(magicast@0.5.2)(vue@3.5.31(typescript@5.9.3))
+      tailwind-variants:
+        specifier: ^3.2.2
+        version: 3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.2)
       tailwindcss:
         specifier: ^4.2.2
         version: 4.2.2
@@ -721,15 +730,16 @@ packages:
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
-  '@lewebsimple/graphql-codegen-zod@0.2.1':
+  '@lewebsimple/graphql-codegen-zod@0.2.2':
-    resolution: {integrity: sha512-6a9hE/5+6lBdx3CSiAuJ5/KkPI/DmT/BvZihix41mJnzvROlpYRnpKvoDbWb8E7Zp1nH6C8xuwG/N9UMPT342Q==}
+    resolution: {integrity: sha512-46Z2MKfiwWxuxg2lfCP7VinFBmcwEKH2ROjve1gdAH1Em4a1/x/4Y0avysO8zeL2hihDj7YkPsaWwka3okj2AA==}
     peerDependencies:
       graphql: ^16.13.1
       zod: ^4.3.6
 
-  '@lewebsimple/nuxt-graphql@0.7.7':
+  '@lewebsimple/nuxt-graphql@0.7.8':
-    resolution: {integrity: sha512-8hEWDwSEm9YXdZmY1ZxSooa/zSHJBM4UARIF+6oRcEpNXG52kagRnmyuec53iFxq7YlwvFpIpTG4V43SlR/1UQ==}
+    resolution: {integrity: sha512-Ur80HqiP0U6IY6T+Ny2VO6+K5i4OKJtxLzRPFfKuzwATKAWIANrhMHxbOuqjxxUCmUoVcH+4hW80h7k03vO6EA==}
     peerDependencies:
+      '@lewebsimple/graphql-codegen-zod': ^0.2.2
       graphql: ^16
       zod: ^4
 
@@ -6535,7 +6545,7 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
-  '@lewebsimple/graphql-codegen-zod@0.2.1(graphql@16.13.1)(zod@4.3.6)':
+  '@lewebsimple/graphql-codegen-zod@0.2.2(graphql@16.13.1)(zod@4.3.6)':
     dependencies:
       '@graphql-codegen/add': 6.0.0(graphql@16.13.1)
       '@graphql-codegen/plugin-helpers': 6.2.0(graphql@16.13.1)
@@ -6548,7 +6558,7 @@ snapshots:
     transitivePeerDependencies:
       - graphql-sock
 
-  '@lewebsimple/nuxt-graphql@0.7.7(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6)':
+  '@lewebsimple/nuxt-graphql@0.7.8(@lewebsimple/graphql-codegen-zod@0.2.2(graphql@16.13.1)(zod@4.3.6))(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6)':
     dependencies:
       '@graphql-codegen/core': 5.0.1(graphql@16.13.1)
       '@graphql-codegen/typed-document-node': 6.1.6(graphql@16.13.1)
@@ -6560,7 +6570,7 @@ snapshots:
       '@graphql-tools/schema': 10.0.31(graphql@16.13.1)
       '@graphql-tools/stitch': 10.1.16(graphql@16.13.1)
       '@graphql-typed-document-node/core': 3.2.0(graphql@16.13.1)
-      '@lewebsimple/graphql-codegen-zod': 0.2.1(graphql@16.13.1)(zod@4.3.6)
+      '@lewebsimple/graphql-codegen-zod': 0.2.2(graphql@16.13.1)(zod@4.3.6)
       '@nuxt/kit': 4.4.2(magicast@0.5.2)
       defu: 6.1.4
       es-toolkit: 1.45.1