Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-23 09:37:42 +01:00
Code Issues Projects Releases Wiki Activity

Use Mustache-insipired template tags.

Browse Source 
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.


git-svn-id: http://core.svn.wordpress.org/trunk@22415 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-11-07 08:41:17 +00:00
parent dd50d7d0e0
commit 9329d742cb
2 changed files with 83 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
wp-includes/js/media-models.js
View File

@ -58,9 +58,15 @@ window.wp = window.wp || {};
* @return {function} A function that lazily-compiles the template requested. * @return {function} A function that lazily-compiles the template requested.
*/ */
template: _.memoize( function( id ) { template: _.memoize( function( id ) {
var compiled; var compiled,
options = {
evaluate: /<#([\s\S]+?)#>/g,
interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
escape: /\{\{([\s\S]+?)\}\}/g
};
return function( data ) { return function( data ) {
compiled = compiled || _.template( $( '#tmpl-' + id ).html() ); compiled = compiled || _.template( $( '#tmpl-' + id ).html(), null, options );
return compiled( data ); return compiled( data );
}; };
}), }),

148
wp-includes/media.php
View File

@ -1296,7 +1296,7 @@ function wp_print_media_templates( $attachment ) {
?> ?>
<script type="text/html" id="tmpl-media-modal"> <script type="text/html" id="tmpl-media-modal">
<div class="media-modal"> <div class="media-modal">
<h3 class="media-modal-title"><%- title %></h3> <h3 class="media-modal-title">{{ title }}</h3>
<a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a> <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
</div> </div>
<div class="media-modal-backdrop"> <div class="media-modal-backdrop">
@ -1319,98 +1319,98 @@ function wp_print_media_templates( $attachment ) {
</script> </script>
<script type="text/html" id="tmpl-attachment"> <script type="text/html" id="tmpl-attachment">
<div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>"> <div class="attachment-preview type-{{ type }} subtype-{{ subtype }} {{ orientation }}">
<% if ( uploading ) { %> <# if ( uploading ) { #>
<div class="media-progress-bar"><div></div></div> <div class="media-progress-bar"><div></div></div>
<% } else if ( 'image' === type ) { %> <# } else if ( 'image' === type ) { #>
<div class="thumbnail"> <div class="thumbnail">
<div class="centered"> <div class="centered">
<img src="<%- url %>" draggable="false" /> <img src="{{ url }}" draggable="false" />
</div> </div>
</div> </div>
<% } else { %> <# } else { #>
<img src="<%- icon %>" class="icon" draggable="false" /> <img src="{{ icon }}" class="icon" draggable="false" />
<div class="filename"><%- filename %></div> <div class="filename">{{ filename }}</div>
<% } %> <# } #>
<% if ( buttons.close ) { %> <# if ( buttons.close ) { #>
<a class="close button" href="#">&times;</a> <a class="close button" href="#">&times;</a>
<% } %> <# } #>
</div> </div>
<% if ( describe ) { %> <# if ( describe ) { #>
<% if ( 'image' === type ) { %> <# if ( 'image' === type ) { #>
<textarea class="describe" <textarea class="describe"
placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
><%- caption %></textarea> >{{ caption }}</textarea>
<% } else { %> <# } else { #>
<textarea class="describe" <textarea class="describe"
<% if ( 'video' === type ) { %> <# if ( 'video' === type ) { #>
placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
<% } else if ( 'audio' === type ) { %> <# } else if ( 'audio' === type ) { #>
placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
<% } else { %> <# } else { #>
placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
<% } %> <# } #>
><%- title %></textarea> >{{ title }}</textarea>
<% } %> <# } #>
<% } %> <# } #>
</script> </script>
<script type="text/html" id="tmpl-attachment-details"> <script type="text/html" id="tmpl-attachment-details">
<h3><?php _e('Edit Attachment Details'); ?></h3> <h3><?php _e('Edit Attachment Details'); ?></h3>
<div class="attachment-preview attachment-details-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>"> <div class="attachment-preview attachment-details-preview type-{{ type }} subtype-{{ subtype }} {{ orientation }}">
<% if ( uploading ) { %> <# if ( uploading ) { #>
<div class="media-progress-bar"><div></div></div> <div class="media-progress-bar"><div></div></div>
<% } else if ( 'image' === type ) { %> <# } else if ( 'image' === type ) { #>
<div class="thumbnail"> <div class="thumbnail">
<img src="<%- url %>" draggable="false" /> <img src="{{ url }}" draggable="false" />
</div> </div>
<% } else { %> <# } else { #>
<div class="icon-thumbnail"> <div class="icon-thumbnail">
<img src="<%- icon %>" class="icon" draggable="false" /> <img src="{{ icon }}" class="icon" draggable="false" />
<div class="filename"><%- filename %></div> <div class="filename">{{ filename }}</div>
</div> </div>
<% } %> <# } #>
</div> </div>
<% if ( 'image' === type ) { %> <# if ( 'image' === type ) { #>
<textarea class="describe" <textarea class="describe"
placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
><%- caption %></textarea> >{{ caption }}</textarea>
<% } else { %> <# } else { #>
<textarea class="describe" <textarea class="describe"
<% if ( 'video' === type ) { %> <# if ( 'video' === type ) { #>
placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
<% } else if ( 'audio' === type ) { %> <# } else if ( 'audio' === type ) { #>
placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
<% } else { %> <# } else { #>
placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>" placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
<% } %> <# } #>
><%- title %></textarea> >{{ title }}</textarea>
<% } %> <# } #>
</script> </script>
<script type="text/html" id="tmpl-media-selection"> <script type="text/html" id="tmpl-media-selection">
<div class="selection-info"> <div class="selection-info">
<span class="count"></span> <span class="count"></span>
<% if ( clearable ) { %> <# if ( clearable ) { #>
<a class="clear-selection" href="#"><?php _e('Clear'); ?></a> <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
<% } %> <# } #>
</div> </div>
<div class="selection-view"></div> <div class="selection-view"></div>
</script> </script>
<script type="text/html" id="tmpl-media-selection-preview"> <script type="text/html" id="tmpl-media-selection-preview">
<div class="selected-img selected-count-<%- count %>"> <div class="selected-img selected-count-{{ count }}">
<% if ( thumbnail ) { %> <# if ( thumbnail ) { #>
<img src="<%- thumbnail %>" draggable="false" /> <img src="{{ thumbnail }}" draggable="false" />
<% } %> <# } #>
<span class="count"><%- count %></span> <span class="count">{{ count }}</span>
</div> </div>
<% if ( clearable ) { %> <# if ( clearable ) { #>
<a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a> <a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a>
<% } %> <# } #>
</script> </script>
<script type="text/html" id="tmpl-attachment-display-settings"> <script type="text/html" id="tmpl-attachment-display-settings">
@ -1458,21 +1458,23 @@ function wp_print_media_templates( $attachment ) {
<h4><?php _e('Gallery Columns'); ?></h4> <h4><?php _e('Gallery Columns'); ?></h4>
<select class="columns" name="columns" data-setting="columns"> <select class="columns" name="columns" data-setting="columns">
<% _.times( 9, function( i ) { %> <?php for( $i = 1; $i <= 9; $i++ ) : ?>
<option value="<%- i %>"><%- i %></option> <option value="<?php echo esc_attr( $i ); ?>">
<% }); %> <?php echo esc_html( $i ); ?>
</option>
<?php endfor; ?>
</select> </select>
</script> </script>
<script type="text/html" id="tmpl-editor-attachment"> <script type="text/html" id="tmpl-editor-attachment">
<div class="editor-attachment-preview"> <div class="editor-attachment-preview">
<% if ( url ) { %> <# if ( url ) { #>
<img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" /> <img src="{{ url }}" width="{{ width }}" height="{{ height }}" draggable="false" />
<% } %> <# } #>
<% if ( uploading ) { %> <# if ( uploading ) { #>
<div class="media-progress-bar"><div></div></div> <div class="media-progress-bar"><div></div></div>
<% } %> <# } #>
<div class="overlay"> <div class="overlay">
<div class="button close">&times;</div> <div class="button close">&times;</div>
</div> </div>
@ -1481,9 +1483,9 @@ function wp_print_media_templates( $attachment ) {
</script> </script>
<script type="text/html" id="tmpl-editor-gallery"> <script type="text/html" id="tmpl-editor-gallery">
<% if ( url ) { %> <# if ( url ) { #>
<img src="<%- url %>" draggable="false" /> <img src="{{ url }}" draggable="false" />
<% } %> <# } #>
<div class="overlay"> <div class="overlay">
<div class="button close">&times;</div> <div class="button close">&times;</div>
@ -1492,30 +1494,30 @@ function wp_print_media_templates( $attachment ) {
</script> </script>
<script type="text/html" id="tmpl-attachments-css"> <script type="text/html" id="tmpl-attachments-css">
<style type="text/css" id="<%- id %>-css"> <style type="text/css" id="{{ id }}-css">
#<%- id %> { #{{ id }} {
padding: 0 <%- gutter %>px; padding: 0 {{ gutter }}px;
} }
#<%- id %> .attachment { #{{ id }} .attachment {
margin: <%- gutter %>px; margin: {{ gutter }}px;
width: <%- edge %>px; width: {{ edge }}px;
} }
#<%- id %> .attachment-preview, #{{ id }} .attachment-preview,
#<%- id %> .attachment-preview .thumbnail { #{{ id }} .attachment-preview .thumbnail {
width: <%- edge %>px; width: {{ edge }}px;
height: <%- edge %>px; height: {{ edge }}px;
} }
#<%- id %> .portrait .thumbnail img { #{{ id }} .portrait .thumbnail img {
width: <%- edge %>px; width: {{ edge }}px;
height: auto; height: auto;
} }
#<%- id %> .landscape .thumbnail img { #{{ id }} .landscape .thumbnail img {
width: auto; width: auto;
height: <%- edge %>px; height: {{ edge }}px;
} }
</style> </style>
</script> </script>