@total_onion/onion-library 2.0.83 → 2.0.85

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.scss

@@ -1,7 +1,6 @@
 @use '../fields-core-mixins-v3/core-mixins-v3';
 @use '../fields-core-functions-v3/core-functions-v3';
 @use '../../breakpoints';
-// @use 'Assets/scss/modules/library-modules/core-gradient-designer/core-gradient-designer';
 @use '../component-grid-layout-element-v3/grid-layout-element-v3';
 @use '../component-element-positioning-v3/element-positioning-v3';
 
@@ -546,100 +545,6 @@
 			);
 		}
 	}
-	&__market-toggle {
-		background: var(--black);
-		align-items: center;
-		display: inline-flex;
-		gap: core-functions-v3.fluidSize(10, 'static');
-		padding: core-functions-v3.fluidSize(15, 'static')
-			core-functions-v3.fluidSize(10, 'static');
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			padding: core-functions-v3.fluidSize(15, 'static');
-		}
-	}
-	&__switch {
-		align-items: center;
-		display: inline-flex;
-		gap: core-functions-v3.fluidSize(10, 'static');
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			gap: core-functions-v3.fluidSize(20, 'static');
-		}
-		margin: auto;
-	}
-
-	&__switch-toggle {
-		display: inline-block;
-		position: relative;
-		height: core-functions-v3.fluidSize(26, 'static');
-		width: core-functions-v3.fluidSize(50, 'static');
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			height: core-functions-v3.fluidSize(34, 'static');
-			width: core-functions-v3.fluidSize(68, 'static');
-		}
-
-		input {
-			opacity: 0;
-			width: 0;
-			height: 0;
-		}
-
-		.switch-slider {
-			background-color: var(--palette-default-1);
-			border-radius: core-functions-v3.fluidSize(34, 'static');
-			bottom: 0;
-			cursor: pointer;
-			height: core-functions-v3.fluidSize(26, 'static');
-			left: 0;
-			top: 0;
-			position: absolute;
-			right: 0;
-			transition: 0.4s;
-			width: core-functions-v3.fluidSize(50, 'static');
-			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-				height: core-functions-v3.fluidSize(34, 'static');
-				width: core-functions-v3.fluidSize(68, 'static');
-			}
-
-			&::before {
-				background-color: var(--black);
-				border-radius: 50%;
-				bottom: core-functions-v3.fluidSize(2, 'static');
-				content: '';
-				height: core-functions-v3.fluidSize(22, 'static');
-				right: core-functions-v3.fluidSize(2, 'static');
-				position: absolute;
-				transition: 0.4s;
-				width: core-functions-v3.fluidSize(22, 'static');
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					height: core-functions-v3.fluidSize(30, 'static');
-					width: core-functions-v3.fluidSize(30, 'static');
-				}
-			}
-		}
-
-		input:checked + .switch-slider::before {
-			transform: translateX(core-functions-v3.fluidSize(-24, 'static'));
-			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-				transform: translateX(
-					core-functions-v3.fluidSize(-34, 'static')
-				);
-			}
-		}
-
-		input:checked + .switch-slider {
-			background-color: var(--palette-default-1);
-		}
-	}
-
-	&__switch-text {
-		color: var(--palette-default-5);
-		font-family: var(--tertiary-font-family);
-		font-size: core-functions-v3.fluidSize(10, 'static');
-		text-transform: uppercase;
-		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-			font-size: core-functions-v3.fluidSize(11, 'static');
-		}
-	}
 
 	&__grid {
 		grid-area: grid;
@@ -714,24 +619,6 @@
 		z-index: 1;
 		grid-row: var(--gradient-overlay-row-start, 1) /
 			var(--gradient-overlay-row-end, -1);
-
-		&--gradient-overlay-top,
-		&--gradient-overlay-right,
-		&--gradient-overlay-bottom,
-		&--gradient-overlay-left {
-			// @include core-gradient-designer.gradientDesigner();
-			position: absolute;
-		}
-
-		&--gradient-overlay-vertical {
-			// @include core-gradient-designer.gradientDesignerVertical();
-			position: absolute;
-		}
-
-		&--gradient-overlay-horizontal {
-			// @include core-gradient-designer.gradientDesignerHorizontal();
-			position: absolute;
-		}
 	}
 
 	&__post-image-container-link {
@@ -767,13 +654,6 @@
 	&__info-item {
 		@include grid-layout-element-v3.gridLayoutElement();
 		z-index: 2;
-
-		&:not(.post-type-filter-grid-v3__post-link, .post-type-filter-grid-v3__product-buy-now, .post-type-filter-grid-v3__post-image-container-link, .post-type-filter-grid-v3__post-tags, .post-type-filter-grid-v3__shopify) {
-			* {
-				width: 100%;
-				// @include core-mixins-v3.textStyle();
-			}
-		}
 	}
 
 	&__post-tags {
@@ -851,7 +731,6 @@
 	}
 	&__post-headline {
 		width: 100%;
-		// @include core-mixins-v3.textStyle();
 	}
 	&__post-title-icon {
 		width: 1em;
@@ -1036,10 +915,6 @@
 	}
 
 	&__show-all {
-		&[data-layout='5'] {
-			text-align: left;
-			justify-content: flex-start;
-		}
 		z-index: 2;
 		position: relative;
 		width: auto;
@@ -1051,14 +926,6 @@
 		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
 			width: initial;
 		}
-
-		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-			&[data-layout='2'],
-			&[data-layout='5'] {
-				grid-column: 1;
-				width: max-content;
-			}
-		}
 	}
 
 	// filter elements transition effect. If more effects are needed, add them in ACF and replace 'fade' in css by new transition name

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

@@ -14,12 +14,7 @@
 					v-on:click.prevent="clearAllFilters()" :data-layout="filterLayout">
 					{{ showAllText }}
 				</button>
-				<div v-if="
-					filterLayout == 1 ||
-					filterLayout == 2 ||
-					filterLayout == 4 ||
-					filterLayout == 5
-				" :class="`${blockClassName}__filter-categories`" :data-layout="filterLayout">
+				<div :class="`${blockClassName}__filter-categories`" :data-layout="filterLayout">
 					<div v-if="filterLayout == 4" :class="`${blockClassName}__filter-categories-label`">
 						{{ categoriesTitleText }}
 						<button @click="modalOpen = !modalOpen"></button>
@@ -89,17 +84,6 @@
 						</ul>
 					</div>
 					<div :class="`${blockClassName}__filter-subcategories-container`">
-						<!--    <ul v-if="enablePlaceholderFilter">
-								<li :class="`${blockClassName}__filter-subcategory-list-item ${placeholderFilterActiveStatus ? 'active' : ''}`"
-									v-if="enablePlaceholderFilter" data-categoryid="placeholder">
-									<button
-										:class="`${blockClassName}__filter-subcategory-button ${placeholderFilterActiveStatus ? 'active' : ''}  cmpl-cta-style-${categoryButtonStyle}`">
-										Choose country <img v-if="enableFilterIcon" :src="ctaIcons.cta_filter_icon"
-											:class="`${blockClassName}__filter-subcategory-button-icon style-svg`">
-									</button>
-	
-								</li>
-							</ul>-->
 						<ul v-for="(topCategory, index) in computedCategories?.topLevelCategories" v-bind:key="index"
 							@click="toggleSubcategoryListContainer(topCategory?.term_id)" :class="`${blockClassName}__filter-subcategory-list ${topLevelCategoryActiveStatus(topCategory?.term_id)
 								? blockClassName + '__filter-subcategory-list--active'
@@ -127,28 +111,6 @@
 			</div>
 		</div>
 
-		<div :class="`${blockClassName}__featured-post`" v-if="enableFeaturedPost && activeFilterCategories.length < 1"
-			:style="featuredPostBackgroundColour">
-			<TransitionGroup>
-				<div :class="`${blockClassName}__featured-post-container`" v-if="featuredPost">
-					<FeaturedPostComponent :featuredpost="featuredPost" :fields="fields" :options="options"
-						:mappedIcons="mappedIcons" :ctaStyles="ctaStyles" :ctaIcons="ctaIcons">
-					</FeaturedPostComponent>
-				</div>
-			</TransitionGroup>
-		</div>
-
-		<div :class="`${blockClassName}__market-toggle`" v-if="showMarketToggle">
-			<div :class="`${blockClassName}__switch`">
-				<span :class="`${blockClassName}__switch-text`">All Products</span>
-				<label :class="`${blockClassName}__switch-toggle`">
-					<input type="checkbox" v-model="showAllMarkets" @change="onMarketToggle" />
-					<span class="switch-slider"></span>
-				</label>
-				<span :class="`${blockClassName}__switch-text`">Local Products</span>
-			</div>
-		</div>
-
 		<div :class="`${blockClassName}__grid`">
 			<TransitionGroup :name="fields.filter_results_transition">
 				<div :class="`${blockClassName}__post-container`" :style="`
@@ -191,14 +153,7 @@
 
 <script setup>
 import { ref, reactive, onMounted, useAttrs, computed, watch } from "vue";
-// import likes from "WpPlugins/cbl-better-reviews/public/src/modules/likes.js";
-// import reviews from "WpPlugins/cbl-better-reviews/public/src/modules/reviews.js";
-// import shop from "Assets/js/modules/library-modules/shopify/shop.js";
-// import reviewModal from "WpPlugins/cbl-better-reviews/public/src/modules/review-modal.js";
-// import reservebarPopup from "Assets/js/modules/library-modules/reservebar-popup/reservebar-popup.js";
-// import { isWpAdmin, ctbCTAClickHandler } from "@pernod-ricard-global-cms/jsutils";
 import PostComponent from "./post-type-filter-grid-v3/post-component.vue";
-import FeaturedPostComponent from "./post-type-filter-grid-v3/featured-post-component.vue";
 import TextSearch from "./post-type-filter-grid-v3/text-search.vue";
 
 // get content data from window
@@ -247,7 +202,6 @@ const allPosts = reactive({ items: ptfgData.posts });
 const allProducts = ptfgData.allProducts;
 const postDataConfig = ptfgData.postDataConfig;
 const allCategories = ptfgData.taxonomies;
-const featuredPost = ptfgData.featuredPost;
 const mappedIcons = ptfgData.mappedIcons;
 const ctaStyles = ptfgData.ctaStyles;
 const totalPosts = ptfgData.total;
@@ -269,17 +223,15 @@ const topLevelCategoryButtonStyle = fields.top_level_category_button_style
 	.replace("__", "");
 const categoryButtonStyle = fields.category_button_style?.toString().replace("__", "");
 const loadMoreButtonStyle = fields.load_more_button_style?.toString().replace("__", "");
-// const loadMoreAnimationStyle =
-// 	ctaStyles[parseInt(loadMoreButtonStyle) - 1]?.cta_settings
-// 		?.cta_animation_style;
-const loadMoreAnimationStyle = 1;
+const loadMoreAnimationStyle =
+	ctaStyles[parseInt(loadMoreButtonStyle) - 1]?.cta_settings
+		?.cta_animation_style;
 const toggleFilterButtonStyle = fields.toggle_filter_button_style
 	?.toString()
 	.replace("__", "");
 const showAllButtonStyle = fields.show_all_button_style?.toString().replace("__", "");
 const enableLoadMoreButton = fields.enable_load_more_button;
 const showFilters = fields.show_filters;
-const showMarketToggle = fields.show_market_toggle;
 const showTopLevelFilters = fields.show_top_level_filters;
 const topLevelFiltersActiveOnLoad = fields.top_level_filters_active_on_load;
 const singleActiveTopLevelCategory = fields.single_active_top_level_category;
@@ -304,10 +256,7 @@ const enableFilterIcon = fields.enable_filter_icon;
 const enableTopLevelFilterIcon = fields.enable_top_level_filter_icon;
 const enableStartingFilter = fields.enable_starting_filter;
 const enablePlaceholderFilter = fields.enable_placeholder_filter;
-const enableShopify = JSON.parse(localStorage.getItem("enableShopify"));
 const placeholderFilterText = fields.placeholder_filter_text;
-const enableFeaturedPost = fields.enable_featured_post;
-const featuredPostBackgroundColour = `--featured-post-background-colour: ${fields.featured_post_background_colour}`;
 const initialPostsPerPageDesktop = fields.initial_posts_per_page_desktop;
 const initialPostsPerPageTablet = fields.initial_posts_per_page_portrait;
 const initialPostsPerPageMobile = fields.initial_posts_per_page_mobile;
@@ -315,16 +264,6 @@ const postsPerPageDesktop = showAllPosts ? 999999 : Number(fields.posts_per_page
 const postsPerPageTablet = showAllPosts ? 999999 : Number(fields.posts_per_page_tablet);
 const postsPerPageMobile = showAllPosts ? 999999 : Number(fields.posts_per_page_mobile);
 const loadedCategories = [];
-const subFilterOverflowMobileValue = fields.sub_filter_overflow ? fields.sub_filter_overflow.mobile_overflow.toString().replace("__", "") : 'scroll';
-const subFilterOverflowTabletValue = fields.sub_filter_overflow ? fields.sub_filter_overflow.tablet_overflow.toString().replace("__", "") : 'scroll';
-const subFilterOverflowDesktopValue = fields.sub_filter_overflow ? fields.sub_filter_overflow.desktop_overflow.toString().replace("__", "") : 'scroll';
-const subFilterOverflowMobile = `--sub-filter-overflow-mobile: ${subFilterOverflowMobileValue};`;
-const subFilterOverflowTablet = `--sub-filter-overflow-tablet: ${subFilterOverflowTabletValue};`;
-const subFilterOverflowDesktop = `--sub-filter-overflow-desktop: ${subFilterOverflowDesktopValue};`;
-const subFilterOverflowCenterMobile = `--sub-filter-overflow-center-mobile: ${subFilterOverflowMobileValue === 'wrap' ? 'center' : ''};`;
-const subFilterOverflowCenterTablet = `--sub-filter-overflow-center-tablet: ${subFilterOverflowTabletValue === 'wrap' ? 'center' : ''};`;
-const subFilterOverflowCenterDesktop = `--sub-filter-overflow-center-desktop: ${subFilterOverflowDesktopValue === 'wrap' ? 'center' : ''};`;
-const subFilterOverflowStyles = subFilterOverflowMobile + subFilterOverflowTablet + subFilterOverflowDesktop + subFilterOverflowCenterMobile + subFilterOverflowCenterTablet + subFilterOverflowCenterDesktop
 
 let devicePostsPerPage = postsPerPageDesktop;
 let deviceInitialPostsPerPage = initialPostsPerPageDesktop;
@@ -365,11 +304,6 @@ const computedAllPosts = computed(() => {
 });
 const computedFilteredPosts = computed(() => {
 	let computedPosts = computedAllPosts.value;
-	if (enableFeaturedPost) {
-		computedPosts = computedAllPosts.value.filter(
-			(post) => post.post_data.ID != fields.featured_post
-		);
-	}
 	const posts = filterPosts(computedPosts, activeFilterCategories.value);
 	return sortPosts(posts);
 });
@@ -406,13 +340,6 @@ const resetPage = () => {
 	window.history.pushState({}, "", path);
 };
 
-const computedFeaturedPost = computed(() => {
-	const featuredPost = computedAllPosts.value.filter(
-		(post) => post.id == fields.featured_post
-	);
-	const [post] = featuredPost;
-	return post;
-});
 
 const computedProducts = computed(() => {
 	// const updatedProducts = [];
@@ -522,14 +449,6 @@ const filterPosts = (posts, filterCategoryIds = activeFilterCategories.value) =>
 		});
 	}
 	filteredPosts = searchTerm == null ? filteredPosts : textFilteredPosts;
-	setTimeout(() => {
-		const gridContainer = document.querySelector(".post-type-filter-grid-v3__grid");
-		ctbCTAClickHandler(gridContainer);
-		reservebarPopup();
-		if (enableShopify) {
-			refreshShopifyBuyButtons();
-		}
-	}, 50);
 
 	return filteredPosts;
 };
@@ -553,12 +472,7 @@ const incrementLoadMoreStatus = () => {
 	const url = new URL(window.location);
 	loadMoreStatus.value = Number(loadMoreStatus.value) + 1;
 	url.searchParams.set("pages", loadMoreStatus.value);
-	setTimeout(() => {
-		reviews.init();
-		if (enableShopify) {
-			refreshShopifyBuyButtons();
-		}
-	}, 0);
+
 	if (!isWpAdmin()) {
 		window.history.pushState({}, "", url);
 	}
@@ -805,7 +719,7 @@ const loadMorePosts = async (currentCategoryId = null, { replace = false } = {})
 	form_data.append("includeReviews", ptfgData.includeReviews);
 	form_data.append("reviewDisplayOptions", ptfgData.reviewDisplayOptions);
 	form_data.append("limitPostsToSelectedCategories", fields.limit_posts_to_selected_categories);
-	form_data.append("currentMarket", showAllMarkets.value ? "en" : ptfgData.currentMarket);
+	form_data.append("currentMarket", ptfgData.currentMarket);
 
 	form_data.append(
 		"categoryIds",
@@ -839,12 +753,7 @@ const loadMorePosts = async (currentCategoryId = null, { replace = false } = {})
 				];
 				allPosts.items = sortPosts(mergedArray); // Merge as usual
 			}
-			setTimeout(() => {
-				reviews.init();
-				if (enableShopify) {
-					refreshShopifyBuyButtons();
-				}
-			}, 0);
+
 			isLoading.value = false;
 		}
 	} catch (e) {
@@ -892,47 +801,9 @@ const scrollBackToStart = () => {
 	}
 }
 
-const refreshShopifyBuyButtons = () => {
-	postDataConfig.forEach((item) => {
-		if (item.acf_fc_layout === "shopify_add_to_cart") {
-			document.dispatchEvent(
-				new Event('shop-refresh')
-			)
-		}
-	})
-}
-
-const showAllMarkets = ref(false);
-const onMarketToggle = async () => {
-	isLoading.value = true;
-	page.value = 1;
-	resetPage();
-	const previousPosts = [...allPosts.items];
-	try {
-		await loadMorePosts(null, { replace: true });
-		isLoading.value = false;
-	} catch (e) {
-		console.error("Market toggle failed:", e);
-		allPosts.items = previousPosts;
-		isLoading.value = false;
-	}
-};
-
 onMounted(() => {
 	getLoadMoreStatusParam();
 	setupFilterLayout();
-	reservebarPopup();
-
-
-	setTimeout(() => {
-		reviews.init();
-		if (enableShopify) {
-			shop.loadShops();
-			refreshShopifyBuyButtons();
-		}
-		if (!allPosts.items.length) {
-			loadMorePosts();
-		}
-	}, 500);
+	loadMorePosts();
 });
 </script>

package/components/component-block-padding-v3/block-padding-v3.twig

@@ -1,6 +1,3 @@
-{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
-
-
 {% set paddingVertMultiplierDesktopTop = "--padding-block-multiplier-desktop-top: 0;" %}
 {% set paddingVertMultiplierDesktopBottom = "--padding-block-multiplier-desktop-bottom: 0;" %}
 {% set paddingHorizMultiplierDesktopRight = "--padding-inline-multiplier-desktop-right: 0;" %}
@@ -18,35 +15,18 @@
 {% set paddingVertMultiplierMobile = "--padding-block-multiplier-mobile: 0;" %}
 
 {% if fields.enable_block_padding %}
-	{% set paddingVertMultiplierDesktopTop = "--padding-block-multiplier-desktop-top:" ~ fields.block_vertical_padding_desktop ~ ";"  %}
-	{% set paddingVertMultiplierDesktopBottom = "--padding-block-multiplier-desktop-bottom:" ~ fields.block_vertical_padding_desktop ~ ";"  %}
-	{% set paddingHorizMultiplierDesktopRight = "--padding-inline-multiplier-desktop-right:" ~ fields.block_horizontal_padding_desktop ~ ";" %}
-	{% set paddingHorizMultiplierDesktopLeft = "--padding-inline-multiplier-desktop-left:" ~ fields.block_horizontal_padding_desktop ~ ";" %}
-	{% set paddingVertMultiplierDesktop = "--padding-block-multiplier-desktop:" ~ fields.block_vertical_padding_desktop ~ ";" %}
-	{% set paddingVertMultiplierPortraitTop = "--padding-block-multiplier-portrait-top:" ~ fields.block_vertical_padding_portrait ~ ";"  %}
-	{% set paddingVertMultiplierPortraitBottom = "--padding-block-multiplier-portrait-bottom:" ~ fields.block_vertical_padding_portrait ~ ";"  %}
-	{% set paddingHorizMultiplierPortraitRight = "--padding-inline-multiplier-portrait-right:" ~ fields.block_horizontal_padding_portrait ~ ";" %}
-	{% set paddingHorizMultiplierPortraitLeft = "--padding-inline-multiplier-portrait-left:" ~ fields.block_horizontal_padding_portrait ~ ";" %}
-	{% set paddingVertMultiplierPortrait = "--padding-block-multiplier-portrait:" ~ fields.block_vertical_padding_portrait ~ ";" %}
-	{% set paddingVertMultiplierMobileTop = "--padding-block-multiplier-mobile-top:" ~ fields.block_vertical_padding_mobile ~ ";"  %}
-	{% set paddingVertMultiplierMobileBottom = "--padding-block-multiplier-mobile-bottom:" ~ fields.block_vertical_padding_mobile ~ ";"  %}
-	{% set paddingHorizMultiplierMobileRight = "--padding-inline-multiplier-mobile-right:" ~ fields.block_horizontal_padding_mobile ~ ";" %}
-	{% set paddingHorizMultiplierMobileLeft = "--padding-inline-multiplier-mobile-left:" ~ fields.block_horizontal_padding_mobile ~ ";" %}
-	{% set paddingVertMultiplierMobile = "--padding-block-multiplier-mobile:" ~ fields.block_vertical_padding_mobile ~ ";" %}
-	{% if fields.enable_advanced_block_padding_controls %}
-		{% set paddingVertMultiplierMobileTop = "--padding-block-multiplier-mobile-top:" ~ fields.block_vertical_padding_mobile_top ~ ";" %}
-		{% set paddingVertMultiplierMobileBottom = "--padding-block-multiplier-mobile-bottom:" ~ fields.block_vertical_padding_mobile_bottom ~ ";" %}
-		{% set paddingHorizMultiplierMobileRight = "--padding-inline-multiplier-mobile-right:" ~ fields.block_horizontal_padding_mobile_right ~ ";" %}
-		{% set paddingHorizMultiplierMobileLeft = "--padding-inline-multiplier-mobile-left:" ~ fields.block_horizontal_padding_mobile_left ~ ";" %}
-		{% set paddingVertMultiplierPortraitTop = "--padding-block-multiplier-portrait-top:" ~ fields.block_vertical_padding_portrait_top ~ ";" %}
-		{% set paddingVertMultiplierPortraitBottom = "--padding-block-multiplier-portrait-bottom:" ~ fields.block_vertical_padding_portrait_bottom ~ ";" %}
-		{% set paddingHorizMultiplierPortraitRight = "--padding-inline-multiplier-portrait-right:" ~ fields.block_horizontal_padding_portrait_right ~ ";" %}
-		{% set paddingHorizMultiplierPortraitLeft = "--padding-inline-multiplier-portrait-left:" ~ fields.block_horizontal_padding_portrait_left ~ ";" %}
-		{% set paddingVertMultiplierDesktopTop = "--padding-block-multiplier-desktop-top:" ~ fields.block_vertical_padding_desktop_top ~ ";" %}
-		{% set paddingVertMultiplierDesktopBottom = "--padding-block-multiplier-desktop-bottom:" ~ fields.block_vertical_padding_desktop_bottom ~ ";" %}
-		{% set paddingHorizMultiplierDesktopRight = "--padding-inline-multiplier-desktop-right:" ~ fields.block_horizontal_padding_desktop_right ~ ";" %}
-		{% set paddingHorizMultiplierDesktopLeft = "--padding-inline-multiplier-desktop-left:" ~ fields.block_horizontal_padding_desktop_left ~ ";" %}
-	{% endif %}
+	{% set paddingVertMultiplierMobileTop = "--padding-block-multiplier-mobile-top:" ~ fields.block_vertical_padding_mobile_top ~ ";" %}
+	{% set paddingVertMultiplierMobileBottom = "--padding-block-multiplier-mobile-bottom:" ~ fields.block_vertical_padding_mobile_bottom ~ ";" %}
+	{% set paddingHorizMultiplierMobileRight = "--padding-inline-multiplier-mobile-right:" ~ fields.block_horizontal_padding_mobile_right ~ ";" %}
+	{% set paddingHorizMultiplierMobileLeft = "--padding-inline-multiplier-mobile-left:" ~ fields.block_horizontal_padding_mobile_left ~ ";" %}
+	{% set paddingVertMultiplierPortraitTop = "--padding-block-multiplier-portrait-top:" ~ fields.block_vertical_padding_portrait_top ~ ";" %}
+	{% set paddingVertMultiplierPortraitBottom = "--padding-block-multiplier-portrait-bottom:" ~ fields.block_vertical_padding_portrait_bottom ~ ";" %}
+	{% set paddingHorizMultiplierPortraitRight = "--padding-inline-multiplier-portrait-right:" ~ fields.block_horizontal_padding_portrait_right ~ ";" %}
+	{% set paddingHorizMultiplierPortraitLeft = "--padding-inline-multiplier-portrait-left:" ~ fields.block_horizontal_padding_portrait_left ~ ";" %}
+	{% set paddingVertMultiplierDesktopTop = "--padding-block-multiplier-desktop-top:" ~ fields.block_vertical_padding_desktop_top ~ ";" %}
+	{% set paddingVertMultiplierDesktopBottom = "--padding-block-multiplier-desktop-bottom:" ~ fields.block_vertical_padding_desktop_bottom ~ ";" %}
+	{% set paddingHorizMultiplierDesktopRight = "--padding-inline-multiplier-desktop-right:" ~ fields.block_horizontal_padding_desktop_right ~ ";" %}
+	{% set paddingHorizMultiplierDesktopLeft = "--padding-inline-multiplier-desktop-left:" ~ fields.block_horizontal_padding_desktop_left ~ ";" %}
 {% endif %}
 
 {% set blockPaddingString = paddingVertMultiplierDesktop ~ paddingVertMultiplierDesktopTop ~ paddingVertMultiplierDesktopBottom ~ paddingHorizMultiplierDesktopRight ~ paddingHorizMultiplierDesktopLeft ~ paddingVertMultiplierMobileTop ~ paddingVertMultiplierMobileBottom ~ paddingHorizMultiplierMobileLeft ~ paddingHorizMultiplierMobileRight ~ paddingVertMultiplierMobile ~ paddingVertMultiplierPortraitTop ~ paddingVertMultiplierPortraitBottom ~ paddingHorizMultiplierPortraitLeft ~ paddingHorizMultiplierPortraitRight ~ paddingVertMultiplierPortrait %}