WordPress.org
Get WordPress

Make WordPress Core

Changeset 22415


Ignore:
Timestamp:
11/07/2012 08:41:17 AM (14 years ago)
Author:
koopersmith
Message:

Use Mustache-insipired template tags.

Underscore's default ERB-style templates are incompatible with PHP when asp_tags is enabled. As a result, we've settled on an alternative syntax that should be familiar to devs: Mustache-inspired for interpolating and escaping content, and ERB-inspired for execution.

{{{a}}} - interpolating
{{ a }} - escaping
<# a #> - execution

props rmccue. fixes #22344, see #21390.

Location:
trunk/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-includes/js/media-models.js

    r22335 r22415  
    5959                 */
    6060                template: _.memoize( function( id ) {
    61                         var compiled;
     61                        var compiled,
     62                                options = {
     63                                        evaluate:    /<#([\s\S]+?)#>/g,
     64                                        interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
     65                                        escape:      /\{\{([\s\S]+?)\}\}/g
     66                                };
     67
    6268                        return function( data ) {
    63                                 compiled = compiled || _.template( $( '#tmpl-' + id ).html() );
     69                                compiled = compiled || _.template( $( '#tmpl-' + id ).html(), null, options );
    6470                                return compiled( data );
    6571                        };

  • trunk/wp-includes/media.php

    r22409 r22415  
    12971297        <script type="text/html" id="tmpl-media-modal">
    12981298                <div class="media-modal">
    1299                         <h3 class="media-modal-title"><%- title %></h3>
     1299                        <h3 class="media-modal-title">{{ title }}</h3>
    13001300                        <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
    13011301                </div>
    … …  
    13201320
    13211321        <script type="text/html" id="tmpl-attachment">
    1322                 <div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
    1323                         <% if ( uploading ) { %>
     1322                <div class="attachment-preview type-{{ type }} subtype-{{ subtype }} {{ orientation }}">
     1323                        <# if ( uploading ) { #>
    13241324                                <div class="media-progress-bar"><div></div></div>
    1325                         <% } else if ( 'image' === type ) { %>
     1325                        <# } else if ( 'image' === type ) { #>
    13261326                                <div class="thumbnail">
    13271327                                        <div class="centered">
    1328                                                 <img src="<%- url %>" draggable="false" />
     1328                                                <img src="{{ url }}" draggable="false" />
    13291329                                        </div>
    13301330                                </div>
    1331                         <% } else { %>
    1332                                 <img src="<%- icon %>" class="icon" draggable="false" />
    1333                                 <div class="filename"><%- filename %></div>
    1334                         <% } %>
    1335 
    1336                         <% if ( buttons.close ) { %>
     1331                        <# } else { #>
     1332                                <img src="{{ icon }}" class="icon" draggable="false" />
     1333                                <div class="filename">{{ filename }}</div>
     1334                        <# } #>
     1335
     1336                        <# if ( buttons.close ) { #>
    13371337                                <a class="close button" href="#">&times;</a>
    1338                         <% } %>
     1338                        <# } #>
    13391339                </div>
    1340                 <% if ( describe ) { %>
    1341                         <% if ( 'image' === type ) { %>
     1340                <# if ( describe ) { #>
     1341                        <# if ( 'image' === type ) { #>
    13421342                                <textarea class="describe"
    13431343                                        placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
    1344                                         ><%- caption %></textarea>
    1345                         <% } else { %>
     1344                                        >{{ caption }}</textarea>
     1345                        <# } else { #>
    13461346                                <textarea class="describe"
    1347                                         <% if ( 'video' === type ) { %>
     1347                                        <# if ( 'video' === type ) { #>
    13481348                                                placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
    1349                                         <% } else if ( 'audio' === type ) { %>
     1349                                        <# } else if ( 'audio' === type ) { #>
    13501350                                                placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
    1351                                         <% } else { %>
     1351                                        <# } else { #>
    13521352                                                placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
    1353                                         <% } %>
    1354                                         ><%- title %></textarea>
    1355                         <% } %>
    1356                 <% } %>
     1353                                        <# } #>
     1354                                        >{{ title }}</textarea>
     1355                        <# } #>
     1356                <# } #>
    13571357        </script>
    13581358
    13591359        <script type="text/html" id="tmpl-attachment-details">
    13601360                <h3><?php _e('Edit Attachment Details'); ?></h3>
    1361                 <div class="attachment-preview attachment-details-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
    1362                         <% if ( uploading ) { %>
     1361                <div class="attachment-preview attachment-details-preview type-{{ type }} subtype-{{ subtype }} {{ orientation }}">
     1362                        <# if ( uploading ) { #>
    13631363                                <div class="media-progress-bar"><div></div></div>
    1364                         <% } else if ( 'image' === type ) { %>
     1364                        <# } else if ( 'image' === type ) { #>
    13651365                                <div class="thumbnail">
    1366                                         <img src="<%- url %>" draggable="false" />
     1366                                        <img src="{{ url }}" draggable="false" />
    13671367                                </div>
    1368                         <% } else { %>
     1368                        <# } else { #>
    13691369                                <div class="icon-thumbnail">
    1370                                         <img src="<%- icon %>" class="icon" draggable="false" />
    1371                                         <div class="filename"><%- filename %></div>
     1370                                        <img src="{{ icon }}" class="icon" draggable="false" />
     1371                                        <div class="filename">{{ filename }}</div>
    13721372                                </div>
    1373                         <% } %>
     1373                        <# } #>
    13741374                </div>
    13751375
    1376                 <% if ( 'image' === type ) { %>
     1376                <# if ( 'image' === type ) { #>
    13771377                        <textarea class="describe"
    13781378                                placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
    1379                                 ><%- caption %></textarea>
    1380                 <% } else { %>
     1379                                >{{ caption }}</textarea>
     1380                <# } else { #>
    13811381                        <textarea class="describe"
    1382                                 <% if ( 'video' === type ) { %>
     1382                                <# if ( 'video' === type ) { #>
    13831383                                        placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
    1384                                 <% } else if ( 'audio' === type ) { %>
     1384                                <# } else if ( 'audio' === type ) { #>
    13851385                                        placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
    1386                                 <% } else { %>
     1386                                <# } else { #>
    13871387                                        placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
    1388                                 <% } %>
    1389                                 ><%- title %></textarea>
    1390                 <% } %>
     1388                                <# } #>
     1389                                >{{ title }}</textarea>
     1390                <# } #>
    13911391        </script>
    13921392
    … …  
    13941394                <div class="selection-info">
    13951395                        <span class="count"></span>
    1396                         <% if ( clearable ) { %>
     1396                        <# if ( clearable ) { #>
    13971397                                <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
    1398                         <% } %>
     1398                        <# } #>
    13991399                </div>
    14001400                <div class="selection-view"></div>
    … …  
    14021402
    14031403        <script type="text/html" id="tmpl-media-selection-preview">
    1404                 <div class="selected-img selected-count-<%- count %>">
    1405                         <% if ( thumbnail ) { %>
    1406                                 <img src="<%- thumbnail %>" draggable="false" />
    1407                         <% } %>
    1408 
    1409                         <span class="count"><%- count %></span>
     1404                <div class="selected-img selected-count-{{ count }}">
     1405                        <# if ( thumbnail ) { #>
     1406                                <img src="{{ thumbnail }}" draggable="false" />
     1407                        <# } #>
     1408
     1409                        <span class="count">{{ count }}</span>
    14101410                </div>
    1411                 <% if ( clearable ) { %>
     1411                <# if ( clearable ) { #>
    14121412                        <a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a>
    1413                 <% } %>
     1413                <# } #>
    14141414        </script>
    14151415
    … …  
    14591459
    14601460                <select class="columns" name="columns" data-setting="columns">
    1461                         <% _.times( 9, function( i ) { %>
    1462                                 <option value="<%- i %>"><%- i %></option>
    1463                         <% }); %>
     1461                        <?php for( $i = 1; $i <= 9; $i++ ) : ?>
     1462                                <option value="<?php echo esc_attr( $i ); ?>">
     1463                                        <?php echo esc_html( $i ); ?>
     1464                                </option>
     1465                        <?php endfor; ?>
    14641466                </select>
    14651467        </script>
    … …  
    14671469        <script type="text/html" id="tmpl-editor-attachment">
    14681470                <div class="editor-attachment-preview">
    1469                         <% if ( url ) { %>
    1470                                 <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" />
    1471                         <% } %>
    1472 
    1473                         <% if ( uploading ) { %>
     1471                        <# if ( url ) { #>
     1472                                <img src="{{ url }}" width="{{ width }}" height="{{ height }}" draggable="false" />
     1473                        <# } #>
     1474
     1475                        <# if ( uploading ) { #>
    14741476                                <div class="media-progress-bar"><div></div></div>
    1475                         <% } %>
     1477                        <# } #>
    14761478                        <div class="overlay">
    14771479                                <div class="button close">&times;</div>
    … …  
    14821484
    14831485        <script type="text/html" id="tmpl-editor-gallery">
    1484                 <% if ( url ) { %>
    1485                         <img src="<%- url %>" draggable="false" />
    1486                 <% } %>
     1486                <# if ( url ) { #>
     1487                        <img src="{{ url }}" draggable="false" />
     1488                <# } #>
    14871489
    14881490                <div class="overlay">
    … …  
    14931495
    14941496        <script type="text/html" id="tmpl-attachments-css">
    1495                 <style type="text/css" id="<%- id %>-css">
    1496                         #<%- id %> {
    1497                                 padding: 0 <%- gutter %>px;
     1497                <style type="text/css" id="{{ id }}-css">
     1498                        #{{ id }} {
     1499                                padding: 0 {{ gutter }}px;
    14981500                        }
    14991501
    1500                         #<%- id %> .attachment {
    1501                                 margin: <%- gutter %>px;
    1502                                 width: <%- edge %>px;
     1502                        #{{ id }} .attachment {
     1503                                margin: {{ gutter }}px;
     1504                                width: {{ edge }}px;
    15031505                        }
    15041506
    1505                         #<%- id %> .attachment-preview,
    1506                         #<%- id %> .attachment-preview .thumbnail {
    1507                                 width: <%- edge %>px;
    1508                                 height: <%- edge %>px;
     1507                        #{{ id }} .attachment-preview,
     1508                        #{{ id }} .attachment-preview .thumbnail {
     1509                                width: {{ edge }}px;
     1510                                height: {{ edge }}px;
    15091511                        }
    15101512
    1511                         #<%- id %> .portrait .thumbnail img {
    1512                                 width: <%- edge %>px;
     1513                        #{{ id }} .portrait .thumbnail img {
     1514                                width: {{ edge }}px;
    15131515                                height: auto;
    15141516                        }
    15151517
    1516                         #<%- id %> .landscape .thumbnail img {
     1518                        #{{ id }} .landscape .thumbnail img {
    15171519                                width: auto;
    1518                                 height: <%- edge %>px;
     1520                                height: {{ edge }}px;
    15191521                        }
    15201522                </style>
Note: See TracChangeset for help on using the changeset viewer.