N°3526 - Clean up pass on UIBlocks

- Add ancestors CSS classes on UIBlocks when missing (programmatically) - Fix SCSS due to some blocks inheriting their ancestors rules
2026-04-24 11:08:45 +02:00 · 2021-11-14 22:33:33 +01:00
parent 3598da8808
commit 0dc3d249da
46 changed files with 60 additions and 62 deletions
--- a/templates/base/components/alert/layout.html.twig
+++ b/templates/base/components/alert/layout.html.twig
@@ -1,5 +1,5 @@
 <div id="{{ oUIBlock.GetId() }}"
-	 class="ibo-alert ibo-is-{{ oUIBlock.GetColor() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}"
+	 class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetColor() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
     data-role="ibo-alert">
 	{% if oUIBlock.IsCollapsible() %}
 		<div class="ibo-alert--action-button ibo-alert--maximize-button" data-role="ibo-alert--collapse-toggler">
--- a/templates/base/components/breadcrumbs/layout.html.twig
+++ b/templates/base/components/breadcrumbs/layout.html.twig
@@ -1,4 +1,4 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-breadcrumbs" data-role="ibo-breadcrumbs">
+<div id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-breadcrumbs">
    <span class="ibo-breadcrumbs--previous-items-container ibo-is-hidden" data-role="ibo-breadcrumbs--previous-items-container">
        <button class="ibo-breadcrumbs--previous-items-list-toggler ibo-button ibo-is-alternative ibo-is-neutral" data-role="ibo-breadcrumbs--previous-items-list-toggler"
           aria-label="{{ 'UI:Component:Breadcrumbs:PreviousItemsListToggler:Label'|dict_s }}"
--- a/templates/base/components/button/buttonjs.html.twig
+++ b/templates/base/components/button/buttonjs.html.twig
@@ -1,6 +1,6 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
-        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
        data-role="ibo-button"
        {% if oUIBlock.GetDataAttributes() %}
            {% for sName, sValue in oUIBlock.GetDataAttributes() %}
--- a/templates/base/components/button/buttonurl.html.twig
+++ b/templates/base/components/button/buttonurl.html.twig
@@ -1,6 +1,6 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <a id="{{ oUIBlock.GetId() }}"
-        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
        data-role="ibo-button"
        {% if oUIBlock.GetDataAttributes() %}
            {% for sName, sValue in oUIBlock.GetDataAttributes() %}
--- a/templates/base/components/button/layout.html.twig
+++ b/templates/base/components/button/layout.html.twig
@@ -1,6 +1,6 @@
 {% set sAriaLabel = oUIBlock.GetLabel() is not empty ? oUIBlock.GetLabel() : (oUIBlock.GetTooltip() is not empty ? oUIBlock.GetTooltip() : '') %}
 <button id="{{ oUIBlock.GetId() }}"
-        class="ibo-button ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+        class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetActionType() }} ibo-is-{{ oUIBlock.GetColor() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
        data-role="ibo-button"
        {% if oUIBlock.GetDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
--- a/templates/base/components/collapsible-section/layout.html.twig
+++ b/templates/base/components/collapsible-section/layout.html.twig
@@ -1,5 +1,5 @@
 <div id="{{ oUIBlock.GetId() }}"
-	 class="ibo-collapsible-section {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
+	 class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsOpenedByDefault() %} ibo-is-opened{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
     data-role="ibo-collapsible-section">
 	<div class="ibo-collapsible-section--header" data-role="ibo-collapsible-section--collapse-toggler">
 		<div class="ibo-collapsible-section--action-button ibo-collapsible-section--maximize-button"><i class="fas fa-caret-down"></i></div>
--- a/templates/base/components/datatable/layout.html.twig
+++ b/templates/base/components/datatable/layout.html.twig
@@ -12,7 +12,7 @@
    {% endif %}
 {% endif %}

-<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlockCode() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
+<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}" data-role="ibo-datatable">
    <thead>
    {% if oUIBlock.GetOption("select_mode") is not empty %}
        <th></th>
--- a/templates/base/components/datatable/static/formtable/layout.html.twig
+++ b/templates/base/components/datatable/static/formtable/layout.html.twig
@@ -4,7 +4,7 @@
 <input type="hidden" name="attr_{{ oUIBlock.GetRef() }}" value="">

 {% set columns = oUIBlock.GetColumns() %}
-<table id="{{ oUIBlock.GetId() }}" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
+<table id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
    <thead>
    <tr>
        {% for column in columns %}
--- a/templates/base/components/datatable/static/layout.html.twig
+++ b/templates/base/components/datatable/static/layout.html.twig
@@ -2,7 +2,7 @@
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}

 {% set columns = oUIBlock.GetColumns() %}
-<table id="{{ oUIBlock.GetId() }}" width="100%" class="ibo-datatable listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
+<table id="{{ oUIBlock.GetId() }}" width="100%" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} listResults{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-datatable">
    <thead>
    <tr>
        {% for column in columns %}
--- a/templates/base/components/field/layout.html.twig
+++ b/templates/base/components/field/layout.html.twig
@@ -1,8 +1,7 @@
 {% set aParams = oUIBlock.GetParams() %}
 <div id="{{ oUIBlock.GetId() }}"
-     class="ibo-field ibo-field-{{ oUIBlock.GetLayout() }}
-        {% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}
-        {% if oUIBlock.GetAdditionalCSSClassesAsString() %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}"
+     class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-field-{{ oUIBlock.GetLayout() }}
+        {% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}"
     data-role="ibo-field"
     data-attribute-code="{{ oUIBlock.GetAttCode() }}"
     data-attribute-type="{{ oUIBlock.GetAttType() }}"
--- a/templates/base/components/fieldset/layout.html.twig
+++ b/templates/base/components/fieldset/layout.html.twig
@@ -1,5 +1,5 @@
 {% if oUIBlock.GetSubBlocks() %}
-    <fieldset class="ibo-fieldset {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-fieldset" id="{{ oUIBlock.GetId() }}">
+    <fieldset class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}" data-role="ibo-fieldset" id="{{ oUIBlock.GetId() }}">
        <legend class="ibo-fieldset-legend">{{ oUIBlock.GetLegend()| raw }}</legend>
        {% for oSubBlock in oUIBlock.GetSubBlocks() %}
            {{ render_block(oSubBlock, {aPage: aPage}) }}
--- a/templates/base/components/form/layout.html.twig
+++ b/templates/base/components/form/layout.html.twig
@@ -1,5 +1,5 @@
 <form method="post" enctype="multipart/form-data" id="{{ oUIBlock.GetId() }}"
-      class="ibo-form {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+      class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
      data-role="ibo-form"
        {% if oUIBlock.GetOnSubmitJsCode() %}
            onSubmit="{{ oUIBlock.GetOnSubmitJsCode() }}"
--- a/templates/base/components/global-search/layout.html.twig
+++ b/templates/base/components/global-search/layout.html.twig
@@ -1,7 +1,7 @@
 <div id="{{ oUIBlock.GetId() }}"
 	 {# Note: The "ibo-is-opened" class is put there and not through the JS widget to avoid visual glitches #}
 	 {# Otherwise it would open only when the DOM is ready and the JS widget instantiated #}
-     class="ibo-global-search {% if oUIBlock.HasQuery() %}ibo-is-opened{% endif %}"
+     class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.HasQuery() %}ibo-is-opened{% endif %}"
     data-role="ibo-global-search">
 	<form action="{{ oUIBlock.GetEndpoint() }}" method="get" class="ibo-global-search--head" data-role="ibo-global-search--head">
 		<a href="#" class="ibo-global-search--icon" data-role="ibo-global-search--icon"
--- a/templates/base/components/input/input-textarea.html.twig
+++ b/templates/base/components/input/input-textarea.html.twig
@@ -9,7 +9,7 @@
                      data-{{ sName }}="{{ sValue }}"
                  {% endfor %}
              {% endif %}
-            {% if oUIBlock.GetAdditionalCSSClassesAsString() %} class="{{ oUIBlock.GetAdditionalCSSClassesAsString() }}"{% endif %}
+            {% if oUIBlock.GetAdditionalCSSClassesAsString() %} class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}"{% endif %}
            {% if oUIBlock.GetPlaceHolder() %}  placeholder="{{ oUIBlock.GetPlaceHolder() }}" {% endif %}
            {% if oUIBlock.IsDisabled() %} disabled {% endif %}
 	>{{ oUIBlock.GetValue()|raw }}</textarea>
--- a/templates/base/components/input/layout.html.twig
+++ b/templates/base/components/input/layout.html.twig
@@ -2,7 +2,7 @@
 {% endblock %}
 {% block iboInput %}
    <input type="{{ oUIBlock.GetType() }}" id="{{ oUIBlock.GetId() }}" name="{{ oUIBlock.GetName() }}" value="{{ oUIBlock.GetValue()|raw }}"
-           class="ibo-input {% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}{% if oUIBlock.GetAdditionalCSSClassesAsString() %} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}"
+           class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
           data-role="ibo-input"
            {% if oUIBlock.IsChecked() %} checked="checked"{% endif %}
            {% if oUIBlock.IsDisabled() %} disabled{% endif %}
--- a/templates/base/components/medallion-icon/layout.html.twig
+++ b/templates/base/components/medallion-icon/layout.html.twig
@@ -1,7 +1,7 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
-<div id="{{ oUIBlock.GetId() }}" class="ibo-medallion-icon {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-medallion-icon">
+<div id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-medallion-icon">
    {% if oUIBlock.GetImageUrl() != '' %}
        <img class="ibo-medallion-icon--image" src="{{ oUIBlock.GetImageUrl() }}" />
    {% endif %}
--- a/templates/base/components/panel/layout.html.twig
+++ b/templates/base/components/panel/layout.html.twig
@@ -2,7 +2,7 @@
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
    <div id="{{ oUIBlock.GetId() }}"
-         class="ibo-panel {{ oUIBlock.GetCSSColorClass() }} {{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %} {% if oUIBlock.IsIconAsMedallion() %}ibo-has-medallion-icon{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} ibo-is-opened"
+         class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {{ oUIBlock.GetCSSColorClass() }} {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %} {% if oUIBlock.IsIconAsMedallion() %}ibo-has-medallion-icon{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} ibo-is-opened"
            {% block iboPanelMetaData %}{% endblock %}
         data-role="ibo-panel">
        <div class="ibo-panel--header" data-role="ibo-panel--header">
--- a/templates/base/components/pill/layout.html.twig
+++ b/templates/base/components/pill/layout.html.twig
@@ -3,7 +3,7 @@
 {% set sTagName = oUIBlock.HasUrl() ? 'a' : 'span' %}
 <{{ sTagName }} id="{{ oUIBlock.GetId() }}"
    {% if oUIBlock.HasUrl() %}href="{{ oUIBlock.GetUrl()|raw }}"{% endif %}
-    class="ibo-pill {{ oUIBlock.GetCSSColorClass() }}"
+    class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {{ oUIBlock.GetCSSColorClass() }}"
    data-role="ibo-pill"
    {% if oUIBlock.HasTooltip() %}data-tooltip-content="{{ oUIBlock.GetTooltip() }}" data-tooltip-show-delay="500"{% endif %}>
    {% for oSubBlock in oUIBlock.GetSubBlocks() %}
--- a/templates/base/components/popover-menu/item/mode_js.html.twig
+++ b/templates/base/components/popover-menu/item/mode_js.html.twig
@@ -1,7 +1,7 @@
 {% extends 'base/components/popover-menu/item/layout.html.twig' %}

 {% block iboPopoverMenuItem %}
-    <a id="{{ oUIBlock.GetID() }}" class="ibo-popover-menu--item" data-role="ibo-popover-menu--item" data-uid="{{ oUIBlock.GetUID() }}" href="{{ oUIBlock.GetUrl() }}" onclick="{{ oUIBlock.GetJsCode()|escape }}"
+    <a id="{{ oUIBlock.GetID() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-popover-menu--item" data-uid="{{ oUIBlock.GetUID() }}" href="{{ oUIBlock.GetUrl() }}" onclick="{{ oUIBlock.GetJsCode()|escape }}"
            {% if oUIBlock.GetDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                    data-{{ sName }}="{{ sValue }}"
--- a/templates/base/components/popover-menu/item/mode_separator.html.twig
+++ b/templates/base/components/popover-menu/item/mode_separator.html.twig
@@ -1,6 +1,6 @@
 {% extends 'base/components/popover-menu/item/layout.html.twig' %}
 {% block iboPopoverMenuItem %}
-    <hr class="ibo-popover-menu--item ibo-popover-menu--separator" data-role="ibo-popover-menu--item ibo-popover-menu--separator"
+    <hr class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-popover-menu--item ibo-popover-menu--item-separator"
            {% if oUIBlock.GetDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                    data-{{ sName }}="{{ sValue }}"
--- a/templates/base/components/popover-menu/item/mode_url.html.twig
+++ b/templates/base/components/popover-menu/item/mode_url.html.twig
@@ -1,7 +1,7 @@
 {% extends 'base/components/popover-menu/item/layout.html.twig' %}

 {% block iboPopoverMenuItem %}
-    <a id="{{ oUIBlock.GetID() }}" class="ibo-popover-menu--item" data-role="ibo-popover-menu--item" data-uid="{{ oUIBlock.GetUID() }}" href="{{ oUIBlock.GetUrl() }}" target="{{ oUIBlock.GetTarget() }}"
+    <a id="{{ oUIBlock.GetID() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-popover-menu--item" data-uid="{{ oUIBlock.GetUID() }}" href="{{ oUIBlock.GetUrl() }}" target="{{ oUIBlock.GetTarget() }}"
            {% if oUIBlock.HasDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                    data-{{ sName }}="{{ sValue }}"
--- a/templates/base/components/popover-menu/layout.html.twig
+++ b/templates/base/components/popover-menu/layout.html.twig
@@ -1,4 +1,4 @@
-<div {% if oUIBlock.GetId() is defined %}id="{{ oUIBlock.GetId() }}"{% endif %} class="ibo-popover-menu" data-role="ibo-popover-menu">
+<div {% if oUIBlock.GetId() is defined %}id="{{ oUIBlock.GetId() }}"{% endif %} class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-popover-menu">
    {% for aSection in oUIBlock.GetSections() %}
        {% if aSection.aItems|length > 0 %}
            <div class="ibo-popover-menu--section" data-role="ibo-popover-menu--section">
--- a/templates/base/components/popover-menu/newsroom-menu/layout.html.twig
+++ b/templates/base/components/popover-menu/newsroom-menu/layout.html.twig
@@ -1,4 +1,4 @@
 <div data-role="ibo-navigation-menu--notifications-menu--container">
-	<div {% if oUIBlock.GetId() is defined %}id="{{ oUIBlock.GetId() }}"{% endif %} class="ibo-popover-menu"
+	<div {% if oUIBlock.GetId() is defined %}id="{{ oUIBlock.GetId() }}"{% endif %} class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}"
 		 data-role="ibo-popover-menu"></div>
 </div>
--- a/templates/base/components/quick-create/layout.html.twig
+++ b/templates/base/components/quick-create/layout.html.twig
@@ -1,4 +1,4 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-quick-create" data-role="ibo-quick-create">
+<div id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-quick-create">
 	<form action="{{ oUIBlock.GetEndpoint() }}" method="get" class="ibo-quick-create--head" data-role="ibo-quick-create--head">
 		<input type="hidden" name="operation" value="new">
 		<a href="#" class="ibo-quick-create--icon" data-role="ibo-quick-create--icon"
--- a/templates/base/components/spinner/layout.html.twig
+++ b/templates/base/components/spinner/layout.html.twig
@@ -1,5 +1,5 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
-    <i id="{{ oUIBlock.GetId() }}" class="fas fa-sync-alt fa-spin {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}" aria-hidden="true"></i>
+    <i id="{{ oUIBlock.GetId() }}" class="fas fa-sync-alt fa-spin {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} {{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" aria-hidden="true"></i>
 {% endapply %}
--- a/templates/base/components/title/layout.html.twig
+++ b/templates/base/components/title/layout.html.twig
@@ -1,5 +1,5 @@
 {% apply spaceless %}
-    <div id="{{ oUIBlock.GetId() }}" class="ibo-title {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-title">
+    <div id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.HasIcon() %}ibo-has-icon{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" data-role="ibo-title">
        {% if oUIBlock.HasIcon() %}
            <div class="ibo-title--icon">
                <div class="ibo-title--icon-background ibo-title--icon-background--must-{{ oUIBlock.GetIconCoverMethod() }}" style="background-image: url('{{ oUIBlock.GetIconUrl()|raw }}');"></div>
--- a/templates/base/components/toolbar/layout.html.twig
+++ b/templates/base/components/toolbar/layout.html.twig
@@ -3,7 +3,7 @@
 {# Toolbar #}
 {% apply spaceless %}
    <div id="{{ oUIBlock.GetId() }}"
-         class="ibo-toolbar {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+         class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
         data-role="ibo-toolbar"
    >

--- a/templates/base/components/toolbar/toolbar-spacer/layout.html.twig
+++ b/templates/base/components/toolbar/toolbar-spacer/layout.html.twig
@@ -1,7 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
-    <div id="{{ oUIBlock.GetId() }}" class="ibo-toolbar-spacer
-        {% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
+    <div id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% endif %}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}">
    </div>
 {% endapply %}
--- a/templates/base/layouts/activity-panel/activity-entry/layout.html.twig
+++ b/templates/base/layouts/activity-panel/activity-entry/layout.html.twig
@@ -1,5 +1,5 @@
 {% apply spaceless %}
-<div class="ibo-activity-entry {% if oUIBlock.IsFromCurrentUser() %}ibo-is-current-user{% endif %} {% block iboActivityEntryExtraClasses %}{% endblock %}"
+<div class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsFromCurrentUser() %}ibo-is-current-user{% endif %} {% block iboActivityEntryExtraClasses %}{% endblock %}"
     data-role="ibo-activity-entry"
     data-entry-type="{% block iboActivityEntryType %}{{ oUIBlock.GetType() }}{% endblock %}"
     data-entry-datetime-raw="{{ oUIBlock.GetRawDateTime() }}"
--- a/templates/base/layouts/activity-panel/caselog-entry-form/layout.html.twig
+++ b/templates/base/layouts/activity-panel/caselog-entry-form/layout.html.twig
@@ -1,6 +1,6 @@
 {% apply spaceless %}
 <form id="{{ oUIBlock.GetId() }}"
-      class="ibo-caselog-entry-form {% if oUIBlock.IsSubmitAutonomous() and (bInitOpened == false) %}ibo-is-closed{% endif %}"
+      class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsSubmitAutonomous() and (bInitOpened == false) %}ibo-is-closed{% endif %}"
      data-role="ibo-caselog-entry-form"
      data-object-class="{{ oUIBlock.GetObjectClass() }}"
      data-object-id="{{ oUIBlock.GetObjectId() }}"
--- a/templates/base/layouts/activity-panel/layout.html.twig
+++ b/templates/base/layouts/activity-panel/layout.html.twig
@@ -1,5 +1,5 @@
 <div id="{{ oUIBlock.GetId() }}"
-     class="ibo-activity-panel {% if oUIBlock.IsExpanded() %}ibo-is-expanded{% endif %} {% if oUIBlock.IsClosed() %}ibo-is-closed{% endif %}"
+     class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsExpanded() %}ibo-is-expanded{% endif %} {% if oUIBlock.IsClosed() %}ibo-is-closed{% endif %}"
     data-role="ibo-activity-panel"
     data-object-class="{{ oUIBlock.GetObjectClass() }}"
     data-object-id="{{ oUIBlock.GetObjectId() }}"
--- a/templates/base/layouts/activity-panel/print.html.twig
+++ b/templates/base/layouts/activity-panel/print.html.twig
@@ -1,4 +1,4 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-activity-panel ibo-tab-container" data-role="ibo-activity-panel" data-object-class="{{ oUIBlock.GetObjectClass() }}" data-object-id="{{ oUIBlock.GetObjectId() }}" data-object-mode="{{ oUIBlock.GetObjectMode() }}">
+<div id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-tab-container" data-role="ibo-activity-panel" data-object-class="{{ oUIBlock.GetObjectClass() }}" data-object-id="{{ oUIBlock.GetObjectId() }}" data-object-mode="{{ oUIBlock.GetObjectMode() }}">
 	<div class="ibo-activity-panel--header">
 		<div class="ibo-title--text title">
 			{{ 'UI:Layout:ActivityPanel:Tab:Activity:Title'|dict_s }}
--- a/templates/base/layouts/content-block/layout.html.twig
+++ b/templates/base/layouts/content-block/layout.html.twig
@@ -8,7 +8,7 @@
    {% block iboContentBlockContainer %}
        {% if bHasDiv %}
            <div id="{{ oUIBlock.GetId() }}"
-            class="{% if oUIBlock.GetAdditionalCSSClassesAsString() %}{{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% endif %} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
+            class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}"
            {% if oUIBlock.GetDataAttributes() %}
                {% for sName, sValue in oUIBlock.GetDataAttributes() %}
                    data-{{ sName }}="{{ sValue }}"
--- a/templates/base/layouts/multi-column/column/layout.html.twig
+++ b/templates/base/layouts/multi-column/column/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div class="ibo-column" data-role="ibo-column">
+<div class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-column">
    {% for oSubBlock in oUIBlock.GetSubBlocks() %}
        {{ render_block(oSubBlock, {aPage: aPage}) }}
    {% endfor %}
--- a/templates/base/layouts/multi-column/layout.html.twig
+++ b/templates/base/layouts/multi-column/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div class="ibo-multi-column" data-role="ibo-multi-column">
+<div class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-multi-column">
    {% for oSubBlock in oUIBlock.GetSubBlocks() %}
        {{ render_block(oSubBlock, {aPage: aPage}) }}
    {% endfor %}
--- a/templates/base/layouts/navigation-menu/layout.html.twig
+++ b/templates/base/layouts/navigation-menu/layout.html.twig
@@ -1,4 +1,4 @@
-<nav id="{{ oUIBlock.GetId() }}" class="ibo-navigation-menu {% if oUIBlock.IsExpanded() == true %}ibo-is-expanded{% endif %}" data-role="ibo-navigation-menu">
+<nav id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} {% if oUIBlock.IsExpanded() == true %}ibo-is-expanded{% endif %}" data-role="ibo-navigation-menu">
 	<div class="ibo-navigation-menu--body">
 		<div class="ibo-navigation-menu--top-part">
 			<a class="ibo-navigation-menu--square-company-logo" data-role="ibo-navigation-menu--square-company-logo" title="{{ oUIBlock.GetAppRevisionNumber() }}" href="{{ oUIBlock.GetAppIconLink() }}">
--- a/templates/base/layouts/tab-container/layout.html.twig
+++ b/templates/base/layouts/tab-container/layout.html.twig
@@ -1,6 +1,6 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<div id="{{ oUIBlock.GetId() }}" class="ibo-tab-container ibo-is-{{ oUIBlock.GetLayout() }}{% if oUIBlock.GetIsScrollable() %} ibo-is-scrollable{% endif %}"
+<div id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetLayout() }}{% if oUIBlock.GetIsScrollable() %} ibo-is-scrollable{% endif %}"
     data-role="ibo-tab-container" data-status="loading">
    {% block iboTabContainer %}
        <ul class="ibo-tab-container--tabs-list" data-role="ibo-tab-container--tabs-list">
--- a/templates/base/layouts/top-bar/layout.html.twig
+++ b/templates/base/layouts/top-bar/layout.html.twig
@@ -1,4 +1,4 @@
-<nav id="{{ oUIBlock.GetId() }}" class="ibo-top-bar" data-role="ibo-top-bar">
+<nav id="{{ oUIBlock.GetId() }}" class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-top-bar">
 	<div class="ibo-top-bar--quick-actions" data-role="ibo-top-bar--quick-actions">
 		{% if oUIBlock.HasQuickCreate() %}
 			{{ render_block(oUIBlock.GetQuickCreate(), {aPage: aPage}) }}