WordPress.org

Make WordPress Core

Ticket #24046: 24046.12.diff

File 24046.12.diff, 18.4 KB (added by wonderboymusic, 5 years ago)
  • wp-admin/css/colors-classic.css

    diff --git wp-admin/css/colors-classic.css wp-admin/css/colors-classic.css
    index 74a1060..c8963fc 100644
    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

    diff --git wp-admin/css/colors-fresh.css wp-admin/css/colors-fresh.css
    index 5aa5fa8..1941f51 100644
    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

    diff --git wp-admin/css/wp-admin.css wp-admin/css/wp-admin.css
    index 1b07b3e..883e7d0 100644
    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

    diff --git wp-admin/edit-form-advanced.php wp-admin/edit-form-advanced.php
    index d92e8c4..454e1da 100644
    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

    diff --git wp-admin/includes/post-formats.php wp-admin/includes/post-formats.php
    index 9571e55..e06d09c 100644
    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

    diff --git wp-admin/js/post-formats.js wp-admin/js/post-formats.js
    index 9344df0..1ba3104 100644
     
     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' ).parent().find( 'a.active' ).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 ) ) {
     80                if ( -1 < $.inArray( format, noUIFormats ) && -1 < $.inArray( postFormats.currentPostFormat, noUIFormats ) ) {
    6381                        switchFormatClass( format ); // No slide
    64                         $container.hide();
     82                        fields.slideUp();
    6583                } else {
    66                         $container.slideUp( 200, function(){
     84                        fields.slideUp( 400, function(){
    6785                                switchFormatClass( format );
    68                                 $container.slideDown( 400 );
     86                                if ( -1 === $.inArray( format, noUIFormats ) ) {
     87                                        fields.slideDown( 400 );
     88                                }
    6989                        });
    7090                }
    7191
    7292                resizeContent( format );
    73 
    7493                postTitle.focus();
    7594
    76                 if ( '' === postTitle.val() )
    77                         $('#title-prompt-text').removeClass('screen-reader-text');
     95                if ( '' === postTitle.val() ) {
     96                        titlePrompt.removeClass( 'screen-reader-text' );
    7897
    79                 // Update description line
    80                 description.html($this.data('description'));
     98                        postTitle.keydown( function (e) {
     99                                titlePrompt.addClass( 'screen-reader-text' );
     100                                $( e.currentTarget ).unbind( e );
     101                        } );
     102                }
    81103
    82                 if (description.not(':visible'))
    83                         description.slideDown('fast');
     104                // Update description line
     105                description.html( elem.data( 'description' ) );
     106                tinyIcon
     107                        .show()
     108                        .prop( 'className', tinyIcon.prop( 'className' ).replace( classRegex, '' ) )
     109                        .addClass( 'wp-format-' + format );
     110
     111                if ( description.not( ':visible' ) ) {
     112                        description.slideDown( 'fast' );
     113                }
    84114
    85                 if ( typeof tinymce != 'undefined' ) {
    86                         editor = tinymce.get('content');
     115                if ( tinymce ) {
     116                        editor = tinymce.get( 'content' );
    87117
    88118                        if ( editor ) {
    89119                                body = editor.getBody();
    window.wp = window.wp || {}; 
    94124
    95125                // If gallery, force it to open to gallery state
    96126                insertMediaButton.toggleClass( 'gallery', 'gallery' === format );
    97 
    98127                postFormats.currentPostFormat = format;
    99128        }
    100129
    101 
    102 
    103         $(function() {
     130        $(function () {
     131                container = $( '#post-body-content' );
     132                icon = $( '.icon32' );
     133                formatField = $( '#post_format' );
    104134                insertMediaButton = $( '#insert-media-button' ).toggleClass( 'gallery', 'gallery' === postFormats.currentPostFormat );
    105                 $container = $( '.post-formats-fields' );
    106 
    107135                initialFormat = $( '.post-format-options .active' ).data( 'wp-format' );
     136
    108137                if ( -1 < $.inArray( initialFormat, shortContentFormats ) ) {
    109138                        resizeContent( initialFormat, true );
    110139                }
    111140
    112                 $('#show_post_format_ui').on('change', function() {
    113                         $('.wp-post-format-ui').toggleClass('no-ui', ! this.checked );
     141                $( '#show_post_format_ui' ).on( 'change', function () {
     142                        $( '.wp-post-format-ui' ).toggleClass( 'no-ui', ! this.checked );
    114143                        $.post( ajaxurl, {
    115144                                action: 'show-post-format-ui',
    116                                 post_type: $('#post_type').val(),
     145                                post_type: $( '#post_type' ).val(),
    117146                                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                 });
     147                                nonce: $( '#show_post_format_ui_nonce' ).val()
     148                        } );
     149                } );
    127150
    128151                // Post formats selection
    129                 $('.post-format-options').on( 'click', 'a', function (e) {
     152                $( '.post-format-options' ).on( 'click', 'a', function (e) {
    130153                        e.preventDefault();
    131                         switchFormat($(this));
    132                 });
     154                        switchFormat( $( e.currentTarget ) );
     155                } );
    133156
    134157                // 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') );
     158                $( '.wp-format-media-select' ).click( function (e) {
     159                        e.preventDefault();
    140160
    141                         mime = $holder.data('format');
     161                        var $el = $(e.currentTarget), mediaPreview, mime = 'image', $holder, $field;
     162
     163                        $holder = $el.closest( '.wp-format-media-holder' );
     164                        $field = $( '#wp_format_' + $holder.data( 'format' ) );
     165                        mime = $holder.data( 'format' );
    142166
    143167                        // If the media frame already exists, reopen it.
    144168                        if ( mediaFrame && lastMimeType === mime ) {
    window.wp = window.wp || {}; 
    150174
    151175                        mediaFrame = wp.media.frames.formatMedia = wp.media( {
    152176                                button: {
    153                                         text: $el.data('update')
     177                                        text: $el.data( 'update' )
    154178                                },
    155179                                states: [
    156180                                        new wp.media.controller.Library({
    157181                                                library: wp.media.query( { type: mime } ),
    158                                                 title: $el.data('choose'),
     182                                                title: $el.data( 'choose' ),
    159183                                                displaySettings: 'image' === mime
    160184                                        })
    161185                                ]
    window.wp = window.wp || {}; 
    167191                                if ( 'video' === format ) {
    168192                                        if ( attachment.width ) {
    169193                                                w = attachment.width;
    170                                                 if ( w > 600 )
     194                                                if ( w > 600 ) {
    171195                                                        w = 600;
     196                                                }
    172197                                                dimensions += ' width="' + w + '"';
    173198                                        }
    174199
    175200                                        if ( attachment.height ) {
    176201                                                h = attachment.height;
    177                                                 if ( attachment.width && w < attachment.width )
     202                                                if ( attachment.width && w < attachment.width ) {
    178203                                                        h = Math.round( ( h * w ) / attachment.width );
     204                                                }
    179205                                                dimensions += ' height="' + h + '"';
    180206                                        }
    181207                                }
    182208
    183                                 $('#' + format + '-preview').remove();
     209                                $( '#' + format + '-preview' ).remove();
    184210                                $holder.parent().prepend( '<div id="' + format + '-preview" class="wp-format-media-preview">' +
    185211                                        '<' + format + dimensions + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' +
    186212                                                '<source type="' + mime + '" src="' + url + '" />' +
    187213                                        '</' + format + '></div>' );
    188                                 $('.wp-' + format + '-shortcode').mediaelementplayer();
     214                                $( '.wp-' + format + '-shortcode' ).mediaelementplayer();
    189215                        };
    190216
    191217                        // When an image is selected, run a callback.
    192                         mediaFrame.on( 'select', function() {
     218                        mediaFrame.on( 'select', function () {
    193219                                // Grab the selected attachment.
    194                                 var w = 0, h = 0, html, attachment = mediaFrame.state().get('selection').first().toJSON();
     220                                var w = 0, h = 0, html, attachment = mediaFrame.state().get( 'selection' ).first().toJSON();
    195221
    196                                 if ( 0 === attachment.mime.indexOf('audio') ) {
    197                                         $field.val(attachment.url);
     222                                if ( 0 === attachment.mime.indexOf( 'audio' ) ) {
     223                                        $field.val( attachment.url );
    198224                                        // show one preview at a time
    199                                         mediaPreview(attachment);
    200                                 } else if ( 0 === attachment.mime.indexOf('video') ) {
     225                                        mediaPreview( attachment );
     226                                } else if ( 0 === attachment.mime.indexOf( 'video' ) ) {
    201227                                        attachment.src = attachment.url;
    202                                         $field.val(wp.shortcode.string({
     228                                        $field.val( wp.shortcode.string( {
    203229                                                tag:     'video',
    204230                                                attrs: _.pick( attachment, 'src', 'width', 'height' )
    205                                         }));
     231                                        } ) );
    206232                                        // show one preview at a time
    207                                         mediaPreview(attachment);
     233                                        mediaPreview( attachment );
    208234                                } else {
    209235                                        html = wp.media.string.image({
    210                                                 align : getUserSetting('align'),
    211                                                 size : getUserSetting('imgsize'),
    212                                                 link : getUserSetting('urlbutton')
     236                                                align : getUserSetting( 'align' ),
     237                                                size : getUserSetting( 'imgsize' ),
     238                                                link : getUserSetting( 'urlbutton' )
    213239                                        }, attachment);
     240
    214241                                        // set the hidden input's value
    215                                         $field.val(html);
    216                                         $('#image-preview').remove();
    217                                         if ( attachment.width )
     242                                        $field.val( html );
     243
     244                                        $( '#image-preview' ).remove();
     245
     246                                        if ( attachment.width ) {
    218247                                                w = attachment.width > 600 ? 600 : attachment.width;
    219                                         if ( attachment.height )
     248                                        }
     249
     250                                        if ( attachment.height ) {
    220251                                                h = attachment.height;
    221                                         if ( w < attachment.width )
     252                                        }
     253
     254                                        if ( w < attachment.width ) {
    222255                                                h = Math.round( ( h * w ) / attachment.width );
     256                                        }
     257
    223258                                        $holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
    224259                                                '<img src="', attachment.url, '"',
    225260                                                w ? ' width="' + w + '"' : '',
    226261                                                h ? ' height="' + h + '"' : '',
    227262                                                ' />',
    228                                         '</div>'].join('') );
     263                                        '</div>'].join( '' ) );
    229264                                }
    230265                        });
    231266
    232267                        mediaFrame.open();
    233268                });
    234269        });
    235 })(jQuery);
     270}( jQuery ) );