From d47c51856551bcdb49e294ccdf283e232af577fd Mon Sep 17 00:00:00 2001 From: Pascal Martineau Date: Mon, 30 Mar 2026 08:20:02 -0400 Subject: [PATCH] feat: Initial AcfLayout field --- .../headless/acf-json/group_layout_color.json | 122 +++++++++--------- .../acf-json/group_layout_padding.json | 8 +- .../headless/app/components/acf/AcfLayout.gql | 18 +++ .../headless/app/components/acf/AcfLayout.vue | 61 +++++++++ .../app/components/sections/SectionProse.gql | 3 + .../app/components/sections/SectionProse.vue | 4 +- wp-content/themes/headless/nuxt.config.ts | 8 +- wp-content/themes/headless/package.json | 5 +- wp-content/themes/headless/pnpm-lock.yaml | 28 ++-- 9 files changed, 179 insertions(+), 78 deletions(-) create mode 100644 wp-content/themes/headless/app/components/acf/AcfLayout.gql create mode 100644 wp-content/themes/headless/app/components/acf/AcfLayout.vue diff --git a/wp-content/themes/headless/acf-json/group_layout_color.json b/wp-content/themes/headless/acf-json/group_layout_color.json index 3829789..8af27a6 100644 --- a/wp-content/themes/headless/acf-json/group_layout_color.json +++ b/wp-content/themes/headless/acf-json/group_layout_color.json @@ -1,64 +1,62 @@ { - "key": "group_layout_color", - "title": "Layout - Color", - "fields": [ - { - "key": "field_693c8c945ce51", - "label": "Variante de couleur", - "name": "color", - "aria-label": "", - "type": "button_group", - "instructions": "", - "required": 1, - "conditional_logic": 0, - "wrapper": { - "width": "", - "class": "", - "id": "" - }, - "choices": { - "default": "Par défaut", - "muted": "Atténué", - "inverted": "Inversé", - "primary": "Primaire" - }, - "default_value": "default", - "return_format": "value", - "allow_null": 0, - "allow_in_bindings": 0, - "layout": "horizontal", - "show_in_graphql": 1, - "graphql_description": "", - "graphql_field_name": "color", - "graphql_non_null": 0 - } - ], - "location": [ - [ - { - "param": "abstract" - } - ] - ], - "menu_order": 0, - "position": "normal", - "style": "seamless", - "label_placement": "top", - "instruction_placement": "label", - "hide_on_screen": "", - "active": true, - "description": "", - "show_in_rest": 0, - "display_title": "", - "acfe_autosync": [ - "json" - ], - "acfe_form": 0, - "show_in_graphql": 1, - "graphql_field_name": "GroupLayoutColor", - "map_graphql_types_from_location_rules": 0, - "graphql_types": "", - "acfe_meta": "", - "acfe_note": "", - "modified": 1774616167 + "key": "group_layout_color", + "title": "Layout - Color", + "fields": [ + { + "key": "field_693c8c945ce51", + "label": "Variante de couleur", + "name": "color", + "aria-label": "", + "type": "button_group", + "instructions": "", + "required": 1, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "choices": { + "default": "Par défaut", + "muted": "Atténué", + "inverted": "Inversé", + "primary": "Primaire" + }, + "default_value": "default", + "return_format": "value", + "allow_null": 0, + "allow_in_bindings": 0, + "layout": "horizontal", + "show_in_graphql": 1, + "graphql_description": "", + "graphql_field_name": "color", + "graphql_non_null": 0 + } + ], + "location": [ + [ + { + "param": "abstract" + } + ] + ], + "menu_order": 0, + "position": "normal", + "style": "seamless", + "label_placement": "top", + "instruction_placement": "label", + "hide_on_screen": "", + "active": true, + "description": "", + "show_in_rest": 0, + "display_title": "", + "acfe_autosync": ["json"], + "acfe_form": 0, + "show_in_graphql": 1, + "graphql_field_name": "GroupLayoutColor", + "map_graphql_types_from_location_rules": 0, + "graphql_types": "", + "acfe_meta": "", + "acfe_note": "", + "modified": 1774616167 } diff --git a/wp-content/themes/headless/acf-json/group_layout_padding.json b/wp-content/themes/headless/acf-json/group_layout_padding.json index 39dacf9..ce6b87e 100644 --- a/wp-content/themes/headless/acf-json/group_layout_padding.json +++ b/wp-content/themes/headless/acf-json/group_layout_padding.json @@ -18,9 +18,9 @@ }, "choices": { "none": "Aucun", - "sm": "Petit (12px)", - "md": "Medium (24px)", - "lg": "Grand (48px)" + "sm": "Petit (24px)", + "md": "Medium (48px)", + "lg": "Grand (96px)" }, "default_value": "md", "return_format": "value", @@ -60,5 +60,5 @@ "graphql_types": "", "acfe_meta": "", "acfe_note": "", - "modified": 1774616314 + "modified": 1774873127 } diff --git a/wp-content/themes/headless/app/components/acf/AcfLayout.gql b/wp-content/themes/headless/app/components/acf/AcfLayout.gql new file mode 100644 index 0000000..a7c8aad --- /dev/null +++ b/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 +} diff --git a/wp-content/themes/headless/app/components/acf/AcfLayout.vue b/wp-content/themes/headless/app/components/acf/AcfLayout.vue new file mode 100644 index 0000000..39585fd --- /dev/null +++ b/wp-content/themes/headless/app/components/acf/AcfLayout.vue @@ -0,0 +1,61 @@ + + + diff --git a/wp-content/themes/headless/app/components/sections/SectionProse.gql b/wp-content/themes/headless/app/components/sections/SectionProse.gql index 2a56d4a..6e99684 100644 --- a/wp-content/themes/headless/app/components/sections/SectionProse.gql +++ b/wp-content/themes/headless/app/components/sections/SectionProse.gql @@ -1,3 +1,6 @@ fragment SectionProse on GroupAbstractBuilderSectionsProseLayout { content + layout: layoutSettings @nonNull { + ...AcfLayout + } } diff --git a/wp-content/themes/headless/app/components/sections/SectionProse.vue b/wp-content/themes/headless/app/components/sections/SectionProse.vue index c8b1224..e6971d0 100644 --- a/wp-content/themes/headless/app/components/sections/SectionProse.vue +++ b/wp-content/themes/headless/app/components/sections/SectionProse.vue @@ -5,5 +5,7 @@ defineProps<{ section: SectionProseFragment }>(); diff --git a/wp-content/themes/headless/nuxt.config.ts b/wp-content/themes/headless/nuxt.config.ts index 2a97c53..2375aa8 100644 --- a/wp-content/themes/headless/nuxt.config.ts +++ b/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", + ], }, }, }); diff --git a/wp-content/themes/headless/package.json b/wp-content/themes/headless/package.json index 89c4f60..5423ca7 100644 --- a/wp-content/themes/headless/package.json +++ b/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" diff --git a/wp-content/themes/headless/pnpm-lock.yaml b/wp-content/themes/headless/pnpm-lock.yaml index df0cf2a..72a8a36 100644 --- a/wp-content/themes/headless/pnpm-lock.yaml +++ b/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 - version: 0.7.7(graphql@16.13.1)(magicast@0.5.2)(zod@4.3.6) + specifier: ^0.7.8 + 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': - resolution: {integrity: sha512-6a9hE/5+6lBdx3CSiAuJ5/KkPI/DmT/BvZihix41mJnzvROlpYRnpKvoDbWb8E7Zp1nH6C8xuwG/N9UMPT342Q==} + '@lewebsimple/graphql-codegen-zod@0.2.2': + resolution: {integrity: sha512-46Z2MKfiwWxuxg2lfCP7VinFBmcwEKH2ROjve1gdAH1Em4a1/x/4Y0avysO8zeL2hihDj7YkPsaWwka3okj2AA==} peerDependencies: graphql: ^16.13.1 zod: ^4.3.6 - '@lewebsimple/nuxt-graphql@0.7.7': - resolution: {integrity: sha512-8hEWDwSEm9YXdZmY1ZxSooa/zSHJBM4UARIF+6oRcEpNXG52kagRnmyuec53iFxq7YlwvFpIpTG4V43SlR/1UQ==} + '@lewebsimple/nuxt-graphql@0.7.8': + 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