@total_onion/onion-library 1.0.0

package/components/block-post-info/post-info/article-description.twig

@@ -0,0 +1,7 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set article_desc = post.meta('article_description') %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__article-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{article_desc}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/bazaarvoice-inline.twig

@@ -0,0 +1,10 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+
+<div class="{{blockClassName}}__bazaarvoice {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+    {% if post.product_bazaarvoice is defined and post.product_bazaarvoice is not empty %}
+        {{function( 'do_shortcode', '[bazaarvoice bazaarvoice_product_id=' ~ post.product_bazaarvoice ~ ' type="inline_rating"]' )|raw}}
+    {% endif %}
+</div>

package/components/block-post-info/post-info/better-reviews.twig

@@ -0,0 +1,13 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+
+{% set display_options = field.display_settings.options|join(', ')|replace({'__': ""}) %}
+{% if display_options is empty %}
+	{% set display_options = 'stars' %}
+{% endif %}
+
+<div class="{{blockClassName}}__better-reviews {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+	{{function( 'do_shortcode', '[better-reviews post_id=' ~ post.id ~ ' display="' ~ display_options ~ '"]' )|raw}}
+</div>

package/components/block-post-info/post-info/buy-now.twig

@@ -0,0 +1,79 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set icon = field.enable_cta_icon %}
+
+{% set postColour = '--post-colour: ' ~ post.post_colour|ru ~ ';' %}
+{% set postTextColourStyle = '--post-text-colour-style: ' ~ post.post_text_colour_style|ru ~ ';' %}
+
+{% set ctaStyle = field.cta_style|ru %}
+
+{% if field.cta_style_select|ru == 'post-colour' %}
+	{% set ctaStyle = 'post-colour' %}
+{% endif %}
+
+{% if field.cta_style_select|ru == 'post-text-colour-style' %}
+	{% set ctaStyle = 'post-text-colour-style' %}
+{% endif %}
+
+{% set widgetStyles = gridLayoutElement ~ postColour ~ postTextColourStyle %}
+
+{% set buyNowOptionSelect = post.meta('buy_now_option_select') %}
+
+{% if buyNowOptionSelect|ru == 'none' %}
+	<a href="#" class="{{blockClassName}}__product-buy-now {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}}" style="{{widgetStyles}}">
+		<span class="{{blockClassName|default('default-class')}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName|default('default-class') ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+	</a>
+{% endif %}
+{% if buyNowOptionSelect|ru == 'link' %}
+	{% set productDirectLink = post.meta('direct_link') %}
+	{% set directLinkTarget = '_self' %}
+	{% if productDirectLink.target is not empty %}
+		{% set directLinkTarget = '_self' %}
+	{% endif %}
+	<a href="{{productDirectLink.url}}" class="{{blockClassName}}__product-buy-now link {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}}" style="{{widgetStyles}}" target="{{directLinkTarget}}">
+		<span class="{{blockClassName|default('default-class')}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName|default('default-class') ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+	</a>
+{% endif %}
+{% if buyNowOptionSelect|ru == 'ctb' %}
+	{% set productCtbPimid = post.meta('click_to_buy_pim_id') %}
+	<a href="#" class="{{blockClassName}}__product-buy-now ctb {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}}" style="{{widgetStyles}}" data-ctbuy data-ctbuy-variant="{{productCtbPimid}}" data-ctbuy-country="" data-ctbuy-lang="" data-ctbuy-default-view="" data-ctbuy-customquerystring="" data-ctbuy-direct-link="" title="{{field.buy_now_text}}">
+		<span class="{{blockClassName|default('default-class')}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName|default('default-class') ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+	</a>
+{% endif %}
+{% if buyNowOptionSelect|ru == 'wtb' %}
+	{% set productPimDebrainId = post.meta('debrain_pim_id') %}
+	<a href="#" class="dloc-link {{blockClassName}}__product-buy-now wtb {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}}" style="{{widgetStyles}}" data-action="where-to-buy" data-filter="{{productPimDebrainId}}" title="{{field.buy_now_text}}">
+		<span class="{{blockClassName|default('default-class')}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName|default('default-class') ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+	</a>
+{% endif %}
+{% if buyNowOptionSelect|ru == 'wtb-v2' %}
+	{% set productDebrainSkuId = post.meta('debrain_sku_id') %}
+	<wtb-button sku={{productDebrainSkuId}}></wtb-button>
+{% endif %}
+{% if buyNowOptionSelect|ru == 'mikmak' %}
+	{% set productEANs = post.meta('mikmak_ean_ids') %}
+	{% set relatedProducts = post.meta('related_products') %}
+	{% set drawer_widget_id = attribute(options['e-shop_settings'], 'mikmak_ctb_drawer_widget_id') %}
+
+	{% set relatedProductEANs = '' %}
+	{% for relatedPost in relatedProducts %}
+		{% set relatedProduct = get_post(relatedPost) %}
+		{% set relatedProductEANs = relatedProductEANs ~ ',' ~ relatedProduct.meta('mikmak_ean_ids')|trim(',') %}
+	{% endfor %}
+	{% set relatedProductEANs = relatedProductEANs|trim(',') %}
+
+	{% if productEANs is not empty and drawer_widget_id is not empty %}
+		{% set totalProductEANs = productEANs ~ (relatedProductEANs is not empty ? ',' ~ relatedProductEANs : '') %}
+		<a href="#" data-mm-wtbid="{{drawer_widget_id}}" data-mm-ids="{{totalProductEANs}}" data-mm-default-id="{{productEANs}}" class="{{blockClassName|default('default-class')}}__cta-span mikmak-buy-now">{{cta.cta_buy_now_text}}</a>
+	{% endif %}
+{% endif %}
+{% if buyNowOptionSelect|ru == 'reservebar' %}
+	{% set reserveBarLiquidId = post.meta('reserve_bar_liquid_grouping_id') %}
+	<a href="#" class="{{blockClassName}}__product-buy-now reservebar {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} reservebar-popup-trigger" style="{{widgetStyles}}" title="{{field.buy_now_text}}" reservebar-liquid-id="{{reserveBarLiquidId}}">
+		<span class="{{blockClassName|default('default-class')}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName|default('default-class') ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
+	</a>
+{% endif %}

package/components/block-post-info/post-info/cocktail-glass-type.twig

@@ -0,0 +1,21 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set cocktail_glass_type = post.meta('cocktail_glass_type') %}
+
+{% set accentImage = '' %}
+{% set globalImageSelectedIndex = field.select_global_image - 1 %}
+{% if globalImageSelectedIndex >= 0 %}
+	{% set globalImageSelectedImg = attribute(options.global_images, globalImageSelectedIndex) %}
+	{% if globalImageSelectedImg.global_image is not empty %}
+		{% set accentImage = get_image(globalImageSelectedImg.global_image) %}
+	{% endif %}
+{% endif %}
+
+<div class="{{blockClassName}}__glass-type {{blockClassName}}__info-item" style="{{elementStyles}}">
+	{% if accentImage is not empty %}
+		<img src="{{accentImage}}" class="post-info__global-image__image" alt="{{accentImageAlt}}" loading="lazy">
+	{% endif %}
+	<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{cocktail_glass_type}}</{{field.text_style.text_element_type|ru}}>
+</div>

package/components/block-post-info/post-info/cocktail-ingredients-description.twig

@@ -0,0 +1,7 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set cocktail_ingredients_desc = post.meta('cocktail_ingredients_description') %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__product-details-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{cocktail_ingredients_desc}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/cocktail-ingredients-title.twig

@@ -0,0 +1,7 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set cocktail_ingredients_title = post.meta('cocktail_ingredients_title') %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__title {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{cocktail_ingredients_title}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/cocktail-instructions-description.twig

@@ -0,0 +1,7 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set cocktail_instructions_desc = post.meta('cocktail_instructions_description') %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__product-details-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{cocktail_instructions_desc}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/cocktail-instructions-title.twig

@@ -0,0 +1,7 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set cocktail_instructions_title = post.meta('cocktail_instructions_title') %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__title {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{cocktail_instructions_title}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/cocktail-prep-time.twig

@@ -0,0 +1,26 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set cocktail_prep_time = post.meta('cocktail_prep_time') %}
+
+{% set accentImage = '' %}
+{% set globalImageSelectedIndex = field.select_global_image - 1 %}
+{% if globalImageSelectedIndex >= 0 %}
+	{% set globalImageSelectedImg = attribute(options.global_images, globalImageSelectedIndex) %}
+	{% if globalImageSelectedImg.global_image is not empty %}
+		{% set accentImage = get_image(globalImageSelectedImg.global_image) %}
+	{% endif %}
+{% endif %}
+
+<div class="{{blockClassName}}__prep-time {{blockClassName}}__info-item" style="{{elementStyles}}">
+	{% if accentImage is not empty %}
+		<img src="{{accentImage}}" class="post-info__global-image__image" alt="{{accentImageAlt}}" loading="lazy">
+	{% endif %}
+	<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+		Prep Time
+		<span class="{{blockClassName}}__info-item-separator">:</span>
+		<span class="{{blockClassName}}__info-item-value">{{cocktail_prep_time}}</span>
+	</{{field.text_style.text_element_type|ru}}>
+</div>

package/components/block-post-info/post-info/cocktail-recipe-ingredients.twig

@@ -0,0 +1,132 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+
+{% set cocktailRecipeIngredients = post.meta('cocktail_recipe_ingredients') %}
+{% set servesControlPositionMobile = '--serves-control-position-mobile: ' ~ post.serves_control_position_mobile|ru ~ ';' %}
+{% set servesControlPositionPortrait = '--serves-control-position-portrait: ' ~ post.serves_control_position_portrait|ru ~ ';' %}
+{% set servesControlPositionDesktop = '--serves-control-position-desktop: ' ~ post.serves_control_position_desktop|ru ~ ';' %}
+{% set elementStyles = gridLayoutElement ~ servesControlPositionMobile ~ servesControlPositionPortrait ~ servesControlPositionDesktop %}
+
+{% set uniqueMeasurementUnits = [] %}
+{% set allCustomUnits = false %}
+{% set customUnitsCount = 0 %}
+{% set totalIngredientsCount = cocktailRecipeIngredients|length %}
+{% for ingredients in cocktailRecipeIngredients %}
+	{% set defaultUnit = ingredients.default_unit|ru %}
+	{% if(defaultUnit != "custom") %}
+		{% if defaultUnit not in uniqueMeasurementUnits %}
+			{% set uniqueMeasurementUnits = uniqueMeasurementUnits|merge([defaultUnit]) %}
+		{% endif %}
+	{% else %}
+		{% if defaultUnit == "custom" %}
+			{% set customUnitsCount = ( customUnitsCount | default(0) ) + 1 %}
+			{# set uniqueMeasurementUnits = uniqueMeasurementUnits|merge([defaultUnit]) #}
+		{% endif %}
+	{% endif %}
+
+	{% for conversionOptions in ingredients.conversion_options %}
+		{% set co = conversionOptions|ru %}
+		{% if co not in uniqueMeasurementUnits and co != "none" %}
+			{% set uniqueMeasurementUnits = uniqueMeasurementUnits|merge([co]) %}
+		{% endif %}
+	{% endfor %}
+{% endfor %}
+
+{% if totalIngredientsCount == customUnitsCount %}
+	{% set allCustomUnits = true %}
+	{% set allCustomUnitsClass = "all-custom-content" %}
+{% endif %}
+
+{% set partsTabOrder = post.meta('parts_tab_order') %}
+{% set mlTabOrder = post.meta('ml_tab_order') %}
+{% set clTabOrder = post.meta('cl_tab_order') %}
+{% set ozTabOrder = post.meta('oz_tab_order') %}
+
+{% set defaultIndex = '' %}
+{% if partsTabOrder == 1 %}
+	{% set defaultIndex = 'parts' %}
+{% elseif mlTabOrder == 1 %}
+	{% set defaultIndex = 'ml' %}
+{% elseif clTabOrder == 1 %}
+	{% set defaultIndex = 'cl' %}
+{% elseif ozTabOrder == 1 %}
+	{% set defaultIndex = 'oz' %}
+{% endif %}
+
+<div class="{{blockClassName}}__cocktail-recipe-ingredients ingredients-tabs-outer-wrap {{blockClassName}}__info-item" style="{{elementStyles}}">
+	<div class="ingredients-tabs-inner-wrap">
+		{% if allCustomUnits == false %}
+			{% for ingredients in uniqueMeasurementUnits %}
+				<input class="ingredients-radio" id="ingredients-tab{{loop.index}}" type="radio" name="pct" {% if defaultIndex is not empty and defaultIndex == ingredients %} checked="checked" {% elseif loop.index == 1 %} checked="checked" {% endif %}/>
+			{% endfor %}
+			<nav class="ingredients-tabs">
+				<ul class="ingredients-tabs-ul">
+					{% for unit in uniqueMeasurementUnits %}
+						{% set tabOrder = 1 %}
+						{% if partsTabOrder is not empty and unit == 'parts' %}
+							{% set tabOrder = partsTabOrder %}
+						{% endif %}
+						{% if mlTabOrder is not empty and unit == 'ml' %}
+							{% set tabOrder = mlTabOrder %}
+						{% endif %}
+						{% if clTabOrder is not empty and unit == 'cl' %}
+							{% set tabOrder = clTabOrder %}
+						{% endif %}
+						{% if ozTabOrder is not empty and unit == 'oz' %}
+							{% set tabOrder = ozTabOrder %}
+						{% endif %}
+						<li class="ingredients-tab{{loop.index}} ingredients-tab-li" style="order: {{tabOrder}}">
+							<label for="ingredients-tab{{loop.index}}" class="ingredients-tabs-lbl">{{unit|upper}}</label>
+						</li>
+					{% endfor %}
+				</ul>
+			</nav>
+		{% endif %}
+		<section class="ingredients-tab-content-wrapper">
+			{% if post.enable_serves %}
+				<div class="ingredients-serve-control">
+					<button class="minus-button serve-button" disabled>-</button>
+					<span class="serves-display">1 SERVE</span>
+					<button class="plus-button serve-button">+</button>
+				</div>
+			{% endif %}
+			{% for unit in uniqueMeasurementUnits %}
+				<div class="ingredients-tab{{loop.index}} content {{allCustomUnitsClass}}">
+					{% for ingredients in cocktailRecipeIngredients %}
+						{% set conversionInfo = attribute(ingredients, 'conversion_' ~ unit) %}
+						{% set conversion_method = attribute(conversionInfo, unit ~ '_conversion_style') %}
+						{% set conversion_val = attribute(conversionInfo, unit ~ '_converted_value') %}
+						{% set link_type = ingredients.link_type|ru %}
+						{% set amount = '' %}
+						
+						{% if ingredients.default_unit|ru == unit or (ingredients.default_unit|ru == 'custom' and ingredients.amount is not null) %}
+							{% set amount = ingredients.amount %}
+						{% else %}
+							{% if(conversion_method|ru == 'auto') %}
+								{# code for auto conversion #}
+							{% else %}
+								{% set amount = conversion_val %}
+							{% endif %}
+						{% endif %}
+						<p class="ingredients-tab-content" data-base-amount="{{amount}}" data-unit="{{unit}}">
+							<span class="ingredient-measure-unit">
+								{{amount}}
+								{{((ingredients.default_unit|ru == 'custom') ? ingredients.custom_unit_info.custom_unit_label : (unit == 'parts' and amount == 1 ? 'part' : unit))}}</span>
+							{% if ingredients.link != false and link_type == 'internal' %}
+								{% set ingredientLink = get_post(ingredients.link.ID) %}
+								<a href="{{ingredientLink.link}}" class="ingredient-entity-link">{{ingredients.name}}</a>
+							{% elseif ingredients.external_link != false and link_type == 'external' %}
+								<a href="{{ingredients.external_link}}" class="ingredient-entity-link">{{ingredients.name}}</a>
+							{% else %}
+								{{ingredients.name}}
+							{% endif %}
+							{% if ingredients.notes != false %}
+								{{ingredients.notes}}
+							{% endif %}
+						</p>
+					{% endfor %}
+				</div>
+			{% endfor %}
+		</section>
+	</div>
+</div>

package/components/block-post-info/post-info/cocktail-recipe-instructions.twig

@@ -0,0 +1,19 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set elementStyles = gridLayoutElement %}
+
+{% set cocktail_recipe_instructions = post.meta('cocktail_recipe_instructions') %}
+
+<div class="{{blockClassName}}__cocktail-recipe-instructions instructions-wrapper {{blockClassName}}__info-item" style="{{elementStyles}}">
+	<div class="instructions-inner-wrap" style="--column-start: {{fields.grid_layout.grid_column_start}}; --column-span: {{fields.grid_layout.grid_column_span}}; --row-span: {{fields.grid_layout.grid_row_span}};">
+		{% for instructions_grp in cocktail_recipe_instructions %}
+			{% for instructions in instructions_grp %}
+				<ol class="instructions-list-wrap">
+					{% for instruction in instructions %}
+						<li class="instruction-list">{{instruction.instruction}}</li>
+					{% endfor %}
+				</ol>
+			{% endfor %}
+		{% endfor %}
+	</div>
+</div>

package/components/block-post-info/post-info/cocktail-skill-level.twig

@@ -0,0 +1,26 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set cocktail_skill_level = post.meta('cocktail_skill_level') %}
+
+{% set accentImage = '' %}
+{% set globalImageSelectedIndex = field.select_global_image - 1 %}
+{% if globalImageSelectedIndex >= 0 %}
+	{% set globalImageSelectedImg = attribute(options.global_images, globalImageSelectedIndex) %}
+	{% if globalImageSelectedImg.global_image is not empty %}
+		{% set accentImage = get_image(globalImageSelectedImg.global_image) %}
+	{% endif %}
+{% endif %}
+
+<div class="{{blockClassName}}__skill-level {{blockClassName}}__info-item" style="{{elementStyles}}">
+	{% if accentImage is not empty %}
+		<img src="{{accentImage}}" class="post-info__global-image__image" alt="{{accentImageAlt}}" loading="lazy">
+	{% endif %}
+	<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+		Skill Level
+		<span class="{{blockClassName}}__info-item-separator">:</span>
+		<span class="{{blockClassName}}__info-item-value">{{cocktail_skill_level}}</span>
+	</{{field.text_style.text_element_type|ru}}>
+</div>

package/components/block-post-info/post-info/cocktail-taste.twig

@@ -0,0 +1,26 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set cocktail_taste = post.meta('cocktail_taste') %}
+
+{% set accentImage = '' %}
+{% set globalImageSelectedIndex = field.select_global_image - 1 %}
+{% if globalImageSelectedIndex >= 0 %}
+	{% set globalImageSelectedImg = attribute(options.global_images, globalImageSelectedIndex) %}
+	{% if globalImageSelectedImg.global_image is not empty %}
+		{% set accentImage = get_image(globalImageSelectedImg.global_image) %}
+	{% endif %}
+{% endif %}
+
+<div class="{{blockClassName}}__taste {{blockClassName}}__info-item" style="{{elementStyles}}">
+	{% if accentImage is not empty %}
+		<img src="{{accentImage}}" class="post-info__global-image__image" alt="{{accentImageAlt}}" loading="lazy">
+	{% endif %}
+	<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+		Taste
+		<span class="{{blockClassName}}__info-item-separator">:</span>
+		<span class="{{blockClassName}}__info-item-value">{{cocktail_taste}}</span>
+	</{{field.text_style.text_element_type|ru}}>
+</div>

package/components/block-post-info/post-info/cocktail-tasting-notes.twig

@@ -0,0 +1,5 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__cocktail-tasting-notes {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.cocktail_tasting_notes}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/divider.twig

@@ -0,0 +1,3 @@
+	<div class="{{blockClassName}}__divider-container {{blockClassName}}__info-item" style="--post-divider-column-start: {{field.post_divider_column_start}}; --post-divider-column-span: {{field.post_divider_column_span}}">
+				{{ include( 'blocks/divider.twig', {fields : field, block : block, blockClassName : blockClassName}, with_context = false) }}
+			</div>

package/components/block-post-info/post-info/drink-description.twig

@@ -0,0 +1,7 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set drink_desc = post.meta('drink_description') %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__drink-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{drink_desc}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/global-image.twig

@@ -0,0 +1,23 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+
+{% set imageSelect = field.image_select|ru %}
+{% set globalImageFitStyle = '--global-image-fit-style: ' ~ field.global_image_fit_style|ru ~ ';' %}
+{% set globalImageWidth = '--global-image-width: ' ~ field.global_image_width ~ '%;' %}
+{% set globalImageMaxWidth = '--global-image-max-width: ' ~ field.global_image_max_width|ru ~ ';' %}
+{% set globalImageZindex = '--global-image-zindex: ' ~ field.global_image_zindex ~ ';' %}
+{% set globalImagePosition = '--global-image-position: ' ~ field.global_image_position|ru ~ ';' %}
+{% set styleVars = globalImageWidth ~ globalImageMaxWidth ~ globalImageFitStyle ~ globalImageZindex ~ globalImagePosition %}
+
+
+<div class="{{blockClassName}}__global-image {{blockClassName}}__global-image-container {{blockClassName}}__info-item" style=" {{gridLayoutElement}}; {{styleVars}}">
+
+
+	{% set imageSizes = '(min-width: 768px) 10vw, (min-width: 500px) 10vw, 100vw' %}
+	{% set imageFields = [] %}
+	{% set imageFields = imageFields|merge({'enable_image' : true}) %}
+	{% set imageClassname = 'post-info__global-image' %}
+	{% set imageFields = imageFields|merge({'desktop_image' : options.global_images[imageSelect]['global_image']}) %}
+
+	{{ include('components/responsive-image.twig', {fields : imageFields, block : block, blockClassName : imageClassname, desktopSizes: imageSizes}, with_context = false) }}
+
+</div>

package/components/block-post-info/post-info/gradient-overlay.twig

@@ -0,0 +1,6 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+
+{% set gradientVars =  include('components/gradient-overlay.twig', {fields: field}, with_context="false")  %}
+
+{% set elementStyles = gridLayoutElement %}
+<div class="{{blockClassName}}__info-item {{blockClassName}}__gradient-overlay" style="{{ elementStyles }} {{gradientVars}}"></div>

package/components/block-post-info/post-info/person-email.twig

@@ -0,0 +1,10 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+<a href="mailto:{{post.person_email}}" class="{{blockClassName}}__person-email {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+	{% if field.enable_icon %}
+		<img class="{{blockClassName}}__person-email-icon" src="{{options.theme_cta_icons.cta_email_icon}}" alt="email icon">
+	{% endif %}
+	<span>{{field.display_email_as_person_name ?  post.person_name : post.person_email|lower}}</span>
+</a>

package/components/block-post-info/post-info/person-name.twig

@@ -0,0 +1,7 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__person-name {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+	{{post.person_name}}
+</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/person-questionaire.twig

@@ -0,0 +1,15 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+{% set questions = post.meta('person_questionaire') %}
+<div class="{{blockClassName}}__person-questionaire {{blockClassName}}__info-item" style="{{elementStyles}}">
+	<ul class="{{blockClassName}}__person-questionaire-list">
+		{% for question in questions %}
+			<li class="{{blockClassName}}__person-questionaire-list-item">
+				<p class="{{blockClassName}}__person-question">{{question.question}}</p>
+				<p class="{{blockClassName}}__person-answer">{{question.answer}}</p>
+			</li>
+		{% endfor %}
+	</ul>
+</div>

package/components/block-post-info/post-info/person-rating.twig

@@ -0,0 +1,24 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set elementStyles = gridLayoutElement %}
+
+<div class="{{blockClassName}}__person-rating {{blockClassName}}__info-item" style="{{elementStyles}}">
+	{% if post.star_rating > 0  %}
+
+		{% for star in 0..post.star_rating -1  %}
+			<div class="{{blockClassName}}__person-rating-star">
+				<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 19.02">
+					<defs>
+						<style>
+							.d {
+								fill: var(--rating-star-colour);
+							}
+						</style>
+					</defs><g id="a"/><g id="b">
+						<g id="c"><polygon class="d" points="10 15.77 3.82 19.02 5 12.14 0 7.27 6.91 6.26 10 0 13.09 6.26 20 7.27 15 12.14 16.18 19.02 10 15.77"/></g>
+					</g>
+				</svg>
+			</div>
+		{% endfor %}
+	{% endif %}
+
+</div>

package/components/block-post-info/post-info/post-author.twig

@@ -0,0 +1,7 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__post-author {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__post-author-label">' ~ field.label ~ ' </span>'}}<span class="pattern-author.display_name">{{post.author.display_name}}</span></{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/post-categories.twig

@@ -0,0 +1,6 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-categories {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" data-pattern-post-info="post_categories.0.name" style="{{elementStyles}}">{{post.categories.0.name}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/post-headline.twig

@@ -0,0 +1,6 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-headline {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{field.headline_text}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/post-image.twig

@@ -0,0 +1,47 @@
+{% set gridLayoutElement = include('components/grid-layout-element.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 %}
+
+
+<a href="{{post.link}}" data-pattern-post-info="link" class="{{blockClassName}}__post-image-container {{blockClassName}}__info-item {{blockClassName}}__info-item--{{postType}} {{blockClassName}}__post-image-container--{{imageSelect|replace({'_':'-'})}}" style="{{styleVars}} {{gridLayoutElement}} {{positionVars}}">
+
+	{% 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__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-post-info/post-info/post-info-description.twig

@@ -0,0 +1,5 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="post_info_description" class="{{blockClassName}}__post-info-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.post_info_description}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info/post-info/post-info-subtitle.twig

@@ -0,0 +1,5 @@
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
+{% set textStyle = include('components/text-style.twig', {field, post}) %}
+{% set elementStyles = gridLayoutElement ~ textStyle %}
+
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-info-subtitle {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.post_info_subtitle}}</{{field.text_style.text_element_type|ru}}>