What type of variable is this in php: {{%= description %}}

Question

I'm modifying a wordpress plugin (Page Builder by SiteOrigin 2.0.7) and there are some variables throughout one of the php files (tpl/js-templates.php) in a notation that I don't recognize. The variables look like this: {{%= foo %}} and they always appear in the midst of html.

Here is an example of some of the html:

<div class="so-buttons">
    {{%= buttons %}}
</div>
<div class="so-content panel-dialog">
    <img src="{{%= url %}}">
    {{%= content %}}
</div>

What is this? Is this blade template notation?

How can I use this variable in a conditional? For instance, I'd like to test if {{%= url %}} is a jpg url.

Answer 1

This is a bit new to me, so I may be wrong here, but lets follow the code backwards through the plugin..

{{% appears in tpl\js-templates.php 36 times and js\siteorigin-panels.js (and the .min version) once. %}} appears only 34 times in the same php file, still once in the js file.

In the .js file they appear at line 14+, here:

String.prototype.panelsProcessTemplate = function(){
    var s = this;
    s = s.replace(/{{%/g, '<%');
    s = s.replace(/%}}/g, '%>');
    s = s.trim();
    return s;
};

So they're using {{% as a placeholder and using JS to replace it with <%. The same is happening with the closing %}} (now %>).

It also shows up as a sort of shorthand for <script>?

{{% if( count > 1 ) { %}} <span class="count">({{%= count %}})</span>{{% } %}

Taking a look at the top of this file for any comments on what it does, we see Convert template into something compatible with Underscore.js templates so we know we should pull up the Underscore.js documentation for future reference.

Well, how is panelsProcessTemplate() string prototype used? Several times in the mentioned js file, e.g. at line 211:

panels.view.widget = Backbone.View.extend({
    template: _.template( $('#siteorigin-panels-builder-widget').html().panelsProcessTemplate() )

This is inside of an extension of Backbone.View, so the Backbone documentation may also be good to open up..

First, let's look at what our function is directly processing - #siteorigin-panels-builder-widget is in the php file at line 93+:

<script type="text/template" id="siteorigin-panels-builder-widget">
<div class="so-widget ui-draggable">
<div class="so-widget-wrapper">
    <div class="title">
        <h4>{{%= title %}}</h4>
        <span class="actions">
            <a href="#" class="widget-edit"><?php _e('Edit', 'siteorigin-panels') ?></a>
            <a href="#" class="widget-duplicate"><?php _e('Duplicate', 'siteorigin-panels') ?></a>
            <a href="#" class="widget-delete"><?php _e('Delete', 'siteorigin-panels') ?></a>
        </span>
    </div>
    <small class="description">{{%= description %}}</small>
</div>
</div>
</script>

text/template is a browser-ignored template client-side code can use. So it's replacing {{% with <% and %}} with %> in this template, running it through the template() function, and setting it all to the template variable in this view.

What is template() doing? It's not defined in this file, but it is in the Underscore.js documentation under the template section. Apparently it's actually the whole _.template(), not just template(). Here's the overview:

Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can both interpolate values, using <%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. [...]

So, we know right now that Underscore.js is using <% and %> as their data identifiers in templates, both for variables and arbitrary JavaScript as we saw above.

We know what {{% .. %}} is

{{%= description %}} in this case is more-or-less saying <script> document.write(description); </script>. It's outputting the description parameter into the template HTML.

If I were a betting man, I'd bet you can change the widget title and description through the WordPress/ Page Builder Admin.

As for checking what the variable is, you'll likely be best suited checking after everything is rendered on the page.

$( document ).ready(function() {
   if ($("#id .so-content img").prop("src").endsWith(".jpg")) {
     ...

endsWith being a custom String prototype defined here.

Answer 2

As it seems, these expressions are part of the Liquid programming language. Please see the attached link for a full description.