Add spacing option to Buttons Row block

Author: maribedran

media/css/cms/components/flare26-button.css

@@ -295,6 +295,14 @@ I propose we move to "Filled (Primary)", "Outline (Secondary)", and
     margin-block-end: 0;
 }
 
+.fl-buttons.fl-buttons-spacing-small {
+    margin-block: var(--token-layout-2xs);
+}
+
+.fl-buttons.fl-buttons-spacing-large {
+    margin-block: var(--token-layout-sm);
+}
+
 .fl-tiny-icon-button {
     background: transparent;
     color: var(--fl-theme-color-link);

springfield/cms/blocks.py

@@ -1067,6 +1067,15 @@ def MixedButtonsBlock(
 
 
 class ButtonRowBlock(blocks.StructBlock):
+    spacing = blocks.ChoiceBlock(
+        choices=[
+            ("", "No spacing"),
+            ("small", "Small"),
+            ("large", "Large"),
+        ],
+        default="",
+        required=False,
+    )
     buttons = MixedButtonsBlock(
         button_types=get_button_types(allow_uitour=False),
         min_num=1,
@@ -1077,6 +1086,10 @@ class Meta:
         label = "Button Row"
         label_format = "Button Row"
         template = "cms/blocks/button-row.html"
+        form_layout = blocks.BlockGroup(
+            children=["buttons"],
+            settings=["spacing"],
+        )
 
 
 class CTASettings(blocks.StructBlock):

springfield/cms/templates/cms/blocks/button-row.html

@@ -6,7 +6,7 @@
 
 {% set block_position = block_position or "article" %}
 
-<div class="fl-buttons is-horizontal is-center">
+<div class="fl-buttons is-horizontal is-center {% if value.spacing %}fl-buttons-spacing-{{ value.spacing }}{% endif %}">
   {% for button in value.buttons %}
     {% set block_position = block_position + "." + "button-" ~ loop.index %}
     {% include_block button %}