Trema

1. Config.php

Changes in /theme/trema/config.php :-

Update $THEME->layout 

In layouts array there are lots of layout available we will update two layouts frontpage and mydashboard

We will update the regions array and add new layout names with existing ones (‘full-width-top’, and ‘full-bottom’) 

At line no 87

Code:

// The site home page.

    ‘frontpage’ => [

        ‘file’ => ‘frontpage.php’,

        ‘regions’ => [‘side-pre’, ‘side-admin’, ‘full-width-top’, ‘full-bottom’],

        ‘defaultregion’ => ‘side-pre’,

        ‘options’ => [‘nonavbar’ => true],

    ],

At line no 100

Code:

// My dashboard page.

    ‘mydashboard’ => [

        ‘file’ => ‘mydashboard.php’,

        ‘regions’ => [‘side-pre’, ‘side-admin’, ‘full-width-top’, ‘full-bottom’],

        ‘defaultregion’ => ‘side-pre’,

        ‘options’ => [‘nonavbar’ => true, ‘langmenu’ => true, ‘nocontextheader’ => true],

    ],

See the below screenshot

2. Changing the relevant php file

Php file name is mentioned on config layout with file field (see the $THEME->layout layouts)

For frontpage – frontpage.php

And for mydashboard – mydashboard.php is mention

1. Changes on fronpage.php

Changes in /theme/trema/layout/frontpage.php :-
Add following code at line no 157

before this line echo $OUTPUT->render_from_template….);

Code:
          // Top region full width.

if (in_array(“full-width-top”, $this->page->blocks->get_regions())) {

    $addblockbuttonfwtop = $OUTPUT->addblockbutton(‘full-width-top’);

    $sidefwtopblocks = $OUTPUT->blocks(‘full-width-top’);

    // Strlen Calculation is total jugad.

    if (trim($addblockbuttonfwtop) != ” || (trim($sidefwtopblocks) != ” && strlen($sidefwtopblocks) > 117)) {

        $templatecontext[‘addblockbuttonfwtop’] = $addblockbuttonfwtop;

        $templatecontext[‘sidefwtopblocks’] = $sidefwtopblocks;

        $templatecontext[‘canaddfwtopblocks’] = true;

    }

}

// bottom region full width.

if (in_array(“full-bottom”, $this->page->blocks->get_regions())) {

    $addblockbuttonfwbottom = $OUTPUT->addblockbutton(‘full-bottom’);

    $sidefwbottomblocks = $OUTPUT->blocks(‘full-bottom’);

    // Strlen Calculation is total jugad.

    if (trim($addblockbuttonfwbottom) != ” || (trim($sidefwbottomblocks) != ” && strlen($sidefwbottomblocks) > 117)) {

        $templatecontext[‘addblockbuttonfullwidthbottom’] = $addblockbuttonfwbottom;

        $templatecontext[‘sidefullwidthbottomblocks’] = $sidefwbottomblocks;

        $templatecontext[‘canaddfullwidthbottomblocks’] = true;

    }

}

2. Change on mydashboard.php

Same as frontpage.php

Changes in /theme/trema/layout/mydashboard.php :-
Add following code at line no 112

before this line echo $OUTPUT->render_from_template….);

Code:
            // Top region full width.

if (in_array(“full-width-top”, $this->page->blocks->get_regions())) {

    $addblockbuttonfwtop = $OUTPUT->addblockbutton(‘full-width-top’);

    $sidefwtopblocks = $OUTPUT->blocks(‘full-width-top’);

    // Strlen Calculation is total jugad.

    if (trim($addblockbuttonfwtop) != ” || (trim($sidefwtopblocks) != ” && strlen($sidefwtopblocks) > 117)) {

        $templatecontext[‘addblockbuttonfwtop’] = $addblockbuttonfwtop;

        $templatecontext[‘sidefwtopblocks’] = $sidefwtopblocks;

        $templatecontext[‘canaddfwtopblocks’] = true;

    }

}

// bottom region full width.

if (in_array(“full-bottom”, $this->page->blocks->get_regions())) {

    $addblockbuttonfwbottom = $OUTPUT->addblockbutton(‘full-bottom’);

    $sidefwbottomblocks = $OUTPUT->blocks(‘full-bottom’);

    // Strlen Calculation is total jugad.

    if (trim($addblockbuttonfwbottom) != ” || (trim($sidefwbottomblocks) != ” && strlen($sidefwbottomblocks) > 117)) {

        $templatecontext[‘addblockbuttonfullwidthbottom’] = $addblockbuttonfwbottom;

        $templatecontext[‘sidefullwidthbottomblocks’] = $sidefwbottomblocks;

        $templatecontext[‘canaddfullwidthbottomblocks’] = true;

    }

}

3. Now we can add regions anywhere on frontpage, and dashboard by mustache file 

1. For frontpage

You can add regions anywhere on the Frontpage or Dashboard via the related Mustache file.

The Mustache file path is mentioned in the last line of the related PHP file.

Example:

On the Frontpage, you will see this line at the end of the PHP file:

echo $OUTPUT->render_from_template(‘theme_trema/frontpage’, $templatecontext);

This means the Mustache path is:
frontpage

It is located at:
theme/trema/templates/frontpage.mustache

Note:

We had to add two regions 1st on top and 2nd on bottom

Changes in /theme/trema/templates/frontpage.mustache :-

At line no 93 add following code after the line <div id=“page” data-region=“mainpage”…..

Code:

{{#canaddfwtopblocks}}

        <section id=”region-fullwidthtop-blocks” class=”has-blocks” aria-label=”region top blocks”>

            <div role=”region-main”>

                {{{ sidefwtopblocks }}}

                {{#addblockbuttonfwtop}}

                   <div id=”region-fullwidthtop-blocks-indicator” class=”container-fluid block-indicator”>

                        <font class=”text-center p-px-2d5 m-0  bg-white block-indicator-text-wrapper “>

                            Full-width Top

                        </font>

                    </div>

                {{/addblockbuttonfwtop}}

            </div>

        </section>

  {{/canaddfwtopblocks}}

At line no 239 add following code before the line  {{#enabletremafooter}}

Code:
{{#canaddfullwidthbottomblocks}}

  <section id=”region-fullwidthbottom-blocks” class=”has-blocks” aria-label=”region top blocks”>

       <div role=”region-main”>

             {{{ sidefullwidthbottomblocks }}}

             {{#addblockbuttonfullwidthbottom}}

             <div id=”region-fullwidthbottom-blocks-indicator” class=”container-fluid block-indicator”>

                  <font class=”text-center p-px-2d5 m-0  bg-white block-indicator-text-wrapper “>

                   Full-width Bottom

                  </font>

             </div>

             {{/addblockbuttonfullwidthbottom}}

            </div>

          </section>

      {{/canaddfullwidthbottomblocks}}

2. For dashboard layout

The same applies to the Dashboard layout.

The Mustache path used is:

mydashboard

Full location: theme/trema/templates/mydashboard.mustache

Changes in /theme/trema/templates/mydashboard.mustache :-

At line no 93 add following code after the line <div id=“page” data-region=“mainpage”…..

Code:

{{#canaddfwtopblocks}}

        <section id=”region-fullwidthtop-blocks” class=”has-blocks” aria-label=”region top blocks”>

            <div role=”region-main”>

                {{{ sidefwtopblocks }}}

                {{#addblockbuttonfwtop}}

                   <div id=”region-fullwidthtop-blocks-indicator” class=”container-fluid block-indicator”>

                        <font class=”text-center p-px-2d5 m-0  bg-white block-indicator-text-wrapper “>

                            Full-width Top

                        </font>

                    </div>

                {{/addblockbuttonfwtop}}

            </div>

        </section>

  {{/canaddfwtopblocks}}

See the below image for reference

At line no 187 add following code before the line {{#enabletremafooter}}

Code:
{{#canaddfullwidthbottomblocks}}

  <section id=”region-fullwidthbottom-blocks” class=”has-blocks” aria-label=”region top blocks”>

       <div role=”region-main”>

             {{{ sidefullwidthbottomblocks }}}

             {{#addblockbuttonfullwidthbottom}}

             <div id=”region-fullwidthbottom-blocks-indicator” class=”container-fluid block-indicator”>

                  <font class=”text-center p-px-2d5 m-0  bg-white block-indicator-text-wrapper “>

                   Full-width Bottom

                  </font>

             </div>

             {{/addblockbuttonfullwidthbottom}}

        </div>

   </section>

{{/canaddfullwidthbottomblocks}}

Screenshot : 

Now Enable the edit mode and go to the homepage, dashboard, or any custom page; you will now be able to add page builder blocks as well as Moodle blocks.