Mecha CMS

Add extra functionality to the core engine.

Block

Author: Taufik Nurrohman · 185 Views

Tweet

Block is some kind of placeholder that is available within the page content, which is normally written just like normal HTML markup, but with custom enclosing characters. Each of the block patterns then can be replaced by another contents.

Table of Content

Download Latest Version

By default, a block syntax can be defined as follow. It uses ‌[‌[‌ and ‌]‌]‌ as the enclosing characters:

  • Void blocks → ‌[‌[block]‌]‌ or ‌[‌[‌block‌/‌]‌]‌
  • Container blocks → ‌[‌[‌block‌]‌]content[‌[‌/‌block‌]‌]

Block attributes syntax is exactly the same as HTML attributes syntax.

Blocks are configurable. Even, you can create your own block markup by editing the configuration file. Go to lot\extend\block\lot\state\config.php then search for the union part that looks like this:

1 => [
    0 => ['[‌[‌', '‌]‌]', '‌/‌'],
    1 => ['=', '"', '"', ' '],
    2 => ['[‌[‌!', '!‌]‌]'],
    3 => ['`[‌[‌', '‌]‌]`']
]
  • The 0 parts are configuration for the block tags.
  • The 1 parts are configuration for the block tags’ attributes.
  • The 2 parts are for the block comments markup.
  • The 3 parts are for the escape marker.

Following is an example of configuring block patterns as regular HTML (custom HTML tags):

<‌block‌>content<‌/‌block‌>
1 => [
    0 => ['<‌', '‌>', '‌/‌'],
    1 => ['=', '"', '"', ' '],
    2 => ['<‌!--', '--‌>'],
    3 => ['&lt;', '&gt;']
]

As WordPress shortcodes:

[‌block‌]content[‌/‌block‌]
1 => [
    0 => ['[‌', '‌]', '‌/‌'],
    1 => ['=', '"', '"', ' '],
    2 => ['[‌!--', '--‌]'],
    3 => ['[‌[‌', '‌]‌]']
]

As Twig embed code:

{‌%‌ block ‌%‌}content{‌%‌ endblock ‌%‌}
1 => [
    0 => ['{‌%‌ ', ' ‌%‌}', '‌end‌'],
    1 => ['=', '"', '"', ' '],
    2 => ['{‌# ', ' #‌}'],
    3 => ["{‌{‌ '{‌%‌ ' ‌}‌}", "{‌{‌ ' ‌%‌}' ‌}‌}"]
]

As of Mecha version 1.x.x shortcodes:

{‌{‌block‌}‌}content{‌{‌/‌block‌}‌}
1 => [
    0 => ['{‌{‌', '‌}‌}', '‌/‌'],
    1 => ['=', '"', '"', ' '],
    2 => ['{‌{‌!', '!‌}‌}'],
    3 => ['`{‌{‌', '‌}‌}`']
]

Usage 

Set 

Block::set($id, $fn, $stack = null);

Define a new block:

Block::set('mark', function($content) {
    return str_replace(['[[mark]]', '[[/mark]]'], ['<mark>', '</mark>'], $content);
});

The code above will parse this page content:

Lorem ipsum [‌[‌mark‌]‌]dolor[‌[‌/‌mark‌]‌] `‌[‌[‌mark‌]‌]‌`sit`‌[‌[‌/‌mark‌]‌]‌` amet.

… into this:

Lorem ipsum <‌mark‌>dolor<‌/‌mark‌> [‌[‌mark‌]‌]sit[‌[‌/‌mark‌]‌] amet.

Get 

Block::get($id, $fail = false);

Return the mark block data if any, otherwise, return $fail:

if ($fn = Block::get('mark')) {
    // do something with `$fn`…
}

Reset 

Block::reset($id);

Disable the mark block pattern:

Block::reset('mark');

Replace 

Block::replace($id, $fn | $text, $content);

Replace mark block in $content with advance pattern:

Block::set('mark', function($content) {
    return Block::replace('mark', function($a, $b) {
        $c = "";
        if (isset($b['color'])) {
            $c = ' style="background-color:' . $b['color'] . ';"';
        }
        return '<mark' . $c . '>' . $a . '</mark>';
    }, $content);
});

The code above will parse this page content:

Lorem [‌[‌mark‌]‌]ipsum[‌[‌/‌mark‌]‌] [‌[‌mark color="#f00"‌]‌]dolor[‌[‌/‌mark‌]‌] `‌[‌[‌mark‌]‌]‌`sit`‌[‌[‌/‌mark‌]‌]‌` `‌[‌[‌mark color="#f00"‌]‌]‌`amet`‌[‌[‌/‌mark‌]‌]‌`.

… into this:

Lorem <‌mark‌>ipsum<‌/‌mark‌> <‌mark style="background-color:#f00;"‌>dolor<‌/‌mark‌> [‌[‌mark‌]‌]sit[‌[‌/‌mark‌]‌] [‌[‌mark color="#f00"‌]‌]amet[‌[‌/‌mark‌]‌].

0 Comments

No comments yet.