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

feat: AcfLink / AcfLinkButton components

Browse Source
This commit is contained in:
Pascal Martineau
2026-01-30 10:24:06 -05:00
parent 6b17201f60
commit 115a5d2d38
6 changed files with 152 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
wp-content/themes/moonshine/acf-json/group_options_site.json
View File

@@ -47,6 +47,54 @@
"graphql_description": "",
"graphql_field_name": "phoneNumber",
"graphql_non_null": 1
},
{
"key": "field_697cc921234cc",
"label": "Liens globaux",
"name": "links",
"aria-label": "",
"type": "group",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"layout": "row",
"acfe_seamless_style": 0,
"acfe_group_modal": 0,
"show_in_graphql": 1,
"graphql_description": "",
"graphql_field_name": "links",
"graphql_non_null": 0,
"sub_fields": [
{
"key": "field_697cc93e234cd",
"label": "Contact",
"name": "contact",
"aria-label": "",
"type": "link",
"instructions": "",
"required": 1,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"allow_in_bindings": 0,
"show_in_graphql": 1,
"graphql_description": "",
"graphql_field_name": "contact",
"graphql_non_null": 1
}
],
"acfe_group_modal_close": 0,
"acfe_group_modal_button": "",
"acfe_group_modal_size": "large"
}
],
"location": [
@@ -78,5 +126,5 @@
"graphql_types": "",
"acfe_meta": "",
"acfe_note": "",
"modified": 1769785033
"modified": 1769785750
}

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

@@ -0,0 +1,5 @@
fragment AcfLink on AcfLink {
title
url
target
}

23
wp-content/themes/moonshine/app/components/acf/AcfLink.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import type { AcfLinkFragment } from "#graphql/operations";
import type { LinkProps } from "@nuxt/ui";
type AcfLinkProps = Omit<LinkProps, "to" | "target" | "href"> & {
link?: AcfLinkFragment;
};
const { link, ...linkProps } = defineProps<AcfLinkProps>();
</script>
<template>
<ULink
v-if="link?.url && link?.title"
v-bind="linkProps"
:to="link.url"
:target="link.target"
:external="link.target === '_blank'"
:rel="link.target === '_blank' ? 'noopener noreferrer' : undefined"
>
<slot>{{ link.title }}</slot>
</ULink>
</template>

23
wp-content/themes/moonshine/app/components/acf/AcfLinkButton.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import type { AcfLinkFragment } from "#graphql/operations";
import type { ButtonProps } from "@nuxt/ui";
type AcfLinkButtonProps = & Omit<ButtonProps, "to" | "target" | "href"> & {
link?: AcfLinkFragment;
};
const { link, ...buttonProps } = defineProps<AcfLinkButtonProps>();
</script>
<template>
<UButton
v-if="link?.url && link?.title"
v-bind="buttonProps"
:to="link.url"
:target="link.target"
:external="link.target === '_blank'"
:rel="link.target === '_blank' ? 'noopener noreferrer' : undefined"
>
<slot>{{ link.title }}</slot>
</UButton>
</template>

4
wp-content/themes/moonshine/app/graphql/SiteOptions.query.gql
View File

@@ -1,5 +1,9 @@
fragment SiteOptions on GroupSiteOptions {
email
phoneNumber { ... AcfPhone }
links {
contact { ... AcfLink}
}
}
query SiteOptions {

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

@@ -51,6 +51,18 @@ interface AcfFieldGroupFields {
fieldGroupName: String @deprecated(reason: "Use __typename instead")
}
"""ACF Link field"""
type AcfLink {
"""The target of the link (_blank, etc)"""
target: String
"""The title of the link"""
title: String
"""The url of the link"""
url: String
}
"""
Connection between the GroupAbstractBuilderSectionsHeroSplitLayout_Fields type and the MediaItem type
"""
@@ -3711,12 +3723,43 @@ type GroupSiteOptions implements AcfFieldGroup & AcfFieldGroupFields & GroupSite
"""The name of the field group"""
fieldGroupName: String @deprecated(reason: "Use __typename instead")
"""
Field of the &quot;group&quot; Field Type added to the schema as part of the &quot;GroupSiteOptions&quot; Field Group
"""
links: GroupSiteOptionsLinks
"""
Field of the &quot;phone&quot; Field Type added to the schema as part of the &quot;GroupSiteOptions&quot; Field Group
"""
phoneNumber: AcfPhone!
}
"""
The &quot;GroupSiteOptionsLinks&quot; Field Group. Added to the Schema by &quot;WPGraphQL for ACF&quot;.
"""
type GroupSiteOptionsLinks implements AcfFieldGroup & AcfFieldGroupFields & GroupSiteOptionsLinks_Fields {
"""
Field of the &quot;link&quot; Field Type added to the schema as part of the &quot;GroupSiteOptionsLinks&quot; Field Group
"""
contact: AcfLink!
"""The name of the field group"""
fieldGroupName: String @deprecated(reason: "Use __typename instead")
}
"""
Interface representing fields of the ACF &quot;GroupSiteOptionsLinks&quot; Field Group
"""
interface GroupSiteOptionsLinks_Fields implements AcfFieldGroup & AcfFieldGroupFields {
"""
Field of the &quot;link&quot; Field Type added to the schema as part of the &quot;GroupSiteOptionsLinks&quot; Field Group
"""
contact: AcfLink!
"""The name of the field group"""
fieldGroupName: String @deprecated(reason: "Use __typename instead")
}
"""
Interface representing fields of the ACF &quot;GroupSiteOptions&quot; Field Group
"""
@@ -3729,6 +3772,11 @@ interface GroupSiteOptions_Fields implements AcfFieldGroup & AcfFieldGroupFields
"""The name of the field group"""
fieldGroupName: String @deprecated(reason: "Use __typename instead")
"""
Field of the &quot;group&quot; Field Type added to the schema as part of the &quot;GroupSiteOptions&quot; Field Group
"""
links: GroupSiteOptionsLinks
"""
Field of the &quot;phone&quot; Field Type added to the schema as part of the &quot;GroupSiteOptions&quot; Field Group
"""