Ticket #19570: 19570.17.diff

wp-admin/css/wp-admin-rtl.css

@@ -23 +23 @@
         11.1 - Custom Fields
         11.2 - Post Revisions
         11.3 - Featured Images
+        11.4 - Post Format Selection
 12.0 - Categories
 13.0 - Tags
 14.0 - Media Screen
@@ -967 +968 @@
 }
 
 /*------------------------------------------------------------------------------
+  11.4 - Post format selection
+------------------------------------------------------------------------------*/
+
+.post-format-options a {
+        border-left: 1px solid #ebebeb;
+        border-right: none;
+}
+
+.post-format-options a:first-child {
+        -webkit-border-bottom-left-radius: 0;
+        -webkit-border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+}
+
+.post-format-options a:last-child {
+        -webkit-border-bottom-right-radius: 3px;
+        -webkit-border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+        border-top-right-radius: 3px;
+}
+
+.post-format-tip {
+        float: left;
+}
+
+/*------------------------------------------------------------------------------
   12.0 - Categories
 ------------------------------------------------------------------------------*/
 

wp-admin/css/wp-admin.css

@@ -24 +24 @@
         11.1 - Custom Fields
         11.2 - Post Revisions
         11.3 - Featured Images
+        11.4 - Post Format Selection
 12.0 - Categories
 13.0 - Tags
 14.0 - Media Screen
@@ -3150 +3151 @@
         display: none;
 }
 
+.wp-format-gallery .post-formats-fields,
+.wp-format-image .post-formats-fields,
 .wp-format-link .post-formats-fields,
 .wp-format-quote .post-formats-fields,
 .wp-format-video .post-formats-fields,
 .wp-format-audio .post-formats-fields,
+.wp-format-gallery .field.wp-format-gallery,
+.wp-format-image .field.wp-format-image,
 .wp-format-chat .field.wp-format-chat,
 .wp-format-link .field.wp-format-link,
 .wp-format-quote .field.wp-format-quote,
@@ -3165 +3170 @@
 .post-formats-fields .field {
         display: none;
         margin-bottom: 10px;
+        overflow: hidden;
 }
 
 .post-formats-fields input,
@@ -3173 +3179 @@
         font-size: 1.2em;
 }
 
+.wp-format-media-holder {
+        float: left;
+        overflow: hidden;
+        width: 40%;
+        height: 200px;
+        border: 1px dashed #dfdfdf;
+        background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
+}
+
+.wp-format-media-holder.empty {
+        height: auto;
+        padding: 55px 0 20px;
+}
+
+.wp-format-media-holder:hover {
+        background-color: #eee;
+}
+
+.wp-format-media-preview {
+        margin-bottom: 20px;
+}
+
+.has-media-preview .wp-format-media-holder,
+.has-media-preview audio,
+.has-media-preview video {
+        display: none;
+}
+
+.mejs-audio audio,
+.mejs-video video {
+        display: block;
+}
+
+.wp-format-media-select {
+        display: block;
+        height: 200px;
+        text-align: center;
+}
+
+.wp-format-media-select img {
+        max-width: 100%;
+        max-height: 100%;
+}
+
+.empty .wp-format-media-select {
+        height: 20px;
+}
+
+.empty .wp-format-media-metaedit {
+        height: 20px;
+        display: block;
+        text-align: center;
+}
+
+.edit-format-preview {
+        display: block;
+        margin: 5px 0;
+}
+
+#wp_format_audio, #wp_format_video {
+        float: left;
+        margin-right: 23px;
+        max-width: 50%;
+        min-height: 97px;
+}
+
 /* Post Screen */
 #post-body #normal-sortables {
         min-height: 50px;
@@ -4066 +4138 @@
 }
 
 /*------------------------------------------------------------------------------
+  11.4 - Post format selection
+------------------------------------------------------------------------------*/
+
+#icon-edit.standard {
+        background: url(../images/post-formats32.png) no-repeat -3px -4px;
+}
+
+#icon-edit.image {
+        background: url(../images/post-formats32.png) no-repeat  -43px -4px;
+}
+
+#icon-edit.gallery {
+        background: url(../images/post-formats32.png) no-repeat -83px -4px;
+}
+
+#icon-edit.audio {
+        background: url(../images/post-formats32.png) no-repeat -123px -4px;
+}
+
+#icon-edit.video {
+        background: url(../images/post-formats32.png) no-repeat -163px -4px;
+}
+
+#icon-edit.chat {
+        background: url(../images/post-formats32.png) no-repeat -202px -4px;
+}
+
+#icon-edit.status {
+        background: url(../images/post-formats32.png) no-repeat -242px -4px;
+}
+
+#icon-edit.aside {
+        background: url(../images/post-formats32.png) no-repeat -282px -4px;
+}
+
+#icon-edit.quote {
+        background: url(../images/post-formats32.png) no-repeat -322px -4px;
+}
+
+#icon-edit.link {
+        background: url(../images/post-formats32.png) no-repeat -362px -4px;
+}
+
+.post-format-description {
+        color: #666;
+        display: none;
+        margin: 10px 0;
+}
+
+.post-format-options {
+        height: 29px;
+        background: #f9f9f9;
+        border: 1px solid #dfdfdf;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+        margin: 0 0 9px 1px;
+        padding: 0;
+}
+
+.post-format-options a {
+        border-right: 1px solid #ebebeb;
+        display: inline-block;
+        height: 16px;
+        width: 16px;
+        padding: 6px;
+        position: relative;
+        text-decoration: none;
+}
+
+.post-format-options a:first-child {
+        -webkit-border-bottom-left-radius: 3px;
+        -webkit-border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+        border-top-left-radius: 3px;
+}
+
+.post-format-options a.active,
+.post-format-options a:focus,
+.post-format-options a:hover {
+        background: #fff;
+        outline: none;
+        opacity: 1;
+}
+
+.post-format-options a div {
+        height: 16px;
+        width: 16px;
+        opacity: 0.4;
+}
+
+.post-format-options a.active div,
+.post-format-options a:focus div,
+.post-format-options a:hover div {
+        opacity: 1;
+}
+
+.post-format-options .standard {
+        background: url(../images/post-formats.png) no-repeat -8px -8px;
+}
+
+.post-format-options .image {
+        background: url(../images/post-formats.png) no-repeat -40px -8px;
+}
+
+.post-format-options .gallery {
+        background: url(../images/post-formats.png) no-repeat -72px -8px;
+}
+
+.post-format-options .audio {
+        background: url(../images/post-formats.png) no-repeat -104px -8px;
+}
+
+.post-format-options .video {
+        background: url(../images/post-formats.png) no-repeat -136px -8px;
+}
+
+.post-format-options .chat {
+        background: url(../images/post-formats.png) no-repeat -168px -8px;
+}
+
+.post-format-options .status {
+        background: url(../images/post-formats.png) no-repeat -200px -8px;
+}
+
+.post-format-options .aside {
+        background: url(../images/post-formats.png) no-repeat -232px -8px;
+}
+
+.post-format-options .quote {
+        background: url(../images/post-formats.png) no-repeat -264px -8px;
+}
+
+.post-format-options .link {
+        background: url(../images/post-formats.png) no-repeat -296px -8px;
+}
+
+.post-format-tip {
+        color: #999;
+        font-size: 14px;
+        float: right;
+        padding: 6px 10px;
+        text-transform: capitalize;
+}
+
+/*------------------------------------------------------------------------------
   12.0 - Categories
 ------------------------------------------------------------------------------*/
 

wp-admin/edit-form-advanced.php

@@ -130 +130 @@
 $format_class = '';
 if ( post_type_supports( $post_type, 'post-formats' ) ) {
         wp_enqueue_script( 'post-formats' );
+        wp_enqueue_script( 'wp-mediaelement' );
+        wp_enqueue_style( 'wp-mediaelement' );
         $post_format = get_post_format();
 
         if ( ! $post_format )
@@ -138 +140 @@
         $format_class = " class='wp-format-{$post_format}'";
 }
 
+if ( post_type_supports( $post_type, 'post-formats' ) ) {
+        $all_post_formats = array(
+                'standard' => array (
+                        'description' => __('Add a title and description for your post below.')
+                ),
+                'image' => array (
+                        'description' => __('Select an image for your post below.')
+                ),
+                'gallery' => array (
+                        'description' => __('Use the Add Media button below to select images for your gallery.')
+                ),
+                'link' => array (
+                        'description' => __('Add a link URL below.')
+                ),
+                'video' => array (
+                        'description' => __('Paste a video embed URL below, or upload a new video.')
+                ),
+                'audio' => array (
+                        'description' => __('Paste an audio embed URL below, or upload a new audio file.')
+                ),
+                'chat' => array (
+                        'description' => __('Paste a chat transcript below.')
+                ),
+                'status' => array (
+                        'description' => __('What are you up to?  Enter your status message below.')
+                ),
+                'quote' => array (
+                        'description' => __('Enter a quote below.')
+                ),
+                'aside' => array (
+                        'description' => __('Enter a quick thought or side topic below.')
+                )
+        );
+        $post_format_options = '';
+
+        foreach ( $all_post_formats as $slug => $attr ) {
+                $class = '';
+                if ( $post_format == $slug ) {
+                        $class = 'class="active"';
+                        $active_post_type_slug = $slug;
+                        $active_post_type_label = ucfirst( $slug );
+                        $active_post_format_description = $attr['description'];
+                }
+
+                $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>';
+        }
+}
+
+$current_post_format = array( 'currentPostFormat' => esc_html( $active_post_type_slug ) );
+wp_localize_script( 'post', 'postFormats', $current_post_format );
+
 if ( post_type_supports($post_type, 'page-attributes') )
         add_meta_box('pageparentdiv', 'page' == $post_type ? __('Page Attributes') : __('Attributes'), 'page_attributes_meta_box', null, 'side', 'core');
 
@@ -337 +390 @@
 ?>
 
 <div id="poststuff">
-
-<?php
-if ( post_type_supports( $post_type, 'post-formats' ) ) {
-        $all_post_formats = get_post_format_strings();
-
-        echo '<h2 class="nav-tab-wrapper post-format-select">';
-
-        foreach ( $all_post_formats as $slug => $label ) {
-                if ( $post_format == $slug )
-                        $class = 'nav-tab nav-tab-active';
-                else
-                        $class = 'nav-tab';
-
-                echo '<a class="' . $class . '" href="?format=' . $slug . '" data-wp-format="' . $slug . '">' . $label . '</a>';
-        }
-
-        echo '</h2>';
-}
-?>
-
 <div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
 <div id="post-body-content"<?php echo $format_class; ?>>
 
+<?php if ( ! empty( $post_format_options ) ) : ?>
+<div class="post-format-options">
+        <span class="post-format-tip">Standard Post</span>
+        <?php echo $post_format_options; ?>
+</div>
+<div class="post-format-description"></div>
+<?php endif; ?>
+
 <?php if ( post_type_supports($post_type, 'title') ) { ?>
 <div id="titlediv">
 <div id="titlewrap">
@@ -398 +439 @@
 }
 
 // post format fields
-if ( post_type_supports( $post_type, 'post-formats' ) ) {
-        $format_meta = get_post_format_meta( $post_ID );
-?>
-<div class="post-formats-fields edit-form-section">
-
-<input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
-
-<div class="field wp-format-quote">
-        <label for="_wp_format_quote" class="screen-reader-text"><?php _e( 'Quote' ); ?>:</label>
-        <textarea name="_wp_format_quote" placeholder="<?php esc_attr_e( 'Quote' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['quote'] ); ?></textarea>
-</div>
-
-<div class="field wp-format-quote">
-        <label for="_wp_format_quote_source" class="screen-reader-text"><?php _e( 'Quote source' ); ?>:</label>
-        <input type="text" name="_wp_format_quote_source" value="<?php echo esc_attr( $format_meta['quote_source'] ); ?>" placeholder="<?php esc_attr_e( 'Quote source' ); ?>" class="widefat" />
-</div>
-
-<div class="field wp-format-link wp-format-quote">
-        <label for="_wp_format_url" class="screen-reader-text"><?php _e( 'Link URL' ); ?>:</label>
-        <input type="text" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" placeholder="<?php esc_attr_e( 'Link URL' ); ?>" class="widefat" />
-</div>
-
-<div class="field wp-format-audio wp-format-video">
-        <label for="_wp_format_media" class="screen-reader-text"><?php _e( 'Embed code or URL' ); ?>:</label>
-        <textarea name="_wp_format_media" placeholder="<?php esc_attr_e( 'Embed code or URL' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['media'] ); ?></textarea>
-</div>
-
-</div>
-<?php
-}
+if ( post_type_supports( $post_type, 'post-formats' ) )
+        require_once( './includes/post-formats.php' );
 
 if ( post_type_supports($post_type, 'editor') ) {
 ?>

new file wp-admin/includes/post-formats.php

@@ +1 @@
+<?php
+$format_meta = get_post_format_meta( $post_ID );
+
+?>
+<div class="post-formats-fields edit-form-section">
+
+        <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
+
+        <div class="field wp-format-quote">
+                <label for="_wp_format_quote" class="screen-reader-text"><?php _e( 'Quote' ); ?>:</label>
+                <textarea name="_wp_format_quote" placeholder="<?php esc_attr_e( 'Quote' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['quote'] ); ?></textarea>
+        </div>
+
+        <div class="field wp-format-quote">
+                <label for="_wp_format_quote_source" class="screen-reader-text"><?php _e( 'Quote source' ); ?>:</label>
+                <input type="text" name="_wp_format_quote_source" value="<?php echo esc_attr( $format_meta['quote_source'] ); ?>" placeholder="<?php esc_attr_e( 'Quote source' ); ?>" class="widefat" />
+        </div>
+
+        <?php
+        $image = false;
+        if ( isset( $format_meta['image'] ) )
+                $image = is_numeric( $format_meta['image'] ) ? wp_get_attachment_url( $format_meta['image'] ) : $format_meta['image'];
+        ?>
+        <div class="field wp-format-image">
+                <div data-format="image" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
+                        <a href="#" class="wp-format-media-select"
+                                data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
+                                data-update="<?php esc_attr_e( 'Select Image' ); ?>">
+                                <?php
+                                        if ( $image )
+                                                echo '<img src="' . esc_url( $image ) . '" />';
+                                        else
+                                                _e( 'Select Image' );
+                                ?>
+                        </a>
+                </div>
+                <label for="_wp_format_image" class="screen-reader-text"><?php _e( 'Image URL' ); ?>:</label>
+                <input id="wp_format_image" type="hidden" name="_wp_format_image" value="<?php echo esc_url( $format_meta['image'] ); ?>" placeholder="<?php esc_attr_e( 'Image URL' ); ?>" class="widefat" />
+        </div>
+
+        <div class="field wp-format-link wp-format-quote wp-format-image">
+                <label for="_wp_format_url" class="screen-reader-text"><?php _e( 'Link URL' ); ?>:</label>
+                <input type="text" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" placeholder="<?php esc_attr_e( 'Link URL' ); ?>" class="widefat" />
+        </div>
+
+        <?php
+        $show_video_preview = ! empty( $format_meta['video'] );
+        ?>
+        <div class="field wp-format-video<?php if ( $show_video_preview ) echo ' has-media-preview' ?>">
+                <?php if ( $show_video_preview ): ?>
+                <div id="video-preview">
+                        <?php
+                                if ( is_numeric( $format_meta['video'] ) ) {
+                                        $url = wp_get_attachment_url( $format_meta['video'] );
+                                        echo do_shortcode( sprintf( '[video src="%s"]', $url ) );
+                                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['video'] ) ) {
+                                        echo do_shortcode( $format_meta['video'] );
+                                } elseif ( ! preg_match( '#<[^>]+>#', $format_meta['video'] ) ) {
+                                        echo do_shortcode( sprintf( '[video src="%s"]', $format_meta['video'] ) );
+                                } else {
+                                        echo $format_meta['video'];
+                                }
+                        ?>
+                        <a class="edit-format-preview" data-format="video" href="#">Update Media</a>
+                </div>
+                <?php endif ?>
+                <label for="_wp_format_video" class="screen-reader-text"><?php _e( 'Video Embed Code or URL' ); ?>:</label>
+                <textarea id="wp_format_video" type="text" name="_wp_format_video" placeholder="<?php esc_attr_e( 'Video Embed Code or URL' ); ?>" class="widefat"><?php esc_html_e( $format_meta['video'] ); ?></textarea>
+                <div data-format="video" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
+                        <a href="#" class="wp-format-media-select"
+                                data-choose="<?php esc_attr_e( 'Choose a Video' ); ?>"
+                                data-update="<?php esc_attr_e( 'Select Video' ); ?>">
+                                <?php _e( 'Select Video From Media Library' ) ?>
+                        </a>
+                </div>
+        </div>
+
+        <?php
+        $show_audio_preview = ! empty( $format_meta['audio'] );
+        ?>
+        <div class="field wp-format-audio<?php if ( $show_audio_preview ) echo ' has-media-preview' ?>">
+                <?php if ( $show_audio_preview ): ?>
+                <div id="audio-preview">
+                        <?php
+                                if ( is_numeric( $format_meta['audio'] ) ) {
+                                        $url = wp_get_attachment_url( $format_meta['audio'] );
+                                        echo do_shortcode( sprintf( '[audio src="%s"]', $url ) );
+                                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['audio'] ) ) {
+                                        echo do_shortcode( $format_meta['audio'] );
+                                } elseif ( ! preg_match( '#<[^>]+>#', $format_meta['audio'] ) ) {
+                                        echo do_shortcode( sprintf( '[audio src="%s"]', $format_meta['audio'] ) );
+                                } else {
+                                        echo $format_meta['audio'];
+                                }
+                        ?>
+                        <a class="edit-format-preview" data-format="audio" href="#">Update Media</a>
+                </div>
+                <?php endif ?>
+                <label for="_wp_format_audio" class="screen-reader-text"><?php _e( 'Audio Embed Code or URL' ); ?>:</label>
+                <textarea id="wp_format_audio" name="_wp_format_audio" placeholder="<?php esc_attr_e( 'Audio Embed Code or URL' ); ?>" class="widefat"><?php esc_html_e( $format_meta['audio'] ); ?></textarea>
+                <div data-format="audio" class="wp-format-media-holder hide-if-no-js<?php if ( empty( $format_meta['audio'] ) ) echo ' empty'; ?>">
+                        <a href="#" class="wp-format-media-select" data-choose="<?php esc_attr_e( 'Choose Audio' ); ?>" data-update="<?php esc_attr_e( 'Select Audio' ); ?>">
+                                <?php _e( 'Select Audio From Media Library' ) ?>
+                        </a>
+                </div>
+        </div>
+</div>
+ No newline at end of file

wp-admin/includes/post.php

@@ -200 +200 @@
                 update_post_meta( $post_ID, '_wp_format_url', wp_slash( esc_url_raw( wp_unslash( $post_data['_wp_format_url'] ) ) ) );
         }
 
-        $format_keys = array( 'quote', 'quote_source', 'image', 'gallery', 'media' );
+        $format_keys = array( 'quote', 'quote_source', 'image', 'gallery', 'image', 'gallery', 'audio', 'video' );
 
         foreach ( $format_keys as $key ) {
                 if ( isset( $post_data[ '_wp_format_' . $key ] ) )

wp-admin/js/post-formats.js

@@ -1 @@
-(function($){
+window.wp = window.wp || {};
+
+(function($) {
+        var mediaFrame, lastMimeType, lastMenu, mediaPreview;
 
         // Post formats selection
-        $('.post-format-select a').on( 'click.post-format', function(e) {
-                var $this = $(this),
-                        editor,
-                        body,
+        $('.post-format-options a').on( 'click', function(e){
+                var $this = $(this), editor, body,
+                        parent = $this.parent(),
                         format = $this.data('wp-format'),
-                        container = $('#post-body-content');
+                        container = $('#post-body-content'),
+                        description = $('.post-format-description');
 
-                $('.post-format-select a.nav-tab-active').removeClass('nav-tab-active');
-                $this.addClass('nav-tab-active').blur();
+                parent.find('a.active').removeClass('active');
+                $this.addClass('active');
+                $('#icon-edit').removeClass(postFormats.currentPostFormat).addClass(format);
                 $('#post_format').val(format);
 
                 container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' );
                 container.addClass('wp-format-' + format);
+                $('#title').focus();
+
+                // Update description line
+                description.html($this.data('description'));
+
+                if (description.not(':visible'))
+                        description.slideDown('fast');
 
                 if ( typeof tinymce != 'undefined' ) {
                         editor = tinymce.get('content');
@@ -25 +36 @@
                         }
                 }
 
+                postFormats.currentPostFormat = format;
+
                 e.preventDefault();
+        }).on('mouseenter focusin', function () {
+                $('.post-format-tip').html( $(this).prop('title') );
+        }).on('mouseleave focusout', function () {
+                $('.post-format-tip').html( $('.post-format-options a.active').prop('title') );
+        });
+
+        $('.post-formats-fields').on( 'click', '.edit-format-preview', function (e) {
+                e.preventDefault();
+                var elem = $(e.currentTarget);
+
+                if ( elem.data('format') )
+                        $( '.wp-format-' + elem.data('format') + ' .wp-format-media-holder' ).addClass('empty').show();
         });
 
-})(jQuery);
+        // Media selection
+        $('.wp-format-media-select').click(function (event) {
+                event.preventDefault();
+                var $el = $(this), $holder, $field, mime = 'image', menu = '',
+                        $holder = $el.closest('.wp-format-media-holder'),
+                        $field = $( '#wp_format_' + $holder.data('format') );
+
+                switch ( $holder.data('format') ) {
+                        case 'audio':
+                                mime = 'audio';
+                                break;
+                        case 'video':
+                                mime = 'video';
+                                break;
+                }
+
+                if ( $('.wp-format-' + $holder.data('format') + ' .edit-format-preview').length )
+                        $holder.hide();
+
+                // If the media frame already exists, reopen it.
+                if ( mediaFrame && lastMimeType === mime && lastMenu === menu ) {
+                        mediaFrame.open();
+                        return;
+                }
+
+                lastMimeType = mime;
+                lastMenu = menu;
+
+                // Create the media frame.
+                mediaFrame = wp.media.frames.formatMedia = wp.media({
+                        // Set the title of the modal.
+                        title: $el.data('choose'),
+
+                        // Set the menu sidebar of the modal, if applicable
+                        toolbar: menu,
+
+                        // Tell the modal to show only items matching the current mime type.
+                        library: {
+                                type: mime
+                        },
+
+                        // Customize the submit button.
+                        button: {
+                                // Set the text of the button.
+                                text: $el.data('update')
+                        }
+                });
+
+                mediaPreview = function (format, url, mime) {
+                        $('#' + format + '-preview').remove();
+                        $holder.parent().prepend( '<div id="' + format + '-preview" class="wp-format-media-preview">' +
+                                '<' + format + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' +
+                                        '<source type="' + mime + '" src="' + url + '" />' +
+                                '</' + format + '></div>' );
+                        $('.wp-' + format + '-shortcode').mediaelementplayer();
+                };
+
+                // When an image is selected, run a callback.
+                mediaFrame.on( 'select', function () {
+                        // Grab the selected attachment.
+                        var attachment = mediaFrame.state().get('selection').first(), mime, url, id;
+
+                        id = attachment.get('id');
+                        url = attachment.get('url');
+                        mime = attachment.get('mime');
+
+                        if ( 0 === mime.indexOf('audio') ) {
+                                $field.val(url);
+                                // show one preview at a time
+                                mediaPreview('audio', url, mime);
+                        } else if ( 0 === mime.indexOf('video') ) {
+                                $field.val(url);
+                                // show one preview at a time
+                                mediaPreview('video', url, mime);
+                        } else {
+                                // set the hidden input's value
+                                $field.val(url);
+                                // Show the image in the placeholder
+                                $el.html('<img src="' + url + '" />');
+                                $holder.removeClass('empty').show();
+                        }
+                });
+
+                mediaFrame.open();
+        });
+})(jQuery);
+ No newline at end of file

wp-includes/post-formats.php

@@ -84 +84 @@
                 'quote'        => '',
                 'quote_source' => '',
                 'url'          => '',
-                'media'        => '',
+                'image'        => '',
+                'gallery'      => '',
+                'audio'        => '',
+                'video'        => '',
         );
 
         foreach ( $values as $key => $value )
@@ -355 +358 @@
                 case 'video':
                 case 'audio':
                         if ( ! has_shortcode( $post->post_content, $format ) && ! empty( $meta['media'] ) ) {
+                                // the metadata is an attachment ID
+                                if ( is_numeric( $meta['media'] ) ) {
+                                        $url = wp_get_attachment_url( $meta['media'] );
+                                        $format_output .= sprintf( '[%s src="%s"]', $format, $url );
                                 // the metadata is a shortcode or an embed code
-                                if ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['media'] ) || preg_match( '#<[^>]+>#', $meta['media'] ) ) {
+                                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['media'] ) || preg_match( '#<[^>]+>#', $meta['media'] ) ) {
                                         $format_output .= $meta['media'];
                                 } elseif ( ! stristr( $content, $meta['media'] ) ) {
                                         // attempt to embed the URL