Breaking: block padding property (fixes #358) (#359)

Breaking: block padding property (fixes #358)
adaptlearning · Nov 22, 2022 · aa8a3b4 · aa8a3b4
1 parent 446d923
commit aa8a3b4
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 118 deletions.
diff --git a/README.md b/README.md
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "adapt-contrib-vanilla",
   "version": "7.2.0",
-  "framework": ">=5.20.1",
+  "framework": ">=5.22.9",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-vanilla",
   "bugs": "https://github.com/adaptlearning/adapt-contrib-vanilla/issues",
   "theme": "vanilla",

diff --git a/example.json b/example.json
@@ -84,6 +84,8 @@ blocks.json
     },
     // Divider Block - adds class to `.block` element
     "_isDividerBlock": false,
+    "_paddingTop": "double",
+    "_paddingBottom": "half",
     // Defines the vertical alignment of the child component(s) in relation to the block.
     // Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block.
     // The default alignment is `top`.
@@ -155,24 +157,6 @@ Block classes
 "_classes": "extend-container",
 "_comment": "Extend width of block to max page width (default is 1440px).",
 
-"_classes": "remove-padding-top | remove-top-padding",
-"_comment": "Removes the top padding from block.",
-
-"_classes": "remove-padding-bottom | remove-bottom-padding",
-"_comment": "Removes the bottom padding from block.",
-
-"_classes": "reduce-padding-top",
-"_comment": "Reduce the blocks top padding by half.",
-
-"_classes": "reduce-padding-bottom",
-"_comment": "Reduce the blocks bottom padding by half.",
-
-"_classes": "increase-padding-top",
-"_comment": "Double the blocks top padding.",
-
-"_classes": "increase-padding-bottom",
-"_comment": "Double the blocks bottom padding.",
-
 Component classes
 --------------------------------------------------
 

diff --git a/js/themeBlockView.js b/js/themeBlockView.js
@@ -7,9 +7,23 @@ export default class ThemeBlockView extends ThemeView {
   }
 
   setCustomStyles() {
+    this.setPaddingTop();
+    this.setPaddingBottom();
     this.setComponentVerticalAlignment();
   }
 
+  setPaddingTop() {
+    const paddingTop = this.model.get('_paddingTop');
+    if (!paddingTop) return;
+    this.$el.addClass(`${paddingTop}-padding-top`);
+  }
+
+  setPaddingBottom() {
+    const paddingBottom = this.model.get('_paddingBottom');
+    if (!paddingBottom) return;
+    this.$el.addClass(`${paddingBottom}-padding-bottom`);
+  }
+
   setComponentVerticalAlignment() {
     const componentVerticalAlignment = this.model.get('_componentVerticalAlignment');
     if (!componentVerticalAlignment) return;

diff --git a/less/core/block.less b/less/core/block.less
@@ -37,13 +37,21 @@
     .link-text;
   }
 
+  // Double the blocks top or bottom padding
+  &.double-padding-top &__inner { padding-top: @block-padding-ver * 2; }
+  &.double-padding-bottom &__inner { padding-bottom: @block-padding-ver * 2; }
+
+  // Half the blocks top or bottom padding
+  &.half-padding-top &__inner { padding-top: @block-padding-ver / 2; }
+  &.half-padding-bottom &__inner { padding-bottom: @block-padding-ver / 2; }
+
+  // Remove the top or bottom padding from block
+  &.remove-padding-top &__inner { padding-top: 0; }
+  &.remove-padding-bottom &__inner { padding-bottom: 0; }
+
   // Aligns child components centrally on the vertical axis
-  &.align-vert-center .component__container {
-    align-items: center;
-  }
+  &.align-vert-center .component__container { align-items: center; }
 
   // Aligns child components to the bottom of the parent block on the vertical axis
-  &.align-vert-bottom .component__container {
-    align-items: flex-end;
-  }
+  &.align-vert-bottom .component__container {align-items: flex-end; }
 }
diff --git a/less/project/theme-extras.less b/less/project/theme-extras.less
@@ -78,44 +78,6 @@
   max-width: @max-width;
 }
 
-// Remove top padding from block
-// --------------------------------------------------
-.block.remove-padding-top .block__inner,
-.block.remove-top-padding .block__inner {
-  padding-top: 0;
-}
-
-// Remove bottom padding from block
-// --------------------------------------------------
-.block.remove-padding-bottom .block__inner,
-.block.remove-bottom-padding .block__inner {
-  padding-bottom: 0;
-}
-
-// Reduce the blocks top padding by half
-// --------------------------------------------------
-.block.reduce-padding-top .block__inner {
-  padding-top: @block-padding-ver / 2;
-}
-
-// Reduce the blocks bottom padding by half
-// --------------------------------------------------
-.block.reduce-padding-bottom .block__inner {
-  padding-bottom: @block-padding-ver / 2;
-}
-
-// Double the blocks top padding
-// --------------------------------------------------
-.block.increase-padding-top .block__inner {
-  padding-top: @block-padding-ver * 2;
-}
-
-// Double the blocks bottom padding
-// --------------------------------------------------
-.block.increase-padding-bottom .block__inner {
-  padding-bottom: @block-padding-ver * 2;
-}
-
 // DEPRECATED in favour of bg-color-mixin
 // Block background color mixin
 // Add to block to enable

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "adapt-contrib-vanilla",
   "version": "7.2.0",
-  "framework": ">=5.20.1",
+  "framework": ">=5.22.9",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-vanilla",
   "bugs": "https://github.com/adaptlearning/adapt-contrib-vanilla/issues",
   "theme": "vanilla",

diff --git a/properties.schema b/properties.schema
@@ -1147,12 +1147,28 @@
                   "validators": [],
                   "help": "If enabled, applies a divider class to the block"
                 },
+                "_paddingTop": {
+                  "type": "string",
+                  "required": false,
+                  "default": "standard",
+                  "inputType": {"type":"Select", "options":["double","standard","half","remove"]},
+                  "title": "Spacing top",
+                  "help": "Changes the value of the blocks top spacing. Double: Doubles the blocks top spacing. Standard: Retains the standard blocks top spacing. Half: Halves the blocks top spacing. Remove: Removes the blocks top spacing. The default value is `standard`."
+                },
+                "_paddingBottom": {
+                  "type": "string",
+                  "required": false,
+                  "default": "standard",
+                  "inputType": {"type":"Select", "options":["double","standard","half","remove"]},
+                  "title": "Spacing bottom",
+                  "help": "Changes the value of the blocks bottom spacing. Double: Doubles the blocks bottom spacing. Standard: Retains the standard blocks bottom spacing. Half: Halves the blocks bottom spacing. Remove: Removes the blocks bottom spacing. The default value is `standard`."
+                },
                 "_componentVerticalAlignment": {
                   "type": "string",
                   "required": false,
                   "default": "top",
                   "inputType": {"type":"Select", "options":["top","center","bottom"]},
-                  "title": "Set the vertical alignment of the child component(s).",
+                  "title": "Set the vertical alignment of the child component(s)",
                   "help": "Defines the vertical alignment of the child component(s) in relation to the block. Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block. The default alignment is `top`."
                 }
               }

diff --git a/schema/block.schema.json b/schema/block.schema.json
@@ -160,9 +160,35 @@
               "description": "If enabled, applies a divider class to the block",
               "default": false
             },
+            "_paddingTop": {
+              "type": "string",
+              "title": "Spacing top",
+              "description": "Changes the value of the blocks top spacing. Double: Doubles the blocks top spacing. Standard: Retains the standard blocks top spacing. Half: Halves the blocks top spacing. Remove: Removes the blocks top spacing. The default value is `standard`.",
+              "default": "standard",
+              "enum": [
+                "double",
+                "standard",
+                "half",
+                "remove"
+              ],
+              "_backboneForms": "Select"
+            },
+            "_paddingBottom": {
+              "type": "string",
+              "title": "Spacing bottom",
+              "description": "Changes the value of the blocks bottom spacing. Double: Doubles the blocks bottom spacing. Standard: Retains the standard blocks bottom spacing. Half: Halves the blocks bottom spacing. Remove: Removes the blocks bottom spacing. The default value is `standard`.",
+              "default": "standard",
+              "enum": [
+                "double",
+                "standard",
+                "half",
+                "remove"
+              ],
+              "_backboneForms": "Select"
+            },
             "_componentVerticalAlignment": {
               "type": "string",
-              "title": "Set the vertical alignment of the child component(s).",
+              "title": "Set the vertical alignment of the child component(s)",
               "description": "Defines the vertical alignment of the child component(s) in relation to the block. Top: Aligns descendents to the top of the block. Center: Aligns descendents to the center of the block. Bottom: Aligns descendents to the bottom of the block. The default alignment is `top`.",
               "default": "top",
               "enum": [