WordPress.org
Get WordPress

Make WordPress Core

Ticket #19570: admin-ui.diff

File admin-ui.diff, 16.8 KB (added by wonderboymusic, 10 years ago)

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

    diff --git wp-admin/css/wp-admin.css wp-admin/css/wp-admin.css
index b831e61..d8671e7 100644
    input#link_url { 
    31453145        display: none;
    31463146}
    31473147
     3148.wp-format-gallery .post-formats-fields,
     3149.wp-format-image .post-formats-fields,
    31483150.wp-format-link .post-formats-fields,
    31493151.wp-format-quote .post-formats-fields,
    31503152.wp-format-video .post-formats-fields,
    31513153.wp-format-audio .post-formats-fields,
     3154.wp-format-gallery .field.wp-format-gallery,
     3155.wp-format-image .field.wp-format-image,
    31523156.wp-format-chat .field.wp-format-chat,
    31533157.wp-format-link .field.wp-format-link,
    31543158.wp-format-quote .field.wp-format-quote,
    … … input#link_url { 
    31683172        font-size: 1.2em;
    31693173}
    31703174
     3175.wp-format-media-holder {
     3176        overflow: hidden;
     3177        width: 300px;
     3178        height: 200px;
     3179        border: 1px dashed #dfdfdf;
     3180        background: #f5f5f5 url(../images/media-button-2x.png) no-repeat 50% 25%;
     3181}
     3182
     3183.wp-format-media-holder.empty {
     3184        height: auto;
     3185        padding: 55px 0 20px;
     3186}
     3187
     3188.wp-format-media-holder:hover {
     3189        background-color: #eee;
     3190}
     3191
     3192.has-media-preview .wp-format-media-holder,
     3193.has-media-preview audio,
     3194.has-media-preview video {
     3195        display: none;
     3196}
     3197
     3198.mejs-audio audio,
     3199.mejs-video video {
     3200        display: block;
     3201}
     3202
     3203.wp-format-media-select {
     3204        display: block;
     3205        height: 200px;
     3206        text-align: center;
     3207}
     3208
     3209.wp-format-media-select img {
     3210        max-width: 100%;
     3211        max-height: 100%;
     3212}
     3213
     3214.empty .wp-format-media-select {
     3215        height: 20px;
     3216}
     3217
     3218.empty .wp-format-media-metaedit {
     3219        height: 20px;
     3220        display: block;
     3221        text-align: center;
     3222}
     3223
     3224.edit-format-preview {
     3225        display: block;
     3226        margin: 5px 0;
     3227}
     3228
     3229#wp_format_audio, #wp_format_video {
     3230        margin-top: 10px;
     3231}
     3232
    31713233/* Post Screen */
    31723234#post-body #normal-sortables {
    31733235        min-height: 50px;

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

    diff --git wp-admin/edit-form-advanced.php wp-admin/edit-form-advanced.php
index c7e8dc6..ee52a03 100644
    foreach ( get_object_taxonomies( $post ) as $tax_name ) { 
    130130$format_class = '';
    131131if ( post_type_supports( $post_type, 'post-formats' ) ) {
    132132        wp_enqueue_script( 'post-formats' );
     133        wp_enqueue_script( 'wp-mediaelement' );
     134        wp_enqueue_style( 'wp-mediaelement' );
    133135        $post_format = get_post_format();
    134136
    135137        if ( ! $post_format )
    … … if ( has_action( 'edit_form_after_title' ) ) { 
    398400}
    399401
    400402// post format fields
    401 if ( post_type_supports( $post_type, 'post-formats' ) ) {
    402         $format_meta = get_post_format_meta( $post_ID );
    403 ?>
    404 <div class="post-formats-fields edit-form-section">
    405 
    406 <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
    407 
    408 <div class="field wp-format-quote">
    409         <label for="_wp_format_quote" class="screen-reader-text"><?php _e( 'Quote' ); ?>:</label>
    410         <textarea name="_wp_format_quote" placeholder="<?php esc_attr_e( 'Quote' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['quote'] ); ?></textarea>
    411 </div>
    412 
    413 <div class="field wp-format-quote">
    414         <label for="_wp_format_quote_source" class="screen-reader-text"><?php _e( 'Quote source' ); ?>:</label>
    415         <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" />
    416 </div>
    417 
    418 <div class="field wp-format-link wp-format-quote">
    419         <label for="_wp_format_url" class="screen-reader-text"><?php _e( 'Link URL' ); ?>:</label>
    420         <input type="text" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" placeholder="<?php esc_attr_e( 'Link URL' ); ?>" class="widefat" />
    421 </div>
    422 
    423 <div class="field wp-format-audio wp-format-video">
    424         <label for="_wp_format_media" class="screen-reader-text"><?php _e( 'Embed code or URL' ); ?>:</label>
    425         <textarea name="_wp_format_media" placeholder="<?php esc_attr_e( 'Embed code or URL' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['media'] ); ?></textarea>
    426 </div>
    427 
    428 </div>
    429 <?php
    430 }
     403if ( post_type_supports( $post_type, 'post-formats' ) )
     404        require_once( './includes/post-formats.php' );
    431405
    432406if ( post_type_supports($post_type, 'editor') ) {
    433407?>

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

    diff --git wp-admin/includes/post-formats.php wp-admin/includes/post-formats.php
new file mode 100644
index 0000000..c2029b6
    - +  
     1<?php
     2$format_meta = get_post_format_meta( $post_ID );
     3
     4?>
     5<div class="post-formats-fields edit-form-section">
     6
     7        <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
     8
     9        <div class="field wp-format-quote">
     10                <label for="_wp_format_quote" class="screen-reader-text"><?php _e( 'Quote' ); ?>:</label>
     11                <textarea name="_wp_format_quote" placeholder="<?php esc_attr_e( 'Quote' ); ?>" class="widefat"><?php echo esc_textarea( $format_meta['quote'] ); ?></textarea>
     12        </div>
     13
     14        <div class="field wp-format-quote">
     15                <label for="_wp_format_quote_source" class="screen-reader-text"><?php _e( 'Quote source' ); ?>:</label>
     16                <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" />
     17        </div>
     18
     19        <?php
     20        $image = false;
     21        if ( isset( $format_meta['image'] ) )
     22                $image = is_numeric( $format_meta['image'] ) ? wp_get_attachment_url( $format_meta['image'] ) : $format_meta['image'];
     23        ?>
     24        <div class="field wp-format-image">
     25                <div data-format="image" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
     26                        <a href="#" class="wp-format-media-select"
     27                                data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
     28                                data-update="<?php esc_attr_e( 'Select Image' ); ?>">
     29                                <?php
     30                                        if ( $image )
     31                                                echo '<img src="' . esc_url( $image ) . '" />';
     32                                        else
     33                                                _e( 'Select Image' );
     34                                ?>
     35                        </a>
     36                </div>
     37                <label for="_wp_format_image" class="screen-reader-text"><?php _e( 'Image URL' ); ?>:</label>
     38                <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" />
     39        </div>
     40
     41        <div class="field wp-format-link wp-format-quote wp-format-image">
     42                <label for="_wp_format_url" class="screen-reader-text"><?php _e( 'Link URL' ); ?>:</label>
     43                <input type="text" name="_wp_format_url" value="<?php echo esc_url( $format_meta['url'] ); ?>" placeholder="<?php esc_attr_e( 'Link URL' ); ?>" class="widefat" />
     44        </div>
     45
     46        <div class="field wp-format-gallery">
     47                <div data-format="gallery" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
     48                        <a href="#" class="wp-format-media-select"
     49                                data-choose="<?php esc_attr_e( 'Choose an Image' ); ?>"
     50                                data-update="<?php esc_attr_e( 'Select Image' ); ?>">
     51                                <?php
     52                                        if ( $image )
     53                                                echo '<img src="' . esc_url( $image ) . '" />';
     54                                        else
     55                                                _e( 'Select Image' );
     56                                ?>
     57                        </a>
     58                </div>
     59                <label for="_wp_format_gallery" class="screen-reader-text"><?php _e( 'Gallery Shortcode' ); ?>:</label>
     60                <input id="wp_format_gallery" type="hidden" name="_wp_format_gallery" value="<?php echo esc_url( $format_meta['gallery'] ); ?>" placeholder="<?php esc_attr_e( 'Gallery Shortcode' ); ?>" class="widefat" />
     61        </div>
     62
     63        <?php
     64        $show_video_preview = ! empty( $format_meta['video'] );
     65        ?>
     66        <div class="field wp-format-video<?php if ( $show_video_preview ) echo ' has-media-preview' ?>">
     67                <?php if ( $show_video_preview ): ?>
     68                <div id="video-preview">
     69                        <?php
     70                                if ( is_numeric( $format_meta['video'] ) ) {
     71                                        $url = wp_get_attachment_url( $format_meta['video'] );
     72                                        echo do_shortcode( sprintf( '[video src="%s"]', $url ) );
     73                                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['video'] ) ) {
     74                                        echo do_shortcode( $format_meta['video'] );
     75                                } elseif ( ! preg_match( '#<[^>]+>#', $format_meta['video'] ) ) {
     76                                        echo do_shortcode( sprintf( '[video src="%s"]', $format_meta['video'] ) );
     77                                } else {
     78                                        echo $format_meta['video'];
     79                                }
     80                        ?>
     81                        <a class="edit-format-preview" data-format="video" href="#">Update Media</a>
     82                </div>
     83                <?php endif ?>
     84                <div data-format="video" class="wp-format-media-holder hide-if-no-js<?php if ( ! $image ) echo ' empty'; ?>">
     85                        <a href="#" class="wp-format-media-select"
     86                                data-choose="<?php esc_attr_e( 'Choose a Video' ); ?>"
     87                                data-update="<?php esc_attr_e( 'Select Video' ); ?>">
     88                                <?php _e( 'Select Video From Media Library' ) ?>
     89                        </a>
     90                        <a href="#" class="wp-format-media-metaedit">
     91                                <?php $show_video_preview ? _e( 'Update Video Embed Code or URL' ) : _e( 'Update Video Embed Code or URL' ); ?>
     92                        </a>
     93                </div>
     94                <label for="_wp_format_video" class="screen-reader-text"><?php _e( 'Video Embed Code or URL' ); ?>:</label>
     95                <input id="wp_format_video" type="hidden" name="_wp_format_video" value="<?php esc_attr_e( $format_meta['video'] ); ?>" placeholder="<?php esc_attr_e( 'Video Embed Code or URL' ); ?>" class="widefat" />
     96        </div>
     97
     98        <?php
     99        $show_audio_preview = ! empty( $format_meta['audio'] );
     100        ?>
     101        <div class="field wp-format-audio<?php if ( $show_audio_preview ) echo ' has-media-preview' ?>">
     102                <?php if ( $show_audio_preview ): ?>
     103                <div id="audio-preview">
     104                        <?php
     105                                if ( is_numeric( $format_meta['audio'] ) ) {
     106                                        $url = wp_get_attachment_url( $format_meta['audio'] );
     107                                        echo do_shortcode( sprintf( '[audio src="%s"]', $url ) );
     108                                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $format_meta['audio'] ) ) {
     109                                        echo do_shortcode( $format_meta['audio'] );
     110                                } elseif ( ! preg_match( '#<[^>]+>#', $format_meta['audio'] ) ) {
     111                                        echo do_shortcode( sprintf( '[audio src="%s"]', $format_meta['audio'] ) );
     112                                } else {
     113                                        echo $format_meta['audio'];
     114                                }
     115                        ?>
     116                        <a class="edit-format-preview" data-format="audio" href="#">Update Media</a>
     117                </div>
     118                <?php endif ?>
     119                <div data-format="audio" class="wp-format-media-holder hide-if-no-js<?php if ( empty( $format_meta['audio'] ) ) echo ' empty'; ?>">
     120                        <a href="#" class="wp-format-media-select" data-choose="<?php esc_attr_e( 'Choose Audio' ); ?>" data-update="<?php esc_attr_e( 'Select Audio' ); ?>">
     121                                <?php _e( 'Select Audio From Media Library' ) ?>
     122                        </a>
     123                        <a href="#" class="wp-format-media-metaedit">
     124                                <?php $show_audio_preview ? _e( 'Update Audio Embed Code or URL' ) : _e( 'Add Audio Embed Code or URL' ); ?>
     125                        </a>
     126                </div>
     127                <label for="_wp_format_audio" class="screen-reader-text"><?php _e( 'Audio Embed Code or URL' ); ?>:</label>
     128                <input id="wp_format_audio" type="hidden" name="_wp_format_audio" value="<?php esc_attr_e( $format_meta['audio'] ); ?>" placeholder="<?php esc_attr_e( 'Audio Embed Code or URL' ); ?>" class="widefat" />
     129        </div>
     130</div>
     131 No newline at end of file

  • wp-admin/includes/post.php 

    diff --git wp-admin/includes/post.php wp-admin/includes/post.php
index 6167b3e..2bf7b2b 100644
    function edit_post( $post_data = null ) { 
    200200                update_post_meta( $post_ID, '_wp_format_url', wp_slash( esc_url_raw( wp_unslash( $post_data['_wp_format_url'] ) ) ) );
    201201        }
    202202
    203         $format_keys = array( 'quote', 'quote_source', 'image', 'gallery', 'media' );
     203        $format_keys = array( 'quote', 'quote_source', 'image', 'gallery', 'image', 'gallery', 'audio', 'video' );
    204204
    205205        foreach ( $format_keys as $key ) {
    206206                if ( isset( $post_data[ '_wp_format_' . $key ] ) )

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

    diff --git wp-admin/js/post-formats.js wp-admin/js/post-formats.js
index 75f7f90..575cf0a 100644
     
    1 (function($){
     1window.wp = window.wp || {};
     2
     3(function ($) {
     4        var mediaFrame, lastMimeType, lastMenu, mediaPreview;
     5
     6        function editPreview(format) {
     7                return '<a class="edit-format-preview" data-format="' + format + '" href="#">Update Media</a>';
     8        }
    29
    310        // Post formats selection
    4         $('.post-format-select a').on( 'click.post-format', function(e) {
    5                 var $this = $(this),
    6                         editor,
    7                         body,
    8                         format = $this.data('wp-format'),
    9                         container = $('#post-body-content');
     11        $('.post-format-select a').on( 'click.post-format', function (e) {
     12                var $this = $(this), editor, body,
     13                        format = $this.data('wp-format'), container = $('#post-body-content');
    1014
    1115                $('.post-format-select a.nav-tab-active').removeClass('nav-tab-active');
    1216                $this.addClass('nav-tab-active').blur();
    … …  
    2832                e.preventDefault();
    2933        });
    3034
     35        $('.post-formats-fields').on( 'click', '.edit-format-preview', function (e) {
     36                e.preventDefault();
     37                var elem = $(e.currentTarget);
     38
     39                if ( elem.data('format') ) {
     40                        $( '.wp-format-' + elem.data('format') + ' .wp-format-media-holder' )
     41                                .addClass('empty').show();
     42                }
     43        } );
     44
     45        $('.wp-format-media-metaedit').click(function (e) {
     46                e.preventDefault();
     47
     48                var elem = $(e.currentTarget), format, lastType, field;
     49                format = elem.parent().data('format');
     50                field = $('#wp_format_' + format);
     51                lastType = field.prop('type');
     52
     53                field.prop('type', 'hidden' === lastType ? 'text' : 'hidden');
     54        });
     55
     56        // Media selection
     57        $('.wp-format-media-select').click(function (event) {
     58                var $el = $(this), $holder, $field, mime = 'image', menu = '';
     59                event.preventDefault();
     60
     61                $holder = $el.closest('.wp-format-media-holder');
     62                $field = $('#wp_format_' + $holder.data('format') );
     63
     64                switch ( $holder.data('format') ) {
     65                case 'gallery':
     66                        menu = 'main-gallery';
     67                        break;
     68                case 'audio':
     69                        mime = 'audio';
     70                        break;
     71                case 'video':
     72                        mime = 'video';
     73                        break;
     74                }
     75
     76                if ( $('.wp-format-' + $holder.data('format') + ' .edit-format-preview').length )
     77                        $holder.hide();
     78
     79                // If the media frame already exists, reopen it.
     80                if ( mediaFrame && lastMimeType === mime && lastMenu === menu ) {
     81                        mediaFrame.open();
     82                        return;
     83                }
     84
     85                lastMimeType = mime;
     86                lastMenu = menu;
     87
     88                // Create the media frame.
     89                mediaFrame = wp.media.frames.formatMedia = wp.media({
     90                        // Set the title of the modal.
     91                        title: $el.data('choose'),
     92
     93                        // Set the menu sidebar of the modal, if applicable
     94                        toolbar: menu,
     95
     96                        // Tell the modal to show only items matching the current mime type.
     97                        library: {
     98                                type: mime
     99                        },
     100
     101                        // Customize the submit button.
     102                        button: {
     103                                // Set the text of the button.
     104                                text: $el.data('update')
     105                        }
     106                });
     107
     108                mediaPreview = function (format, url, mime) {
     109                        $('#' + format + '-preview').remove();
     110                        $holder.before( '<div id="' + format + '-preview"><' + format + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' +
     111                                '<source type="' + mime + '" src="' + url + '" />' +
     112                                '</' + format + '> ' + editPreview(format) + '</div>' );
     113                        $('.wp-' + format + '-shortcode').mediaelementplayer();
     114                };
     115
     116                // When an image is selected, run a callback.
     117                mediaFrame.on( 'select', function () {
     118                        // Grab the selected attachment.
     119                        var attachment = mediaFrame.state().get('selection').first(), mime, url, id;
     120
     121                        id = attachment.get('id');
     122                        url = attachment.get('url');
     123                        mime = attachment.get('mime');
     124
     125                        if ( 0 === mime.indexOf('audio') ) {
     126                                $field.attr('value', id);
     127                                // show one preview at a time
     128                                mediaPreview('audio', url, mime);
     129                                // hide the upload trigger
     130                                $holder.hide();
     131                        } else if ( 0 === mime.indexOf('video') ) {
     132                                $field.attr('value', id);
     133                                // show one preview at a time
     134                                mediaPreview('video', url, mime);
     135                                // hide the upload trigger
     136                                $holder.hide();
     137                        } else if ( 0 === mime.indexOf('gallery') ) {
     138
     139                        } else {
     140                                // set the hidden input's value
     141                                $field.attr('value', id);
     142                                // Show the image in the placeholder
     143                                $el.html('<img src="' + url + '" />');
     144                                $holder.removeClass('empty').show();
     145                        }
     146                });
     147
     148                mediaFrame.open();
     149        });
    31150})(jQuery);

  • wp-includes/post-formats.php 

    diff --git wp-includes/post-formats.php wp-includes/post-formats.php
index ec68932..2fc1b9f 100644
    function get_post_format_meta( $post_id = 0 ) { 
    8484                'quote'        => '',
    8585                'quote_source' => '',
    8686                'url'          => '',
    87                 'media'        => '',
     87                'image'        => '',
     88                'gallery'      => '',
     89                'audio'        => '',
     90                'video'        => '',
    8891        );
    8992
    9093        foreach ( $values as $key => $value )
    … … function post_formats_compat( $content, $id = 0 ) { 
    355358                case 'video':
    356359                case 'audio':
    357360                        if ( ! has_shortcode( $post->post_content, $format ) && ! empty( $meta['media'] ) ) {
     361                                // the metadata is an attachment ID
     362                                if ( is_numeric( $meta['media'] ) ) {
     363                                        $url = wp_get_attachment_url( $meta['media'] );
     364                                        $format_output .= sprintf( '[%s src="%s"]', $format, $url );
    358365                                // the metadata is a shortcode or an embed code
    359                                 if ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['media'] ) || preg_match( '#<[^>]+>#', $meta['media'] ) ) {
     366                                } elseif ( preg_match( '/' . get_shortcode_regex() . '/s', $meta['media'] ) || preg_match( '#<[^>]+>#', $meta['media'] ) ) {
    360367                                        $format_output .= $meta['media'];
    361368                                } elseif ( ! stristr( $content, $meta['media'] ) ) {
    362369                                        // attempt to embed the URL