Make WordPress Core

Changeset 27668


Ignore:
Timestamp:
03/24/2014 02:04:56 AM (10 years ago)
Author:
nacin
Message:

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.

Location:
trunk/src/wp-includes
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-editor.php

    r27660 r27668  
    340340
    341341                    'wpeditimage_disable_captions' => $no_captions,
     342                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
    342343                    'plugins' => implode( ',', $plugins ),
    343344                );
  • trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

    r27628 r27668  
    4848            }
    4949
    50             width = parseInt( w, 10 ) + 10;
     50            width = parseInt( w, 10 );
     51            if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
     52                width += 10;
     53            }
    5154
    5255            return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
     
    190193            html = createImageAndLink( imageData, 'html' );
    191194
    192             width = imageData.width + 10;
     195            width = parseInt( imageData.width );
     196
     197            if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
     198                width += 10;
     199            }
     200
    193201            className = 'align' + imageData.align;
    194202
     
    391399    editor.on( 'init', function() {
    392400        var dom = editor.dom;
     401
     402        if ( editor.getParam( 'wpeditimage_html5_captions' ) ) {
     403            dom.addClass( editor.getBody(), 'html5-captions' );
     404        }
    393405
    394406        // Add caption field to the default image dialog
     
    476488
    477489                    if ( data.width ) {
    478                         captionWidth = parseInt( data.width, 10 ) + 10;
    479                         captionWidth = ' style="width: '+ captionWidth +'px"';
     490                        captionWidth = parseInt( data.width, 10 );
     491
     492                        if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
     493                            captionWidth += 10;
     494                        }
     495
     496                        captionWidth = ' style="width: ' + captionWidth + 'px"';
    480497                    }
    481498
     
    540557
    541558                        if ( captionWidth ) {
    542                             captionWidth = parseInt( captionWidth, 10 ) + 10;
     559                            captionWidth = parseInt( captionWidth, 10 );
     560
     561                            if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
     562                                captionWidth += 10;
     563                            }
     564
    543565                            captionWidth = ' style="width: '+ captionWidth +'px"';
    544566                        }
     
    619641            // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
    620642            removeToolbar();
    621 
    622643        });
    623644
     
    655676
    656677                if ( width ) {
    657                     width = parseInt( width, 10 ) + 10;
     678                    width = parseInt( width, 10 );
     679
     680                    if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
     681                        width += 10;
     682                    }
     683
    658684                    editor.dom.setStyle( parent, 'width', width + 'px' );
    659685                }
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r27659 r27668  
    3939    padding-top: 4px;
    4040    margin: 10px 0;
     41}
     42
     43.html5-captions .wp-caption {
     44    padding: 4px;
    4145}
    4246
  • trunk/src/wp-includes/media.php

    r27662 r27668  
    766766        $atts['id'] = 'id="' . esc_attr( $atts['id'] ) . '" ';
    767767
     768    $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );
     769
     770    if ( current_theme_supports( 'html5', 'caption' ) ) {
     771        return '<figure ' . $atts['id'] . 'style="width: ' . (int) $atts['width'] . 'px;" class="' . esc_attr( $class ) . '">'
     772        . do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $atts['caption'] . '</figcaption></figure>';
     773    }
     774
    768775    $caption_width = 10 + $atts['width'];
    769776
     
    788795    if ( $caption_width )
    789796        $style = 'style="width: ' . (int) $caption_width . 'px" ';
    790 
    791     $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );
    792797
    793798    return '<div ' . $atts['id'] . $style . 'class="' . esc_attr( $class ) . '">'
Note: See TracChangeset for help on using the changeset viewer.