wip: Builder features

wp-content/themes/ccat/acf-json/acf-translations.php

@@ -1,10 +1,15 @@
 <?php
+__( "1024px container", 'ccat' );
+__( "1280px container", 'ccat' );
+__( "640px container", 'ccat' );
+__( "768px container", 'ccat' );
 __( "Abstract &#8211; Builder", 'ccat' );
 __( "Abstract &#8211; Credits", 'ccat' );
 __( "Abstract &#8211; Entity", 'ccat' );
 __( "Abstract &#8211; Gallery", 'ccat' );
 __( "Abstract &#8211; Offer", 'ccat' );
 __( "Abstract &#8211; Social", 'ccat' );
+__( "Accented background", 'ccat' );
 __( "Add File", 'ccat' );
 __( "Address", 'ccat' );
 __( "Adultes (18+)", 'ccat' );
@@ -12,6 +17,7 @@ __( "Ajouter un élément", 'ccat' );
 __( "Alternative title(s)", 'ccat' );
 __( "Attendance mode", 'ccat' );
 __( "Auteur", 'ccat' );
+__( "Background color", 'ccat' );
 __( "Bar", 'ccat' );
 __( "Billing", 'ccat' );
 __( "Billing is the same as contact", 'ccat' );
@@ -27,6 +33,7 @@ __( "Configuration name", 'ccat' );
 __( "Confirmed", 'ccat' );
 __( "Contact", 'ccat' );
 __( "Content", 'ccat' );
+__( "Content width", 'ccat' );
 __( "Contribution type(s)", 'ccat' );
 __( "Contribution(s)", 'ccat' );
 __( "Contributor", 'ccat' );
@@ -35,10 +42,13 @@ __( "Credits", 'ccat' );
 __( "Date / time", 'ccat' );
 __( "Date range", 'ccat' );
 __( "Day(s)", 'ccat' );
+__( "Default background", 'ccat' );
+__( "Default container", 'ccat' );
 __( "Description", 'ccat' );
 __( "Discipline(s)", 'ccat' );
 __( "Document type", 'ccat' );
 __( "Document(s)", 'ccat' );
+__( "Elevated background", 'ccat' );
 __( "Email", 'ccat' );
 __( "Email preferences", 'ccat' );
 __( "End date", 'ccat' );
@@ -54,8 +64,10 @@ __( "Failed", 'ccat' );
 __( "Familial", 'ccat' );
 __( "Festival", 'ccat' );
 __( "File", 'ccat' );
+__( "Fluid container", 'ccat' );
 __( "Form", 'ccat' );
 __( "Free", 'ccat' );
+__( "Full-width container", 'ccat' );
 __( "Gallery", 'ccat' );
 __( "H:i", 'ccat' );
 __( "Hybrid", 'ccat' );
@@ -82,6 +94,7 @@ __( "Message", 'ccat' );
 __( "Minimum price", 'ccat' );
 __( "Moral entity", 'ccat' );
 __( "Multiple day(s)", 'ccat' );
+__( "Muted background", 'ccat' );
 __( "Name", 'ccat' );
 __( "Notification(s)", 'ccat' );
 __( "Offer", 'ccat' );
@@ -118,6 +131,8 @@ __( "Salle de spectacle", 'ccat' );
 __( "Same as contact", 'ccat' );
 __( "Schedule type", 'ccat' );
 __( "Search for address...", 'ccat' );
+__( "Section &#8211; Container", 'ccat' );
+__( "Section &#8211; Theme", 'ccat' );
 __( "Section(s)", 'ccat' );
 __( "Select", 'ccat' );
 __( "Sent", 'ccat' );

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

@@ -16,7 +16,42 @@
                 "class": "",
                 "id": ""
             },
-            "acfe_flexible_advanced": 0,
+            "acfe_flexible_advanced": 1,
+            "acfe_flexible_stylised_button": 0,
+            "acfe_flexible_hide_empty_message": 0,
+            "acfe_flexible_empty_message": "",
+            "acfe_flexible_layouts_templates": 1,
+            "acfe_flexible_layouts_previews": 1,
+            "acfe_flexible_layouts_previews_iframe": 1,
+            "acfe_flexible_layouts_previews_responsive": 1,
+            "acfe_flexible_layouts_thumbnails": 0,
+            "acfe_flexible_layouts_settings": 1,
+            "acfe_flexible_layouts_locations": 0,
+            "acfe_flexible_async": [],
+            "acfe_flexible_add_actions": [
+                "title",
+                "toggle",
+                "copy"
+            ],
+            "acfe_flexible_remove_button": [],
+            "acfe_flexible_layouts_state": "user",
+            "acfe_flexible_modal_edit": {
+                "acfe_flexible_modal_edit_enabled": "0",
+                "acfe_flexible_modal_edit_size": "large"
+            },
+            "acfe_flexible_modal": {
+                "acfe_flexible_modal_enabled": "0",
+                "acfe_flexible_modal_title": false,
+                "acfe_flexible_modal_size": "full",
+                "acfe_flexible_modal_col": "4",
+                "acfe_flexible_modal_categories": false
+            },
+            "acfe_flexible_grid": {
+                "acfe_flexible_grid_enabled": "0",
+                "acfe_flexible_grid_align": "center",
+                "acfe_flexible_grid_valign": "stretch",
+                "acfe_flexible_grid_wrap": false
+            },
             "layouts": {
                 "layout_6852f761e95b0": {
                     "key": "layout_6852f761e95b0",
@@ -68,12 +103,15 @@
                     ],
                     "min": "",
                     "max": "",
-                    "acfe_flexible_render_template": false,
+                    "acfe_flexible_render_template": "",
-                    "acfe_flexible_render_style": false,
+                    "acfe_flexible_render_style": "",
-                    "acfe_flexible_render_script": false,
+                    "acfe_flexible_render_script": "",
+                    "acfe_flexible_settings": [
+                        "group_section_container",
+                        "group_section_theme"
+                    ],
+                    "acfe_flexible_settings_size": "large",
                     "acfe_flexible_thumbnail": false,
-                    "acfe_flexible_settings": false,
-                    "acfe_flexible_settings_size": "medium",
                     "acfe_layout_locations": [],
                     "acfe_flexible_modal_edit_size": false,
                     "acfe_flexible_category": false,
@@ -88,36 +126,7 @@
             "graphql_description": "",
             "graphql_field_name": "sections",
             "graphql_non_null": 1,
-            "acfe_flexible_stylised_button": false,
-            "acfe_flexible_hide_empty_message": false,
-            "acfe_flexible_empty_message": "",
-            "acfe_flexible_layouts_templates": false,
-            "acfe_flexible_layouts_previews": false,
             "acfe_flexible_layouts_placeholder": false,
-            "acfe_flexible_layouts_thumbnails": false,
-            "acfe_flexible_layouts_settings": false,
-            "acfe_flexible_layouts_locations": false,
-            "acfe_flexible_async": [],
-            "acfe_flexible_add_actions": [],
-            "acfe_flexible_remove_button": [],
-            "acfe_flexible_layouts_state": false,
-            "acfe_flexible_modal_edit": {
-                "acfe_flexible_modal_edit_enabled": false,
-                "acfe_flexible_modal_edit_size": "large"
-            },
-            "acfe_flexible_modal": {
-                "acfe_flexible_modal_enabled": false,
-                "acfe_flexible_modal_title": false,
-                "acfe_flexible_modal_size": "full",
-                "acfe_flexible_modal_col": "4",
-                "acfe_flexible_modal_categories": false
-            },
-            "acfe_flexible_grid": {
-                "acfe_flexible_grid_enabled": false,
-                "acfe_flexible_grid_align": "center",
-                "acfe_flexible_grid_valign": "stretch",
-                "acfe_flexible_grid_wrap": false
-            },
             "acfe_flexible_grid_container": false
         }
     ],
@@ -150,5 +159,5 @@
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1758554756
+    "modified": 1758564756
 }

wp-content/themes/ccat/acf-json/group_section_container.json

@@ -0,0 +1,79 @@
+{
+    "key": "group_section_container",
+    "title": "Section - Container",
+    "fields": [
+        {
+            "key": "field_68d18dd881229",
+            "label": "Content width",
+            "name": "content_width",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "container": "Default container",
+                "container-fluid": "Fluid container",
+                "container-full": "Full-width container",
+                "container-sm": "640px container",
+                "container-md": "768px container",
+                "container-lg": "1024px container",
+                "container-xl": "1280px container"
+            },
+            "default_value": "container",
+            "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": "contentWidth",
+            "graphql_non_null": 1,
+            "ajax": 0,
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0,
+            "allow_custom": 0,
+            "search_placeholder": "",
+            "min": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "abstract"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "left",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "show_in_graphql": 1,
+    "graphql_field_name": "sectionContainer",
+    "map_graphql_types_from_location_rules": 0,
+    "graphql_types": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1758564033
+}

wp-content/themes/ccat/acf-json/group_section_theme.json

@@ -0,0 +1,75 @@
+{
+    "key": "group_section_theme",
+    "title": "Section - Theme",
+    "fields": [
+        {
+            "key": "field_68d190c22372a",
+            "label": "Background color",
+            "name": "bg_color",
+            "aria-label": "",
+            "type": "select",
+            "instructions": "",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "bg-default": "Default background",
+                "bg-muted": "Muted background",
+                "bg-elevated": "Elevated background",
+                "bg-accented": "Accented background"
+            },
+            "default_value": "bg-default",
+            "return_format": "value",
+            "multiple": 0,
+            "max": "",
+            "allow_custom": 0,
+            "placeholder": "",
+            "search_placeholder": "",
+            "prepend": "",
+            "append": "",
+            "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,
+            "create_options": 0,
+            "save_options": 0,
+            "min": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "abstract"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "left",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "acfe_autosync": [
+        "json"
+    ],
+    "acfe_form": 0,
+    "acfe_display_title": "",
+    "show_in_graphql": 1,
+    "graphql_field_name": "sectionTheme",
+    "map_graphql_types_from_location_rules": 0,
+    "graphql_types": "",
+    "acfe_meta": "",
+    "acfe_note": "",
+    "modified": 1758564696
+}

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>

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

@@ -6662,10 +6662,41 @@ 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 & SectionContainer_Fields & SectionTheme_Fields {
+  """
+  Field of the "select" Field Type added to the schema as part of the "SectionTheme" Field Group
+  """
+  bgColor: [String]!
+
+  """
+  Field of the "select" Field Type added to the schema as part of the "SectionContainer" Field Group
+  """
+  contentWidth: [String]!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
+"""
+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".
 """
 type GroupAbstractBuilderSectionsTextBlockLayout implements AcfFieldGroup & AcfFieldGroupFields & GroupAbstractBuilderSectionsTextBlockLayout_Fields & GroupAbstractBuilderSections_Layout {
+  """
+  Field of the "text" Field Type added to the schema as part of the "GroupAbstractBuilderSectionsTextBlockLayout" Field Group
+  """
+  acfeFlexibleLayoutTitle: String
+
   """
   Field of the "wysiwyg" Field Type added to the schema as part of the "GroupAbstractBuilderSectionsTextBlockLayout" Field Group
   """
@@ -6673,12 +6704,22 @@ 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
 }
 
 """
 Interface representing fields of the ACF "GroupAbstractBuilderSectionsTextBlockLayout" Field Group
 """
 interface GroupAbstractBuilderSectionsTextBlockLayout_Fields implements AcfFieldGroup & AcfFieldGroupFields & GroupAbstractBuilderSections_Layout {
+  """
+  Field of the "text" Field Type added to the schema as part of the "GroupAbstractBuilderSectionsTextBlockLayout" Field Group
+  """
+  acfeFlexibleLayoutTitle: String
+
   """
   Field of the "wysiwyg" Field Type added to the schema as part of the "GroupAbstractBuilderSectionsTextBlockLayout" Field Group
   """
@@ -6686,6 +6727,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
 }
 
 """
@@ -21673,6 +21719,58 @@ enum ScriptLoadingStrategyEnum {
   DEFER
 }
 
+"""
+The "SectionContainer" Field Group. Added to the Schema by "WPGraphQL for ACF".
+"""
+type SectionContainer implements AcfFieldGroup & AcfFieldGroupFields & SectionContainer_Fields {
+  """
+  Field of the "select" Field Type added to the schema as part of the "SectionContainer" Field Group
+  """
+  contentWidth: [String]!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
+"""
+Interface representing fields of the ACF "SectionContainer" Field Group
+"""
+interface SectionContainer_Fields implements AcfFieldGroup & AcfFieldGroupFields {
+  """
+  Field of the "select" Field Type added to the schema as part of the "SectionContainer" Field Group
+  """
+  contentWidth: [String]!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
+"""
+The "SectionTheme" Field Group. Added to the Schema by "WPGraphQL for ACF".
+"""
+type SectionTheme implements AcfFieldGroup & AcfFieldGroupFields & SectionTheme_Fields {
+  """
+  Field of the "select" Field Type added to the schema as part of the "SectionTheme" Field Group
+  """
+  bgColor: [String]!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
+"""
+Interface representing fields of the ACF "SectionTheme" Field Group
+"""
+interface SectionTheme_Fields implements AcfFieldGroup & AcfFieldGroupFields {
+  """
+  Field of the "select" Field Type added to the schema as part of the "SectionTheme" Field Group
+  """
+  bgColor: [String]!
+
+  """The name of the field group"""
+  fieldGroupName: String @deprecated(reason: "Use __typename instead")
+}
+
 """Input for the sendPasswordResetEmail mutation."""
 input SendPasswordResetEmailInput {
   """