Refactor prettyblock spacing styles

Author: CySSoO

views/templates/hook/prettyblocks/_partials/spacing_style.tpl

@@ -12,7 +12,7 @@
     'margin_bottom' => 'margin-bottom'
   )}
   {foreach from=$spacingMap key=spacingKey item=cssProperty}
-    {if isset($spacing[$spacingKey]) && $spacing[$spacingKey]}
+    {if isset($spacing[$spacingKey]) && $spacing[$spacingKey] !== '' && $spacing[$spacingKey] !== null}
       {$cssProperty}:{$spacing[$spacingKey]|escape:'htmlall':'UTF-8'};
     {/if}
   {/foreach}
@@ -23,7 +23,7 @@
     'margin_bottom_mobile' => '--margin-bottom-mobile'
   )}
   {foreach from=$mobileSpacingMap key=spacingKey item=cssProperty}
-    {if isset($spacing[$spacingKey]) && $spacing[$spacingKey]}
+    {if isset($spacing[$spacingKey]) && $spacing[$spacingKey] !== '' && $spacing[$spacingKey] !== null}
       {$cssProperty}:{$spacing[$spacingKey]|escape:'htmlall':'UTF-8'};
     {/if}
   {/foreach}

views/templates/hook/prettyblocks/prettyblock_accordeon.tpl

@@ -16,22 +16,25 @@
  *  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 *}
 {include file='module:everblock/views/templates/hook/prettyblocks/_partials/visibility_class.tpl'}
+{include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$block.settings assign='prettyblock_spacing_style'}
 
 <div id="block-{$block.id_prettyblocks}" class="{if $block.settings.default.force_full_width}container-fluid px-0 mx-0{elseif $block.settings.default.container}container{/if}{$prettyblock_visibility_class}">
   {if $block.settings.default.force_full_width}
     <div class="row gx-0 no-gutters">
   {elseif $block.settings.default.container}
     <div class="row">
   {/if}
-<div class="{if $block.settings.default.container}container{/if}"  style="{if isset($block.settings.padding_left) && $block.settings.padding_left}padding-left:{$block.settings.padding_left|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.padding_right) && $block.settings.padding_right}padding-right:{$block.settings.padding_right|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.padding_top) && $block.settings.padding_top}padding-top:{$block.settings.padding_top|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.padding_bottom) && $block.settings.padding_bottom}padding-bottom:{$block.settings.padding_bottom|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.margin_left) && $block.settings.margin_left}margin-left:{$block.settings.margin_left|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.margin_right) && $block.settings.margin_right}margin-right:{$block.settings.margin_right|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.margin_top) && $block.settings.margin_top}margin-top:{$block.settings.margin_top|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.margin_bottom) && $block.settings.margin_bottom}margin-bottom:{$block.settings.margin_bottom|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.default.bg_color) && $block.settings.default.bg_color}background-color:{$block.settings.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
+<div class="{if $block.settings.default.container}container{/if}"  style="{$prettyblock_spacing_style}{if isset($block.settings.default.bg_color) && $block.settings.default.bg_color}background-color:{$block.settings.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
     {if $block.settings.default.container}
         <div class="row">
     {/if}
     <div class="accordion everblock-accordeon" id="prettyAccordion-{$block.id_prettyblocks}">
       {assign var="counter" value=1}
       {foreach from=$block.states item=$state key=$key}
         <div class="card">
-          <div class="card-header" id="heading{$counter}"  style="{if isset($state.padding_left) && $state.padding_left}padding-left:{$state.padding_left|escape:'htmlall':'UTF-8'};{/if}{if isset($state.padding_right) && $state.padding_right}padding-right:{$state.padding_right|escape:'htmlall':'UTF-8'};{/if}{if isset($state.padding_top) && $state.padding_top}padding-top:{$state.padding_top|escape:'htmlall':'UTF-8'};{/if}{if isset($state.padding_bottom) && $state.padding_bottom}padding-bottom:{$state.padding_bottom|escape:'htmlall':'UTF-8'};{/if}{if isset($state.margin_left) && $state.margin_left}margin-left:{$state.margin_left|escape:'htmlall':'UTF-8'};{/if}{if isset($state.margin_right) && $state.margin_right}margin-right:{$state.margin_right|escape:'htmlall':'UTF-8'};{/if}{if isset($state.margin_top) && $state.margin_top}margin-top:{$state.margin_top|escape:'htmlall':'UTF-8'};{/if}{if isset($state.margin_bottom) && $state.margin_bottom}margin-bottom:{$state.margin_bottom|escape:'htmlall':'UTF-8'};{/if}{if isset($state.default.bg_color) && $state.default.bg_color}background-color:{$state.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
+          {include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$state assign='prettyblock_state_spacing_style'}
+
+          <div class="card-header" id="heading{$counter}"  style="{$prettyblock_state_spacing_style}{if isset($state.default.bg_color) && $state.default.bg_color}background-color:{$state.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
             <span class="mb-0 h2">
               <button class="btn btn-link btn-block w-100 text-left" type="button" data-toggle="collapse" data-target="#everblock-{$block.id_prettyblocks}-collapse{$counter}" data-bs-toggle="collapse" data-bs-target="#everblock-{$block.id_prettyblocks}-collapse{$counter}" aria-expanded="true" aria-controls="everblock-{$block.id_prettyblocks}-collapse{$counter}">
                 {if isset($state.title_color) && $state.title_color}

views/templates/hook/prettyblocks/prettyblock_alert.tpl

@@ -16,6 +16,7 @@
  *  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 *}
 {include file='module:everblock/views/templates/hook/prettyblocks/_partials/visibility_class.tpl'}
+{include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$block.settings assign='prettyblock_spacing_style'}
 
 <div id="block-{$block.id_prettyblocks}" class="{if $block.settings.default.force_full_width}container-fluid px-0 mx-0{elseif $block.settings.default.container}container{/if}{$prettyblock_visibility_class}">
   {if $block.settings.default.force_full_width}
@@ -24,12 +25,14 @@
     <div class="row">
   {/if}
 
-<div class="{if $block.settings.default.container}container{/if}"  style="{if isset($block.settings.padding_left) && $block.settings.padding_left}padding-left:{$block.settings.padding_left|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.padding_right) && $block.settings.padding_right}padding-right:{$block.settings.padding_right|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.padding_top) && $block.settings.padding_top}padding-top:{$block.settings.padding_top|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.padding_bottom) && $block.settings.padding_bottom}padding-bottom:{$block.settings.padding_bottom|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.margin_left) && $block.settings.margin_left}margin-left:{$block.settings.margin_left|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.margin_right) && $block.settings.margin_right}margin-right:{$block.settings.margin_right|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.margin_top) && $block.settings.margin_top}margin-top:{$block.settings.margin_top|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.margin_bottom) && $block.settings.margin_bottom}margin-bottom:{$block.settings.margin_bottom|escape:'htmlall':'UTF-8'};{/if}{if isset($block.settings.default.bg_color) && $block.settings.default.bg_color}background-color:{$block.settings.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
+<div class="{if $block.settings.default.container}container{/if}"  style="{$prettyblock_spacing_style}{if isset($block.settings.default.bg_color) && $block.settings.default.bg_color}background-color:{$block.settings.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
     {if $block.settings.default.container}
         <div class="row">
     {/if}
     {foreach from=$block.states item=state key=key}
-        <div id="block-{$block.id_prettyblocks}-{$key}" class="everblock{if isset($state.css_class) && $state.css_class} {$state.css_class|escape:'htmlall':'UTF-8'}{/if}" style="{if isset($state.padding_left) && $state.padding_left}padding-left:{$state.padding_left|escape:'htmlall':'UTF-8'};{/if}{if isset($state.padding_right) && $state.padding_right}padding-right:{$state.padding_right|escape:'htmlall':'UTF-8'};{/if}{if isset($state.padding_top) && $state.padding_top}padding-top:{$state.padding_top|escape:'htmlall':'UTF-8'};{/if}{if isset($state.padding_bottom) && $state.padding_bottom}padding-bottom:{$state.padding_bottom|escape:'htmlall':'UTF-8'};{/if}{if isset($state.margin_left) && $state.margin_left}margin-left:{$state.margin_left|escape:'htmlall':'UTF-8'};{/if}{if isset($state.margin_right) && $state.margin_right}margin-right:{$state.margin_right|escape:'htmlall':'UTF-8'};{/if}{if isset($state.margin_top) && $state.margin_top}margin-top:{$state.margin_top|escape:'htmlall':'UTF-8'};{/if}{if isset($state.margin_bottom) && $state.margin_bottom}margin-bottom:{$state.margin_bottom|escape:'htmlall':'UTF-8'};{/if}{if isset($state.default.bg_color) && $state.default.bg_color}background-color:{$state.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
+        {include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$state assign='prettyblock_state_spacing_style'}
+
+        <div id="block-{$block.id_prettyblocks}-{$key}" class="everblock{if isset($state.css_class) && $state.css_class} {$state.css_class|escape:'htmlall':'UTF-8'}{/if}" style="{$prettyblock_state_spacing_style}{if isset($state.default.bg_color) && $state.default.bg_color}background-color:{$state.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
           <div class="alert alert-{$state.alert_type}" role="alert">
           {$state.content nofilter}
           </div>

views/templates/hook/prettyblocks/prettyblock_button.tpl

@@ -23,17 +23,9 @@
   {elseif $block.settings.default.container}
     <div class="row">
   {/if}
-      {foreach from=$block.states item=state key=key}
-            <div class="col-12{if isset($state.css_class) && $state.css_class} {$state.css_class|escape:'htmlall':'UTF-8'}{/if} style="
-                {if $state.padding_left}padding-left:{$state.padding_left};{/if}
-                {if $state.padding_right}padding-right:{$state.padding_right};{/if}
-                {if $state.padding_top}padding-top:{$state.padding_top};{/if}
-                {if $state.padding_bottom}padding-bottom:{$state.padding_bottom};{/if}
-                {if $state.margin_left}margin-left:{$state.margin_left};{/if}
-                {if $state.margin_right}margin-right:{$state.margin_right};{/if}
-                {if $state.margin_top}margin-top:{$state.margin_top};{/if}
-                {if $state.margin_bottom}margin-bottom:{$state.margin_bottom};{/if}
-              ">
+        {foreach from=$block.states item=state key=key}
+              {include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$state assign='prettyblock_state_spacing_style'}
+              <div class="col-12{if isset($state.css_class) && $state.css_class} {$state.css_class|escape:'htmlall':'UTF-8'}{/if} style="{$prettyblock_state_spacing_style}">
             {if isset($state.obfuscate) && $state.obfuscate}
             {assign var="obflink" value=$state.button_link|base64_encode}
             <span class="obflink class="btn btn-{$state.button_type} data-obflink="{$obflink}"{if isset($state.color) && $state.color} style="color:{$state.color|escape:'htmlall':'UTF-8'};"{/if}>
@@ -49,4 +41,4 @@
   {if $block.settings.default.force_full_width || $block.settings.default.container}
     </div>
   {/if}
-</div>
+</div>

views/templates/hook/prettyblocks/prettyblock_category_highlight.tpl

@@ -29,17 +29,9 @@
     {else}
     {assign var='category_link' value='#'}
     {/if}
+    {include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$state assign='prettyblock_category_highlight_state_spacing_style'}
     <div id="block-{$block.id_prettyblocks}-{$key}" class="col {$state.css_class|escape:'htmlall'}">
-      <div class="position-relative overflow-hidden h-100 w-100" style="
-        {if $state.padding_left}padding-left:{$state.padding_left};{/if}
-        {if $state.padding_right}padding-right:{$state.padding_right};{/if}
-        {if $state.padding_top}padding-top:{$state.padding_top};{/if}
-        {if $state.padding_bottom}padding-bottom:{$state.padding_bottom};{/if}
-        {if $state.margin_left}margin-left:{$state.margin_left};{/if}
-        {if $state.margin_right}margin-right:{$state.margin_right};{/if}
-        {if $state.margin_top}margin-top:{$state.margin_top};{/if}
-        {if $state.margin_bottom}margin-bottom:{$state.margin_bottom};{/if}
-      ">
+      <div class="position-relative overflow-hidden h-100 w-100" style="{$prettyblock_category_highlight_state_spacing_style}">
         {if $state.obfuscate}
           {assign var="obflink" value=$category_link|base64_encode}
           <span class="obflink obfme d-block h-100 w-100" data-obflink obfme="{$obflink}">

views/templates/hook/prettyblocks/prettyblock_category_price.tpl

@@ -27,9 +27,10 @@
       {/if}
         {assign var=imageHeight value=$block.settings.default.image_height|default:150}
         {foreach from=$block.states item=state key=key}
+          {include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$state assign='prettyblock_category_price_state_spacing_style'}
           {assign var=data value=$block.extra.state_data[$key]|default:null}
           {if $data}
-            <div id="block-{$block.id_prettyblocks}-{$key}" class="col text-center{if $state.css_class} {$state.css_class|escape:'htmlall'}{/if}" style="{if $state.padding_left}padding-left:{$state.padding_left};{/if}{if $state.padding_right}padding-right:{$state.padding_right};{/if}{if $state.padding_top}padding-top:{$state.padding_top};{/if}{if $state.padding_bottom}padding-bottom:{$state.padding_bottom};{/if}{if $state.margin_left}margin-left:{$state.margin_left};{/if}{if $state.margin_right}margin-right:{$state.margin_right};{/if}{if $state.margin_top}margin-top:{$state.margin_top};{/if}{if $state.margin_bottom}margin-bottom:{$state.margin_bottom};{/if}">
+            <div id="block-{$block.id_prettyblocks}-{$key}" class="col text-center{if $state.css_class} {$state.css_class|escape:'htmlall'}{/if}" style="{$prettyblock_category_price_state_spacing_style}">
               <a href="{$data.category_link|default:'#'}" class="d-flex flex-column align-items-center text-decoration-none h-100" title="{$data.title|escape:'htmlall'}">
                 {if $data.image_url}
                   <div class="d-flex align-items-center justify-content-center mb-2 w-100" style="height:{$imageHeight}px;">
@@ -55,9 +56,10 @@
         <div class="d-flex flex-nowrap">
         {assign var=imageHeight value=$block.settings.default.image_height|default:150}
         {foreach from=$block.states item=state key=key}
+          {include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$state assign='prettyblock_category_price_state_spacing_style'}
           {assign var=data value=$block.extra.state_data[$key]|default:null}
           {if $data}
-            <div id="block-{$block.id_prettyblocks}-{$key}-mobile" class="text-center me-3{if $state.css_class} {$state.css_class|escape:'htmlall'}{/if}" style="flex:0 0 calc(100% / 3.5 - 1rem); scroll-snap-align:start;{if $state.padding_left}padding-left:{$state.padding_left};{/if}{if $state.padding_right}padding-right:{$state.padding_right};{/if}{if $state.padding_top}padding-top:{$state.padding_top};{/if}{if $state.padding_bottom}padding-bottom:{$state.padding_bottom};{/if}{if $state.margin_left}margin-left:{$state.margin_left};{/if}{if $state.margin_right}margin-right:{$state.margin_right};{/if}{if $state.margin_top}margin-top:{$state.margin_top};{/if}{if $state.margin_bottom}margin-bottom:{$state.margin_bottom};{/if}">
+            <div id="block-{$block.id_prettyblocks}-{$key}-mobile" class="text-center me-3{if $state.css_class} {$state.css_class|escape:'htmlall'}{/if}" style="flex:0 0 calc(100% / 3.5 - 1rem); scroll-snap-align:start; {$prettyblock_category_price_state_spacing_style}">
               <a href="{$data.category_link|default:'#'}" class="d-flex flex-column align-items-center text-decoration-none h-100" title="{$data.title|escape:'htmlall'}">
                 {if $data.image_url}
                     <div class="d-flex align-items-center justify-content-center mb-2 w-100" style="height:{$imageHeight}px;">

views/templates/hook/prettyblocks/prettyblock_category_products.tpl

@@ -26,8 +26,9 @@
   {/if}
     <div class="{if $block.settings.default.container}container{/if}">
       {foreach from=$block.states item=state key=key}
+        {include file='module:everblock/views/templates/hook/prettyblocks/_partials/spacing_style.tpl' spacing=$state assign='prettyblock_state_spacing_style'}
         <div id="block-{$block.id_prettyblocks}-{$key}" class="{if isset($state.css_class) && $state.css_class}{$state.css_class|escape:'htmlall':'UTF-8'}{/if}"
-             style="{if $state.padding_left}padding-left:{$state.padding_left|escape:'htmlall':'UTF-8'};{/if}{if $state.padding_right}padding-right:{$state.padding_right|escape:'htmlall':'UTF-8'};{/if}{if $state.padding_top}padding-top:{$state.padding_top|escape:'htmlall':'UTF-8'};{/if}{if $state.padding_bottom}padding-bottom:{$state.padding_bottom|escape:'htmlall':'UTF-8'};{/if}{if $state.margin_left}margin-left:{$state.margin_left|escape:'htmlall':'UTF-8'};{/if}{if $state.margin_right}margin-right:{$state.margin_right|escape:'htmlall':'UTF-8'};{/if}{if $state.margin_top}margin-top:{$state.margin_top|escape:'htmlall':'UTF-8'};{/if}{if $state.margin_bottom}margin-bottom:{$state.margin_bottom|escape:'htmlall':'UTF-8'};{/if}{if $state.background_color}background-color:{$state.background_color|escape:'htmlall':'UTF-8'};{/if}{if $state.text_color}color:{$state.text_color|escape:'htmlall':'UTF-8'};{/if}">
+             style="{$prettyblock_state_spacing_style}{if $state.background_color}background-color:{$state.background_color|escape:'htmlall':'UTF-8'};{/if}{if $state.text_color}color:{$state.text_color|escape:'htmlall':'UTF-8'};{/if}">
           {if isset($state.image.url) && $state.image.url}
             <div class="mb-3">
               <img src="{$state.image.url}" alt="" class="img-fluid w-100" loading="lazy">