feat: LaoutContained

wp-content/themes/moonshine/acf-json/group_abstract_builder.json

@@ -100,7 +100,9 @@
                     "min": "",
                     "max": "",
                     "acfe_flexible_modal_edit_size": "",
-                    "acfe_flexible_settings": "",
+                    "acfe_flexible_settings": [
+                        "group_layout_contained"
+                    ],
                     "acfe_flexible_settings_size": "large",
                     "acfe_flexible_render_template": false,
                     "acfe_flexible_render_style": false,
@@ -150,5 +152,5 @@
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1768336919
+    "modified": 1768358815
 }

wp-content/themes/moonshine/acf-json/group_layout_contained.json

@@ -0,0 +1,149 @@
+{
+    "key": "group_layout_contained",
+    "title": "Layout - Contained",
+    "fields": [
+        {
+            "key": "field_68dc29d78941c",
+            "label": "Conteneur",
+            "name": "container",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "default": "1536px",
+                "xl": "1280px",
+                "lg": "1024px",
+                "fluid": "Largeur fluide",
+                "none": "Pleine largeur"
+            },
+            "default_value": "default",
+            "return_format": "value",
+            "multiple": 0,
+            "max": "",
+            "prepend": "",
+            "append": "",
+            "required_message": "",
+            "allow_null": 0,
+            "allow_in_bindings": 0,
+            "ui": 0,
+            "show_in_graphql": 1,
+            "graphql_description": "",
+            "graphql_field_name": "container",
+            "graphql_non_null": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0,
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "min": ""
+        },
+        {
+            "key": "field_693c8c3b5ce50",
+            "label": "Espacement vertical",
+            "name": "vertical_padding",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "sm": "Petit (12px)",
+                "md": "Medium (24px)",
+                "lg": "Grand (48px)"
+            },
+            "default_value": "md",
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "allow_in_bindings": 0,
+            "ui": 0,
+            "show_in_graphql": 1,
+            "graphql_description": "",
+            "graphql_field_name": "verticalPadding",
+            "graphql_non_null": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0,
+            "allow_custom": 0,
+            "search_placeholder": ""
+        },
+        {
+            "key": "field_693c8c945ce51",
+            "label": "Couleur d'arrière-plan",
+            "name": "bg_color",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "default": "Par défaut",
+                "muted": "Atténué",
+                "inverted": "Inversé"
+            },
+            "default_value": "default",
+            "return_format": "value",
+            "multiple": 0,
+            "allow_null": 0,
+            "allow_in_bindings": 0,
+            "ui": 0,
+            "show_in_graphql": 1,
+            "graphql_description": "",
+            "graphql_field_name": "bgColor",
+            "graphql_non_null": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0,
+            "allow_custom": 0,
+            "search_placeholder": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "abstract"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "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": "GroupLayoutContained",
+    "map_graphql_types_from_location_rules": 0,
+    "graphql_types": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1768358794
+}

wp-content/themes/moonshine/app/components/builder/LayoutContained.fragment.gql

@@ -0,0 +1,5 @@
+fragment LayoutContained on GroupLayoutContained_Fields {
+  container
+  verticalPadding
+  bgColor
+}

wp-content/themes/moonshine/app/components/builder/LayoutContained.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { LayoutContainedFragment } from "#graphql/typed-documents";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const props = defineProps<LayoutContainedFragment>();
+
+const layoutWrapperVariants = tv({
+  slots: {
+    base: "",
+    inner: "",
+  },
+  variants: {
+    container: {
+      default: { inner: "container" },
+      lg: { inner: "container-lg" },
+      xl: { inner: "container-xl" },
+      fluid: { inner: "container-fluid" },
+      none: { inner: "container-none" },
+    },
+    verticalPadding: {
+      sm: { base: "py-3" },
+      md: { base: "py-6" },
+      lg: { base: "py-12" },
+    },
+    bgColor: {
+      default: { base: "bg-default" },
+      muted: { base: "bg-muted" },
+      inverted: { base: "bg-inverted text-inverted" },
+    },
+  },
+  defaultVariants: {
+    container: "default",
+    verticalPadding: "md",
+    bgColor: "default",
+  },
+});
+const { base, inner } = layoutWrapperVariants({
+  container: props.container[0],
+  verticalPadding: props.verticalPadding[0],
+  bgColor: props.bgColor[0],
+} as VariantProps<typeof layoutWrapperVariants>);
+</script>
+
+<template>
+  <section :class="base()">
+    <div :class="inner()">
+      <slot />
+    </div>
+  </section>
+</template>

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

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

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

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

wp-content/themes/moonshine/server/graphql/schema.graphql

@@ -3320,6 +3320,37 @@ type GroupAbstractBuilder implements AcfFieldGroup & AcfFieldGroupFields & Group
   sections: [GroupAbstractBuilderSections_Layout]
 }
 
+"""
+The "GroupAbstractBuilderSectionsLayoutSettings" Field Group. Added to the Schema by "WPGraphQL for ACF".
+"""
+type GroupAbstractBuilderSectionsLayoutSettings implements AcfFieldGroup & AcfFieldGroupFields & GroupAbstractBuilderSectionsLayoutSettings_Fields & GroupLayoutContained_Fields {
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  bgColor: [String]!
+
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  container: [String]!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  verticalPadding: [String]!
+}
+
+"""
+Interface representing fields of the ACF "GroupAbstractBuilderSectionsLayoutSettings" Field Group
+"""
+interface GroupAbstractBuilderSectionsLayoutSettings_Fields implements AcfFieldGroup & AcfFieldGroupFields {
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
 """
 The "GroupAbstractBuilderSectionsTextBlockLayout" Field Group. Added to the Schema by "WPGraphQL for ACF".
 """
@@ -3331,6 +3362,11 @@ type GroupAbstractBuilderSectionsTextBlockLayout implements AcfFieldGroup & AcfF
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "clone" Field Type added to the schema as part of the "GroupAbstractBuilderSectionsTextBlockLayout" Field Group
+  """
+  layoutSettings: GroupAbstractBuilderSectionsLayoutSettings
 }
 
 """
@@ -3344,6 +3380,11 @@ interface GroupAbstractBuilderSectionsTextBlockLayout_Fields implements AcfField
 
   """The name of the field group"""
   fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "clone" Field Type added to the schema as part of the "GroupAbstractBuilderSectionsTextBlockLayout" Field Group
+  """
+  layoutSettings: GroupAbstractBuilderSectionsLayoutSettings
 }
 
 """
@@ -3367,6 +3408,52 @@ interface GroupAbstractBuilder_Fields implements AcfFieldGroup & AcfFieldGroupFi
   sections: [GroupAbstractBuilderSections_Layout]
 }
 
+"""
+The "GroupLayoutContained" Field Group. Added to the Schema by "WPGraphQL for ACF".
+"""
+type GroupLayoutContained implements AcfFieldGroup & AcfFieldGroupFields & GroupLayoutContained_Fields {
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  bgColor: [String]!
+
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  container: [String]!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  verticalPadding: [String]!
+}
+
+"""
+Interface representing fields of the ACF "GroupLayoutContained" Field Group
+"""
+interface GroupLayoutContained_Fields implements AcfFieldGroup & AcfFieldGroupFields {
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  bgColor: [String]!
+
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  container: [String]!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+
+  """
+  Field of the "select" Field Type added to the schema as part of the "GroupLayoutContained" Field Group
+  """
+  verticalPadding: [String]!
+}
+
 """
 The "GroupPostPage" Field Group. Added to the Schema by "WPGraphQL for ACF".
 """