@total_onion/onion-library 1.0.3 → 1.0.5

package/components/block-post-info-v3/post-info-v3/article-description.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 %}
+<style>
+	.{{blockClassName}}__bazaarvoice.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__bazaarvoice {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">
+    {% 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 → block-post-info-v3/post-info-v3}/bazaarvoice-inline.twig

@@ -1,9 +1,12 @@
 {% 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}}">
+<style>
+	.{{blockClassName}}__bazaarvoice.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__bazaarvoice {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">
     {% 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 %}

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/better-reviews.twig

@@ -1,13 +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 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}}">
+<style>
+	.{{blockClassName}}__better-reviews.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__better-reviews {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">
 	{{function( 'do_shortcode', '[better-reviews post_id=' ~ post.id ~ ' display="' ~ display_options ~ '"]' )|raw}}
 </div>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/buy-now.twig

@@ -1,27 +1,25 @@
 {% 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>' : ""}}
+	<style>
+		.{{blockClassName}}__product-buy-now.{{block.id}} {
+			{{widgetStyles}}
+		}
+	</style>
+	<a href="#" class="{{blockClassName}}__product-buy-now {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{block.id}}">
+		<span class="{{blockClassName}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
 	</a>
 {% endif %}
 {% if buyNowOptionSelect|ru == 'link' %}
@@ -30,23 +28,38 @@
 	{% 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>' : ""}}
+	<style>
+		.{{blockClassName}}__product-buy-now {
+			{{widgetStyles}}
+		}
+	</style>
+	<a href="{{productDirectLink.url}}" class="{{blockClassName}}__product-buy-now link {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}}" target="{{directLinkTarget}}">
+		<span class="{{blockClassName}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName ~ '__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>' : ""}}
+	<style>
+		.{{blockClassName}}__product-buy-now {
+			{{widgetStyles}}
+		}
+	</style>
+	<a href="#" class="{{blockClassName}}__product-buy-now ctb {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}}" 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}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName ~ '__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>' : ""}}
+	<style>
+		.{{blockClassName}}__product-buy-now {
+			{{widgetStyles}}
+		}
+	</style>
+	<a href="#" class="dloc-link {{blockClassName}}__product-buy-now wtb {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}}" data-action="where-to-buy" data-filter="{{productPimDebrainId}}" title="{{field.buy_now_text}}">
+		<span class="{{blockClassName}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
 	</a>
 {% endif %}
 {% if buyNowOptionSelect|ru == 'wtb-v2' %}
@@ -56,24 +69,27 @@
 {% 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 drawer_widget_id = attribute(market_settings['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>
+		<a href="#" data-mm-wtbid="{{drawer_widget_id}}" data-mm-ids="{{totalProductEANs}}" data-mm-default-id="{{productEANs}}" class="{{blockClassName}}__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>' : ""}}
+	<style>
+		.{{blockClassName}}__product-buy-now {
+			{{widgetStyles}}
+		}
+	</style>
+	<a href="#" class="{{blockClassName}}__product-buy-now reservebar {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} reservebar-popup-trigger" title="{{field.buy_now_text}}" reservebar-liquid-id="{{reserveBarLiquidId}}">
+		<span class="{{blockClassName}}__cta-span">{{field.buy_now_text}}</span>
+		{{icon ? '<span class="' ~ blockClassName ~ '__icon-link"><img class="style-svg" src="' ~ options.theme_cta_icons.cta_link_icon ~ '"></span>' : ""}}
 	</a>
 {% endif %}

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-glass-type.twig

@@ -1,9 +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_glass_type = post.meta('cocktail_glass_type') %}
-
 {% set accentImage = '' %}
 {% set globalImageSelectedIndex = field.select_global_image - 1 %}
 {% if globalImageSelectedIndex >= 0 %}
@@ -12,10 +10,14 @@
 		{% set accentImage = get_image(globalImageSelectedImg.global_image) %}
 	{% endif %}
 {% endif %}
-
-<div class="{{blockClassName}}__glass-type {{blockClassName}}__info-item" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__glass-type.{{block.id}}, .{{blockClassName}}__glass-type-element.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__glass-type {{blockClassName}}__info-item {{block.id}}">
 	{% 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}}>
+	<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__glass-type-element {{field.text_style.typography_style|ru}} {{block.id}}">{{cocktail_glass_type}}</{{field.text_style.text_element_type|ru}}>
 </div>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-ingredients-description.twig

@@ -3,5 +3,9 @@
 {% 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}}>
+<style>
+	.{{blockClassName}}__cocktail-ingredients-description.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__cocktail-ingredients-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{cocktail_ingredients_desc}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-ingredients-title.twig

@@ -3,5 +3,9 @@
 {% 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}}>
+<style>
+	.{{blockClassName}}__cocktail-ingredients-title.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__cocktail-ingredients-title {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}">{{cocktail_ingredients_title}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-instructions-title.twig

@@ -3,5 +3,9 @@
 {% 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}}>
+<style>
+	.{{blockClassName}}__cocktail-instructions-title.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__cocktail-instructions-title {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{cocktail_instructions_title}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-prep-time.twig

@@ -13,8 +13,12 @@
 		{% set accentImage = get_image(globalImageSelectedImg.global_image) %}
 	{% endif %}
 {% endif %}
-
-<div class="{{blockClassName}}__prep-time {{blockClassName}}__info-item" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__cocktail-prep-time.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__cocktail-prep-time {{blockClassName}}__info-item {{block.id}}">
 	{% if accentImage is not empty %}
 		<img src="{{accentImage}}" class="post-info__global-image__image" alt="{{accentImageAlt}}" loading="lazy">
 	{% endif %}

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-recipe-ingredients.twig

@@ -52,8 +52,12 @@
 {% elseif ozTabOrder == 1 %}
 	{% set defaultIndex = 'oz' %}
 {% endif %}
-
-<div class="{{blockClassName}}__cocktail-recipe-ingredients ingredients-tabs-outer-wrap {{blockClassName}}__info-item" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__cocktail-recipe-ingredients.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__cocktail-recipe-ingredients ingredients-tabs-outer-wrap {{blockClassName}}__info-item {{block.id}}">
 	<div class="ingredients-tabs-inner-wrap">
 		{% if allCustomUnits == false %}
 			{% for ingredients in uniqueMeasurementUnits %}

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-skill-level.twig

@@ -13,8 +13,12 @@
 		{% set accentImage = get_image(globalImageSelectedImg.global_image) %}
 	{% endif %}
 {% endif %}
-
-<div class="{{blockClassName}}__skill-level {{blockClassName}}__info-item" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__cocktail-skill-level.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__cocktail-skill-level {{blockClassName}}__info-item {{block.id}}">
 	{% if accentImage is not empty %}
 		<img src="{{accentImage}}" class="post-info__global-image__image" alt="{{accentImageAlt}}" loading="lazy">
 	{% endif %}

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-taste.twig

@@ -13,8 +13,12 @@
 		{% set accentImage = get_image(globalImageSelectedImg.global_image) %}
 	{% endif %}
 {% endif %}
-
-<div class="{{blockClassName}}__taste {{blockClassName}}__info-item" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__cocktail-taste.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<div class="{{blockClassName}}__cocktail-taste {{blockClassName}}__info-item {{block.id}}">
 	{% if accentImage is not empty %}
 		<img src="{{accentImage}}" class="post-info__global-image__image" alt="{{accentImageAlt}}" loading="lazy">
 	{% endif %}

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/cocktail-tasting-notes.twig

@@ -1,5 +1,9 @@
 {% 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}}>
+<style>
+	.{{blockClassName}}__cocktail-tasting-notes.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__cocktail-tasting-notes {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.cocktail_tasting_notes}}</{{field.text_style.text_element_type|ru}}>

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

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

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/drink-description.twig

@@ -1,7 +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 %}
-
 {% 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}}>
+<style>
+	.{{blockClassName}}__drink-description.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__drink-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{drink_desc}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/global-image.twig

@@ -1,5 +1,4 @@
 {% 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 ~ '%;' %}
@@ -7,17 +6,17 @@
 {% 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}}">
-
-
+<style>
+	.{{blockClassName}}__global-image-container.{{block.id}} {
+		{{elementStyles}}; 
+		{{styleVars}}
+	}
+</style>
+<div class="{{blockClassName}}__global-image {{blockClassName}}__global-image-container {{blockClassName}}__info-item {{block.id}}">
 	{% 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 → block-post-info-v3/post-info-v3}/gradient-overlay.twig

@@ -1,6 +1,10 @@
 {% 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>
+<style>
+	.{{blockClassName}}__gradient-overlay.{{block.id}} {
+		{{elementStyles}}
+		{{gradientVars}}
+	}
+</style>
+<div class="{{blockClassName}}__info-item {{blockClassName}}__gradient-overlay {{block.id}}"></div>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-categories.twig

@@ -1,6 +1,9 @@
 {% 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}}>
+<style>
+	.{{blockClassName}}__post-categories.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-categories {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}" data-pattern-post-info="post_categories.0.name">{{post.categories.0.name}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-headline.twig

@@ -1,6 +1,9 @@
 {% 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}}>
+<style>
+	.{{blockClassName}}__post-headline.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-headline {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{field.headline_text}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-image.twig

@@ -3,45 +3,40 @@
 {% 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}}">
-
+<style>
+	.{{blockClassName}}__post-image-container.{{block.id}} {
+		{{styleVars}}
+		{{gridLayoutElement}}
+		{{positionVars}}
+	}
+</style>
+<a 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__post' %}
-
 	{% if attribute(post, 'post_' ~ imageSelect) %}
-{% set imageFields = imageFields|merge({'image' : 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', {
+	{% 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 → block-post-info-v3/post-info-v3}/post-info-description.twig

@@ -1,5 +1,9 @@
 {% 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}}>
+<style>
+	.{{blockClassName}}__post-info-description.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{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}} {{block.id}}">{{post.post_info_description}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-info-subtitle.twig

@@ -1,5 +1,9 @@
 {% 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}}>
+<style>
+	.{{blockClassName}}__post-info-subtitle.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-info-subtitle {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.post_info_subtitle}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-link.twig

@@ -1,8 +1,6 @@
 {% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
-
 {% 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' %}
@@ -20,20 +18,21 @@
 {% endif %}
 
 {% set widgetStyles = gridLayoutElement ~ postColour ~ postTextColourStyle %}
-
 {% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
 
-<a href="{{post.link}}" data-pattern-post-info="link" class="{{blockClassName}}__post-link {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{blockClassName|default('default-class')}}__cta-animation-style-{{enableCtaAnimation ? ctaAnimationStyle : ''}}" style="{{widgetStyles}}">
-	<span class="{{blockClassName|default('default-class')}}__cta-span">{{field.post_link_text}}</span>
+<style>
+	.{{blockClassName}}__post-link.{{block.id}} {
+		{{widgetStyles}}
+	}
+</style>
+<a href="{{post.link}}" data-pattern-post-info="link" class="{{blockClassName}}__post-link {{blockClassName}}__info-item {{blockClassName}}__cta cmpl-cta-style-{{ctaStyle}} {{blockClassName}}__cta-animation-style-{{enableCtaAnimation ? ctaAnimationStyle : ''}} {{enableCtaAnimation ? 'cmpl-cta-animation-style-' ~ ctaAnimationStyle : ''}} {{block.id}}">
+	<span class="{{blockClassName}}__cta-span">{{field.post_link_text}}</span>
 	{% set icon = enableCtaIcon %}
-
 	{% if icon %}
 		{% set iconType = cta.cta_link.target == '_blank' ? options.theme_cta_icons.cta_external_link_icon : options.theme_cta_icons.cta_link_icon %}
-
 		{% set iconImage = get_image(iconType) %}
-
 		{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
-		<span class="{{ blockClassName|default('default-class') ~ '__icon-link ' ~ blockClassName|default('default-class') ~ '__cta-icon cmpl-cta-icon'}}">
+		<span class="{{ blockClassName ~ '__icon-link ' ~ blockClassName ~ '__cta-icon cmpl-cta-icon'}}">
 			{{ isSVG ? get_raw_svg(iconImage.id) : '<img class="" src="' ~ iconImage.src ~ '">'}}
 		</span>
 	{% endif %}

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-name.twig

@@ -1,5 +1,9 @@
 {% 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-name {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} pattern-post_name" style="{{elementStyles}}">{{post.post_name}}</{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__post-name.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-name {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}" pattern-post_name>{{post.post_name}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-publish-date.twig

@@ -1,7 +1,11 @@
 {% 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-publish-date {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{field.enable_label ? '<span class="post-publish-date-label">' ~ field.label ~ '</span>' : ''}}
-	<span class="pattern-date">{{post.date}}</span></{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__post-publish-date.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-publish-date {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{field.enable_label ? '<span class="post-publish-date-label">' ~ field.label ~ '</span>' : ''}}
+	<span class="pattern-date">{{post.date}}</span>
+</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-tags.twig

@@ -1,16 +1,10 @@
-{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields:field , block }, with_context = false) %}
+{% set gridLayoutElement = include('components/grid-layout-element.twig', { fields:field, block }, with_context = false) %}
 {% set sectionStyles = gridLayoutElement %}
-
-
 <style>
-	.{{blockClassName}}__post-tags {
-
+	.{{blockClassName}}__post-tags.{{block.id}} {
 		{{sectionStyles}}
 	}
 </style>
-
-
-<div class="{{blockClassName}}__post-tags {{blockClassName}}__info-item ">
+<div class="{{blockClassName}}__post-tags {{blockClassName}}__info-item {{block.id}}">
 	<div class="{{blockClassName}}__cta cmpl-cta-style-{{field.cta_style}}">{{post.tags.0.name}}</div>
-
 </div>