WordPress.org

Make WordPress Core

Ticket #24046: 24046.14.diff

File 24046.14.diff, 19.3 KB (added by markjaquith, 5 years ago)
  • wp-admin/css/colors-classic.css

    textarea.disabled { 
    164164        color: #fff;
    165165}
    166166
     167.post-format-options,
    167168.widget .widget-top,
    168169.postbox h3,
    169170.stuffbox h3,
    table.widefat span.spam a, 
    688689        background-image: linear-gradient(to top, #eff8ff, #f7fcfe);
    689690}
    690691
     692.post-format-options,
    691693.postbox h3 {
    692694        color: #174f69;
    693695}
  • wp-admin/css/colors-fresh.css

    textarea.disabled { 
    164164        color: #fff;
    165165}
    166166
     167.post-format-options,
    167168.widget .widget-top,
    168169.postbox h3,
    169170.stuffbox h3,
    table.widefat span.spam a, 
    690691        background-image: linear-gradient(to top, #f5f5f5, #f9f9f9);
    691692}
    692693
     694.post-format-options,
    693695.postbox h3 {
    694696        color: #464646;
    695697}
  • wp-admin/css/wp-admin.css

    body .ui-tooltip { 
    40004000}
    40014001
    40024002.wp-format-status #titlewrap,
     4003.wp-format-image .wp-media-buttons .insert-media,
     4004.wp-format-audio .wp-media-buttons .insert-media,
     4005.wp-format-video .wp-media-buttons .insert-media,
    40034006.wp-format-aside .wp-media-buttons .insert-media,
    40044007.wp-format-status .wp-media-buttons .insert-media {
    40054008        display: none;
    body .ui-tooltip { 
    41014104}
    41024105
    41034106.post-format-options {
    4104         height: 50px;
     4107        border-width: 1px;
     4108        border-style: solid;
     4109        -webkit-border-radius: 3px;
     4110        border-radius: 3px;
     4111        border-color: #CCC;
    41054112        margin: 13px 0 10px;
    4106         padding: 0;
     4113        padding: 5px;
    41074114}
    41084115
    41094116.post-format-options a {
    41104117        display: inline-block;
    4111         height: 34px;
    4112         margin-right: 33px;
     4118        min-width: 62px;
     4119        padding:5px;
     4120        border:1px solid transparent;
     4121        margin-right: 10px;
    41134122        position: relative;
    41144123        text-decoration: none;
    41154124        text-align: center;
     4125        transition: opacity 0.1s linear;
     4126        opacity: 0.6;
     4127}
     4128
     4129.post-format-options:hover a {
     4130        opacity: 1.0;
     4131}
     4132.post-format-options a:hover,
     4133.post-format-options a.active {
     4134        opacity: 1.0;
     4135        background-color: #fff;
     4136        border-color: #ccc;
    41164137}
    41174138
    41184139.post-format-options a div {
    body .ui-tooltip { 
    41274148        margin-top: 4px;
    41284149}
    41294150
    4130 .post-format-change, .post-format-set .post-format-options {
     4151.post-format-set .post-format-options {
    41314152        display: none;
    41324153}
    41334154
    body .ui-tooltip { 
    41504171        width: 16px;
    41514172}
    41524173
    4153 .post-format-change span.icon.standard {
     4174.post-format-change span.icon.wp-format-standard {
    41544175        background: url(../images/post-formats.png) no-repeat -8px -8px;
    41554176}
    41564177
    4157 .post-format-change span.icon.image {
     4178.post-format-change span.icon.wp-format-image {
    41584179        background: url(../images/post-formats.png) no-repeat -40px -8px;
    41594180}
    41604181
    4161 .post-format-change span.icon.gallery {
     4182.post-format-change span.icon.wp-format-gallery {
    41624183        background: url(../images/post-formats.png) no-repeat -72px -8px;
    41634184}
    41644185
    4165 .post-format-change span.icon.audio {
     4186.post-format-change span.icon.wp-format-audio {
    41664187        background: url(../images/post-formats.png) no-repeat -104px -8px;
    41674188}
    41684189
    4169 .post-format-change span.icon.video {
     4190.post-format-change span.icon.wp-format-video {
    41704191        background: url(../images/post-formats.png) no-repeat -136px -8px;
    41714192}
    41724193
    4173 .post-format-change span.icon.chat {
     4194.post-format-change span.icon.wp-format-chat {
    41744195        background: url(../images/post-formats.png) no-repeat -168px -8px;
    41754196}
    41764197
    4177 .post-format-change span.icon.status {
     4198.post-format-change span.icon.wp-format-status {
    41784199        background: url(../images/post-formats.png) no-repeat -200px -8px;
    41794200}
    41804201
    4181 .post-format-change span.icon.aside {
     4202.post-format-change span.icon.wp-format-aside {
    41824203        background: url(../images/post-formats.png) no-repeat -232px -8px;
    41834204}
    41844205
    4185 .post-format-change span.icon.quote {
     4206.post-format-change span.icon.wp-format-quote {
    41864207        background: url(../images/post-formats.png) no-repeat -264px -8px;
    41874208}
    41884209
    4189 .post-format-change span.icon.link {
     4210.post-format-change span.icon.wp-format-link {
    41904211        background: url(../images/post-formats.png) no-repeat -296px -8px;
    41914212}
    41924213
  • wp-admin/edit-form-advanced.php

    if ( post_type_supports( $post_type, 'post-formats' ) && apply_filters( 'enable_ 
    135135        wp_enqueue_script( 'wp-mediaelement' );
    136136        wp_enqueue_style( 'wp-mediaelement' );
    137137        $post_format = get_post_format();
    138         $post_format_set_class = 'post-format-set';
    139138
    140139        if ( ! $post_format ) {
    141140                $post_format = 'standard';
    142141
    143142                if ( ! empty( $_REQUEST['format'] ) && in_array( $_REQUEST['format'], get_post_format_slugs() ) )
    144143                        $post_format = $_REQUEST['format'];
    145                 elseif ( 'auto-draft' == $post->post_status )
    146                         $post_format_set_class = '';
    147144        }
    148145
    149146        $user_wants = get_user_option( 'post_formats_' . $post_type );
    wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false ); 
    424421<div id="poststuff">
    425422<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
    426423<div id="post-body-content"<?php echo $format_class; ?>>
     424<div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
     425        <div class="post-format-change"><span class="icon <?php echo esc_attr( 'wp-format-' . $post_format ); ?>"></span> <span class="post-format-description"><?php echo $all_post_formats[$post_format]['description']; ?></span></div>
     426</div>
    427427<?php if ( post_type_supports($post_type, 'title') ) { ?>
    428428<div id="titlediv">
    429429<div id="titlewrap">
  • wp-admin/includes/post-formats.php

    wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce' 
    1010
    1111?>
    1212<div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
    13         <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>
    1413        <div class="post-formats-fields">
    1514
    1615                <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
    wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce' 
    144143                        </div>
    145144                </div>
    146145        </div>
    147 </div>
    148  No newline at end of file
     146</div>
  • wp-admin/js/post-formats.js

     
     1/*globals window, $, jQuery, document, _, postFormats, tinymce, ajaxurl, wp, getUserSetting */
     2
    13window.wp = window.wp || {};
    24
    3 (function($) {
    4         var container, $container, mediaFrame, lastMimeType, mediaPreview, lastHeight = 360, content, insertMediaButton,
     5(function ($) {
     6        "use strict";
     7
     8        var mediaFrame, insertMediaButton, container, icon, formatField,
     9                lastMimeType,
     10                classRegex = /\s?\bwp-format-[^ ]+/g,
     11                shortHeight = 120,
     12                lastHeight = 360,
    513                initialFormat = 'standard',
    614                shortClass = 'short-format',
     15                noTitleFormats = ['status'],
     16                noMediaFormats = ['status', 'aside', 'image', 'audio', 'video'],
    717                shortContentFormats = ['status', 'aside'],
    8                 noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
    9                 $screenIcon = $( '.icon32' );
    10 
     18                noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
    1119
    1220        function switchFormatClass( format ) {
    13                 container.get(0).className = container.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
    14                 container.addClass('wp-format-' + format);
    15                 $screenIcon.get(0).className = $screenIcon.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
    16                 $screenIcon.addClass('wp-format-' + format);
     21                formatField.val( format );
     22
     23                container
     24                        .prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) )
     25                        .addClass( 'wp-format-' + format );
     26
     27                icon
     28                        .prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) )
     29                        .addClass( 'wp-format-' + format );
    1730        }
    1831
    1932        function resizeContent( format, noAnimate ) {
    20                 var height;
    21 
    22                 content = $('#content, #content_ifr');
     33                var height, content = $( '#content, #content_ifr' );
    2334
    24                 height = content.height();
    25                 if ( 120 < height ) {
     35                height = content.outerHeight();
     36                if ( shortHeight < height ) {
    2637                        lastHeight = height;
    2738                }
    2839
    2940                if ( -1 < $.inArray( format, shortContentFormats ) ) {
    30                         if ( ! content.hasClass(shortClass) ) {
    31                                 content.addClass(shortClass);
    32                                 if ( noAnimate ) {
    33                                         content.each(function () {
    34                                                 $(this).css({ height : 120 });
    35                                         });
    36                                 } else {
    37                                         content.each(function () {
    38                                                 $(this).animate({ height : 120 });
    39                                         });
    40                                 }
     41                        if ( ! content.hasClass( shortClass ) ) {
     42                                content.addClass( shortClass );
     43                                _(content).each(function (elem) {
     44                                        $(elem)[noAnimate ? 'css' : 'animate']( { height : shortHeight } );
     45                                });
    4146                        }
    4247                } else {
    43                         content.removeClass(shortClass).animate({ height : lastHeight });
     48                        content.removeClass( shortClass ).animate( { height : lastHeight } );
    4449                }
    4550        }
    4651
    47         function switchFormat($this) {
    48                 var editor, body,
    49                         parent = $this.parent(),
    50                         format = $this.data('wp-format'),
    51                         description = $('.post-format-description'),
    52                         postTitle = $('#title');
     52        function switchFormat(elem) {
     53                var editor, body, formatTo, formatFrom,
     54                        format = elem.data( 'wp-format' ),
     55                        titlePrompt = $( '#title-prompt-text' ),
     56                        description = $( '.post-format-description' ),
     57                        postTitle = $( '#title'),
     58                        fields = $( '.post-formats-fields' ),
     59                        tinyIcon = $( '.post-format-change span.icon' );
     60
     61                if ( format === postFormats.currentPostFormat ) {
     62                        return;
     63                }
    5364
    54                 if ( typeof container === 'undefined' )
    55                         container = $('#post-body-content');
     65                elem.addClass( 'active' ).siblings().removeClass( 'active' );
    5666
    57                 parent.slideUp().find('a.active').removeClass('active');
    58                 $this.addClass('active');
    59                 $('#post_format').val(format);
    60                 $('.post-format-change').show().find('span.icon').removeClass(postFormats.currentPostFormat).addClass(format);
     67                // Animate the media button going away or coming back
     68                formatTo = -1 < $.inArray( format, noMediaFormats );
     69                formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noMediaFormats );
     70                if ( formatFrom ? !formatTo : formatTo ) { // XOR
     71                        insertMediaButton.fadeToggle( 200 ).css( 'display', 'inline-block' );
     72                }
     73                // Animate the title going away or coming back
     74                formatTo = -1 < $.inArray( format, noTitleFormats );
     75                formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noTitleFormats );
     76                if ( formatFrom ? !formatTo : formatTo ) { // XOR
     77                        $( '#titlewrap' ).fadeToggle( 200 );
     78                }
    6179
    62                 if ( -1 < $.inArray( format, noUIFormats ) ) {
    63                         switchFormatClass( format ); // No slide
    64                         $container.hide();
    65                 } else {
    66                         $container.slideUp( 200, function(){
     80                // Animate the fields moving going away or coming in
     81                formatTo = -1 < $.inArray( format, noUIFormats );
     82                formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noUIFormats );
     83                if ( formatTo && formatFrom ) { // To/from have no UI. No slide.
     84                        console.log( 'both no UI' );
     85                        switchFormatClass( format );
     86                        fields.hide();
     87                } else if ( formatFrom ) { // Only destination has UI. Slide down.
     88                        console.log( 'destination only' );
     89                        fields.hide();
     90                        switchFormatClass( format );
     91                        fields.slideDown( 400 );
     92                } else if ( formatTo ) { // Only source has UI. Slide up.
     93                        console.log( 'source only' );
     94                        fields.slideUp( 200, function(){
     95                                switchFormatClass( format );
     96                        });
     97                } else { // Both have UI. Slide both ways.
     98                        console.log( 'both' );
     99                        fields.slideUp( 200, function(){
    67100                                switchFormatClass( format );
    68                                 $container.slideDown( 400 );
     101                                fields.slideDown( 400 );
    69102                        });
    70103                }
    71104
    72105                resizeContent( format );
    73 
    74106                postTitle.focus();
    75107
    76                 if ( '' === postTitle.val() )
    77                         $('#title-prompt-text').removeClass('screen-reader-text');
     108                if ( '' === postTitle.val() ) {
     109                        titlePrompt.removeClass( 'screen-reader-text' );
    78110
    79                 // Update description line
    80                 description.html($this.data('description'));
     111                        postTitle.keydown( function (e) {
     112                                titlePrompt.addClass( 'screen-reader-text' );
     113                                $( e.currentTarget ).unbind( e );
     114                        } );
     115                }
    81116
    82                 if (description.not(':visible'))
    83                         description.slideDown('fast');
     117                // Update description line
     118                description.html( elem.data( 'description' ) );
     119                tinyIcon
     120                        .show()
     121                        .prop( 'className', tinyIcon.prop( 'className' ).replace( classRegex, '' ) )
     122                        .addClass( 'wp-format-' + format );
     123
     124                if ( description.not( ':visible' ) ) {
     125                        description.slideDown( 'fast' );
     126                }
    84127
    85                 if ( typeof tinymce != 'undefined' ) {
    86                         editor = tinymce.get('content');
     128                if ( tinymce ) {
     129                        editor = tinymce.get( 'content' );
    87130
    88131                        if ( editor ) {
    89132                                body = editor.getBody();
    window.wp = window.wp || {}; 
    94137
    95138                // If gallery, force it to open to gallery state
    96139                insertMediaButton.toggleClass( 'gallery', 'gallery' === format );
    97 
    98140                postFormats.currentPostFormat = format;
    99141        }
    100142
    101 
    102 
    103         $(function() {
     143        $(function () {
     144                container = $( '#post-body-content' );
     145                icon = $( '.icon32' );
     146                formatField = $( '#post_format' );
    104147                insertMediaButton = $( '#insert-media-button' ).toggleClass( 'gallery', 'gallery' === postFormats.currentPostFormat );
    105                 $container = $( '.post-formats-fields' );
    106 
    107148                initialFormat = $( '.post-format-options .active' ).data( 'wp-format' );
     149
    108150                if ( -1 < $.inArray( initialFormat, shortContentFormats ) ) {
    109151                        resizeContent( initialFormat, true );
    110152                }
    111153
    112                 $('#show_post_format_ui').on('change', function() {
    113                         $('.wp-post-format-ui').toggleClass('no-ui', ! this.checked );
     154                $( '#show_post_format_ui' ).on( 'change', function () {
     155                        $( '.wp-post-format-ui' ).toggleClass( 'no-ui', ! this.checked );
    114156                        $.post( ajaxurl, {
    115157                                action: 'show-post-format-ui',
    116                                 post_type: $('#post_type').val(),
     158                                post_type: $( '#post_type' ).val(),
    117159                                show: this.checked ? 1 : 0,
    118                                 nonce: $('#show_post_format_ui_nonce').val()
    119                         });
    120                 });
    121 
    122                 $('.post-format-change a').click(function() {
    123                         $('.post-formats-fields, .post-format-change').slideUp();
    124                         $('.post-format-options').slideDown();
    125                         return false;
    126                 });
     160                                nonce: $( '#show_post_format_ui_nonce' ).val()
     161                        } );
     162                } );
    127163
    128164                // Post formats selection
    129                 $('.post-format-options').on( 'click', 'a', function (e) {
     165                $( '.post-format-options' ).on( 'click', 'a', function (e) {
    130166                        e.preventDefault();
    131                         switchFormat($(this));
    132                 });
     167                        switchFormat( $( e.currentTarget ) );
     168                } );
    133169
    134170                // Media selection
    135                 $('.wp-format-media-select').click(function(event) {
    136                         event.preventDefault();
    137                         var $el = $(this), mime = 'image',
    138                                 $holder = $el.closest('.wp-format-media-holder'),
    139                                 $field = $( '#wp_format_' + $holder.data('format') );
     171                $( '.wp-format-media-select' ).click( function (e) {
     172                        e.preventDefault();
     173
     174                        var $el = $(e.currentTarget), mediaPreview, mime = 'image', $holder, $field;
    140175
    141                         mime = $holder.data('format');
     176                        $holder = $el.closest( '.wp-format-media-holder' );
     177                        $field = $( '#wp_format_' + $holder.data( 'format' ) );
     178                        mime = $holder.data( 'format' );
    142179
    143180                        // If the media frame already exists, reopen it.
    144181                        if ( mediaFrame && lastMimeType === mime ) {
    window.wp = window.wp || {}; 
    150187
    151188                        mediaFrame = wp.media.frames.formatMedia = wp.media( {
    152189                                button: {
    153                                         text: $el.data('update')
     190                                        text: $el.data( 'update' )
    154191                                },
    155192                                states: [
    156193                                        new wp.media.controller.Library({
    157194                                                library: wp.media.query( { type: mime } ),
    158                                                 title: $el.data('choose'),
     195                                                title: $el.data( 'choose' ),
    159196                                                displaySettings: 'image' === mime
    160197                                        })
    161198                                ]
    162199                        } );
    163200
    164                         mediaPreview = function(attachment) {
     201                        mediaPreview = function (attachment) {
    165202                                var w, h, dimensions = '', url = attachment.url, mime = attachment.mime, format = attachment.type;
    166203
    167204                                if ( 'video' === format ) {
    168205                                        if ( attachment.width ) {
    169206                                                w = attachment.width;
    170                                                 if ( w > 600 )
     207                                                if ( w > 600 ) {
    171208                                                        w = 600;
     209                                                }
    172210                                                dimensions += ' width="' + w + '"';
    173211                                        }
    174212
    175213                                        if ( attachment.height ) {
    176214                                                h = attachment.height;
    177                                                 if ( attachment.width && w < attachment.width )
     215                                                if ( attachment.width && w < attachment.width ) {
    178216                                                        h = Math.round( ( h * w ) / attachment.width );
     217                                                }
    179218                                                dimensions += ' height="' + h + '"';
    180219                                        }
    181220                                }
    182221
    183                                 $('#' + format + '-preview').remove();
     222                                $( '#' + format + '-preview' ).remove();
    184223                                $holder.parent().prepend( '<div id="' + format + '-preview" class="wp-format-media-preview">' +
    185224                                        '<' + format + dimensions + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' +
    186225                                                '<source type="' + mime + '" src="' + url + '" />' +
    187226                                        '</' + format + '></div>' );
    188                                 $('.wp-' + format + '-shortcode').mediaelementplayer();
     227                                $( '.wp-' + format + '-shortcode' ).mediaelementplayer();
    189228                        };
    190229
    191230                        // When an image is selected, run a callback.
    192                         mediaFrame.on( 'select', function() {
     231                        mediaFrame.on( 'select', function () {
    193232                                // Grab the selected attachment.
    194                                 var w = 0, h = 0, html, attachment = mediaFrame.state().get('selection').first().toJSON();
     233                                var w = 0, h = 0, html, attachment = mediaFrame.state().get( 'selection' ).first().toJSON();
    195234
    196                                 if ( 0 === attachment.mime.indexOf('audio') ) {
    197                                         $field.val(attachment.url);
     235                                if ( 0 === attachment.mime.indexOf( 'audio' ) ) {
     236                                        $field.val( attachment.url );
    198237                                        // show one preview at a time
    199                                         mediaPreview(attachment);
    200                                 } else if ( 0 === attachment.mime.indexOf('video') ) {
     238                                        mediaPreview( attachment );
     239                                } else if ( 0 === attachment.mime.indexOf( 'video' ) ) {
    201240                                        attachment.src = attachment.url;
    202                                         $field.val(wp.shortcode.string({
     241                                        $field.val( wp.shortcode.string( {
    203242                                                tag:     'video',
    204243                                                attrs: _.pick( attachment, 'src', 'width', 'height' )
    205                                         }));
     244                                        } ) );
    206245                                        // show one preview at a time
    207                                         mediaPreview(attachment);
     246                                        mediaPreview( attachment );
    208247                                } else {
    209248                                        html = wp.media.string.image({
    210                                                 align : getUserSetting('align'),
    211                                                 size : getUserSetting('imgsize'),
    212                                                 link : getUserSetting('urlbutton')
     249                                                align : getUserSetting( 'align' ),
     250                                                size : getUserSetting( 'imgsize' ),
     251                                                link : getUserSetting( 'urlbutton' )
    213252                                        }, attachment);
     253
    214254                                        // set the hidden input's value
    215                                         $field.val(html);
    216                                         $('#image-preview').remove();
    217                                         if ( attachment.width )
     255                                        $field.val( html );
     256
     257                                        $( '#image-preview' ).remove();
     258
     259                                        if ( attachment.width ) {
    218260                                                w = attachment.width > 600 ? 600 : attachment.width;
    219                                         if ( attachment.height )
     261                                        }
     262
     263                                        if ( attachment.height ) {
    220264                                                h = attachment.height;
    221                                         if ( w < attachment.width )
     265                                        }
     266
     267                                        if ( w < attachment.width ) {
    222268                                                h = Math.round( ( h * w ) / attachment.width );
     269                                        }
     270
    223271                                        $holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
    224272                                                '<img src="', attachment.url, '"',
    225273                                                w ? ' width="' + w + '"' : '',
    226274                                                h ? ' height="' + h + '"' : '',
    227275                                                ' />',
    228                                         '</div>'].join('') );
     276                                        '</div>'].join( '' ) );
    229277                                }
    230278                        });
    231279
    232280                        mediaFrame.open();
    233281                });
    234282        });
    235 })(jQuery);
     283}( jQuery ) );