Introduced new Bootstrap 5 templates

classes/layout/accordion.php

@@ -50,10 +50,16 @@ public function get_suggested_use() : string {
      * @return string The Mustache template.
      */
     public function get_template() : string {
-        if (!helper::is_totara()) {
-            return 'block_multiblock/accordion-bootstrap4';
-        } else {
+        global $CFG;
+        // Totara uses Bootstrap 3.
+        if (helper::is_totara()) {
             return 'block_multiblock/accordion-bootstrap3';
         }
+        // Starting with Moodle 5.0, Moodle uses Bootstrap 5.
+        if ($CFG->version >= 2025041400) {
+            return 'block_multiblock/accordion-bootstrap5';
+        }
+        // For Moodle versions before 5.0, use Bootstrap 4.
+        return 'block_multiblock/accordion-bootstrap4';
     }
 }

classes/layout/tabbed_list.php

@@ -61,10 +61,16 @@ public function get_layout_id() : string {
      * @return string The Mustache template.
      */
     public function get_template() : string {
-        if (!helper::is_totara()) {
-            return 'block_multiblock/tabbed-list-bootstrap4';
-        } else {
+        global $CFG;
+        // Totara uses Bootstrap 3.
+        if (helper::is_totara()) {
             return 'block_multiblock/tabbed-list-bootstrap3';
         }
+        // Starting with Moodle 5.0, Moodle uses Bootstrap 5.
+        if ($CFG->version >= 2025041400) {
+            return 'block_multiblock/tabbed-list-bootstrap5';
+        }
+        // For Moodle versions before 5.0, use Bootstrap 4.
+        return 'block_multiblock/tabbed-list-bootstrap4';
     }
 }

templates/accordion-bootstrap5.mustache

@@ -0,0 +1,60 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template block_multiblock/accordion-bootstrap4
+
+    This template shows the multiple blocks in an accordion
+
+    Example context (json):
+    {
+        "multiblockid": 28,
+        "multiblock": [
+            {
+                "id": 1,
+                "title": "Block 1",
+                "content": "<p>Block 1</p>",
+                "footer": "My footer",
+                "active": true
+            },
+            {
+                "id": 2,
+                "title": "Block 2",
+                "content": "<p>Block 2</p>",
+                "footer": "",
+                "active": false
+            }
+        ]
+    }
+}}
+<div class="multiblock multiblock-accordion accordion" id="multiblock-{{multiblockid}}">
+    {{#multiblock}}
+    <div class="accordion-item">
+        <h2 class="accordion-header" id="multiblock-container-{{multiblockid}}-{{id}}">
+            <button class="accordion-button {{^active}} collapsed{{/active}}" data-bs-toggle="collapse" data-bs-target="#multiblock-content-{{multiblockid}}-{{id}}" type="button" aria-controls="multiblock-content-{{multiblockid}}-{{id}}" aria-expanded="{{^active}}false{{/active}}{{#active}}true{{/active}}">
+            {{{title}}}
+            </button>
+        </h2>
+        <div id="multiblock-content-{{multiblockid}}-{{id}}" class="accordion-collapse collapse{{#active}} show{{/active}}" aria-labelledby="multiblock-container-{{multiblockid}}-{{id}}" data-bs-parent="#multiblock-{{multiblockid}}">
+            <div class="accordion-body {{class}}">
+                {{{content}}}
+                <div class="footer">{{{footer}}}</div>
+                {{{annotation}}}
+            </div>
+        </div>
+    </div>
+    {{/multiblock}}
+</div>

templates/tabbed-list-bootstrap5.mustache

@@ -0,0 +1,62 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template block_multiblock/tabbed-list
+
+    This template shows the multiple blocks in a tabbed view
+
+    Example context (json):
+    {
+        "multiblockid": 28,
+        "multiblock": [
+            {
+                "id": 1,
+                "title": "Block 1",
+                "content": "<p>Block 1</p>",
+                "footer": "My footer",
+                "active": true
+            },
+            {
+                "id": 2,
+                "title": "Block 2",
+                "content": "<p>Block 2</p>",
+                "footer": "",
+                "active": false
+            }
+        ]
+    }
+}}
+<div class="multiblock multiblock-tabbed-list">
+    <div class="nav nav-tabs" id="multiblock-container-{{multiblockid}}" role="tablist">
+        {{#multiblock}}
+            <button class="nav-link{{#active}} active{{/active}}" id="multiblock-tab-{{multiblockid}}-{{id}}" data-bs-toggle="tab" data-bs-target="#multiblock-{{multiblockid}}-{{id}}" role="tab" aria-controls="multiblock-tab-{{multiblockid}}-{{id}}" aria-selected="{{#active}}true{{/active}}{{^active}}false{{/active}}">
+                {{{title}}}
+            </button>
+        {{/multiblock}}
+    </div>
+    <div class="tab-content" id="multiblock-content-{{multiblockid}}">
+        {{#multiblock}}
+            <div class="tab-pane fade{{#active}} show active{{/active}}" id="multiblock-{{multiblockid}}-{{id}}" role="tabpanel" aria-labelledby="multiblock-tab-{{multiblockid}}-{{id}}">
+                <div class="{{class}}">
+                    {{{content}}}
+                    <div class="footer">{{{footer}}}</div>
+                    {{{annotation}}}
+                </div>
+            </div>
+        {{/multiblock}}
+    </div>
+</div>