Improvement: Improve wrapping of the outside-left and outside-right regions, resolves #255

Author: prasanna-lmsace

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2025-11-07 - Improvement: Improve wrapping of the outside-left and outside-right regions, resolves #255.
 * 2025-11-07 - Upstream change: Adopt changes from MDL-85774 into loginform.mustache, resolves #1093
 * 2025-11-04 - Improvement: Add vertical offset to the outside-left and outside-right block regions, resolves #254.
 * 2025-11-04 - Bugfix: When upgrading a Boost Union installation from the ancient pre-smart-menu-era to a recent version, Boost Union tried to access a table which does not exist yet, resolves #1085

lang/en/theme_boost_union.php

@@ -710,6 +710,9 @@
 $string['outsideregionsverticalalignment_desc'] = 'With this setting, you can control if, on larger screens, the \'Outside (left)\' and \'Outside (right)\' block regions should be vertically aligned with the page content or not.';
 $string['outsideregionsverticalaligndefault'] = 'None';
 $string['outsideregionsverticalalignpagecontent'] = 'Align \'Outside (left)\' and \'Outside (right)\' regions vertically with the page content';
+// ... ... Setting: Wrap outside left and right regions below main content.
+$string['outsideregionswrap'] = 'Wrap outside left and right regions below main content';
+$string['outsideregionswrap_desc'] = 'With this setting, you can control if the \'Outside (left)\' and \'Outside (right)\' block regions should be wrapped below the main content area on smaller screens.';
 // ... Section: Site home right-hand block drawer behaviour.
 $string['sitehomerighthandblockdrawerbehaviour'] = 'Site home right-hand block drawer';
 // ... ... Setting: Show right-hand block drawer of site home on visit.

layout/includes/blockregions.php

@@ -112,6 +112,13 @@ public function maininnerwrapperclass($regionsdata) {
             $maininnerwrapperclass = 'main-inner-outside-none';
         }
 
+        // If outside-regions wrap below main content is enabled.
+        $outsideregionswrap = get_config('theme_boost_union', 'blockregionoutsidewrap');
+        if ($outsideregionswrap == THEME_BOOST_UNION_SETTING_SELECT_YES) {
+            // Include class in main inner wrapper to wrap the outside regions below main content.
+            $maininnerwrapperclass .= ' left-region-nextmaincontent ';
+        }
+
         return $maininnerwrapperclass;
     }
 

scss/boost_union/post.scss

@@ -1320,6 +1320,24 @@ body.theme-boost-union-commincourse {
             margin-left: .5rem;
             margin-right: .5rem;
         }
+
+        /* Wrap the left and right outside regions below the main content. */
+        .left-region-nextmaincontent {
+            &.main-inner-outside-left-right.main-inner-outside-nextmaincontent,
+            &.main-inner-outside-left.main-inner-outside-nextmaincontent,
+            &.main-inner-outside-right.main-inner-outside-nextmaincontent,
+            &.main-inner-outside-left-right.main-inner-outside-nearwindowedges,
+            &.main-inner-outside-left.main-inner-outside-nearwindowedges,
+            &.main-inner-outside-right.main-inner-outside-nearwindowedges {
+                display: grid;
+                #theme-block-region-outside-left {
+                    order: 1;
+                }
+                #theme-block-region-outside-right {
+                    order: 2;
+                }
+            }
+        }
     }
 }
 

settings.php

@@ -2484,6 +2484,13 @@
         );
         $tab->add($setting);
 
+        // Setting: Wrap outside left and right regions below maincontent (on mobile).
+        $name = 'theme_boost_union/blockregionoutsidewrap';
+        $title = get_string('outsideregionswrap', 'theme_boost_union', null, true);
+        $description = get_string('outsideregionswrap_desc', 'theme_boost_union', null, true);
+        $setting = new admin_setting_configselect($name, $title, $description, THEME_BOOST_UNION_SETTING_SELECT_NO, $yesnooption);
+        $tab->add($setting);
+
         // Create footer regions heading.
         $name = 'theme_boost_union/footerregionsheading';
         $title = get_string('footerregionsheading', 'theme_boost_union', null, true);

tests/behat/behat_theme_boost_union_behat_blocks.php

@@ -39,4 +39,46 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 class behat_theme_boost_union_behat_blocks extends behat_blocks {
+
+    /**
+     * Checks the order of elements before or after.
+     *
+     * @Then :arg1 :arg2 should display :arg3 :arg4 :arg5
+     *
+     * @param string $selector1 The first element selector.
+     * @param string $type1 The type of the first element selector.
+     * @param string $order The expected order (before or after).
+     * @param string $selector2 The second element selector.
+     * @param string $type2 The type of the second element selector.
+     */
+    public function assert_element_order($selector1, $type1, $order, $selector2, $type2) {
+        $element1 = $this->find($type1, $selector1);
+        $element2 = $this->find($type2, $selector2);
+
+        if (!$element1) {
+            throw new ElementNotFoundException($this->getSession(), 'element', $type1, $selector1);
+        }
+
+        if (!$element2) {
+            throw new ElementNotFoundException($this->getSession(), 'element', $type2, $selector2);
+        }
+
+        $script = "
+            return (function() {
+                const el1 = document.querySelector('$selector1');
+                const el2 = document.querySelector('$selector2');
+                const order1 = parseInt(window.getComputedStyle(el1).order);
+                const order2 = parseInt(window.getComputedStyle(el2).order);
+                return order1 < order2 ? true : false;
+            })();";
+
+        $result = $this->evaluate_script($script);
+
+        if (($order === 'before' && $result == false) || ($order === 'after' && $result == true)) {
+            throw new Exception(sprintf(
+                'The element "%s" (%s) is not displayed %s the element "%s" (%s).',
+                $selector1, $type1, $order, $selector2, $type2
+            ));
+        }
+    }
 }

tests/behat/theme_boost_union_feelsettings_blocks.feature

@@ -538,3 +538,23 @@ Feature: Configuring the theme_boost_union plugin for the "Blocks" tab on the "F
       | 1       | outside-left,outside-right | outside-left | outside-right | should                      | should                      | #theme-block-region-outside-left .add_block_button,#theme-block-region-outside-right .add_block_button,#page-content | #block-region-outside-left,#block-region-outside-right,#page-content |
       | 1       | outside-left,outside-top   | outside-left | outside-top   | should                      | should not                  | #theme-block-region-outside-left .add_block_button,#page-content                                                     | #block-region-outside-left,#page-content                             |
       | 1       | outside-top,outside-right  | outside-top  | outside-right | should not                  | should                      | #theme-block-region-outside-right .add_block_button,#page-content                                                    | #block-region-outside-right,#page-content                            |
+
+  Scenario Outline: Setting: Wrap outside regions below main content
+    Given the following config values are set as admin:
+      | config                 | value     | plugin            |
+      | blockregionoutsidewrap | <setting> | theme_boost_union |
+      | blockregionsforcourse  | outside-left,outside-right | theme_boost_union |
+    And the following "blocks" exist:
+      | blockname    | contextlevel | reference | pagetypepattern | defaultregion |
+      | online_users | Course       | C1        | course-view-*   | outside-left  |
+      | myprofile    | Course       | C1        | course-view-*   | outside-right |
+    When I am on the "Course 1" "Course" page logged in as "student1"
+
+    Then the "class" attribute of ".main-inner-wrapper" "css_element" <shouldcontain> "left-region-nextmaincontent"
+    And I change window size to "mobile"
+    Then ".main-inner#topofscroll" "css_element" should display <beforeafter> "#theme-block-region-outside-left" "css_element"
+
+    Examples:
+      | setting | shouldcontain      | beforeafter |
+      | yes     | should contain     | before      |
+      | no      | should not contain | after       |

version.php

@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_union';
-$plugin->version = 2025041430;
+$plugin->version = 2025041431;
 $plugin->release = 'v5.0-r11';
 $plugin->requires = 2025041401;
 $plugin->supported = [500, 500];