Ticket #26642: 26642.2.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

@@ -2 +2 @@
 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
         function parseShortcode( content ) {
                 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
-                        var id, cls, w, cap, img, width,
+                        var id, cls, w, cap, img, style,
                                 trim = tinymce.trim;
 
                         id = b.match( /id=['"]([^'"]*)['"] ?/ );
@@ -47 +47 @@
                                 return c;
                         }
 
-                        width = parseInt( w, 10 ) + 10;
+                        style = editor.getParam( 'wpeditimage_html5_captions', false ) ? '' : ' style="width: '+ ( parseInt( w, 10 ) + 10 ) +'px"';
 
-                        return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
+                        return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'"'+ style +'>' +
                                 '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
                 });
         }

src/wp-includes/media.php

@@ -720 +720 @@
         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'] . 'class="' . esc_attr( $class ) . '">'
+                . do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption></figure>';
+        }
+
         $caption_width = 10 + $atts['width'];
 
         /**
@@ -743 +750 @@
         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>';
 }