WordPress.org

Make WordPress Core

Changeset 22415


Ignore:
Timestamp:
11/07/12 08:41:17 (3 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.