Ticket #26642: 26642.10.diff

src/wp-includes/class-wp-editor.php

@@ -333 +333 @@
                                         'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',
 
                                         'wpeditimage_disable_captions' => $no_captions,
+                                        'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
                                         'plugins' => implode( ',', $plugins ),
                                 );
 

src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -47 +47 @@
                                 return c;
                         }
 
-                        width = parseInt( w, 10 ) + 10;
+                        width = parseInt( w, 10 );
+                        if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+                                width += 10;
+                        }
 
                         return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
                                 '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
@@ -189 +192 @@
 
                         html = createImageAndLink( imageData, 'html' );
 
-                        width = imageData.width + 10;
+                        width = parseInt( imageData.width );
+
+                        if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+                                width += 10;
+                        }
+
                         className = 'align' + imageData.align;
 
                         //TODO: shouldn't add the id attribute if it isn't an attachment
@@ -391 +399 @@
         editor.on( 'init', function() {
                 var dom = editor.dom;
 
+                if ( editor.getParam( 'wpeditimage_html5_captions' ) ) {
+                        dom.addClass( editor.getBody(), 'html5-caption' );
+                }
+
                 // Add caption field to the default image dialog
                 editor.on( 'wpLoadImageForm', function( event ) {
                         if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
@@ -475 +487 @@
                                         node = editor.selection.getNode();
 
                                         if ( data.width ) {
-                                                captionWidth = parseInt( data.width, 10 ) + 10;
-                                                captionWidth = ' style="width: '+ captionWidth +'px"';
+                                                captionWidth = parseInt( data.width, 10 );
+
+                                                if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+                                                        captionWidth += 10;
+                                                }
+
+                                                captionWidth = ' style="width: ' + captionWidth + 'px"';
                                         }
 
                                         html = '<dl class="wp-caption alignnone"' + captionWidth + '>' +
@@ -539 +556 @@
                                                 captionWidth = data.width || imgNode.clientWidth;
 
                                                 if ( captionWidth ) {
-                                                        captionWidth = parseInt( captionWidth, 10 ) + 10;
+                                                        captionWidth = parseInt( captionWidth, 10 );
+
+                                                        if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+                                                                captionWidth += 10;
+                                                        }
+
                                                         captionWidth = ' style="width: '+ captionWidth +'px"';
                                                 }
 
@@ -618 +640 @@
 
                         // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
                         removeToolbar();
-
                 });
 
                 // Prevent IE11 from making dl.wp-caption resizable
@@ -654 +675 @@
                                 width = event.width || editor.dom.getAttrib( node, 'width' );
 
                                 if ( width ) {
-                                        width = parseInt( width, 10 ) + 10;
+                                        width = parseInt( width, 10 );
+
+                                        if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+                                                width += 10;
+                                        }
+
                                         editor.dom.setStyle( parent, 'width', width + 'px' );
                                 }
                         }

src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -40 +40 @@
         margin: 10px 0;
 }
 
+.html5-caption .wp-caption {
+        padding: 4px;
+}
+
 .mceIEcenter {
         text-align: center;
 }

src/wp-includes/media.php

@@ -765 +765 @@
         if ( ! empty( $atts['id'] ) )
                 $atts['id'] = 'id="' . esc_attr( $atts['id'] ) . '" ';
 
+        $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>';
+        }
+
         $caption_width = 10 + $atts['width'];
 
         /**
@@ -788 +795 @@
         if ( $caption_width )
                 $style = 'style="width: ' . (int) $caption_width . 'px" ';
 
-        $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );
-
         return '<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'
         . do_shortcode( $content ) . '<p class="wp-caption-text">' . $atts['caption'] . '</p></div>';
 }