@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-product-info-v3/product-info-v3/product-abv.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-abv.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="abv" class="{{blockClassName}}__product-abv {{textEditorElementClasses}} {{block.id}}"><span class="{{blockClassName}}__product-abv--label">{{post.product_abv_label}}</span> {{post.product_abv}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-cask-type-label.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-cask-type-label.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="product_cask_type_label" class="{{blockClassName}}__product-cask-type-label  {{textEditorElementClasses}} {{block.id}}">{{post.product_cask_type_label}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-cask-type.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-cask-type.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="product_cask_type" class="{{blockClassName}}__product-cask-type  {{textEditorElementClasses}} {{block.id}}">{{post.product_cask_type}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-colour-label.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-colour-label.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="colour-label" class="{{blockClassName}}__product-colour-label {{textEditorElementClasses}} {{block.id}}">{{post.product_colour_label}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-colour.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-colour.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="colour" class="{{blockClassName}}__product-colour {{textEditorElementClasses}} {{block.id}}">{{post.product_colour}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-description.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-description.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="description" class="{{blockClassName}}__product-description  {{textEditorElementClasses}} {{block.id}}">{{post.product_description}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-finish-label.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-finish-label.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="finish-label" class="{{blockClassName}}__product-finish-label {{textEditorElementClasses}} {{block.id}}">{{post.product_finish_label}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-finish.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-finish.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="finish" class="{{blockClassName}}__product-finish {{textEditorElementClasses}} {{block.id}}">{{post.product_finish}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-headline.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-headline.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="headline" class="{{blockClassName}}__product-headline {{textEditorElementClasses}} {{block.id}}">{{field.headline_text}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-image.twig

@@ -0,0 +1,43 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set imageSelect = field.image_select|ru %}
+{% if imageSelect == 'image_accent' %}
+	{% set positionVars = include('components/element-positioning.twig', {fields : field.post_image_positioning, block : block, blockClassName : imageClassname}, with_context = false) %}
+{% endif %}
+{% set imageWidthPercentMobile = '--post-image-width-mobile: ' ~ field.post_image_width ~ '%;' %}
+{% set imageWidthPercentDesktop = '--post-image-width-desktop: ' ~ field.post_image_width ~ '%;' %}
+{% if imageSelect == 'image_accent' %}
+	{% set imageWidthPercentMobile = '--post-image-width-mobile: calc(' ~ field.post_image_width_mobile_px ~ ' / var(--mobile-design-reference) * var(--screen-width-mobile));' %}
+	{% set imageWidthPercentDesktop = '--post-image-width-desktop: calc(' ~ field.post_image_width_desktop_px ~ ' / var(--desktop-design-reference) * var(--screen-width-desktop));' %}
+{% endif %}
+{% set imageAspectRatioDesktop = '--image-aspect-ratio-desktop:' ~ field.image_aspect_ratio_desktop ~ ';' %}
+{% set imageAspectRatioPortrait = '--image-aspect-ratio-portrait:' ~ field.image_aspect_ratio_portrait ~ ';' %}
+{% set imageAspectRatioMobile = '--image-aspect-ratio-mobile:' ~ field.image_aspect_ratio_mobile ~ ';' %}
+{% set imageFitStyle = '--image-fit-style:' ~ (field.image_fit_style|ru|default('contain')) ~ ';' %}
+{% set styleVars = imageWidthPercentDesktop ~ imageWidthPercentMobile ~ imageWidthPercentMobilePx ~ imageWidthPercentDesktopPx ~ imageAspectRatioDesktop ~ imageAspectRatioPortrait ~ imageAspectRatioMobile ~ imageFitStyle %}
+<style>
+	.{{blockClassName}}__post-image-container.{{block.id}}{
+		{{styleVars}}
+		{{gridLayoutElement}}
+		{{positionVars}}
+	}
+</style>
+<a aria-label="{{post.title}}" href="{{post.link}}" data-pattern-post-info="link" data-image-select="{{ imageSelect }}" class="{{blockClassName}}__post-image-container {{blockClassName}}__info-item {{blockClassName}}__info-item--{{postType}} {{blockClassName}}__post-image-container--{{imageSelect|replace({'_':'-'})}} {{block.id}}">
+	{% set imageSizes = imageSizes|default('(min-width: 1440px) 50vw, (min-width: 768px) 50vw, (min-width: 500px) 50vw, 100vw') %}
+	{% set imageFields = [] %}
+	{% set imageFields = imageFields|merge({'enable_image' : true}) %}
+	{% set imageClassname = 'post-info-v3__post' %}
+	{% if attribute(post, 'post_' ~ imageSelect) %}
+		{% set imageFields = imageFields|merge({'image' : attribute(post, 'post_' ~ imageSelect)}) %}
+	{% elseif attribute(post, postType ~ '_' ~ imageSelect) %}
+		{% set imageFields = imageFields|merge({'image' : attribute(post, postType ~ '_' ~ imageSelect)}) %}
+	{% elseif attribute(post, 'post_image') %}
+		{% set imageFields = imageFields|merge({'image' : attribute(post, 'post_image')}) %}
+	{% endif %}
+
+	{{ include('components/single-image.twig', {
+		fields: imageFields,
+		block: block,
+		blockClassName: imageClassname,
+		imageSizes: imageSizes
+	}, with_context = false) }}
+</a>

package/components/block-product-info-v3/product-info-v3/product-name.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-name.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="name" class="{{blockClassName}}__product-name  {{textEditorElementClasses}} {{block.id}}">{{post.product_name}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-nose-label.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-nose-label.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="nose-label" class="{{blockClassName}}__product-nose-label {{textEditorElementClasses}} {{block.id}}">{{post.product_nose_label}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-nose.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-nose.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="nose" class="{{blockClassName}}__product-nose {{textEditorElementClasses}} {{block.id}}">{{post.product_nose}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-pair-with-label.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-pair-with-label.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="pair-with-label" class="{{blockClassName}}__product-pair-with-label {{textEditorElementClasses}} {{block.id}}">{{post.product_pair_with_label}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-pair-with.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-pair-with.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="pair-with" class="{{blockClassName}}__product-pair-with {{textEditorElementClasses}} {{block.id}}">{{post.product_pair_with}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-palate-label.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-palate-label.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="palate-label" class="{{blockClassName}}__product-palate-label {{textEditorElementClasses}} {{block.id}}">{{post.product_palate_label}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-palate.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-palate.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="palate" class="{{blockClassName}}__product-palate {{textEditorElementClasses}} {{block.id}}">{{post.product_palate}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-taste-label.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-taste-label.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="taste-label" class="{{blockClassName}}__product-taste-label {{textEditorElementClasses}} {{block.id}}">{{post.product_taste_label}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-taste.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-taste.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="taste" class="{{blockClassName}}__product-taste {{textEditorElementClasses}} {{block.id}}">{{post.product_taste}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/product-volume.twig

@@ -0,0 +1,14 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+{% set textEditorStyleVars = include('components/text-editor-settings-variables-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorContainerClasses = include('components/text-editor-settings-container-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set textEditorElementClasses = include('components/text-editor-settings-element-classes-v3.twig', { fields: field, block, blockClassName, is_preview }, with_context = false) %}
+{% set elementType = field.element_type|ru %}
+<style>
+	.{{blockClassName}}__product-volume.{{block.id}}, .{{blockClassName}}__content-container.{{block.id}}{
+		{{textEditorStyleVars}}
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
+	<{{elementType|default('p')}} data-pattern-post-info="volume" class="{{blockClassName}}__product-volume {{textEditorElementClasses}} {{block.id}}"><span class="{{blockClassName}}__product-volume--label">{{post.product_volume_label}}</span> {{post.product_volume}}</{{elementType|default('p')}}>
+</div>

package/components/block-product-info-v3/product-info-v3/spacer-v3.twig

@@ -0,0 +1,9 @@
+{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
+<style>
+	.{{blockClassName}}__spacer-container.{{block.id}}{
+		{{gridLayoutElement}}
+	}
+</style>
+<div class="{{blockClassName}}__spacer-container {{blockClassName}}__info-item {{block.id}}">
+	{{ include( 'blocks/spacer-v3.twig', {fields : field, block, blockClassName}, with_context = false) }}
+</div>

package/components/block-product-info-v3/product-info-v3.js

@@ -0,0 +1,7 @@
+export default function productinfov3Js(options = {}) {
+	const {block} = options;
+	try {
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/block-product-info-v3/product-info-v3.scss

@@ -0,0 +1,171 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../component-grid-layout-container-v3/grid-layout-container-v3';
+@use '../component-grid-layout-element-v3/grid-layout-element-v3';
+@use '../component-element-positioning-v3/element-positioning-v3';
+@use '../component-content-box-settings-v3/content-box-settings-v3';
+@use '../component-gradient-overlay-v3/gradient-overlay-v3';
+@use '../../breakpoints';
+@layer base-styles {
+	.product-info-v3 {
+		display: grid;
+		grid-auto-columns: 1fr;
+		grid-template: 'main' / 1fr;
+		@include content-box-settings-v3.contentBoxSettingsV3();
+		@include grid-layout-container-v3.gridLayoutContainer();
+		&__post-cover-link {
+			grid-area: unset;
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 99;
+			opacity: 0;
+		}
+		&__post-cover-label {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			margin: -1px;
+			padding: 0;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			white-space: nowrap;
+			border: 0;
+		}
+		&__info-item {
+			@include grid-layout-element-v3.gridLayoutElement();
+			width: 100%;
+			position: relative;
+		}
+		&__content-container {
+			width: 100%;
+		}
+		&__cta-selection-container {
+			@include grid-layout-element-v3.gridLayoutElement();
+		}
+		&__cta {
+			display: flex;
+		}
+		&__cta-style-post-colour,
+		&__cta-style-post-text-colour-style {
+			padding-block: core-functions-v3.fluidSize(10);
+			padding-inline: core-functions-v3.fluidSize(20);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				padding-block: core-functions-v3.fluidSize(10);
+				padding-inline: core-functions-v3.fluidSize(20);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				padding-block: core-functions-v3.fluidSize(10);
+				padding-inline: core-functions-v3.fluidSize(20);
+			}
+		}
+		&__cta-style-post-colour {
+			color: var(--post-colour);
+			border: 1px solid var(--post-colour);
+		}
+		&__cta-style-post-text-colour-style {
+			color: var(--post-text-colour-style);
+			border: 1px solid var(--post-text-colour-style);
+		}
+		&__post-link,
+		&__better-reviews {
+			max-width: max-content;
+		}
+		&__gradient-overlay {
+			height: 100%;
+			@include gradient-overlay-v3.gradientOverlay();
+		}
+		&__post-tags {
+			pointer-events: none;
+			display: flex;
+			width: auto;
+			@include grid-layout-element-v3.gridLayoutElement();
+		}
+		&__post-image-container {
+			display: grid;
+			grid-template: 'main' / 1fr;
+			&--image-accent {
+				position: relative;
+				img,
+				svg {
+					margin: unset;
+					@include element-positioning-v3.elementPositioning();
+				}
+			}
+		}
+		&__post__image {
+			display: flex;
+			justify-content: center;
+			margin-inline: auto;
+			grid-area: main;
+			height: auto;
+			aspect-ratio: var(
+				--image-aspect-ratio-mobile,
+				var(--image-aspect-ratio-desktop)
+			);
+			@include grid-layout-element-v3.gridLayoutElement();
+			width: var(--post-image-width-mobile);
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				aspect-ratio: var(--image-aspect-ratio-portrait);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				width: var(--post-image-width-desktop);
+				aspect-ratio: var(--image-aspect-ratio-desktop);
+			}
+		}
+		&__post__image {
+			object-fit: var(--image-fit-style);
+			margin: auto;
+		}
+		&__global-image {
+			z-index: var(--global-image-zindex);
+			max-width: var(--global-image-max-width);
+			min-height: 100%;
+		}
+		&__global-image__picture {
+			width: var(--global-image-width);
+			display: flex;
+			position: var(--global-image-position);
+			inset: 0;
+		}
+		&__global-image__image {
+			object-fit: var(--global-image-fit-style);
+		}
+		&__product-logo {
+			max-width: core-functions-v3.fluidSize(
+				var(--logo-max-width-mobile),
+				'mobile'
+			);
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				max-width: core-functions-v3.fluidSize(
+					var(--logo-max-width-desktop),
+					'desktop'
+				);
+			}
+		}
+		&__person-rating {
+			display: flex;
+			gap: 1em;
+		}
+		&__person-rating-star {
+			--rating-star-colour: gold;
+			width: core-functions-v3.fluidSize(20, 'static');
+		}
+		&__person-questionaire-list {
+			list-style-type: none;
+		}
+		&__person-email {
+			display: flex;
+			gap: 1em;
+		}
+		&__person-email-icon {
+			width: 1em;
+		}
+		&__post-text-alternative-style {
+			width: auto;
+			@include grid-layout-element-v3.gridLayoutElement();
+		}
+	}
+}

package/components/block-product-info-v3/product-info-v3.twig

@@ -0,0 +1,43 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set blockClassName = "product-info-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, environment, is_preview, cta_styles, nav_menus }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+
+{% set gridLayoutContainer = include('components/grid-layout-container-v3.twig') %}
+{% set sectionStyles =  styleEntryPoint ~ gridLayoutContainer %}
+
+{% set post = get_post(fields.post) %}
+
+{% set postTypeFields = fields.post_fields %}
+{% set layout = fields.layout|ru %}
+{% set imageSizes = imageSizes %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{postType}}-type {{classNameEntryPoint}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="product-info-v3">
+
+	{% for field in postTypeFields %}
+		{% if block %}
+			{% set block = block|merge({'anchor' : '','className' : '', 'id': block.id ~ '-' ~ loop.index }) %}
+		{% endif %}
+		{% if field.acf_fc_layout == 'cta_selection' or field.acf_fc_layout == 'social_media_share' %}
+			{{include('components/' ~ field.acf_fc_layout|replace({'_': '-'}) ~ '.twig', {fields: field, field, post, block, blockClassName, postType, options, cta_styles, imageSizes}, with_context = false, ignore_missing = true)}}
+		{% else %}
+			{{include('blocks/product-info-v3/' ~ field.acf_fc_layout|replace({'_': '-'}) ~ '.twig', {field, post, block, blockClassName, postType, options, cta_styles, imageSizes}, with_context = false, ignore_missing = true)}}
+		{% endif %}
+	{% endfor %}
+	{% if fields.enable_post_cover_link %}
+		{% set coverlinkHover = fields.enable_post_cover_link_hover_effect ? 'post-cover-link-hover-effect' : '' %}
+		<a data-pattern-post-info="link" href="{{ post.link }}" target="_self" class="{{blockClassName}}__post-cover-link {{coverlinkHover}}" aria-label="{{post.title}}">
+			<span class="{{blockClassName}}__post-cover-label">{{post.title}}</span>
+		</a>
+	{% endif %}
+	{{htmlEntryPoint}}
+</section>