@total_onion/onion-library 1.0.3 → 1.0.5

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-text-alternative-style.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_text_alternative_style" class="{{blockClassName}}__post_text_alternative_style {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.post_text_alternative_style}}</{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__post_text_alternative_style.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="post_text_alternative_style" class="{{blockClassName}}__post_text_alternative_style {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.post_text_alternative_style}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/post-title.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_title" class="{{blockClassName}}__title {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.post_title}}</{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__post-title.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="post_title" class="{{blockClassName}}__post-title {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.post_title}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-abv.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}}__info-item {{blockClassName}}__product-abv {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
-	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-abv-label">' ~ field.label ~ ' </span>'}}<span data-pattern-post-info="product_abv">{{post.product_abv}}</span></{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__product-abv.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-abv {{field.text_style.typography_style|ru}} {{block.id}}">
+	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-abv-label">' ~ field.label ~ ' </span>'}}<span data-pattern-post-info="product_abv">{{post.product_abv}}</span>
+</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-age-statement.twig

@@ -1,8 +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 %}
-
+<style>
+	.{{blockClassName}}__age-statement.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
 {% if field.enable_age_statement_label|ru %}
 	<div class="{{blockClassName}}__age-statement-label">{{field.age_statement_label}}</div>
 {% endif %}
-<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__age-statement {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.product_age_statement}}</{{field.text_style.text_element_type|ru}}>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__age-statement {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.product_age_statement}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-cask-type.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 %}
-
-
-<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-cask-type {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__product-cask-type.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-cask-type {{field.text_style.typography_style|ru}}">
 	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-cask-type-label">' ~ field.label ~ ' </span>'}}<span data-pattern-post-info="product_cask_type">{{post.product_cask_type}}</span></{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-country.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 %}
-
-
-<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-country {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__product-country.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-country {{field.text_style.typography_style|ru}} {{block.id}}">
 	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-country-label">' ~ field.label ~ ' </span>'}}{{post.product_country}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-details-brand.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="product_details.brand" class="{{blockClassName}}__product-details-brand {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.product_details.brand}}</{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__product-details-brand.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="product_details.brand" class="{{blockClassName}}__product-details-brand {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.product_details.brand}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-details-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="product_details.description" class="{{blockClassName}}__product-details-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.product_details.description}}</{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__product-details-description.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="product_details.description" class="{{blockClassName}}__product-details-description {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.product_details.description}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-details-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}} data-pattern-post-info="product_details.productName" class="{{blockClassName}}__product-details-name {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.product_details.productName}}</{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__product-details-name.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="product_details.productName" class="{{blockClassName}}__product-details-name {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.product_details.productName}}</{{field.text_style.text_element_type|ru}}>

package/components/block-post-info-v3/post-info-v3/product-details-price.twig

@@ -0,0 +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 %}
+<style>
+	.{{blockClassName}}__product-details-price.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="product_details.price" class="{{blockClassName}}__product-details-price {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.product_details.price}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-finish.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 %}
-
-
-<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-finish {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__product-finish.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-finish {{field.text_style.typography_style|ru}} {{block.id}}">
 	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-finish-label">' ~ field.label ~ ' </span>'}}<span data-pattern-post-info="product_finish">{{post.product_finish}}</span></{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-history.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 %}
-
-
-<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-history {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__product-history.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-history {{field.text_style.typography_style|ru}}">
 	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-history-label">' ~ field.label ~ ' </span>'}}<span class="pattern-product_history">{{post.product_history}}</span></{{field.text_style.text_element_type|ru}}>

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

@@ -1,3 +1,9 @@
 {% set gridLayoutElement = include('components/grid-layout-element.twig', { fields: field, block: block }, with_context = false) %}
 {% set image = get_image(post.product_logo) %}
-<img src="{{image.src}}" srcset="{{image.srcset}}" width="{{image.width}}" height="{{image.height}}" alt="{{image.alt}}" class="{{blockClassName}}__product-logo {{blockClassName}}__info-item pattern-product_logo" style="{{gridLayoutElement}}; --logo-max-width-desktop: {{field.logo_max_width_desktop}}; --logo-max-width-mobile: {{field.logo_max_width_mobile}}"/>
+{% set elementStyles = gridLayoutElement %}
+<style>
+	.{{blockClassName}}__product-logo.{{block.id}} {
+		{{elementStyles}}; --logo-max-width-desktop: {{field.logo_max_width_desktop}}; --logo-max-width-mobile: {{field.logo_max_width_mobile}}
+	}
+</style>
+<img src="{{image.src}}" srcset="{{image.srcset}}" width="{{image.width}}" height="{{image.height}}" alt="{{image.alt}}" class="{{blockClassName}}__product-logo {{blockClassName}}__info-item pattern-product_logo {{block.id}}">

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-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}} data-pattern-post-info="product_name" class="{{blockClassName}}__product-name {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.product_name}}</{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__product-name.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="product_name" class="{{blockClassName}}__product-name {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.product_name}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-nose.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 %}
-
-
-<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-nose {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__product-nose.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-nose {{field.text_style.typography_style|ru}} {{block.id}}">
 	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-nose-label">' ~ field.label ~ ' </span>'}}<span data-pattern-post-info="product_nose">{{post.product_nose}}</span></{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-price.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="product-price" class="{{blockClassName}}__product-price {{blockClassName}}__info-item {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">{{post.product_price}}</{{field.text_style.text_element_type|ru}}>
+<style>
+	.{{blockClassName}}__product-price.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} data-pattern-post-info="product-price" class="{{blockClassName}}__product-price {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{post.product_price}}</{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-taste.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 %}
-
-
-<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-taste {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__product-taste.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-taste {{field.text_style.typography_style|ru}} {{block.id}}">
 	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-taste-label">' ~ field.label ~ ' </span>'}}<span data-pattern-post-info="product_taste">{{post.product_taste}}</span></{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/product-whisky-type.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 %}
-
-
-<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-whisky-type {{field.text_style.typography_style|ru}}" style="{{elementStyles}}">
+<style>
+	.{{blockClassName}}__product-whisky-type.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+<{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__info-item {{blockClassName}}__product-whisky-type {{field.text_style.typography_style|ru}} {{block.id}}">
 	{{field.enable_label ? '<span class="' ~ blockClassName ~ '__product-whisky-type-label">' ~ field.label ~ ' </span>'}}<span data-pattern-post-info="product_whisky_type">{{post.product_whisky_type}}</span></{{field.text_style.text_element_type|ru}}>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/reservebar-add-to-cart.twig

@@ -3,9 +3,13 @@
 {% set elementStyles = gridLayoutElement ~ textStyle %}
 
 {% if field.rb_grouping_id is defined and field.rb_grouping_id is not empty %}
-	<div class='{{blockClassName}}__rb-add-to-cart rb-add-to-cart'>
-		<h4>{{__('Enter your address to check online availability', 'Jefferson Theme')}}</h4>
-
+<style>
+	.{{blockClassName}}__rb-add-to-cart.{{block.id}} {
+		{{elementStyles}}
+	}
+</style>
+	<div class="{{blockClassName}}__rb-add-to-cart rb-add-to-cart {{block.id}}">
+		<h4>{{__('Enter your address to check online availability', 'Global Theme')}}</h4>
 		<div class="rb-add-to-cart-wrapper">
 			<div liquid-address-typeahead></div>
 			<div liquid-id="GROUPING-{{field.rb_grouping_id}}">
@@ -20,7 +24,6 @@
 						<button disabled class="liquid-cart-atc">Add to Cart</button>
 					</div>
 				</div>
-
 				{# <a href="#storelocator" title="{{__('Find Jefferson’s Reserve nearby', 'Jefferson Theme')}}" class="wtb-cta">{{__('Find Jefferson’s Reserve nearby', 'Jefferson Theme')}}</a> #}
 			</div>
 		</div>

package/components/{block-post-info/post-info → block-post-info-v3/post-info-v3}/shopify-add-to-cart.twig

@@ -1,31 +1,31 @@
 {% 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 productType = field.product_type|ru %}
-
 {% if productType == 'standard' %}
+	<style>
+		.{{blockClassName}}__shopify-add-to-cart.{{block.id}} {
+			{{widgetStyles}}
+		}
+	</style>
 	{% set productId = post.meta('shopify_pim_id') %}
-	<div class="{{blockClassName|default('default-class')}} {{blockClassName|default('default-class')}}__info-item shopify-add-to-cart shopify-wrapper shopify-integration has-shop shop-shopify" data-pim="{{ productId }}" data-label="{{field.shopify_text}}" data-shopifya2cbtnstyle="cmpl-cta-style-{{field.cta_style|default('1')}}" style="{{widgetStyles}}"></div>
-
+	<div class="{{blockClassName}} {{blockClassName}}__info-item {{blockClassName}}__shopify-add-to-cart shopify-add-to-cart shopify-wrapper shopify-integration has-shop shop-shopify {{block.id}}" data-pim="{{ productId }}" data-label="{{field.shopify_text}}" data-shopifya2cbtnstyle="cmpl-cta-style-{{field.cta_style|default('1')}}"></div>
 {% endif %}
 {% if productType == 'engraved' %}
+	<style>
+		.{{blockClassName}}__shopify-add-to-cart.{{block.id}} {
+			{{widgetStyles}}
+		}
+	</style>
 	{% set productEngravedId = post.meta('shopify_engraved_pim_id') %}
-	<div class="{{blockClassName|default('default-class')}} {{blockClassName|default('default-class')}}__info-item shopify-add-to-cart shopify-wrapper shopify-integration has-shop shop-shopify engraved" data-pim="{{ productEngravedId }}" data-label="{{field.shopify_text}}" data-shopifya2cbtnstyle="cmpl-cta-style-{{field.cta_style|default('1')}}" style="{{widgetStyles}}"></div>
-
+	<div class="{{blockClassName}} {{blockClassName}}__info-item {{blockClassName}}__shopify-add-to-cart shopify-add-to-cart shopify-wrapper shopify-integration has-shop shop-shopify engraved {{block.id}}" data-pim="{{ productEngravedId }}" data-label="{{field.shopify_text}}" data-shopifya2cbtnstyle="cmpl-cta-style-{{field.cta_style|default('1')}}"></div>
 {% endif %}

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

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

package/components/block-post-info-v3/post-info-v3-extra.scss

@@ -0,0 +1,14 @@
+// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+// @use 'Assets/scss/modules/library-modules/grid-layout-element/grid-layout-element';
+// @use 'Assets/scss/theme/breakpoints';
+
+@mixin additionalStyles {
+	&:has(.post-info__post-cover-link.post-cover-link-hover-effect) {
+		&:hover {
+			.post-info__info-item {
+				color: red;
+			}
+		}
+	}
+}

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

@@ -1,9 +1,8 @@
 // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
-import extraJs from 'Assets/js/blocks/post-info/post-info-extra';
-
-export default function postinfoJs(options = {}) {
+import extraJs from 'Assets/js/blocks/post-info-v3/post-info-v3-extra';
+export default function postinfov3Js(options = {}) {
+	const {block} = options;
 	try {
-		const {block} = options;
 		extraJs(block);
 	} catch (error) {
 		console.error(error);

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

@@ -2,8 +2,8 @@
 
 acf_register_block_type(
 	array(
-		'name'            => 'post-info',
-		'title'           => __('Post info', 'Global-theme Admin'),
+		'name'            => 'post-info-v3',
+		'title'           => __('Post info v3', 'Global-theme Admin'),
 		'render_callback' => 'athena_block_render_post_object',
 		'category'        => 'common',
 		'icon'            => get_svg_icon_content('brick.svg'),

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

@@ -2,21 +2,28 @@
 @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
 @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
 @use 'Assets/scss/theme/breakpoints';
-@use 'Assets/scss/blocks/post-info/post-info-extra';
+@use 'Assets/scss/blocks/post-info-v3/post-info-v3-extra';
 @use 'Assets/scss/modules/library-modules/grid-layout-container/grid-layout-container';
 @use 'Assets/scss/modules/library-modules/grid-layout-element/grid-layout-element';
 @use 'Assets/scss/modules/library-modules/element-positioning/element-positioning';
 @use 'Assets/scss/modules/library-modules/gradient-overlay/gradient-overlay';
 @use 'Assets/scss/modules/library-modules/social-media-share/social-media-share';
 @use 'Assets/scss/modules/library-modules/better-reviews/better-reviews';
+@use 'Assets/scss/modules/library-modules/truncated-text/truncated-text';
+@use 'Assets/scss/modules/library-modules/post-author/post-author';
+@use 'Assets/scss/modules/library-modules/content-tooltip/content-tooltip';
 
-.post-info {
+.post-info-v3 {
 	display: grid;
 	grid-auto-columns: 1fr;
 	grid-template: 'main' / 1fr;
 	@include grid-layout-container.gridLayoutContainer();
 	@include social-media-share.social-media-share();
 	@include better-reviews.better-reviews();
+	@include truncated-text.truncated-text();
+	@include post-author.postauthorinfo();
+	@include content-tooltip.content-tooltip();
+
 	&__post-cover-link {
 		grid-area: unset;
 		position: absolute;
@@ -26,49 +33,68 @@
 		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.gridLayoutElement();
 		width: 100%;
 		position: relative;
-		&:not(.post-info__cta) {
+
+		&:not(.post-info-v3__cta) {
 			@include core-mixins.textStyle();
-			@include core-mixins.defaultThemeTextColours();
 		}
 	}
-	&__better-reviews {
-		@include grid-layout-element.gridLayoutElement();
-	}
+
 	&__cta-selection-container {
 		@include grid-layout-element.gridLayoutElement();
 	}
+
 	&__cta {
 		display: flex;
 	}
+
 	&__cta-style-post-colour,
 	&__cta-style-post-text-colour-style {
 		padding-block: core-functions.fluidSize(10, 'mobile');
 		padding-inline: core-functions.fluidSize(20, 'mobile');
+
 		@include core-mixins.device(breakpoints.$tabPortrait) {
 			padding-block: core-functions.fluidSize(10, 'portrait');
 			padding-inline: core-functions.fluidSize(20, 'portrait');
 		}
+
 		@include core-mixins.device(breakpoints.$tabLandscape) {
 			padding-block: core-functions.fluidSize(10, 'desktop');
 			padding-inline: core-functions.fluidSize(20, 'desktop');
 		}
 	}
+
 	&__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.gradientOverlay();
@@ -84,8 +110,10 @@
 	&__post-image-container {
 		display: grid;
 		grid-template: 'main' / 1fr;
+
 		&--image-accent {
 			position: relative;
+
 			img,
 			svg {
 				margin: unset;
@@ -100,15 +128,15 @@
 		margin-inline: auto;
 		grid-area: main;
 		height: auto;
-		aspect-ratio: var(
-			--image-aspect-ratio-mobile,
-			var(--image-aspect-ratio-desktop)
-		);
+		aspect-ratio: var(--image-aspect-ratio-mobile,
+				var(--image-aspect-ratio-desktop));
 		@include grid-layout-element.gridLayoutElement();
 		width: var(--post-image-width-mobile);
+
 		@include core-mixins.device(breakpoints.$tabPortrait) {
 			aspect-ratio: var(--image-aspect-ratio-portrait);
 		}
+
 		@include core-mixins.device(breakpoints.$tabLandscape) {
 			width: var(--post-image-width-desktop);
 			aspect-ratio: var(--image-aspect-ratio-desktop);
@@ -125,50 +153,57 @@
 		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.fluidSize(
-			var(--logo-max-width-mobile),
-			'mobile'
-		);
-		@include core-mixins.device(breakpoints.$tabLandscape) {
-			max-width: core-functions.fluidSize(
-				var(--logo-max-width-desktop),
-				'desktop'
+		max-width: core-functions.fluidSize(var(--logo-max-width-mobile),
+				'mobile'
 			);
+
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			max-width: core-functions.fluidSize(var(--logo-max-width-desktop),
+					'desktop'
+				);
 		}
 	}
+
 	&__person-rating {
 		display: flex;
 		gap: 1em;
 	}
+
 	&__person-rating-star {
 		--rating-star-colour: gold;
 		width: core-functions.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.gridLayoutElement();
 	}
 
-	@include post-info-extra.additionalStyles();
-}
+	@include post-info-v3-extra.additionalStyles();
+}