WordPress.org
Get WordPress

Make WordPress Core

Changeset 24006


Ignore:
Timestamp:
04/17/2013 04:08:46 AM (11 years ago)
Author:
markjaquith
Message:

New Post Format UI chooser treatment in response to testing.

  • Bigger icons
  • Format description under each
  • UI hides after choice
  • Saving without choosing implies "Standard"
  • Helpful text, with "Change format" link

see #24046. props lessbloat, wonderboymusic.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/wp-admin-rtl.css

    r23871 r24006  
    972972------------------------------------------------------------------------------*/
    973973
    974 .post-format-options a {
    975     border-left: 1px solid #ebebeb;
    976     border-right: none;
    977 }
    978 
    979 .post-format-options a:first-child {
    980     -webkit-border-bottom-left-radius: 0;
    981     -webkit-border-top-left-radius: 0;
    982     border-bottom-left-radius: 0;
    983     border-top-left-radius: 0;
    984 }
    985 
    986 .post-format-options a:last-child {
    987     -webkit-border-bottom-right-radius: 3px;
    988     -webkit-border-top-right-radius: 3px;
    989     border-bottom-right-radius: 3px;
    990     border-top-right-radius: 3px;
    991 }
    992 
    993 .post-format-tip {
    994     float: left;
    995 }
     974
    996975
    997976/*------------------------------------------------------------------------------

  • trunk/wp-admin/css/wp-admin.css

    r23994 r24006  
    30253025#titlediv {
    30263026    position: relative;
    3027     margin-bottom: 10px;
     3027    margin-bottom: 5px;
    30283028}
    30293029
    … …  
    30483048    width: 100%;
    30493049    outline: none;
     3050    margin: 1px 0;
    30503051}
    30513052
    … …  
    30883089
    30893090#edit-slug-box {
    3090     line-height: 23px;
    3091     min-height: 23px;
     3091    line-height: 24px;
     3092    min-height: 25px; /* Yes, line-height + 1 */
    30923093    margin-top: 5px;
    3093     padding: 0 10px;
     3094    padding-right: 6px;
    30943095}
    30953096
    … …  
    39313932.post-formats-fields {
    39323933    display: none;
     3934    margin-bottom: 15px;
    39333935}
    39343936
    … …  
    39613963}
    39623964
     3965.wp-format-image label,
    39633966.wp-format-video label,
    39643967.wp-format-audio label {
    … …  
    39703973    overflow: hidden;
    39713974    width: 40%;
    3972     height: 200px;
     3975    height: auto;
     3976    padding: 55px 0 20px;
    39733977    border: 1px dashed #dfdfdf;
    39743978    background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
    3975 }
    3976 
    3977 .wp-format-media-holder.empty,
    3978 .wp-format-audio .wp-format-media-holder,
    3979 .wp-format-video .wp-format-media-holder {
    3980     height: auto;
    3981     padding: 55px 0 20px;
    39823979}
    39833980
    … …  
    40064003}
    40074004
    4008 .empty .wp-format-media-select,
    4009 .wp-format-audio .wp-format-media-select,
    4010 .wp-format-video .wp-format-media-select {
     4005.wp-format-media-select {
    40114006    height: 20px;
    40124007}
    … …  
    40234018}
    40244019
     4020#wp_format_image,
    40254021#wp_format_audio,
    40264022#wp_format_video {
    … …  
    40314027}
    40324028
    4033 #icon-edit.standard {
     4029#icon-edit.standard,
     4030.post-format-options .standard {
    40344031    background: url(../images/post-formats32.png) no-repeat -3px -4px;
    40354032}
    40364033
    4037 #icon-edit.image {
     4034#icon-edit.image,
     4035.post-format-options .image {
    40384036    background: url(../images/post-formats32.png) no-repeat  -43px -4px;
    40394037}
    40404038
    4041 #icon-edit.gallery {
     4039#icon-edit.gallery,
     4040.post-format-options .gallery {
    40424041    background: url(../images/post-formats32.png) no-repeat -83px -4px;
    40434042}
    40444043
    4045 #icon-edit.audio {
     4044#icon-edit.audio,
     4045.post-format-options .audio {
    40464046    background: url(../images/post-formats32.png) no-repeat -123px -4px;
    40474047}
    40484048
    4049 #icon-edit.video {
     4049#icon-edit.video,
     4050.post-format-options .video {
    40504051    background: url(../images/post-formats32.png) no-repeat -163px -4px;
    40514052}
    40524053
    4053 #icon-edit.chat {
     4054#icon-edit.chat,
     4055.post-format-options .chat {
    40544056    background: url(../images/post-formats32.png) no-repeat -202px -4px;
    40554057}
    40564058
    4057 #icon-edit.status {
     4059#icon-edit.status,
     4060.post-format-options .status {
    40584061    background: url(../images/post-formats32.png) no-repeat -242px -4px;
    40594062}
    40604063
    4061 #icon-edit.aside {
     4064#icon-edit.aside,
     4065.post-format-options .aside {
    40624066    background: url(../images/post-formats32.png) no-repeat -282px -4px;
    40634067}
    40644068
    4065 #icon-edit.quote {
     4069#icon-edit.quote,
     4070.post-format-options .quote {
    40664071    background: url(../images/post-formats32.png) no-repeat -322px -4px;
    40674072}
    40684073
    4069 #icon-edit.link {
     4074#icon-edit.link,
     4075.post-format-options .link {
    40704076    background: url(../images/post-formats32.png) no-repeat -362px -4px;
    40714077}
    … …  
    40734079.post-format-description {
    40744080    color: #666;
    4075     display: none;
    4076     margin: 10px 0;
     4081    font-size: 12px;
    40774082}
    40784083
    40794084.post-format-options {
    4080     height: 29px;
    4081     background: #f9f9f9;
    4082     border: 1px solid #dfdfdf;
    4083     -webkit-border-radius: 3px;
    4084     border-radius: 3px;
    4085     margin: 0 0 9px 1px;
     4085    height: 50px;
     4086    margin: 13px 0 10px;
    40864087    padding: 0;
    40874088}
    40884089
    40894090.post-format-options a {
    4090     border-right: 1px solid #ebebeb;
    40914091    display: inline-block;
    4092     height: 16px;
    4093     width: 16px;
    4094     padding: 6px;
     4092    height: 34px;
     4093    margin-right: 33px;
    40954094    position: relative;
    40964095    text-decoration: none;
    4097 }
    4098 
    4099 .post-format-options a:first-child {
    4100     -webkit-border-bottom-left-radius: 3px;
    4101     -webkit-border-top-left-radius: 3px;
    4102     border-bottom-left-radius: 3px;
    4103     border-top-left-radius: 3px;
    4104 }
    4105 
    4106 .post-format-options a.active,
    4107 .post-format-options a:focus,
    4108 .post-format-options a:hover {
    4109     background: #eee;
    4110     -webkit-box-shadow: inset 0 0 10px #ddd;
    4111     box-shadow: inset 0 0 10px #ddd;
    4112     outline: none;
    4113     opacity: 1;
     4096    text-align: center;
    41144097}
    41154098
    41164099.post-format-options a div {
     4100    height: 34px;
     4101    width: 34px;
     4102    margin: 0 auto;
     4103}
     4104
     4105.post-format-title {
     4106    color: #777;
     4107    display: block;
     4108    margin-top: 4px;
     4109}
     4110
     4111.post-format-change, .post-format-set .post-format-options {
     4112    display: none;
     4113}
     4114
     4115.post-format-set .post-format-change {
     4116    display: block;
     4117}
     4118
     4119#poststuff .post-format-change {
     4120    margin: 11px 0 13px;
     4121    padding: 0;
     4122    font-size: 1.5em;
     4123    line-height: 18px;
     4124    clear: left;
     4125}
     4126
     4127.post-format-change span.icon {
     4128    float: left;
    41174129    height: 16px;
     4130    margin: 2px 5px 0 0;
    41184131    width: 16px;
    4119     opacity: 0.4;
    4120 }
    4121 
    4122 .post-format-options a.active div,
    4123 .post-format-options a:focus div,
    4124 .post-format-options a:hover div {
    4125     opacity: 1;
    4126 }
    4127 
    4128 .post-format-options .standard {
     4132}
     4133
     4134.post-format-change span.icon.standard {
    41294135    background: url(../images/post-formats.png) no-repeat -8px -8px;
    41304136}
    41314137
    4132 .post-format-options .image {
     4138.post-format-change span.icon.image {
    41334139    background: url(../images/post-formats.png) no-repeat -40px -8px;
    41344140}
    41354141
    4136 .post-format-options .gallery {
     4142.post-format-change span.icon.gallery {
    41374143    background: url(../images/post-formats.png) no-repeat -72px -8px;
    41384144}
    41394145
    4140 .post-format-options .audio {
     4146.post-format-change span.icon.audio {
    41414147    background: url(../images/post-formats.png) no-repeat -104px -8px;
    41424148}
    41434149
    4144 .post-format-options .video {
     4150.post-format-change span.icon.video {
    41454151    background: url(../images/post-formats.png) no-repeat -136px -8px;
    41464152}
    41474153
    4148 .post-format-options .chat {
     4154.post-format-change span.icon.chat {
    41494155    background: url(../images/post-formats.png) no-repeat -168px -8px;
    41504156}
    41514157
    4152 .post-format-options .status {
     4158.post-format-change span.icon.status {
    41534159    background: url(../images/post-formats.png) no-repeat -200px -8px;
    41544160}
    41554161
    4156 .post-format-options .aside {
     4162.post-format-change span.icon.aside {
    41574163    background: url(../images/post-formats.png) no-repeat -232px -8px;
    41584164}
    41594165
    4160 .post-format-options .quote {
     4166.post-format-change span.icon.quote {
    41614167    background: url(../images/post-formats.png) no-repeat -264px -8px;
    41624168}
    41634169
    4164 .post-format-options .link {
     4170.post-format-change span.icon.link {
    41654171    background: url(../images/post-formats.png) no-repeat -296px -8px;
    41664172}
    41674173
    4168 .post-format-tip {
    4169     color: #999;
    4170     font-size: 14px;
    4171     float: right;
    4172     padding: 6px 10px;
    4173     text-transform: capitalize;
     4174.post-format-change a {
     4175    font-size: 12px;
     4176}
     4177
     4178@media only screen and (max-width: 782px) {
     4179    .post-format-options {
     4180        height: 33px;
     4181    }
     4182
     4183    .post-format-options a {
     4184        margin-right: 19px;
     4185    }
     4186
     4187    .post-format-options a div {
     4188        height: 18px;
     4189        width: 16px;
     4190    }
     4191
     4192    .post-format-options .standard {
     4193        background: url(../images/post-formats.png) no-repeat -8px -8px;
     4194    }
     4195
     4196    .post-format-options .image {
     4197        background: url(../images/post-formats.png) no-repeat -40px -8px;
     4198    }
     4199
     4200    .post-format-options .gallery {
     4201        background: url(../images/post-formats.png) no-repeat -72px -8px;
     4202    }
     4203
     4204    .post-format-options .audio {
     4205        background: url(../images/post-formats.png) no-repeat -104px -8px;
     4206    }
     4207
     4208    .post-format-options .video {
     4209        background: url(../images/post-formats.png) no-repeat -136px -8px;
     4210    }
     4211
     4212    .post-format-options .chat {
     4213        background: url(../images/post-formats.png) no-repeat -168px -8px;
     4214    }
     4215
     4216    .post-format-options .status {
     4217        background: url(../images/post-formats.png) no-repeat -200px -8px;
     4218    }
     4219
     4220    .post-format-options .aside {
     4221        background: url(../images/post-formats.png) no-repeat -232px -8px;
     4222    }
     4223
     4224    .post-format-options .quote {
     4225        background: url(../images/post-formats.png) no-repeat -264px -8px;
     4226    }
     4227
     4228    .post-format-options .link {
     4229        background: url(../images/post-formats.png) no-repeat -296px -8px;
     4230    }
    41744231}
    41754232

  • trunk/wp-admin/edit-form-advanced.php

    r23993 r24006  
    134134    wp_enqueue_style( 'wp-mediaelement' );
    135135    $post_format = get_post_format();
    136 
    137     if ( ! $post_format )
     136    $post_format_set_class = 'post-format-set';
     137
     138    if ( ! $post_format ) {
    138139        $post_format = 'standard';
     140        if ( 'auto-draft' == $post->post_status )
     141            $post_format_set_class = '';
     142    }
    139143
    140144    $format_class = " class='wp-format-{$post_format}'";
    … …  
    143147    $all_post_formats = array(
    144148        'standard' => array (
    145             'description' => __( 'Add a title and use the editor to compose your post.' )
     149            'description' => __( 'Use the editor below to compose your post.' )
    146150        ),
    147151        'image' => array (
    148             'description' => __( 'Select or upload an image to use for your post.' )
     152            'description' => __( 'Select or upload an image for your post.' )
    149153        ),
    150154        'gallery' => array (
    … …  
    167171        ),
    168172        'quote' => array (
    169             'description' => __( 'Copy a quotation into the box. Also add the source and URL if you have them.' )
     173            'description' => __( 'Copy a quotation into the box below. Add a source and URL if you have them.' )
    170174        ),
    171175        'aside' => array (
    172             'description' => __( 'An aside is a quick thought or side topic. Use the editor to compose one.' )
     176            'description' => __( 'Use the editor to share a quick thought or side topic.' )
    173177        )
    174178    );
    … …  
    182186        }
    183187
    184         $post_format_options .= '<a ' . $class . ' href="?format=' . $slug . '" data-description="' . $attr['description'] . '" data-wp-format="' . $slug . '" title="' . ucfirst( sprintf( __( '%s Post' ), $slug ) ) . '"><div class="' . $slug . '"></div></a>';
     188        $post_format_options .= '<a ' . $class . ' href="?format=' . $slug . '" data-description="' . $attr['description'] . '" data-wp-format="' . $slug . '" title="' . ucfirst( $slug ) . '"><div class="' . $slug . '"></div><span class="post-format-title">' . ucfirst( $slug ) . '</span></a>';
    185189    }
    186190
    … …  
    359363?>
    360364
    361 <div class="wrap">
     365<div class="wrap <?php echo $post_format_set_class; ?>">
    362366<?php screen_icon(); ?>
    363367<h2><?php
    … …  
    375379    <p><?php _e("You have lost your connection with the server, and saving has been disabled. This message will vanish once you've reconnected."); ?></p>
    376380</div>
     381<?php if ( ! empty( $post_format_options ) ) : ?>
     382<div class="post-format-options">
     383    <?php echo $post_format_options; ?>
     384</div>
     385<?php endif; ?>
    377386<form name="post" action="post.php" method="post" id="post"<?php do_action('post_edit_form_tag'); ?>>
    378387<?php wp_nonce_field($nonce_action); ?>
    … …  
    401410<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
    402411<div id="post-body-content"<?php echo $format_class; ?>>
    403 
    404 <?php if ( ! empty( $post_format_options ) ) : ?>
    405 <div class="post-format-options">
    406     <span class="post-format-tip">Standard Post</span>
    407     <?php echo $post_format_options; ?>
    408 </div>
    409 <?php endif; ?>
    410 
    411412<?php if ( post_type_supports($post_type, 'title') ) { ?>
    412413<div id="titlediv">
    … …  
    425426    $has_sample_permalink = $sample_permalink_html && 'auto-draft' != $post->post_status;
    426427?>
    427     <div id="edit-slug-box" class="hide-if-no-js<?php if ( ! $has_sample_permalink ) echo ' hidden' ?>">
     428    <div id="edit-slug-box" class="hide-if-no-js">
    428429    <?php
    429430        if ( $has_sample_permalink )

  • trunk/wp-admin/includes/post-formats.php

    r23985 r24006  
    11<?php
    22global $wp_embed;
     3
    34$format_meta = get_post_format_meta( $post_ID );
    45
    56?>
    6 <div class="post-format-description"></div>
     7<div class="post-format-change"><span class="icon <?php echo esc_attr( $post_format ); ?>"></span> <span class="post-format-description"><?php echo $all_post_formats[$post_format]['description']; ?></span> <a href="#"><?php _e('Change format'); ?></a></div>
    78<div class="post-formats-fields">
    89
    … …  
    1920    </div>
    2021
    21     <?php
    22     $image = false;
    23     if ( ! empty( $format_meta['image'] ) && is_numeric( $format_meta['image'] ) ) {
    24         $format_meta['image'] = absint( $format_meta['image'] );
    25         $image = wp_get_attachment_url( $format_meta['image'] );
    26     }
    27     ?>
    2822    <div class="field wp-format-image">
    29         <div data-format="image" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
     23        <?php if ( ! empty( $format_meta['image'] ) ) : ?>
     24        <div id="image-preview" class="wp-format-media-preview">
     25            <?php
     26                if ( is_numeric( $format_meta['image'] ) ) {
     27                    $format_meta['image'] = absint( $format_meta['image'] );
     28                    $image = wp_get_attachment_url( $format_meta['image'] );
     29                    printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
     30                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['image'] ) ) {
     31                    echo do_shortcode( $format_meta['image'] );
     32                } elseif ( ! preg_match( '#<[^>]+>#', $format_meta['image'] ) ) {
     33                    printf( '<img src="%s" alt="" />', esc_url( $format_meta['image'] ) );
     34                } else {
     35                    echo $format_meta['image'];
     36                }
     37            ?>
     38        </div>
     39        <?php endif ?>
     40        <label for="wp_format_image"><?php
     41            if ( current_user_can( 'unfiltered_html' ) )
     42                _e( 'Image HTML or URL' );
     43            else
     44                _e( 'Image URL' );
     45        ?></label>
     46        <textarea id="wp_format_image" type="text" name="_wp_format_image" class="widefat"><?php esc_html_e( $format_meta['image'] ); ?></textarea>
     47        <div data-format="image" class="wp-format-media-holder hide-if-no-js">
    3048            <a href="#" class="wp-format-media-select"
    3149                data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
    3250                data-update="<?php esc_attr_e( 'Select Image' ); ?>">
    33                 <?php
    34                     if ( $image )
    35                         printf( '<img src="%s" alt="%s" />', esc_url( $image ), get_the_title( $format_meta['image'] ) );
    36                     else
    37                         _e( 'Select / Upload Image' );
    38                 ?>
     51                <?php _e( 'Select / Upload Image' ); ?>
    3952            </a>
    4053        </div>
    41         <input id="wp_format_image" type="hidden" name="_wp_format_image" value="<?php echo esc_attr( $format_meta['image'] ); ?>" />
    4254    </div>
    4355
    … …  
    4759    </div>
    4860
    49     <?php
    50     $show_video_preview = ! empty( $format_meta['video'] );
    51     ?>
    52     <div class="field wp-format-video<?php if ( $show_video_preview ) echo ' has-media-preview'; ?>">
    53         <?php if ( $show_video_preview ): ?>
     61    <div class="field wp-format-video">
     62        <?php if ( ! empty( $format_meta['video'] ) ): ?>
    5463        <div id="video-preview" class="wp-format-media-preview">
    5564            <?php
    … …  
    7786        ?></label>
    7887        <textarea id="wp_format_video" type="text" name="_wp_format_video" class="widefat"><?php esc_html_e( $format_meta['video'] ); ?></textarea>
    79         <div data-format="video" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
     88        <div data-format="video" class="wp-format-media-holder hide-if-no-js">
    8089            <a href="#" class="wp-format-media-select"
    8190                data-choose="<?php esc_attr_e( 'Choose a Video' ); ?>"
    … …  
    8695    </div>
    8796
    88     <?php
    89     $show_audio_preview = ! empty( $format_meta['audio'] );
    90     ?>
    91     <div class="field wp-format-audio<?php if ( $show_audio_preview ) echo ' has-media-preview' ?>">
    92         <?php if ( $show_audio_preview ): ?>
     97    <div class="field wp-format-audio">
     98        <?php if ( ! empty( $format_meta['audio'] ) ): ?>
    9399        <div id="audio-preview" class="wp-format-media-preview">
    94100            <?php
    … …  
    115121                _e( 'Audio URL' );
    116122        ?></label>
    117         <textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] );
    118 ?></textarea>
    119         <div data-format="audio" class="wp-format-media-holder hide-if-no-js<?php if ( empty( $format_meta['audio'] ) ) echo ' empty'; ?>">
     123        <textarea id="wp_format_audio" name="_wp_format_audio" class="widefat"><?php esc_html_e( $format_meta['audio'] ); ?></textarea>
     124        <div data-format="audio" class="wp-format-media-holder hide-if-no-js">
    120125            <a href="#" class="wp-format-media-select" data-choose="<?php esc_attr_e( 'Choose Audio' ); ?>" data-update="<?php esc_attr_e( 'Select Audio' ); ?>">
    121126                <?php _e( 'Select Audio From Media Library' ) ?>

  • trunk/wp-admin/js/post-formats.js

    r23989 r24006  
    22
    33(function($) {
    4     var container, mediaFrame, lastMimeType, lastMenu, mediaPreview, noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
     4    var container, mediaFrame, lastMimeType, lastMenu, mediaPreview,
     5        noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
     6        $container = $( '.post-formats-fields' );
    57
    68    function switchFormatClass( format ) {
    7         container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' );
     9        container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/g, '' );
    810        container.addClass('wp-format-' + format);
    911    }
    1012
     13    function switchFormat ($this) {
     14        var editor, body,
     15            parent = $this.parent(),
     16            format = $this.data('wp-format'),
     17            description = $('.post-format-description'),
     18            postTitle = $('#title');
     19
     20        if ( typeof container === 'undefined' )
     21            container = $('#post-body-content');
     22
     23        parent.slideUp().find('a.active').removeClass('active');
     24        $this.addClass('active');
     25        $('#post_format').val(format);
     26        $('.post-format-change').show().find('span.icon').removeClass(postFormats.currentPostFormat).addClass(format);
     27        // container.addClass('wp-format-set');
     28
     29        if ( -1 < $.inArray( format, noUIFormats ) ) {
     30            switchFormatClass( format ); // No slide
     31            $container.hide();
     32        } else {
     33            $container.slideUp( 200, function(){
     34                switchFormatClass( format );
     35                $container.slideDown( 400 );
     36            });
     37        }
     38
     39        postTitle.focus();
     40
     41        if ( '' === postTitle.val() )
     42            $('#title-prompt-text').removeClass('screen-reader-text');
     43
     44        // Update description line
     45        description.html($this.data('description'));
     46
     47        if (description.not(':visible'))
     48            description.slideDown('fast');
     49
     50        if ( typeof tinymce != 'undefined' ) {
     51            editor = tinymce.get('content');
     52
     53            if ( editor ) {
     54                body = editor.getBody();
     55                body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
     56                editor.dom.addClass( body, 'post-format-' + format );
     57            }
     58        }
     59
     60        postFormats.currentPostFormat = format;
     61    }
     62
    1163    $(function(){
    12         var $container = $( '.post-formats-fields' );
     64
     65        $('.post-format-change a').click(function () {
     66            $('.post-formats-fields, .post-format-change').slideUp();
     67            $('.post-format-options').slideDown();
     68            return false;
     69        });
    1370
    1471        // Post formats selection
    1572        $('.post-format-options').on( 'click', 'a', function(e){
    1673            e.preventDefault();
    17             var $this = $(this), editor, body,
    18                 parent = $this.parent(),
    19                 format = $this.data('wp-format'),
    20                 description = $('.post-format-description');
    21 
    22         if ( typeof container === 'undefined' )
    23             container = $('#post-body-content');
    24 
    25             // Already on this post format. Bail.
    26             if ( format === postFormats.currentPostFormat )
    27                 return;
    28 
    29             parent.find('a.active').removeClass('active');
    30             $this.addClass('active');
    31             $('#icon-edit').removeClass(postFormats.currentPostFormat).addClass(format);
    32             $('#post_format').val(format);
    33 
    34             if ( -1 < $.inArray( format, noUIFormats ) && -1 < $.inArray( postFormats.currentPostFormat, noUIFormats ) ) {
    35                 switchFormatClass( format ); // No slide
    36             } else {
    37                 $container.slideUp( 200, function(){
    38                     switchFormatClass( format );
    39                     $container.slideDown( 400 );
    40                 });
    41             }
    42 
    43             $('#title').focus();
    44 
    45             // Update description line
    46             description.html($this.data('description'));
    47 
    48             if (description.not(':visible'))
    49                 description.slideDown('fast');
    50 
    51             if ( typeof tinymce != 'undefined' ) {
    52                 editor = tinymce.get('content');
    53 
    54                 if ( editor ) {
    55                     body = editor.getBody();
    56                     body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
    57                     editor.dom.addClass( body, 'post-format-' + format );
    58                 }
    59             }
    60 
    61             postFormats.currentPostFormat = format;
    62         }).on('mouseenter focusin', 'a', function () {
    63             $('.post-format-tip').html( $(this).prop('title') );
    64         }).on('mouseleave focusout', 'a', function () {
    65             $('.post-format-tip').html( $('.post-format-options a.active').prop('title') );
     74            switchFormat($(this));
    6675        });
    6776
    … …  
    6978        $('.wp-format-media-select').click(function (event) {
    7079            event.preventDefault();
    71             var $el = $(this), $holder, $field, mime = 'image', menu = '',
     80            var $el = $(this), mime,
    7281                $holder = $el.closest('.wp-format-media-holder'),
    7382                $field = $( '#wp_format_' + $holder.data('format') );
    7483
    75             switch ( $holder.data('format') ) {
    76                 case 'audio':
    77                     mime = 'audio';
    78                     break;
    79                 case 'video':
    80                     mime = 'video';
    81                     break;
    82             }
     84            mime = $holder.data('format');
    8385
    8486            // If the media frame already exists, reopen it.
    85             if ( mediaFrame && lastMimeType === mime && lastMenu === menu ) {
     87            if ( mediaFrame && lastMimeType === mime ) {
    8688                mediaFrame.open();
    8789                return;
    … …  
    8991
    9092            lastMimeType = mime;
    91             lastMenu = menu;
    9293
    9394            // Create the media frame.
    … …  
    9596                // Set the title of the modal.
    9697                title: $el.data('choose'),
    97 
    98                 // Set the menu sidebar of the modal, if applicable
    99                 toolbar: menu,
    10098
    10199                // Tell the modal to show only items matching the current mime type.
    … …  
    143141            mediaFrame.on( 'select', function () {
    144142                // Grab the selected attachment.
    145                 var attachment = mediaFrame.state().get('selection').first().toJSON();
     143                var w = 0, h = 0, html, attachment = mediaFrame.state().get('selection').first().toJSON();
    146144
    147145                if ( 0 === attachment.mime.indexOf('audio') ) {
    … …  
    158156                    mediaPreview(attachment);
    159157                } else {
     158                    html = wp.media.string.image({}, attachment);
    160159                    // set the hidden input's value
    161                     $field.val(attachment.id);
    162                     // Show the image in the placeholder
    163                     $el.html('<img src="' + attachment.url + '" />');
    164                     $holder.removeClass('empty').show();
     160                    $field.val(html);
     161                    $('#image-preview').remove();
     162                    if ( attachment.width )
     163                        w = attachment.width > 600 ? 600 : attachment.width;
     164                    if ( attachment.height )
     165                        h = attachment.height;
     166                    if ( w < attachment.width )
     167                        h = Math.round( ( h * w ) / attachment.width );
     168                    $holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
     169                        '<img src="', attachment.url, '"',
     170                        w ? ' width="' + w + '"' : '',
     171                        h ? ' height="' + h + '"' : '',
     172                        ' />',
     173                    '</div>'].join('') );
    165174                }
    166175            });

  • trunk/wp-includes/js/media-editor.js

    r23998 r24006  
    192192            classes = props.classes || [];
    193193
    194             img.src = props.url;
     194            img.src = attachment.url;
    195195            _.extend( img, _.pick( props, 'width', 'height', 'alt' ) );
    196196

  • trunk/wp-includes/media.php

    r24003 r24006  
    24072407
    24082408    if ( ! empty( $meta['image'] ) ) {
    2409         $post->format_content = sprintf( $link_fmt, wp_get_attachment_image( $meta['image'], $attached_size ) );
     2409        if ( is_numeric( $meta['image'] ) )
     2410            $image = wp_get_attachment_image( absint( $meta['image'] ), $attached_size );
     2411        elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['image'] ) )
     2412            $image = do_shortcode( $meta['image'] );
     2413        elseif ( ! preg_match( '#<[^>]+>#', $meta['image'] ) )
     2414            $image = sprintf( '<img src="%s" alt="" />', esc_url( $meta['image'] ) );
     2415        else
     2416            $image = $meta['image'];
     2417
     2418        $post->format_content = sprintf( $link_fmt, $image );
    24102419        return $post->format_content;
    24112420    }
Note: See TracChangeset for help on using the changeset viewer.