WordPress.org

Make WordPress Core

Ticket #19570: admin-ui.diff

File admin-ui.diff, 16.8 KB (added by wonderboymusic, 13 months 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