<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[27668] trunk/src/wp-includes: Introduce HTML5 caption support.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/27668">27668</a></dd>
<dt>Author</dt> <dd>nacin</dd>
<dt>Date</dt> <dd>2014-03-24 02:04:56 +0000 (Mon, 24 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Introduce HTML5 caption support.
When a theme supports HTML5 captions via add_theme_support( 'html5', 'caption' ), figure and figcaption will be used instead of div and p.
There's a bonus. But first, some history: Captions were introduced with an inline style set for the container. This remains, as it is there to force captions to wrap. But this inline style included an extra 10 pixels, which have vexxed theme developers for years. While these pixels were designed to ensure padding around floated images, modern themes handle this with grace. The additional pixels thus feel encumbering.
As the new HTML5 gallery support avoids outputting default gallery styles (again, irking theme developers for years; see <a href="http://core.trac.wordpress.org/ticket/26697">#26697</a>), the new HTML5 caption support will also ditch these 10 pixels of unwanted hand-holding.
The 10 pixels are also removed entirely in the visual editor (and more styles may also disappear here; see <a href="http://core.trac.wordpress.org/ticket/26642">#26642</a>), giving themes the power necessary to match the frontend styles.
The filter img_caption_shortcode_width added in 3.7 to work around this madness (see <a href="http://core.trac.wordpress.org/ticket/14380">#14380</a>) is skipped entirely when the theme supports HTML5 captions.
props obenland, azaozz.
see <a href="http://core.trac.wordpress.org/ticket/26642">#26642</a>. also fixes <a href="http://core.trac.wordpress.org/ticket/9066">#9066</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesclasswpeditorphp">trunk/src/wp-includes/class-wp-editor.php</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpeditimagepluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js</a></li>
<li><a href="#trunksrcwpincludesjstinymceskinswordpresswpcontentcss">trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css</a></li>
<li><a href="#trunksrcwpincludesmediaphp">trunk/src/wp-includes/media.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesclasswpeditorphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/class-wp-editor.php (27667 => 27668)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/class-wp-editor.php 2014-03-24 01:48:40 UTC (rev 27667)
+++ trunk/src/wp-includes/class-wp-editor.php 2014-03-24 02:04:56 UTC (rev 27668)
</span><span class="lines">@@ -339,6 +339,7 @@
</span><span class="cx"> 'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',
</span><span class="cx">
</span><span class="cx"> 'wpeditimage_disable_captions' => $no_captions,
</span><ins>+ 'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
</ins><span class="cx"> 'plugins' => implode( ',', $plugins ),
</span><span class="cx"> );
</span><span class="cx">
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswpeditimagepluginjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js (27667 => 27668)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-03-24 01:48:40 UTC (rev 27667)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-03-24 02:04:56 UTC (rev 27668)
</span><span class="lines">@@ -47,7 +47,10 @@
</span><span class="cx"> return c;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- width = parseInt( w, 10 ) + 10;
</del><ins>+ width = parseInt( w, 10 );
+ if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+ width += 10;
+ }
</ins><span class="cx">
</span><span class="cx"> return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
</span><span class="cx"> '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
</span><span class="lines">@@ -189,7 +192,12 @@
</span><span class="cx">
</span><span class="cx"> html = createImageAndLink( imageData, 'html' );
</span><span class="cx">
</span><del>- width = imageData.width + 10;
</del><ins>+ width = parseInt( imageData.width );
+
+ if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+ width += 10;
+ }
+
</ins><span class="cx"> className = 'align' + imageData.align;
</span><span class="cx">
</span><span class="cx"> //TODO: shouldn't add the id attribute if it isn't an attachment
</span><span class="lines">@@ -391,6 +399,10 @@
</span><span class="cx"> editor.on( 'init', function() {
</span><span class="cx"> var dom = editor.dom;
</span><span class="cx">
</span><ins>+ if ( editor.getParam( 'wpeditimage_html5_captions' ) ) {
+ dom.addClass( editor.getBody(), 'html5-captions' );
+ }
+
</ins><span class="cx"> // Add caption field to the default image dialog
</span><span class="cx"> editor.on( 'wpLoadImageForm', function( event ) {
</span><span class="cx"> if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
</span><span class="lines">@@ -475,8 +487,13 @@
</span><span class="cx"> node = editor.selection.getNode();
</span><span class="cx">
</span><span class="cx"> if ( data.width ) {
</span><del>- captionWidth = parseInt( data.width, 10 ) + 10;
- captionWidth = ' style="width: '+ captionWidth +'px"';
</del><ins>+ captionWidth = parseInt( data.width, 10 );
+
+ if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+ captionWidth += 10;
+ }
+
+ captionWidth = ' style="width: ' + captionWidth + 'px"';
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> html = '<dl class="wp-caption alignnone"' + captionWidth + '>' +
</span><span class="lines">@@ -539,7 +556,12 @@
</span><span class="cx"> captionWidth = data.width || imgNode.clientWidth;
</span><span class="cx">
</span><span class="cx"> if ( captionWidth ) {
</span><del>- captionWidth = parseInt( captionWidth, 10 ) + 10;
</del><ins>+ captionWidth = parseInt( captionWidth, 10 );
+
+ if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+ captionWidth += 10;
+ }
+
</ins><span class="cx"> captionWidth = ' style="width: '+ captionWidth +'px"';
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -618,7 +640,6 @@
</span><span class="cx">
</span><span class="cx"> // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
</span><span class="cx"> removeToolbar();
</span><del>-
</del><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> // Prevent IE11 from making dl.wp-caption resizable
</span><span class="lines">@@ -654,7 +675,12 @@
</span><span class="cx"> width = event.width || editor.dom.getAttrib( node, 'width' );
</span><span class="cx">
</span><span class="cx"> if ( width ) {
</span><del>- width = parseInt( width, 10 ) + 10;
</del><ins>+ width = parseInt( width, 10 );
+
+ if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+ width += 10;
+ }
+
</ins><span class="cx"> editor.dom.setStyle( parent, 'width', width + 'px' );
</span><span class="cx"> }
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymceskinswordpresswpcontentcss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css (27667 => 27668)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css 2014-03-24 01:48:40 UTC (rev 27667)
+++ trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css 2014-03-24 02:04:56 UTC (rev 27668)
</span><span class="lines">@@ -40,6 +40,10 @@
</span><span class="cx"> margin: 10px 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.html5-captions .wp-caption {
+ padding: 4px;
+}
+
</ins><span class="cx"> .mceIEcenter {
</span><span class="cx"> text-align: center;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunksrcwpincludesmediaphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/media.php (27667 => 27668)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/media.php 2014-03-24 01:48:40 UTC (rev 27667)
+++ trunk/src/wp-includes/media.php 2014-03-24 02:04:56 UTC (rev 27668)
</span><span class="lines">@@ -765,6 +765,13 @@
</span><span class="cx"> if ( ! empty( $atts['id'] ) )
</span><span class="cx"> $atts['id'] = 'id="' . esc_attr( $atts['id'] ) . '" ';
</span><span class="cx">
</span><ins>+ $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );
+
+ if ( current_theme_supports( 'html5', 'caption' ) ) {
+ return '<figure ' . $atts['id'] . 'style="width: ' . (int) $atts['width'] . 'px;" class="' . esc_attr( $class ) . '">'
+ . do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption></figure>';
+ }
+
</ins><span class="cx"> $caption_width = 10 + $atts['width'];
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -788,8 +795,6 @@
</span><span class="cx"> if ( $caption_width )
</span><span class="cx"> $style = 'style="width: ' . (int) $caption_width . 'px" ';
</span><span class="cx">
</span><del>- $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );
-
</del><span class="cx"> return '<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'
</span><span class="cx"> . do_shortcode( $content ) . '<p class="wp-caption-text">' . $atts['caption'] . '</p></div>';
</span><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>