@total_onion/onion-library 2.0.66 → 2.0.67

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-info-subtitle.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+    <div :class="`${blockClassname}__post-info-subtitle ${blockClassname}__info-item`"
+        :style="`${gridLayoutString} ${textEditorStylesString}`">
+        <p :class="`${element.text_style?.typography_style.slice(2)}`">{{ post.post_data.post_info_subtitle }}</p>
+    </div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-link-widget.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+const blockClassname = "post-type-filter-grid-v3";
+const props = defineProps(["post", "element", "mappedIcons", "ctaStyles", "blockClassname", "options"]);
+const postColour = props.post.post_data.post_colour;
+const postTextColourStyle = props.post.post_data?.post_text_colour_style?.slice(2);
+let ctaStyle = '';
+if (typeof props.element.cta_style == 'string') {
+    ctaStyle = props.element?.cta_style?.replace("__", '');
+} else {
+    ctaStyle = props.element?.cta_style;
+}
+let postCtaStyle = ctaStyle;
+let postCtaStyleValue = '';
+let ctaAnimationStyle = '';
+if (props.element?.cta_style_select) {
+    if (props.element?.cta_style_select?.slice(2) == 'post-colour') {
+        postCtaStyle = 'post-colour';
+        postCtaStyleValue = `color: ${postColour};--post-text-colour-style: ${postColour};`;
+    }
+    if (props.element?.cta_style_select?.slice(2) == 'post-text-colour-style') {
+        postCtaStyle = 'post-text-colour-style';
+        postCtaStyleValue = `color: ${postTextColourStyle};--post-text-colour-style: ${postTextColourStyle};`;
+    }
+    if (props.ctaStyles) {
+        ctaAnimationStyle = props.ctaStyles[ctaStyle - 1]?.cta_settings?.cta_animation_style;
+    }
+}
+const iconImage = props.mappedIcons['cta_link_icon']['type'] == 'image/svg+xml' ? props.mappedIcons['cta_link_icon']['image'] : '<img src="' + props.mappedIcons['cta_link_icon']['image'] + '">';
+const enableCtaIcon = props.ctaStyles[ctaStyle - 1]?.cta_settings?.include_cta_icon;
+const gridLayoutString = gridLayoutElement(props);
+</script>
+<template>
+    <div :class="`${blockClassname}__post-link ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
+        <a :href="post?.link" :style="`${postCtaStyleValue}`"
+            :class="`${blockClassname}__cta ${blockClassname}__cta-style-${postCtaStyle} cmpl-cta-style-${postCtaStyle}  cmpl-cta-animation-style-${ctaAnimationStyle}`"
+            v-if="element.post_link_text">
+            <span :class="`${blockClassname}__cta-span`">{{ element.post_link_text }}</span>
+            <span :class="`${blockClassname}__cta-icon cmpl-cta-icon ${blockClassname}__icon-image`"
+                v-if="enableCtaIcon" v-html="iconImage">
+            </span>
+        </a>
+    </div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-publish-widget.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from 'vue'
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+const dateWithoutTime = computed(() => {
+    if (props.post.post_date) {
+        const dateArray = props.post.post_date.split(' ');
+        const dateDMY = dateArray[0].split('-');
+        const dateObject = new Date(Date.UTC(
+            parseInt(dateDMY[0]), // year
+            parseInt(dateDMY[1]) - 1, // month (0-based)
+            parseInt(dateDMY[2]) // day
+        ));
+
+        const url = window.location.href;
+        const parts = url.split("/");
+        let formattedDate;
+
+        parts.forEach((part) => {
+            if (part === "en-us") {
+                formattedDate = new Intl.DateTimeFormat("en-US").format(
+                    dateObject
+                );
+            } else {
+                formattedDate = new Intl.DateTimeFormat("en-GB").format(
+                    dateObject
+                );
+            }
+        });
+        return formattedDate;
+    }
+});
+</script>
+<template>
+    <p :class="`${blockClassname}__post-publish-date ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
+        :style="`${gridLayoutString} ${textEditorStylesString}`">
+        {{ dateWithoutTime }}
+    </p>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-tags-widget.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "ctaStyles"]);
+const blockClassname = "post-type-filter-grid-v3";
+
+const gridLayoutString = gridLayoutElement(props);
+let ctaStyle = props.element?.cta_style?.replace("__", '');
+
+</script>
+<template>
+    <div :class="`${blockClassname}__post-tags ${blockClassname}__info-item `" :style="`${gridLayoutString}`">
+        <template v-for="(tag, index) in props.post.tags" :key="index">
+            <div v-html="tag.name"
+                :class="`${blockClassname}__post-tag ${blockClassname}__cta cmpl-cta-style-${ctaStyle}`">
+            </div>
+        </template>
+    </div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-text-alternative-style.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
+const blockClassname = props.blockClassname;
+
+const gridLayoutString = gridLayoutElement(props);
+
+
+</script>
+<template>
+    <div :href="props.post.link" :class="`${blockClassname}__post-text-alternative-style ${blockClassname}__info-item`"
+        :style="`${gridLayoutString}`">
+        <h3 :class="`${blockClassname}__post-text-alternative-style-text`"
+            v-html="post.post_data.post_text_alternative_style">
+        </h3>
+    </div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-title-widget.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "ctaIcons", "blockClassname"]);
+const blockClassname = props.blockClassname;
+
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+</script>
+<template>
+	<a :href="props.post.link" :class="`${blockClassname}__post-title ${blockClassname}__info-item`"
+		:style="`${gridLayoutString}`">
+		<h3 :class="`${element.text_style?.typography_style.slice(2)}`" :style="`${textEditorStylesString}`"
+			v-html="post.post_title">
+		</h3>
+		<img :class="`${blockClassname}__post-title-icon style-svg`" v-if="element.enable_icon"
+			:src="ctaIcons.cta_load_more_icon" alt="title icon">
+	</a>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/pre-render-posts-html.twig

@@ -0,0 +1,17 @@
+<div class="{{blockClassName}}__no-js-content lazy-fade js-enabled-hide" style="width: 100%; padding: var(--global-inline-spacing)">
+	<div class="{{blockClassName}}__posts-container" style="width: 100%; display: grid; grid-template-columns: repeat(auto-fill,minmax(250px, 1fr)); gap: 20px;">
+		{% for post in updatedPosts.posts %}
+			{% set postImage = get_image(post.post_images.post_image) %}
+
+			<div class="{{blockClassName}}__post-container">
+				<a href="{{post.link}}"><img class="js-enabled-hide" src="{{postImage.src}}" srcset="{{postImage.srcset}}" alt="{{post.post_images.post_image_alt_text}}" loading='lazy' class=""></a>
+				{% if post.post_title is not empty %}
+					<h2 class="">{{post.post_title}}</h2>
+				{% endif %}
+				{% if post.post_info_description is not empty %}
+					<p class="">{{post.post_info_description}}</p>
+				{% endif %}
+			</div>
+		{% endfor %}
+	</div>
+</div>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-abv.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-abv ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
+		<!-- TODO -->
+		<!-- --text-align: ${element.text_align.slice(2)}; -->
+		{{ post.post_data.product_abv }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-age-statement.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-age-statement ${blockClassname}__info-item`" :style="`${gridLayoutString}`"
+		v-if="post.post_data.product_age_statement">
+		<h4 :class="`${element.text_style?.typography_style.slice(2)}`" :style="`${textEditorStylesString}`">
+			{{ post.post_data.product_age_statement }}
+		</h4>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-bazaarvoice.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-bazaarvoice ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		{{ post.post_data.product_bazaarvoice }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-brand.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__brand ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
+		{{ post.post_data.product_details?.brand }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-cask-type.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-cask-type ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
+		{{ post.post_data.product_cask_type }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-country.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-country ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		{{ post.post_data.product_country }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-description.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-details-description ${blockClassname}__info-item ${blockClassname}__post-details-description ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		{{ post.post_data.product_details?.description }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-details-name.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+// console.log(JSON.parse(props.post.post_data));
+
+</script>
+<template>
+	<div :class="`${blockClassname}__product-link ${blockClassname}__info-item ${props.element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString}`">
+		<h4 :class="`${element.text_style?.typography_style.slice(2)}`"
+			:style="`--text-align: ${props.element.text_style?.text_align.slice(2)}; --text-transform: ${props.element.text_style?.text_transform.slice(2)}; --font-weight: ${props.element.text_style.text_font_weight.slice(2)}; --text-colour: ${textColour}`">
+			{{ props.post.product_details.productName }}
+		</h4>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-details-price.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__price ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<span>{{ post.post_data.product_details?.price }}</span>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-finish.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-finish ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
+		{{ post.post_data.product_finish }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-history.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-history ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
+		{{ post.post_data.product_history }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-link.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element", "ctaIcons"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+
+</script>
+<template>
+	<div :class="`${blockClassname}__product-link ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
+		<a :href="props.post.link" :class="`${blockClassname}__cta cmpl-cta-style-${element.cta_style.slice(
+			2
+		)}`" :style="`${gridLayoutString}`" v-if="element.product_link_text">{{ element.product_link_text }}</a>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-logo-widget.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const imageType = 'image';
+let postType = props.post.post_data.post_type;
+const gridLayoutString = gridLayoutElement(props);
+</script>
+<template>
+    <div :class="`${blockClassname}__media-image-container ${blockClassname}__info-item`" :href="props.post.link"
+        v-if="element.acf_fc_layout == 'product-logo'" :style="`${gridLayoutString}`">
+        <img :class="`${blockClassname}__post-image ${blockClassname}__media-${imageType} style-svg`" loading="lazy"
+            :src="props.post.post_images['post_' + imageType + '_src']"
+            :width="props.post.post_images['post_' + imageType + '_width']"
+            :height="props.post.post_images['post_' + imageType + '_height']"
+            :srcset="props.post.post_images['post_' + imageType + '_srcset']"
+            sizes="(max-width: 414px) 100px, (max-width: 768px) 150px, (max-width: 1024px) 200px, (max-width: 1440px) 275px, (max-width: 1800px) 300px"
+            :alt="props.post.post_images['post_' + imageType + '_alt_text']"
+            :style="`--post-image-width: ${element.post_image_width}%;`" />
+    </div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-name.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { gridLayoutElement } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+
+</script>
+<template>
+	<div :class="`${blockClassname}__product-link ${blockClassname}__info-item ${props.element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString}`">
+		<h4 :class="`${element.text_style?.typography_style.slice(2)}`"
+			:style="`--text-align: ${props.element.text_style?.text_align.slice(2)}; --text-transform: ${props.element.text_style?.text_transform.slice(2)}; --font-weight: ${props.element.text_style.text_font_weight.slice(2)}; --text-colour: ${textColour}`">
+			{{ props.post.post_data?.product_name }}</h4>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-nose.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-nose ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
+		{{ props.post.post_data.product_nose }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-price.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__price ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<span>{{ post.post_data.product_price }}</span>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-slug.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-c7-slug ${blockClassname}__info-item`"
+		:style="`${gridLayoutString} ${textEditorStylesString}`">
+		<div class="c7-buy-product c7-buy-variant" :data-product-slug="`${props.post.post_data.c7_slug}`"></div>
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-taste.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+</script>
+<template>
+	<div :class="`${blockClassname}__product-taste ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
+		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
+		{{ post.post_data.product_taste }}
+	</div>
+</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-whisky-type.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
+
+const props = defineProps(["post", "element"]);
+const blockClassname = "post-type-filter-grid-v3";
+const gridLayoutString = gridLayoutElement(props);
+const textEditorStylesString = textEditorStyles(props);
+
+
+</script>
+<template>
+	<div :class="`${blockClassname}__product-whisky-type ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
+		2
+	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`" v-if="post.post_data.product_whisky_type">
+		<p :class="`${element.text_style?.typography_style.slice(2)}`" :style="`--text-align: ${element.text_style?.text_align.slice(
+			2
+		)}; --text-transform: ${element.text_style?.text_transform.slice(
+			2
+		)}; --font-weight: ${element.text_style.text_font_weight.slice(
+			2
+		)}; --text-colour: ${textColour}`">
+			{{ post.post_data.product_whisky_type }}
+		</p>
+	</div>
+</template>