feat(main: Added default block classes

src/Config/Config.php

@@ -23,11 +23,9 @@ class Config
 
     const SLIDER_DEFAULT_SLIDES_PER_VIEW_TABLET = 2;
 
-    const SLIDER_DEFAULT_SLIDES_PER_VIEW_DESKTOP = 3;
-
     const SLIDER_MODES = [
         'always'     => 'Always show as a slider',
-        'responsive' => 'Slider on mobile/tablet, static grid on desktop',
+        'responsive' => 'Mobile only',
     ];
 
     const SLIDER_DEFAULT_MODE = 'always';

src/Controller/CustomHtmlBlockController.php

@@ -21,8 +21,11 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
 {
     public function indexAction(Request $request, CustomHtmlBlockFilters $filters): Response
     {
+        $idGroup = null;
+
         if ($request->query->has('idGroup')) {
-            $filters->addFilter(['id_ws_customhtml_group' => (int) $request->query->get('idGroup')]);
+            $idGroup = (int) $request->query->get('idGroup');
+            $filters->addFilter(['id_ws_customhtml_group' => $idGroup]);
             $filters->setNeedsToBePersisted(false);
         }
 
@@ -31,7 +34,7 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
 
         return $this->render('@Modules/ws_customhtml/views/templates/admin/grid/customhtmlblock.html.twig', [
             'customHtmlBlockGrid'   => $this->presentGrid($grid),
-            'layoutHeaderToolbarBtn' => $this->getToolbarButtons($request->get('_legacy_controller')),
+            'layoutHeaderToolbarBtn' => $this->getToolbarButtons($request->get('_legacy_controller'), $idGroup),
         ]);
     }
 
@@ -51,9 +54,11 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
         $formHandler = $this->get('websmid.customhtml.form.customhtmlblock_form_handler');
 
         $form = $formBuilder->getForm();
+        $idGroup = $request->query->has('idGroup') ? (int) $request->query->get('idGroup') : null;
+        $redirectParams = null !== $idGroup ? ['idGroup' => $idGroup] : [];
 
-        if ($request->isMethod('GET') && $request->query->has('idGroup')) {
+        if ($request->isMethod('GET') && null !== $idGroup) {
-            $form->get('id_ws_customhtml_group')->setData((int) $request->query->get('idGroup'));
+            $form->get('id_ws_customhtml_group')->setData($idGroup);
         }
 
         $form->handleRequest($request);
@@ -64,7 +69,7 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
             if (null !== $handlerResult->getIdentifiableObjectId()) {
                 $this->addFlash('success', $this->trans('Successful creation.', 'Admin.Notifications.Success'));
 
-                return $this->redirectToRoute('customhtmlblock_index');
+                return $this->redirectToRoute('customhtmlblock_index', $redirectParams);
             }
         } catch (Exception $e) {
             $this->addFlash('error', $this->getErrorMessageForException($e, []));
@@ -72,6 +77,7 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
 
         return $this->render('@Modules/ws_customhtml/views/templates/admin/form/customhtmlblock_create.html.twig', [
             'customHtmlBlockForm' => $form->createView(),
+            'idGroup'             => $idGroup,
         ]);
     }
 
@@ -81,6 +87,8 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
         $formHandler = $this->get('websmid.customhtml.form.customhtmlblock_form_handler');
 
         $form = $formBuilder->getFormFor($idCustomHtmlBlock);
+        $idGroup = $request->query->has('idGroup') ? (int) $request->query->get('idGroup') : null;
+        $redirectParams = null !== $idGroup ? ['idGroup' => $idGroup] : [];
 
         try {
             $form->handleRequest($request);
@@ -89,7 +97,7 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
             if ($handlerResult->isSubmitted() && $handlerResult->isValid()) {
                 $this->addFlash('success', $this->trans('Successful update.', 'Admin.Notifications.Success'));
 
-                return $this->redirectToRoute('customhtmlblock_index');
+                return $this->redirectToRoute('customhtmlblock_index', $redirectParams);
             }
         } catch (Exception $e) {
             $this->addFlash('error', $this->getErrorMessageForException($e, []));
@@ -102,24 +110,28 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
             'customHtmlBlockForm' => $form->createView(),
             'idCustomHtmlBlock'   => $idCustomHtmlBlock,
             'currentImageUrl'     => $currentImageUrl,
+            'idGroup'             => $idGroup,
         ]);
     }
 
     public function deleteAction(Request $request, int $idCustomHtmlBlock): RedirectResponse
     {
+        $idGroup = $request->query->has('idGroup') ? (int) $request->query->get('idGroup') : null;
+        $redirectParams = null !== $idGroup ? ['idGroup' => $idGroup] : [];
+
         $block = new CustomHtmlBlock($idCustomHtmlBlock);
 
         if (!Validate::isLoadedObject($block)) {
             $this->addFlash('error', $this->trans('Unable to find the block.', 'Modules.Wscustomhtml.Admin'));
 
-            return $this->redirectToRoute('customhtmlblock_index');
+            return $this->redirectToRoute('customhtmlblock_index', $redirectParams);
         }
 
         CustomHtmlFaq::deleteByBlockId($idCustomHtmlBlock);
         $block->delete();
         $this->addFlash('success', $this->trans('Successful deletion.', 'Admin.Notifications.Success'));
 
-        return $this->redirectToRoute('customhtmlblock_index');
+        return $this->redirectToRoute('customhtmlblock_index', $redirectParams);
     }
 
     public function updatePositionAction(int $idGroup, Request $request): RedirectResponse
@@ -144,7 +156,7 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
         return $this->redirectToRoute('customhtmlblock_index', ['idGroup' => $idGroup]);
     }
 
-    private function getToolbarButtons(?string $securitySubject): array
+    private function getToolbarButtons(?string $securitySubject, ?int $idGroup = null): array
     {
         $toolbarButtons = [];
 
@@ -152,8 +164,10 @@ class CustomHtmlBlockController extends FrameworkBundleAdminController
             return $toolbarButtons;
         }
 
+        $routeParams = null !== $idGroup ? ['idGroup' => $idGroup] : [];
+
         $toolbarButtons['customhtmlblock_create'] = [
-            'href'           => $this->generateUrl('customhtmlblock_create'),
+            'href'           => $this->generateUrl('customhtmlblock_create', $routeParams),
             'desc'           => $this->trans('New block', 'Admin.Actions'),
             'icon'           => 'add_circle_outline',
             'class'          => 'btn-primary',

src/Form/ChoiceProvider/CustomHtmlGroupChoiceProvider.php

@@ -14,22 +14,9 @@ final class CustomHtmlGroupChoiceProvider implements
 {
     public function getChoices(array $options = []): array
     {
-        $groups = Db::getInstance()->executeS(
-            'SELECT `id_ws_customhtml_group`, `title`
-             FROM `' . _DB_PREFIX_ . 'ws_customhtml_group`
-             ORDER BY `title` ASC'
-        );
-
-        $titleCounts = array_count_values(array_column($groups, 'title'));
         $choices = [];
 
-        foreach ($groups as $group) {
+        foreach ($this->getGroupsWithLabels() as $label => $group) {
-            $label = $group['title'];
-
-            if ($titleCounts[$label] > 1) {
-                $label .= ' (#' . $group['id_ws_customhtml_group'] . ')';
-            }
-
             $choices[$label] = (int) $group['id_ws_customhtml_group'];
         }
 
@@ -38,6 +25,38 @@ final class CustomHtmlGroupChoiceProvider implements
 
     public function getChoicesAttributes(): array
     {
-        return [];
+        $choicesAttributes = [];
+
+        foreach ($this->getGroupsWithLabels() as $label => $group) {
+            if (!empty($group['default_block_class'])) {
+                $choicesAttributes[$label]['data-default-block-class'] = $group['default_block_class'];
+            }
+        }
+
+        return $choicesAttributes;
+    }
+
+    private function getGroupsWithLabels(): array
+    {
+        $groups = Db::getInstance()->executeS(
+            'SELECT `id_ws_customhtml_group`, `title`, `default_block_class`
+             FROM `' . _DB_PREFIX_ . 'ws_customhtml_group`
+             ORDER BY `title` ASC'
+        );
+
+        $titleCounts = array_count_values(array_column($groups, 'title'));
+        $groupsWithLabels = [];
+
+        foreach ($groups as $group) {
+            $label = $group['title'];
+
+            if ($titleCounts[$label] > 1) {
+                $label .= ' (#' . $group['id_ws_customhtml_group'] . ')';
+            }
+
+            $groupsWithLabels[$label] = $group;
+        }
+
+        return $groupsWithLabels;
     }
 }

src/Form/DataHandler/CustomHtmlBlockDataHandler.php

@@ -34,7 +34,7 @@ final class CustomHtmlBlockDataHandler implements FormDataHandlerInterface
         $block->slider_mode             = (string) ($formData['slider_mode'] ?? Config::SLIDER_DEFAULT_MODE);
         $block->slides_per_view_mobile  = (float) ($formData['slides_per_view_mobile'] ?? Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_MOBILE);
         $block->slides_per_view_tablet  = (float) ($formData['slides_per_view_tablet'] ?? Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_TABLET);
-        $block->slides_per_view_desktop = (float) ($formData['slides_per_view_desktop'] ?? Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_DESKTOP);
+        $block->slides_per_view_desktop = (float) ($formData['slides_per_view_desktop'] ?? 0);
         $block->autoplay_delay          = (int) ($formData['autoplay_delay'] ?? 0);
         $block->image                  = $this->saveUploadedImage($formData['image'] ?? null, '');
         $block->active                 = (int) $formData['active'];
@@ -73,7 +73,7 @@ final class CustomHtmlBlockDataHandler implements FormDataHandlerInterface
         $block->slider_mode             = (string) ($formData['slider_mode'] ?? Config::SLIDER_DEFAULT_MODE);
         $block->slides_per_view_mobile  = (float) ($formData['slides_per_view_mobile'] ?? Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_MOBILE);
         $block->slides_per_view_tablet  = (float) ($formData['slides_per_view_tablet'] ?? Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_TABLET);
-        $block->slides_per_view_desktop = (float) ($formData['slides_per_view_desktop'] ?? Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_DESKTOP);
+        $block->slides_per_view_desktop = (float) ($formData['slides_per_view_desktop'] ?? 0);
         $block->autoplay_delay          = (int) ($formData['autoplay_delay'] ?? 0);
         $block->image                  = $this->saveUploadedImage($formData['image'] ?? null, $block->image);
         $block->active                 = (int) $formData['active'];

src/Form/DataHandler/CustomHtmlGroupDataHandler.php

@@ -18,6 +18,7 @@ final class CustomHtmlGroupDataHandler implements FormDataHandlerInterface
         $group->title        = (string) $formData['title'];
         $group->hook_name    = (string) $formData['hook_name'];
         $group->custom_class = (string) ($formData['custom_class'] ?? '');
+        $group->default_block_class = (string) ($formData['default_block_class'] ?? '');
         $group->active       = (int) $formData['active'];
         $group->ordering     = $this->getNextOrdering();
 
@@ -50,6 +51,7 @@ final class CustomHtmlGroupDataHandler implements FormDataHandlerInterface
         $group->title        = (string) $formData['title'];
         $group->hook_name    = (string) $formData['hook_name'];
         $group->custom_class = (string) ($formData['custom_class'] ?? '');
+        $group->default_block_class = (string) ($formData['default_block_class'] ?? '');
         $group->active       = (int) $formData['active'];
 
         if (!$group->update()) {

src/Form/DataProvider/CustomHtmlBlockDataProvider.php

@@ -36,7 +36,7 @@ final class CustomHtmlBlockDataProvider implements FormDataProviderInterface
             'slider_mode'             => $block->slider_mode,
             'slides_per_view_mobile'  => (float) $block->slides_per_view_mobile,
             'slides_per_view_tablet'  => (float) $block->slides_per_view_tablet,
-            'slides_per_view_desktop' => (float) $block->slides_per_view_desktop,
+            'slides_per_view_desktop' => (float) $block->slides_per_view_desktop > 0 ? (float) $block->slides_per_view_desktop : null,
             'autoplay_delay'          => (int) $block->autoplay_delay,
             'faqs'                   => $this->loadFaqs((int) $id),
             'slides'                 => $this->loadSlides((int) $id),
@@ -63,7 +63,7 @@ final class CustomHtmlBlockDataProvider implements FormDataProviderInterface
             'slider_mode'             => Config::SLIDER_DEFAULT_MODE,
             'slides_per_view_mobile'  => Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_MOBILE,
             'slides_per_view_tablet'  => Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_TABLET,
-            'slides_per_view_desktop' => Config::SLIDER_DEFAULT_SLIDES_PER_VIEW_DESKTOP,
+            'slides_per_view_desktop' => null,
             'autoplay_delay'          => 0,
             'faqs'                   => [],
             'slides'                 => [],

src/Form/DataProvider/CustomHtmlGroupDataProvider.php

@@ -17,20 +17,22 @@ final class CustomHtmlGroupDataProvider implements FormDataProviderInterface
         }
 
         return [
-            'title'        => $group->title,
+            'title'                => $group->title,
-            'hook_name'    => $group->hook_name,
+            'hook_name'            => $group->hook_name,
-            'custom_class' => $group->custom_class,
+            'custom_class'         => $group->custom_class,
-            'active'       => (bool) $group->active,
+            'default_block_class'  => $group->default_block_class,
+            'active'               => (bool) $group->active,
         ];
     }
 
     public function getDefaultData()
     {
         return [
-            'title'        => '',
+            'title'                => '',
-            'hook_name'    => '',
+            'hook_name'            => '',
-            'custom_class' => '',
+            'custom_class'         => '',
-            'active'       => true,
+            'default_block_class'  => '',
+            'active'               => true,
         ];
     }
 }

src/Form/Type/CustomHtmlBlockType.php

@@ -33,9 +33,10 @@ class CustomHtmlBlockType extends AbstractType
     {
         $formBuilder
             ->add('id_ws_customhtml_group', ChoiceType::class, [
-                'label'    => $this->translator->trans('Group', [], 'Modules.Wscustomhtml.Admin'),
+                'label'       => $this->translator->trans('Group', [], 'Modules.Wscustomhtml.Admin'),
-                'choices'  => $this->groupChoiceProvider->getChoices(),
+                'choices'     => $this->groupChoiceProvider->getChoices(),
-                'required' => true,
+                'choice_attr' => $this->groupChoiceProvider->getChoicesAttributes(),
+                'required'    => true,
             ])
             ->add('type', ChoiceType::class, [
                 'label'    => $this->translator->trans('Block type', [], 'Modules.Wscustomhtml.Admin'),
@@ -83,6 +84,7 @@ class CustomHtmlBlockType extends AbstractType
                 'label'    => $this->translator->trans('Slider mode', [], 'Modules.Wscustomhtml.Admin'),
                 'choices'  => array_flip(Config::SLIDER_MODES),
                 'required' => false,
+                'help'     => $this->translator->trans('"Mobile only": slider only on mobile, a static grid shows instead from tablet up.', [], 'Modules.Wscustomhtml.Admin'),
                 'row_attr' => ['class' => 'customhtmlblock-type-field customhtmlblock-type-slider'],
             ])
             ->add('slides_per_view_mobile', NumberType::class, [
@@ -103,8 +105,8 @@ class CustomHtmlBlockType extends AbstractType
                 'label'    => $this->translator->trans('Slides visible on desktop', [], 'Modules.Wscustomhtml.Admin'),
                 'required' => false,
                 'scale'    => 2,
-                'attr'     => ['min' => 0, 'step' => '0.05'],
+                'attr'     => ['min' => 0, 'step' => '0.05', 'placeholder' => $this->translator->trans('Auto', [], 'Modules.Wscustomhtml.Admin')],
-                'help'     => $this->translator->trans('In "static grid on desktop" mode this is rounded to the nearest whole number of columns.', [], 'Modules.Wscustomhtml.Admin'),
+                'help'     => $this->translator->trans('In "Mobile only" mode this is rounded to the nearest whole number of columns. Leave empty for an equal-width column.', [], 'Modules.Wscustomhtml.Admin'),
                 'row_attr' => ['class' => 'customhtmlblock-type-field customhtmlblock-type-slider col-4'],
             ])
             ->add('autoplay_delay', IntegerType::class, [
@@ -130,7 +132,7 @@ class CustomHtmlBlockType extends AbstractType
             ->add('description', TextareaType::class, [
                 'label'    => $this->translator->trans('Description', [], 'Modules.Wscustomhtml.Admin'),
                 'required' => false,
-                'row_attr' => ['class' => 'customhtmlblock-type-field customhtmlblock-type-banner customhtmlblock-type-alert'],
+                'row_attr' => ['class' => 'customhtmlblock-type-field customhtmlblock-type-banner customhtmlblock-type-alert customhtmlblock-type-usp'],
             ])
             ->add('extra_description', TextareaType::class, [
                 'label'    => $this->translator->trans('Extra description', [], 'Modules.Wscustomhtml.Admin'),

src/Form/Type/CustomHtmlGroupType.php

@@ -29,10 +29,16 @@ class CustomHtmlGroupType extends AbstractType
                 'required' => true,
             ])
             ->add('custom_class', TextType::class, [
-                'label'    => $this->translator->trans('Custom classes', [], 'Modules.Wscustomhtml.Admin'),
+                'label'    => $this->translator->trans('Custom group classes', [], 'Modules.Wscustomhtml.Admin'),
                 'required' => false,
                 'attr'     => ['placeholder' => 'col-md-6'],
             ])
+            ->add('default_block_class', TextType::class, [
+                'label'    => $this->translator->trans('Default block class', [], 'Modules.Wscustomhtml.Admin'),
+                'required' => false,
+                'attr'     => ['placeholder' => 'col-12 col-lg-6 col-xl-5'],
+                'help'     => $this->translator->trans('Applied to every block in this group automatically, in addition to that block\'s own custom classes. Useful when several blocks need the same column layout.', [], 'Modules.Wscustomhtml.Admin'),
+            ])
             ->add('active', SwitchType::class, [
                 'label'    => $this->translator->trans('Active', [], 'Modules.Wscustomhtml.Admin'),
                 'required' => false,

src/Grid/Definition/Factory/CustomHtmlBlockGridDefinitionFactory.php

@@ -170,10 +170,17 @@ final class CustomHtmlBlockGridDefinitionFactory extends AbstractGridDefinitionF
                     'route_param_field'  => 'id_ws_customhtml',
                     'use_inline_display' => true,
                     'clickable_row'      => true,
+                    'extra_route_params' => ['idGroup' => 'id_ws_customhtml_group'],
                 ])
             )
             ->add(
-                $this->buildDeleteAction('customhtmlblock_delete', 'idCustomHtmlBlock', 'id_ws_customhtml')
+                $this->buildDeleteAction(
+                    'customhtmlblock_delete',
+                    'idCustomHtmlBlock',
+                    'id_ws_customhtml',
+                    'POST',
+                    ['idGroup' => 'id_ws_customhtml_group']
+                )
             );
     }
 }

src/Grid/Definition/Factory/CustomHtmlGroupGridDefinitionFactory.php

@@ -72,11 +72,6 @@ final class CustomHtmlGroupGridDefinitionFactory extends AbstractGridDefinitionF
                 ->setName($this->trans('Hook', [], 'Modules.Wscustomhtml.Admin'))
                 ->setOptions(['field' => 'hook_name'])
             )
-            ->add(
-                (new DataColumn('custom_class'))
-                ->setName($this->trans('Custom classes', [], 'Modules.Wscustomhtml.Admin'))
-                ->setOptions(['field' => 'custom_class'])
-            )
             ->add(
                 (new DataColumn('blocks_count'))
                 ->setName($this->trans('Blocks', [], 'Modules.Wscustomhtml.Admin'))

src/Model/CustomHtmlGroup.php

@@ -19,6 +19,9 @@ class CustomHtmlGroup extends ObjectModel
     /** @var string */
     public $custom_class = '';
 
+    /** @var string */
+    public $default_block_class = '';
+
     /** @var int */
     public $active = 1;
 
@@ -38,6 +41,7 @@ class CustomHtmlGroup extends ObjectModel
             'hook_name' => ['type' => self::TYPE_STRING, 'validate' => 'isGenericName', 'required' => true, 'size' => 64],
             'title'     => ['type' => self::TYPE_STRING, 'validate' => 'isGenericName', 'required' => true, 'size' => 256],
             'custom_class' => ['type' => self::TYPE_STRING, 'validate' => 'isGenericName', 'required' => false, 'size' => 128],
+            'default_block_class' => ['type' => self::TYPE_STRING, 'validate' => 'isGenericName', 'required' => false, 'size' => 128],
             'active'    => ['type' => self::TYPE_BOOL, 'validate' => 'isBool'],
             'ordering'  => ['type' => self::TYPE_INT, 'validate' => 'isInt'],
             'date_add'  => ['type' => self::TYPE_DATE, 'validate' => 'isDate'],
@@ -48,7 +52,7 @@ class CustomHtmlGroup extends ObjectModel
     public static function getActiveByHookName(string $hookName): array
     {
         $result = Db::getInstance()->executeS(
-            'SELECT `id_ws_customhtml_group`, `title`, `active`, `custom_class`, `ordering`
+            'SELECT `id_ws_customhtml_group`, `title`, `active`, `custom_class`, `default_block_class`, `ordering`
              FROM `' . _DB_PREFIX_ . 'ws_customhtml_group`
              WHERE `hook_name` = \'' . pSQL($hookName) . '\'
              AND `active` = 1

src/Module/DisplayHooks.php

@@ -152,8 +152,11 @@ trait DisplayHooks
         } else {
             $config['breakpoints'] = [
                 768 => ['slidesPerView' => (float) $block['slides_per_view_tablet']],
-                992 => ['slidesPerView' => (float) $block['slides_per_view_desktop']],
             ];
+
+            if ((float) $block['slides_per_view_desktop'] > 0) {
+                $config['breakpoints'][992] = ['slidesPerView' => (float) $block['slides_per_view_desktop']];
+            }
         }
 
         if ((int) $block['autoplay_delay'] > 0) {
@@ -167,8 +170,12 @@ trait DisplayHooks
         return json_encode($config);
     }
 
-    private function buildSliderDesktopColumnWidth(array $block): string
+    private function buildSliderDesktopColumnWidth(array $block): ?string
     {
+        if ((float) $block['slides_per_view_desktop'] <= 0) {
+            return null;
+        }
+
         $columns = max(1, (int) round((float) $block['slides_per_view_desktop']));
 
         return round(100 / $columns, 4) . '%';

src/Module/Install.php

@@ -51,6 +51,7 @@ trait Install
                 `hook_name` VARCHAR(64) NOT NULL,
                 `title` VARCHAR(256) NOT NULL DEFAULT \'\',
                 `custom_class` VARCHAR(128) NOT NULL DEFAULT \'\',
+                `default_block_class` VARCHAR(128) NOT NULL DEFAULT \'\',
                 `active` TINYINT(1) NOT NULL DEFAULT 1,
                 `ordering` INT(11) NOT NULL DEFAULT 0,
                 `date_add` DATETIME NOT NULL,

theme-overrides/displayHomeUsps1/banner.tpl

@@ -0,0 +1,10 @@
+{if !empty($block.link)}<a href="{$block.link|escape:'html':'UTF-8'}">{/if}
+    <p class="h1 usp__name text-center">
+        <span>{$block.title|escape:'html':'UTF-8'}</span>
+    </p>
+    {if !empty($block.description)}
+    <p class="usp__description text-center">
+        {$block.description|escape:'html':'UTF-8'|nl2br}
+    </p>
+    {/if}
+{if !empty($block.link)}</a>{/if}

theme-overrides/displayHomeUsps2/usp.tpl

@@ -0,0 +1,11 @@
+{if !empty($block.link)}<a href="{$block.link|escape:'html':'UTF-8'}">{/if}
+    <small class="uppercase-mono-red">/{$iteration|string_format:"%02d"}</small>
+    <p class="h3 font-default usp__name mt2 mt-lg-3">
+        <span>{$block.title|escape:'html':'UTF-8'}</span>
+    </p>
+    {if !empty($block.description)}
+    <p class="usp__description">
+        {$block.description|escape:'html':'UTF-8'|nl2br}
+    </p>
+    {/if}
+{if !empty($block.link)}</a>{/if}

upgrade/upgrade-1.19.0.php

@@ -0,0 +1,21 @@
+<?php
+
+if (!defined('_PS_VERSION_')) {
+    exit;
+}
+
+function upgrade_module_1_19_0($module)
+{
+    $existing = Db::getInstance()->executeS(
+        'SHOW COLUMNS FROM `' . _DB_PREFIX_ . 'ws_customhtml_group` LIKE \'default_block_class\''
+    );
+
+    if (!empty($existing)) {
+        return true;
+    }
+
+    return Db::getInstance()->execute(
+        'ALTER TABLE `' . _DB_PREFIX_ . 'ws_customhtml_group`
+         ADD COLUMN `default_block_class` VARCHAR(128) NOT NULL DEFAULT \'\' AFTER `custom_class`'
+    );
+}

views/css/front/customhtml.css

@@ -7,6 +7,7 @@
     padding: 2rem;
     bottom: 0px;
     position: absolute;
+    z-index: 2;
 }
 
 .customhtml-banner-title {
@@ -18,13 +19,16 @@
     margin-bottom: 1rem;
 }
 
-/* .customhtml-banner-image--gradient {
+.customhtml-banner-image {
-    width: 100%;
+    position: relative;
-    height: 100%;
+}
+
+.customhtml-banner-image--gradient {
     position: absolute;
-    background: transparent linear-gradient(180deg, #27272777 0%, #272727 100%)
+    inset: 0;
-        0% 0% no-repeat padding-box;
+    pointer-events: none;
-} */
+    z-index: 1;
+}
 /* Alert */
 .customhtml-alert {
     max-height: 500px;

views/js/admin/customhtmlblock_form.js

@@ -18,6 +18,20 @@ $(document).ready(function () {
     $('#custom_html_block_type').on('change', toggleBlockTypeFields);
     toggleBlockTypeFields();
 
+    function toggleGroupDefaultClassHint() {
+        var hint = $('#customhtmlblock-group-default-class-hint');
+        var defaultClass = $('#custom_html_block_id_ws_customhtml_group option:selected').data('defaultBlockClass');
+
+        if (defaultClass) {
+            hint.text(hint.data('template').replace('%s%', defaultClass)).show();
+        } else {
+            hint.hide();
+        }
+    }
+
+    $('#custom_html_block_id_ws_customhtml_group').on('change', toggleGroupDefaultClassHint);
+    toggleGroupDefaultClassHint();
+
     function initRepeater(containerSelector, addButtonSelector, itemClass, removeButtonClass) {
         var container = $(containerSelector);
         var removeLabel = container.data('removeLabel');

views/templates/admin/form/blocks/block_form.html.twig

@@ -114,12 +114,17 @@
                     {{ form_row(customHtmlBlockForm.link_text) }}
                 </div>
 
+                <p
+                    id="customhtmlblock-group-default-class-hint"
+                    class="alert alert-warning"
+                    data-template="{{ 'The group that this block belongs to applies the classes "%s%" to every block. Edit the group to change this - it is stored under the "Default block class" input.'|trans({}, 'Modules.Wscustomhtml.Admin')|e('html_attr') }}"
+                ></p>
                 {{ form_row(customHtmlBlockForm.custom_class) }}
                 {{ form_row(customHtmlBlockForm.active) }}
                 {{ form_rest(customHtmlBlockForm) }}
             </div>
             <div class="card-footer">
-                <a href="{{ path('customhtmlblock_index') }}" class="btn btn-outline-secondary">
+                <a href="{{ path('customhtmlblock_index', idGroup is defined and idGroup ? {'idGroup': idGroup} : {}) }}" class="btn btn-outline-secondary">
                     {{ 'Cancel'|trans({}, 'Admin.Actions') }}
                 </a>
                 <button class="btn btn-primary float-right">

views/templates/admin/form/blocks/group_form.html.twig

@@ -17,6 +17,9 @@
                     {{ 'Cancel'|trans({}, 'Admin.Actions') }}
                 </a>
                 {% if idCustomHtmlGroup is defined %}
+                    <a href="{{ path('customhtmlblock_index', {'idGroup': idCustomHtmlGroup}) }}" class="btn btn-outline-primary">
+                        {{ 'View blocks'|trans({}, 'Modules.Wscustomhtml.Admin') }}
+                    </a>
                     <a href="{{ path('customhtmlblock_create', {'idGroup': idCustomHtmlGroup}) }}" class="btn btn-outline-primary">
                         {{ 'Add block'|trans({}, 'Modules.Wscustomhtml.Admin') }}
                     </a>

views/templates/hook/_alert.tpl

@@ -1,21 +1,30 @@
 {if !empty($block.description)}
 <div
-    id="customhtml-alert-{$block.id_ws_customhtml|intval}"
     class="alert alert-{$block.alert_type|escape:'html':'UTF-8'} alert-dismissible customhtml-alert"
     role="alert"
     data-timeout="{$block.timeout|intval}"
 >
-    {if $block.show_title && !empty($block.title)}
+    <div class="row">
-    <strong class="customhtml-alert-title">{$block.title|escape:'html':'UTF-8'}</strong>
+        {block name=alert_content}
-    {/if}
+        <div class="col d-flex align-items-center">
-    <span class="customhtml-alert-text">{$block.description|escape:'html':'UTF-8'|nl2br}</span>
+            {if $block.show_title && !empty($block.title)}
-    {if !empty($block.link)}
+            <strong class="customhtml-alert-title">{$block.title|escape:'html':'UTF-8'}</strong>
-    <a href="{$block.link|escape:'html':'UTF-8'}" class="btn btn-{$block.alert_type|escape:'html':'UTF-8'} customhtml-alert-btn">
+            {/if}
-        {if !empty($block.link_text)}{$block.link_text|escape:'html':'UTF-8'}{else}{l s='Learn more' d='Modules.Wscustomhtml.Shop'}{/if}
+            <span class="customhtml-alert-text">{$block.description|escape:'html':'UTF-8'|nl2br}</span>
-    </a>
+        </div>
-    {/if}
+        {/block}
-    <button type="button" class="close customhtml-alert-close" aria-label="{l s='Close' d='Modules.Wscustomhtml.Shop'}">
+        {block name=alert_actions}
-        <span aria-hidden="true">&times;</span>
+        <div class="col-auto">
-    </button>
+            {if !empty($block.link)}
+            <a href="{$block.link|escape:'html':'UTF-8'}" class="btn btn-{$block.alert_type|escape:'html':'UTF-8'} customhtml-alert-btn">
+                {if !empty($block.link_text)}{$block.link_text|escape:'html':'UTF-8'}{else}{l s='Learn more' d='Modules.Wscustomhtml.Shop'}{/if}
+            </a>
+            {/if}
+            <button type="button" class="close customhtml-alert-close" aria-label="{l s='Close' d='Modules.Wscustomhtml.Shop'}">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        {/block}
+    </div>
 </div>
 {/if}

views/templates/hook/_banner.tpl

@@ -1,23 +1,38 @@
 <div class="customhtml-banner row flex-column position-relative">
-    <div class="customhtml-banner-image">
+    {block name=banner_image}
-    <div class="customhtml-banner-image--gradient"></div>
+        <div class="customhtml-banner-image">
-    {if !empty($block.image_url)}
+            <div class="customhtml-banner-image--gradient"></div>
-        <img src="{$block.image_url|escape:'html':'UTF-8'}" alt="{$block.title|escape:'html':'UTF-8'}">
+            {if !empty($block.image_url)}
-    {else}
+                <img src="{$block.image_url|escape:'html':'UTF-8'}" alt="{$block.title|escape:'html':'UTF-8'}">
-        <img
+            {else}
-            src="{$urls.img_ps_url}noimageavailable.jpg"
+                <img
-            alt="{$block.title|escape:'html':'UTF-8'}"
+                    src="{$urls.img_ps_url}noimageavailable.jpg"
-            width="100%"
+                    alt="{$block.title|escape:'html':'UTF-8'}"
-            class="img-fluid rounded lazyload"
+                    width="100%"
-        />
+                    class="img-fluid rounded lazyload"
-    {/if}
+                />
-    </div>
+            {/if}
+        </div>
+    {/block}
+    {block name=banner_content}
     <div class="customhtml-banner-content">
-        {assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/_banner_content.tpl"}
+        {if !empty($count)}
-        {if file_exists($customhtmlOverridePath)}
+            <span class="customhtml-banner-count font-monospace">{$count}</span>
-            {include file="module:ws_customhtml/views/templates/hook/`$hookName`/_banner_content.tpl" block=$block}
+        {/if}
-        {else}
+        {if $block.show_title && !empty($block.title)}
-            {include file="module:ws_customhtml/views/templates/hook/_banner_content.tpl" block=$block}
+            <h3 class="customhtml-banner-title">{$block.title|escape:'html':'UTF-8'}</h3>
+        {/if}
+        {if !empty($block.description)}
+            <div class="customhtml-banner-description">{$block.description|escape:'html':'UTF-8'|nl2br}</div>
+        {/if}
+        {if !empty($block.extra_description)}
+            <div class="customhtml-banner-extra-description">{$block.extra_description|escape:'html':'UTF-8'|nl2br}</div>
+        {/if}
+        {if !empty($block.link)}
+            <a href="{$block.link|escape:'html':'UTF-8'}" class="btn btn-primary customhtml-banner-link">
+                {if !empty($block.link_text)}{$block.link_text|escape:'html':'UTF-8'}{else}{l s='Learn more' d='Modules.Wscustomhtml.Shop'}{/if}
+            </a>
         {/if}
     </div>
+    {/block}
 </div>

views/templates/hook/_banner_content.tpl

@@ -1,14 +0,0 @@
-{if $block.show_title && !empty($block.title)}
-<h3 class="customhtml-banner-title">{$block.title|escape:'html':'UTF-8'}</h3>
-{/if}
-{if !empty($block.description)}
-<div class="customhtml-banner-description">{$block.description|escape:'html':'UTF-8'|nl2br}</div>
-{/if}
-{if !empty($block.extra_description)}
-<div class="customhtml-banner-extra-description">{$block.extra_description|escape:'html':'UTF-8'|nl2br}</div>
-{/if}
-{if !empty($block.link)}
-<a href="{$block.link|escape:'html':'UTF-8'}" class="btn btn-primary customhtml-banner-link">
-    {if !empty($block.link_text)}{$block.link_text|escape:'html':'UTF-8'}{else}{l s='Learn more' d='Modules.Wscustomhtml.Shop'}{/if}
-</a>
-{/if}

views/templates/hook/_faq_accordion.tpl

@@ -2,8 +2,9 @@
     <div class="accordion customhtml-faq-accordion" id="customhtml-faq-{$block.id_ws_customhtml|intval}">
         {foreach from=$block.faqs item="faq" name="customhtmlFaqLoop"}
             <div class="card">
+                {block name=faq_question}
                 <div class="card-header" id="customhtml-faq-heading-{$block.id_ws_customhtml|intval}-{$faq.id_ws_customhtml_faq|intval}">
-                    
+
                     {if !empty($faq.answer)}
                         <button
                             class="btn btn-link col-12 d-flex text-left{if !$smarty.foreach.customhtmlFaqLoop.first} collapsed{/if}"
@@ -14,7 +15,7 @@
                             aria-controls="customhtml-faq-collapse-{$block.id_ws_customhtml|intval}-{$faq.id_ws_customhtml_faq|intval}"
                         >
                     {/if}
-            
+
                     <div class="faq-question col pl-0">
                         {$faq.question|escape:'html':'UTF-8'}
                     </div>
@@ -39,7 +40,9 @@
                     {/if}
 
                 </div>
+                {/block}
                 {if !empty($faq.answer)}
+                    {block name=faq_answer}
                     <div
                         id="customhtml-faq-collapse-{$block.id_ws_customhtml|intval}-{$faq.id_ws_customhtml_faq|intval}"
                         class="collapse{if $smarty.foreach.customhtmlFaqLoop.first} show{/if}"
@@ -50,6 +53,7 @@
                             {$faq.answer nofilter}
                         </div>
                     </div>
+                    {/block}
                 {/if}
             </div>
         {/foreach}

views/templates/hook/_slider.tpl

@@ -2,15 +2,16 @@
     {if $block.slider_mode == 'responsive'}
         {block name=slider_responsive}
             <div class="d-lg-none">
-                <div id="customhtml-slider-{$block.id_ws_customhtml|intval}" class="swiper customhtml-slider" data-swiper="{$block.slider_config|escape:'html':'UTF-8'}">
+                <div class="swiper customhtml-slider" data-swiper="{$block.slider_config|escape:'html':'UTF-8'}">
                     <div class="swiper-wrapper">
                         {foreach from=$block.slides item="slide" name="slides"}
+                        {assign var="count" value=$smarty.foreach.slides.iteration|string_format:"%02d"}
                         <div class="swiper-slide">
                             {assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/banner.tpl"}
                             {if file_exists($customhtmlOverridePath)}
-                                {include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName}
+                                {include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName count=$count}
                             {else}
-                                {include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
+                                {include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide count=$count}
                             {/if}
                         </div>
                         {/foreach}
@@ -19,12 +20,17 @@
             </div>
             <div class="row d-none d-lg-flex customhtml-slider-grid">
                 {foreach from=$block.slides item="slide" name="slides"}
+                {assign var="count" value=$smarty.foreach.slides.iteration|string_format:"%02d"}
+                {if !empty($block.slider_desktop_column_width)}
                 <div class="customhtml-slider-grid-item" style="flex: 0 0 {$block.slider_desktop_column_width|escape:'html':'UTF-8'}; max-width: {$block.slider_desktop_column_width|escape:'html':'UTF-8'};">
+                {else}
+                <div class="customhtml-slider-grid-item col">
+                {/if}
                    {assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/banner.tpl"}
                     {if file_exists($customhtmlOverridePath)}
-                        {include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName}
+                        {include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName count=$count}
                     {else}
-                        {include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
+                        {include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide count=$count}
                     {/if}
                 </div>
                 {/foreach}
@@ -33,15 +39,16 @@
     {/if}
     {if $block.slider_mode != 'responsive'}
         {block name=slider_always}
-            <div id="customhtml-slider-{$block.id_ws_customhtml|intval}" class="swiper customhtml-slider" data-swiper="{$block.slider_config|escape:'html':'UTF-8'}">
+            <div class="swiper customhtml-slider" data-swiper="{$block.slider_config|escape:'html':'UTF-8'}">
                 <div class="swiper-wrapper">
                     {foreach from=$block.slides item="slide" name="slides"}
+                    {assign var="count" value=$smarty.foreach.slides.iteration|string_format:"%02d"}
                     <div class="swiper-slide">
                         {assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/banner.tpl"}
                         {if file_exists($customhtmlOverridePath)}
-                            {include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName}
+                            {include file="module:ws_customhtml/views/templates/hook/`$hookName`/banner.tpl" block=$slide group=$group hookName=$hookName count=$count}
                         {else}
-                            {include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide}
+                            {include file="module:ws_customhtml/views/templates/hook/_banner.tpl" block=$slide count=$count}
                         {/if}
                     </div>
                     {/foreach}
@@ -50,5 +57,3 @@
         {/block}
     {/if}
 {/if}
-
-

views/templates/hook/_usp.tpl

@@ -1,17 +1,24 @@
-{if !empty($block.image_url) || ($block.show_title && !empty($block.title))}
+{if !empty($block.image_url) || ($block.show_title && !empty($block.title)) || !empty($block.description)}
 {if !empty($block.link)}
 <a href="{$block.link|escape:'html':'UTF-8'}" class="customhtml-usp d-flex align-items-center">
 {else}
 <div class="customhtml-usp d-flex align-items-center">
 {/if}
+    {block name=usp_icon}
     {if !empty($block.image_url)}
     <span class="customhtml-usp-icon">
         <img src="{$block.image_url|escape:'html':'UTF-8'}" alt="">
     </span>
     {/if}
+    {/block}
+    {block name=usp_content}
     {if $block.show_title && !empty($block.title)}
     <span class="customhtml-usp-text">{$block.title|escape:'html':'UTF-8'}</span>
     {/if}
+    {if !empty($block.description)}
+    <span class="customhtml-usp-description">{$block.description|escape:'html':'UTF-8'|nl2br}</span>
+    {/if}
+    {/block}
 {if !empty($block.link)}
 </a>
 {else}

views/templates/hook/customhtml_block.tpl

@@ -1,13 +1,13 @@
 {if !empty($groupList)}
 <div class="customhtml-container {$hookName|escape:'html':'UTF-8'}--container">
     {foreach from=$groupList item="group"}
-    <div class="customhtml-group customhtml-group-{$group.id_ws_customhtml_group|intval} row{if !empty($group.custom_class)} {$group.custom_class|escape:'html':'UTF-8'}{/if}">
+    <div class="customhtml-group row{if !empty($group.custom_class)} {$group.custom_class|escape:'html':'UTF-8'}{/if}">
-        {foreach from=$group.blocks item="block"}
+        {foreach from=$group.blocks item="block" name="blocks"}
-        <div class="customhtml-block col{if !empty($block.custom_class)} {$block.custom_class|escape:'html':'UTF-8'}{/if}">
+        <div class="customhtml-block col{if !empty($group.default_block_class)} {$group.default_block_class|escape:'html':'UTF-8'}{/if}{if !empty($block.custom_class)} {$block.custom_class|escape:'html':'UTF-8'}{/if}">
             {assign var="customhtmlOverridePath" value="{$smarty.const._PS_THEME_DIR_}modules/ws_customhtml/views/templates/hook/{$hookName}/{$block.type}.tpl"}
 
             {if file_exists($customhtmlOverridePath)}
-                {include file="module:ws_customhtml/views/templates/hook/`$hookName`/`$block.type`.tpl" block=$block group=$group hookName=$hookName}
+                {include file="module:ws_customhtml/views/templates/hook/`$hookName`/`$block.type`.tpl" block=$block group=$group hookName=$hookName iteration=$smarty.foreach.blocks.iteration}
             {elseif $block.type == 'faq'}
                 {if $block.show_title && !empty($block.title)}
                 <div class="customhtml-title">{$block.title|escape:'html':'UTF-8'}</div>

ws_customhtml.php

@@ -29,7 +29,7 @@ class Ws_CustomHtml extends Module implements WidgetInterface
     public function __construct()
     {
         $this->name = 'ws_customhtml';
-        $this->version = '1.17.0';
+        $this->version = '1.19.0';
         $this->author = 'Isabelle Oving-Anno | De Websmid BV';
         $this->need_instance = 0;
         $this->bootstrap = true;