Make new block settings buttons functional

Author: PeeterPaal

components/block-structure.tpl

@@ -58,8 +58,10 @@
     {{ background_key }}-picker-area
     js-background-type
     {{ bg_type }}
-    {% if content_class -%}{{ content_class }}{%- endif -%}
-    {% if animated -%}animated js-animated-block{%- endif -%}
+    {% if page_height %}page-height{% endif %}
+    {% if full_width %}full-width{% endif %}
+    {% if content_class -%}{{ content_class }}{%- endif %}
+    {% if animated -%}animated js-animated-block{%- endif %}
   "
   data-block-key="{{ id }}"
 >

components/block.tpl

@@ -1,6 +1,18 @@
 {%- assign id = block_data.key -%}
 {%- assign content_area_count = layout_data.content_areas | default: 1 -%}
 
+{% assign page_height = block_data.settings.page_height %}
+
+{% if page_height == null %}
+  {% assign page_height = true %}
+{% endif %}
+
+{% assign full_width = block_data.settings.full_width %}
+
+{% if full_width == null %}
+  {% assign full_width = false %}
+{% endif %}
+
 {%- capture move_buttons -%}
   <button
     class="move-button up-button js-move-button"
@@ -28,18 +40,6 @@
 {%- endcapture -%}
 
 {%- capture settings_options -%}
-  {% assign page_height = block_data.settings.page_height %}
-
-  {% if page_height == blank %}
-    {% assign page_height = true %}
-  {% endif %}
-
-  {% assign full_width = block_data.settings.full_width %}
-
-  {% if full_width == blank %}
-    {% assign full_width = false %}
-  {% endif %}
-
   <div class="settings-options">
     <div class="settings-checkbox">
       <label>
@@ -53,7 +53,7 @@
           {% endif %}
         />
 
-        {{ "page_height" | lce }}
+        {{ "full_height" | lce }}
       </label>
     </div>
 
@@ -70,14 +70,11 @@
             {% endif %}
           />
 
-          {{ "full_width" | lce }}
+          {{ "max_width" | lce }}
         </label>
       </div>
     {% endif -%}
   </div>
-
-  {% assign page_height = null %}
-  {% assign full_width = null %}
 {%- endcapture -%}
 
 {%- capture change_layout_options -%}
@@ -151,7 +148,9 @@
           content_class: content_class,
           id: id,
           layout_name: layout_name,
-          separate_bg_pickers: layout_data.separate_bg_pickers
+          separate_bg_pickers: layout_data.separate_bg_pickers,
+          full_width: full_width,
+          page_height: page_height
         -%}
       {% endfor %}
     {%- else -%}
@@ -171,7 +170,9 @@
         content_class: content_class,
         id: id,
         layout_name: layout_name,
-        separate_bg_pickers: layout_data.separate_bg_pickers
+        separate_bg_pickers: layout_data.separate_bg_pickers,
+        full_width: full_width,
+        page_height: page_height
       %}
     {% endif %}
   </div>

javascripts/editmode.js

@@ -403,10 +403,16 @@
         const settingKey = e.target.dataset.setting;
         const currentBlock = bodyBlocks.find(block => String(block.key) === String(targetKey));
 
+        const $currentBlockElement = $(`[data-block-key="${targetKey}"]`);
+
         currentBlock.settings = currentBlock.settings || {};
         currentBlock.settings[settingKey] = e.target.checked;
 
         pageData.set(dataKey, bodyBlocks);
+
+        $currentBlockElement.find('.block').each((_, block) => {
+          $(block).toggleClass(settingKey.replace(/_/g, '-'), e.target.checked);
+        });
       });
     };
 

javascripts/editmode.min.js

@@ -399,10 +399,16 @@
       const settingKey = e.target.dataset.setting;
       const currentBlock = bodyBlocks.find(block => String(block.key) === String(targetKey));
 
+      const $currentBlockElement = $(`[data-block-key="${targetKey}"]`);
+
       currentBlock.settings = currentBlock.settings || {};
       currentBlock.settings[settingKey] = e.target.checked;
 
       pageData.set(dataKey, bodyBlocks);
+
+      $currentBlockElement.find('.block').each((_, block) => {
+        $(block).toggleClass(settingKey.replace(/_/g, '-'), e.target.checked);
+      })
     });
   };
 

sources/javascripts/editmode.js

@@ -85,10 +85,13 @@
 }
 
 .block {
-  min-height: calc(100vh - 128px);
   padding: 64px;
   position: relative;
 
+  &.page-height {
+    min-height: calc(100vh - 128px);
+  }
+
   .voog-bg-picker-btn {
     top: 64px;
     left: 64px;
@@ -157,6 +160,12 @@
       width: 100%;
     }
 
+    &.full-width {
+      .wrapper {
+        max-width: 100%;
+      }
+    }
+
     .publicmode & {
       &.animated {
         overflow: hidden;
@@ -247,7 +256,10 @@
 
   &.split_50_50_full {
     padding: 0;
-    min-height: calc(100vh - var(--header-height));
+
+    &.page-height {
+      min-height: calc(100vh - var(--header-height));
+    }
 
     .wrapper {
       display: flex;
@@ -358,7 +370,11 @@
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 64px;
+  bottom: 24px;
+
+  .settings-checkbox {
+    display: inline-block;
+  }
 }
 
 @media (max-width: $desktop-width) {
@@ -376,7 +392,10 @@
 @media screen and (max-width: $mobile-width) {
   .block {
     padding: 24px;
-    min-height: calc(100vh - 48px);
+
+    &.page-height {
+      min-height: calc(100vh - 48px);
+    }
 
     &.split_40_60,
     &.split_staggered,

sources/stylesheets/components/_block.scss

@@ -78,10 +78,12 @@
 }
 
 .block {
-  min-height: calc(100vh - 128px);
   padding: 64px;
   position: relative;
 }
+.block.page-height {
+  min-height: calc(100vh - 128px);
+}
 .block .voog-bg-picker-btn {
   top: 64px;
   left: 64px;
@@ -134,6 +136,9 @@
   z-index: 3;
   width: 100%;
 }
+.block.column.full-width .wrapper {
+  max-width: 100%;
+}
 .publicmode .block.column.animated {
   overflow: hidden;
 }
@@ -196,6 +201,8 @@
 }
 .block.split_50_50_full {
   padding: 0;
+}
+.block.split_50_50_full.page-height {
   min-height: calc(100vh - var(--header-height));
 }
 .block.split_50_50_full .wrapper {
@@ -302,7 +309,10 @@
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  top: 64px;
+  bottom: 24px;
+}
+.settings-options .settings-checkbox {
+  display: inline-block;
 }
 
 @media (max-width: 1440px) {
@@ -313,6 +323,8 @@
 @media screen and (max-width: 640px) {
   .block {
     padding: 24px;
+  }
+  .block.page-height {
     min-height: calc(100vh - 48px);
   }
   .block.split_40_60 .wrapper, .block.split_staggered .wrapper, .block.split_60_40 .wrapper {