Spacing type

assets/styles/admin-cms.scss

@@ -390,6 +390,12 @@ body {
     background-color: #f1f1f1;
 }
 
+[contenteditable]:focus-visible {
+    outline: none !important;
+}
+[contenteditable]:focus {
+    box-shadow: 0 0 15px rgba($primary, .5) !important;
+}
 .edit-content-linked-focus {
     box-shadow: 0 0 15px rgba($primary, .5);
 }

src/Form/Type/SpacingType.php

@@ -0,0 +1,113 @@
+<?php
+
+namespace Softspring\CmsBundle\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+class SpacingType extends AbstractType
+{
+    public function getBlockPrefix(): string
+    {
+        return 'spacing';
+    }
+
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder->add('marginTop', ChoiceType::class, [
+            'choice_translation_domain' => false,
+            'choices' => [
+                '0' => '',
+                '1' => 'mt-1',
+                '2' => 'mt-2',
+                '3' => 'mt-3',
+                '4' => 'mt-4',
+                '5' => 'mt-5',
+            ]
+        ]);
+
+        $builder->add('marginEnd', ChoiceType::class, [
+            'choice_translation_domain' => false,
+            'choices' => [
+                '0' => '',
+                '1' => 'me-1',
+                '2' => 'me-2',
+                '3' => 'me-3',
+                '4' => 'me-4',
+                '5' => 'me-5',
+            ]
+        ]);
+
+        $builder->add('marginBottom', ChoiceType::class, [
+            'choice_translation_domain' => false,
+            'choices' => [
+                '0' => '',
+                '1' => 'mb-1',
+                '2' => 'mb-2',
+                '3' => 'mb-3',
+                '4' => 'mb-4',
+                '5' => 'mb-5',
+            ]
+        ]);
+
+        $builder->add('marginStart', ChoiceType::class, [
+            'choice_translation_domain' => false,
+            'choices' => [
+                '0' => '',
+                '1' => 'ms-1',
+                '2' => 'ms-2',
+                '3' => 'ms-3',
+                '4' => 'ms-4',
+                '5' => 'ms-5',
+            ]
+        ]);
+        $builder->add('paddingTop', ChoiceType::class, [
+            'choice_translation_domain' => false,
+            'choices' => [
+                '0' => '',
+                '1' => 'pt-1',
+                '2' => 'pt-2',
+                '3' => 'pt-3',
+                '4' => 'pt-4',
+                '5' => 'pt-5',
+            ]
+        ]);
+
+        $builder->add('paddingEnd', ChoiceType::class, [
+            'choice_translation_domain' => false,
+            'choices' => [
+                '0' => '',
+                '1' => 'pe-1',
+                '2' => 'pe-2',
+                '3' => 'pe-3',
+                '4' => 'pe-4',
+                '5' => 'pe-5',
+            ]
+        ]);
+
+        $builder->add('paddingBottom', ChoiceType::class, [
+            'choice_translation_domain' => false,
+            'choices' => [
+                '0' => '',
+                '1' => 'pb-1',
+                '2' => 'pb-2',
+                '3' => 'pb-3',
+                '4' => 'pb-4',
+                '5' => 'pb-5',
+            ]
+        ]);
+
+        $builder->add('paddingStart', ChoiceType::class, [
+            'choice_translation_domain' => false,
+            'choices' => [
+                '0' => '',
+                '1' => 'ps-1',
+                '2' => 'ps-2',
+                '3' => 'ps-3',
+                '4' => 'ps-4',
+                '5' => 'ps-5',
+            ]
+        ]);
+    }
+}

src/Utils/ModuleMigrator.php

@@ -41,4 +41,49 @@ public static function symfonyRouteToLink(?array $symfonyRoute): array
             'custom_target' => null,
         ];
     }
+
+    public static function classToSpacing(string $class): array
+    {
+        $spacing = [
+            'marginTop' => '',
+            'marginEnd' => '',
+            'marginBottom' => '',
+            'marginStart' => '',
+            'paddingTop' => '',
+            'paddingEnd' => '',
+            'paddingBottom' => '',
+            'paddingStart' => '',
+        ];
+
+        preg_match_all('/([mp][tbesxy]?\-[012345])/', $class, $matches);
+
+        foreach ($matches[0] as $match) {
+            $class = str_replace($match, '', $class);
+
+            $match = explode('-', $match);
+            $marginOrPadding = substr($match[0], 0, 1);
+            $p = substr($match[0], 1, 1);
+            $amount = $match[1];
+
+            $mp = ['m' => 'margin', 'p' => 'padding'][$marginOrPadding];
+            $positions = [
+                't' => ['Top'],
+                'b' => ['Bottom'],
+                'e' => ['End'],
+                's' => ['Start'],
+                '' => ['Top', 'End', 'Bottom', 'Start'],
+                'y' => ['Top', 'Bottom'],
+                'x' => ['End', 'Start'],
+            ][$p];
+
+            foreach ($positions as $position) {
+                $p = strtolower(substr($position, 0, 1));
+                $spacing["$mp$position"] = "$marginOrPadding$p-$amount";
+            }
+        }
+
+        $class = implode(' ', array_filter(explode(' ', $class)));
+
+        return [$class, $spacing];
+    }
 }

templates/forms/types_theme.html.twig

@@ -206,3 +206,43 @@
     {{ form_row(form.target) }}
     {{ form_row(form.custom_target) }}
 {% endblock link_widget %}
+
+{% block spacing_widget %}
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col bg-warning">&nbsp;</div>
+            <div class="col bg-warning">&nbsp;</div>
+            <div class="col bg-warning border-bottom border-primary text-center">{{ form_widget(form.marginTop, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}</div>
+            <div class="col bg-warning border-bottom border-primary">&nbsp;</div>
+            <div class="col bg-warning">&nbsp;</div>
+        </div>
+        <div class="row">
+            <div class="col bg-warning border-end border-primary">&nbsp;</div>
+            <div class="col bg-info border-top border-primary">&nbsp;</div>
+            <div class="col bg-info text-center">{{ form_widget(form.paddingTop, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}</div>
+            <div class="col bg-info">&nbsp;</div>
+            <div class="col bg-warning border-start border-primary">&nbsp;</div>
+        </div>
+        <div class="row">
+            <div class="col bg-warning border-end border-primary text-end">{{ form_widget(form.marginStart, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}</div>
+            <div class="col bg-info text-start">{{ form_widget(form.paddingStart, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}</div>
+            <div class="col">&nbsp;</div>
+            <div class="col bg-info text-end">{{ form_widget(form.paddingEnd, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}</div>
+            <div class="col bg-warning border-start border-primary text-start">{{ form_widget(form.marginEnd, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}</div>
+        </div>
+        <div class="row">
+            <div class="col bg-warning border-end border-primary">&nbsp;</div>
+            <div class="col bg-info">&nbsp;</div>
+            <div class="col bg-info text-center">{{ form_widget(form.paddingBottom, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}</div>
+            <div class="col bg-info">&nbsp;</div>
+            <div class="col bg-warning border-start border-primary">&nbsp;</div>
+        </div>
+        <div class="row">
+            <div class="col bg-warning">&nbsp;</div>
+            <div class="col bg-warning border-top border-primary">&nbsp;</div>
+            <div class="col bg-warning border-top border-primary text-center">{{ form_widget(form.marginBottom, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}</div>
+            <div class="col bg-warning border-top border-primary">&nbsp;</div>
+            <div class="col bg-warning">&nbsp;</div>
+        </div>
+    </div>
+{% endblock spacing_widget %}

templates/macros/modules_render.html.twig

@@ -4,9 +4,18 @@
 {% endapply %}
 {%- endmacro -%}
 
-{%- macro class (classesValue, defaultClasses = '') -%}
+{%- macro class (classesValues, defaultClasses = '') -%}
 {% apply spaceless %}
-    {% if classesValue|default or defaultClasses|default %}class="{{ (defaultClasses~' '~classesValue|default(''))|trim }}"{% endif %}
+    {% set classes = defaultClasses %}
+    {% if classesValues is not iterable %}
+        {% set classesValues = [classesValues] %}
+    {% endif %}
+
+    {% for classesValue in classesValues %}
+        {% set classes = ((classes is empty ? '' : classes~' ') ~ classesValue)|trim %}
+    {% endfor %}
+
+    {% if classes|default %}class="{{ classes|trim }}"{% endif %}
 {% endapply %}
 {%- endmacro -%}