pascalmartineau/wp-headless
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: LaoutContained

Browse Source
This commit is contained in:
Pascal Martineau
2026-01-13 21:51:18 -05:00
parent 2b9a87511b
commit c7f6cca663
7 changed files with 301 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
wp-content/themes/moonshine/acf-json/group_abstract_builder.json
View File

@@ -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
}

149
wp-content/themes/moonshine/acf-json/group_layout_contained.json Normal file
View File

@@ -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
}

5
wp-content/themes/moonshine/app/components/builder/LayoutContained.fragment.gql Normal file
View File

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

50
wp-content/themes/moonshine/app/components/builder/LayoutContained.vue Normal file
View File

@@ -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>

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

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

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

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

87
wp-content/themes/moonshine/server/graphql/schema.graphql
View File

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