From 71917873d48bef9e3dc607f913109d1cfaccff17 Mon Sep 17 00:00:00 2001 From: Andrew Nacin Date: Mon, 24 Mar 2014 02:04:56 +0000 Subject: [PATCH] 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 #26697), 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 #26642), 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 #14380) is skipped entirely when the theme supports HTML5 captions. props obenland, azaozz. see #26642. also fixes #9066. git-svn-id: https://develop.svn.wordpress.org/trunk@27668 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/class-wp-editor.php | 1 + .../js/tinymce/plugins/wpeditimage/plugin.js | 40 +++++++++++++++---- .../js/tinymce/skins/wordpress/wp-content.css | 4 ++ src/wp-includes/media.php | 9 ++++- 4 files changed, 45 insertions(+), 9 deletions(-) diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php index 7e73637cc9..bb697ad38d 100644 --- a/src/wp-includes/class-wp-editor.php +++ b/src/wp-includes/class-wp-editor.php @@ -339,6 +339,7 @@ final class _WP_Editors { '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 ), ); diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js index d7e20c33d9..d7802eb7cc 100644 --- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js @@ -47,7 +47,10 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { return c; } - width = parseInt( w, 10 ) + 10; + width = parseInt( w, 10 ); + if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { + width += 10; + } return '
' + '
'+ img +'
'+ cap +'
'; @@ -189,7 +192,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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,6 +399,10 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { editor.on( 'init', function() { var dom = editor.dom; + if ( editor.getParam( 'wpeditimage_html5_captions' ) ) { + dom.addClass( editor.getBody(), 'html5-captions' ); + } + // Add caption field to the default image dialog editor.on( 'wpLoadImageForm', function( event ) { if ( editor.getParam( 'wpeditimage_disable_captions' ) ) { @@ -475,8 +487,13 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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 = '
' + @@ -539,7 +556,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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,7 +640,6 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { // 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,7 +675,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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' ); } } diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index 99b976881c..a5fb3e43ca 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css @@ -40,6 +40,10 @@ dl.aligncenter { margin: 10px 0; } +.html5-captions .wp-caption { + padding: 4px; +} + .mceIEcenter { text-align: center; } diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php index 23fdbc0bcc..fcaf89cc6d 100644 --- a/src/wp-includes/media.php +++ b/src/wp-includes/media.php @@ -765,6 +765,13 @@ function img_caption_shortcode( $attr, $content = null ) { 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 '
' + . do_shortcode( $content ) . '
' . $atts['caption'] . '
'; + } + $caption_width = 10 + $atts['width']; /** @@ -788,8 +795,6 @@ function img_caption_shortcode( $attr, $content = null ) { if ( $caption_width ) $style = 'style="width: ' . (int) $caption_width . 'px" '; - $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] ); - return '
' . do_shortcode( $content ) . '

' . $atts['caption'] . '

'; }