WordPress.org

Make WordPress Core

Ticket #19570: 19570.7.diff

File 19570.7.diff, 10.7 KB (added by lessbloat, 13 months ago)
  • wp-admin/js/post-formats.js

     
    11window.wp = window.wp || {}; 
    22 
    33(function($){ 
    4         var imageFrame; 
     4        var imageFrame, 
     5                postFormatSelection = $('.post-format-selection'); 
    56 
     7        // Post formats dropdown 
     8        postFormatSelection.on('focusin mouseenter', function () { 
     9                $(this).addClass('open'); 
     10        }).on('focusout mouseleave', function () { 
     11                $(this).removeClass('open'); 
     12        }); 
     13 
    614        // Post formats selection 
    7         $('.post-format-select a').on( 'click', function(e){ 
     15        postFormatSelection.find('a').on( 'click', function(e){ 
    816                e.preventDefault(); 
    917                var $this = $(this), 
    1018                        format = $this.data('wpFormat'); 
    11                 $('.post-format-select a.nav-tab-active').removeClass('nav-tab-active'); 
    12                 $this.addClass('nav-tab-active').blur(); 
     19 
     20                postFormatSelection.removeClass('open').find('.selected').removeClass(currentPostFormat).addClass(format); 
    1321                $('#post_format').val(format); 
    1422                $('#post-body-content').attr('class', 'wp-format-' + format ); 
     23                $('#title').focus(); 
     24 
     25                currentPostFormat = format; 
    1526        }); 
    1627 
    1728        // Image selection 
  • wp-admin/edit-form-advanced.php

     
    330330?> 
    331331 
    332332<div id="poststuff"> 
     333<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>"> 
     334<div id="post-body-content"<?php echo $format_class; ?>> 
    333335 
    334 <?php 
    335 if ( post_type_supports( $post_type, 'post-formats' ) ) { 
    336         $all_post_formats = get_post_format_strings(); 
     336<?php if ( post_type_supports($post_type, 'title') ) { ?> 
     337<div id="titlediv"> 
     338<div class="title-container"> 
     339        <?php 
     340        if ( post_type_supports( $post_type, 'post-formats' ) ) { 
     341                $all_post_formats = get_post_format_strings(); 
     342                $post_format_options = ''; 
    337343 
    338         echo '<h2 class="nav-tab-wrapper post-format-select">'; 
     344                foreach ( $all_post_formats as $slug => $label ) { 
     345                        $class = ''; 
     346                        if ( $post_format == $slug ) { 
     347                                $class = 'active'; 
     348                                $active_post_type_slug = $slug; 
     349                                $active_post_type_label = $label; 
     350                        } 
    339351 
    340         foreach ( $all_post_formats as $slug => $label ) { 
    341                 if ( $post_format == $slug ) 
    342                         $class = 'nav-tab nav-tab-active'; 
    343                 else 
    344                         $class = 'nav-tab'; 
    345  
    346                 echo '<a class="' . $class . '" href="?format=' . $slug . '" data-wp-format="' . $slug . '">' . $label . '</a>'; 
     352                        $post_format_options .= '<a class="' . $class . '" href="?format=' . $slug . '" data-wp-format="' . $slug . '" title="' . sprintf( __( '%s format' ), $slug ) . '"><span class="' . $slug . '"></span>' . $label . '</a>'; 
     353                } 
    347354        } 
     355        ?> 
     356        <div class="post-format-selection" tabindex="0" title="<?php _e( 'Select a post format' ); ?>"> 
     357                <div class="current-post-format"> 
     358                        <div class="selected <?php echo esc_attr( $active_post_type_slug ); ?>"> 
     359                                <?php echo esc_html( $active_post_type_label ); ?> 
     360                        </div> 
     361                </div> 
     362                <div class="post-format-options"> 
     363                        <?php echo $post_format_options; ?> 
     364                </div> 
     365        </div> 
    348366 
    349         echo '</h2>'; 
    350 } 
    351 ?> 
    352  
    353 <div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>"> 
    354 <div id="post-body-content"<?php echo $format_class; ?>> 
    355  
    356 <?php if ( post_type_supports($post_type, 'title') ) { ?> 
    357 <div id="titlediv"> 
    358 <div id="titlewrap"> 
    359         <label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo apply_filters( 'enter_title_here', __( 'Enter title here' ), $post ); ?></label> 
    360         <input type="text" name="post_title" size="30" value="<?php echo esc_attr( htmlspecialchars( $post->post_title ) ); ?>" id="title" autocomplete="off" /> 
     367        <div id="titlewrap"> 
     368                <label class="screen-reader-text" id="title-prompt-text" for="title"><?php echo apply_filters( 'enter_title_here', __( 'Enter title here' ), $post ); ?></label> 
     369                <input type="text" name="post_title" size="30" value="<?php echo esc_attr( htmlspecialchars( $post->post_title ) ); ?>" id="title" autocomplete="off" /> 
     370        </div> 
    361371</div> 
    362372<div class="inside"> 
    363373<?php 
     
    528538 
    529539<?php if ( (isset($post->post_title) && '' == $post->post_title) || (isset($_GET['message']) && 2 > $_GET['message']) ) : ?> 
    530540<script type="text/javascript"> 
    531 try{document.post.title.focus();}catch(e){} 
     541try{document.post.title.focus();}catch(e){}; 
     542var currentPostFormat = '<?php echo esc_html( $active_post_type_slug ); ?>'; 
    532543</script> 
    533544<?php endif; ?> 
  • wp-admin/css/wp-admin.css

     
    333316.0 - Themes 
    3434        16.1 - Custom Header 
    3535        16.2 - Custom Background 
    36         16.3 - Tabbed Admin Screen Interface 
     36        16.3 - Post Format Selection 
    373717.0 - Plugins 
    383818.0 - Users 
    393919.0 - Tools 
     
    29762976        float: left; 
    29772977} 
    29782978 
     2979.title-container { 
     2980        position: relative; 
     2981        height: 40px; 
     2982} 
     2983 
    29792984#titlediv { 
    29802985        position: relative; 
    2981         margin-bottom: 10px; 
     2986        margin: -1px 0 0; 
    29822987} 
    29832988 
    29842989#titlediv label { 
     
    29912996 
    29922997#poststuff #titlewrap { 
    29932998        border: 0; 
    2994         padding: 0; 
     2999        position: absolute; 
     3000        right: 1px; 
     3001        left: 0; 
     3002        padding-left: 40px; 
     3003        top: 0; 
    29953004} 
    29963005 
    29973006#titlediv #title { 
    2998         padding: 3px 8px; 
    29993007        font-size: 1.7em; 
    3000         line-height: 100%; 
     3008        height: 31px; 
    30013009        width: 100%; 
     3010        padding-left: 6px; 
    30023011        outline: none; 
     3012        -webkit-border-top-left-radius: 0; 
     3013        -webkit-border-bottom-left-radius: 0; 
     3014        border-top-left-radius: 0; 
     3015        border-bottom-left-radius: 0; 
    30033016} 
    30043017 
    30053018#titlediv #title-prompt-text, 
     
    30423055#edit-slug-box { 
    30433056        line-height: 23px; 
    30443057        min-height: 23px; 
    3045         margin-top: 5px; 
     3058        margin: 5px 0 10px; 
    30463059        padding: 0 10px; 
    30473060} 
    30483061 
     
    53035316 
    53045317 
    53055318/*------------------------------------------------------------------------------ 
    5306   16.3 - Tabbed Admin Screen Interface (Experimental) 
     5319  16.3 - Post format selection 
    53075320------------------------------------------------------------------------------*/ 
    53085321 
    5309 .nav-tab { 
    5310         border-style: solid; 
    5311         border-width: 1px 1px 0; 
    5312         color: #aaa; 
    5313         text-shadow: #fff 0 1px 0; 
    5314         font-size: 12px; 
    5315         line-height: 16px; 
    5316         display: inline-block; 
    5317         padding: 4px 14px 6px; 
    5318         text-decoration: none; 
    5319         margin: 0 6px -1px 0; 
     5322.post-format-selection { 
     5323        background: #fefefe; 
     5324        background-image: -webkit-gradient(linear, left bottom, left top, from(#fefefe), to(#f5f5f5)); 
     5325        background-image: -webkit-linear-gradient(bottom, #fefefe, #f5f5f5); 
     5326        background-image:    -moz-linear-gradient(bottom, #fefefe, #f5f5f5); 
     5327        background-image:      -o-linear-gradient(bottom, #fefefe, #f5f5f5); 
     5328        background-image: linear-gradient(to top, #fefefe, #f5f5f5); 
     5329        border-left: 1px solid #dfdfdf; 
     5330        border-top: 1px solid #dfdfdf; 
     5331        border-bottom: 1px solid #dfdfdf; 
     5332        width: 40px; 
     5333        height: 29px; 
    53205334        -webkit-border-top-left-radius: 3px; 
    5321         -webkit-border-top-right-radius: 3px; 
     5335        -webkit-border-bottom-left-radius: 3px; 
    53225336        border-top-left-radius: 3px; 
    5323         border-top-right-radius: 3px; 
     5337        border-bottom-left-radius: 3px; 
     5338        margin-top: 1px; 
     5339        position: absolute; 
     5340        z-index: 1000; 
    53245341} 
    53255342 
    5326 .nav-tab-active { 
    5327         border-width: 1px; 
    5328         color: #464646; 
     5343.post-format-selection.open { 
     5344        background: #eeeeee; 
     5345        border-top: 1px solid #c9c9c9; 
     5346        border-left: 1px solid #c9c9c9; 
     5347        border-bottom: 1px solid transparent; 
     5348        -webkit-border-bottom-left-radius: 0; 
     5349        border-bottom-left-radius: 0; 
    53295350} 
    53305351 
    5331 h2.nav-tab-wrapper, h3.nav-tab-wrapper { 
    5332         border-bottom-width: 1px; 
    5333         border-bottom-style: solid; 
    5334         padding-bottom: 0; 
     5352.post-format-selection.open .post-format-options { 
     5353        display: block; 
    53355354} 
    53365355 
    5337 h2 .nav-tab { 
    5338         padding: 4px 10px 6px; 
    5339         font-weight: 200; 
    5340         font-size: 20px; 
    5341         line-height: 24px; 
     5356.post-format-selection .selected { 
     5357        opacity: 0.6; 
     5358        padding: 7px 8px 3px; 
     5359        text-indent: -10000px; 
     5360} 
    53425361 
     5362.post-format-selection .standard { 
     5363        background: url(../images/post-formats.png) no-repeat -2px -2px; 
    53435364} 
    53445365 
     5366.post-format-selection .image { 
     5367        background: url(../images/post-formats.png) no-repeat -33px -2px; 
     5368} 
    53455369 
     5370.post-format-selection .gallery { 
     5371        background: url(../images/post-formats.png) no-repeat -66px -2px; 
     5372} 
     5373 
     5374.post-format-selection .audio { 
     5375        background: url(../images/post-formats.png) no-repeat -98px -2px; 
     5376} 
     5377 
     5378.post-format-selection .video { 
     5379        background: url(../images/post-formats.png) no-repeat -130px -2px; 
     5380} 
     5381 
     5382.post-format-selection .chat { 
     5383        background: url(../images/post-formats.png) no-repeat -162px -2px; 
     5384} 
     5385 
     5386.post-format-selection .status { 
     5387        background: url(../images/post-formats.png) no-repeat -194px -2px; 
     5388} 
     5389 
     5390.post-format-selection .aside { 
     5391        background: url(../images/post-formats.png) no-repeat -226px -2px; 
     5392} 
     5393 
     5394.post-format-selection .quote { 
     5395        background: url(../images/post-formats.png) no-repeat -258px -2px; 
     5396} 
     5397 
     5398.post-format-selection .link { 
     5399        background: url(../images/post-formats.png) no-repeat -290px -2px; 
     5400} 
     5401 
     5402.post-format-selection .current-post-format { 
     5403        background: transparent url(../images/arrows.png) no-repeat 21px 6px; 
     5404        border-left: 1px solid #fefefe; 
     5405        border-right: 1px solid #fefefe; 
     5406        border-top: 1px solid #fefefe; 
     5407        -webkit-border-top-left-radius: 3px; 
     5408        -webkit-border-bottom-left-radius: 3px; 
     5409        border-top-left-radius: 3px; 
     5410        border-bottom-left-radius: 3px; 
     5411} 
     5412 
     5413.post-format-selection.open .current-post-format { 
     5414        background: #eeeeee url(../images/arrows.png) no-repeat 21px -29px; 
     5415        border: 1px solid transparent; 
     5416} 
     5417 
     5418.post-format-options { 
     5419        background: #ffffff; 
     5420        border-left: 1px solid #cccccc; 
     5421        border-right: 1px solid #cccccc; 
     5422        display: none; 
     5423        position: absolute; 
     5424        top: 30px; 
     5425        left: -1px; 
     5426        width: 150px; 
     5427        z-index: 100000; 
     5428        -webkit-border-bottom-left-radius: 3px; 
     5429        -webkit-border-bottom-right-radius: 3px; 
     5430        border-bottom-left-radius: 3px; 
     5431        border-bottom-right-radius: 3px; 
     5432        box-shadow: 2px 2px 3px rgba(0,0,0,0.1); 
     5433} 
     5434 
     5435.post-format-options a { 
     5436        border-bottom: 1px solid #eee; 
     5437        display: block; 
     5438        padding: 9px 7px 8px 32px; 
     5439        position: relative; 
     5440        text-decoration: none; 
     5441} 
     5442 
     5443.post-format-options a:last-child { 
     5444        border-bottom: 1px solid #cccccc; 
     5445        -webkit-border-bottom-left-radius: 3px; 
     5446        -webkit-border-bottom-right-radius: 3px; 
     5447        border-bottom-left-radius: 3px; 
     5448        border-bottom-right-radius: 3px; 
     5449} 
     5450 
     5451.post-format-options a:focus, 
     5452.post-format-options a:hover { 
     5453        background: #eeeeee; 
     5454        border-bottom: 1px solid #dddddd; 
     5455        color: #222222; 
     5456        outline: none; 
     5457} 
     5458 
     5459.post-format-selection .post-format-options a span { 
     5460        background-position-y: 0; 
     5461        height: 24px; 
     5462        left: 0; 
     5463        opacity: 0.5; 
     5464        position: absolute; 
     5465        top: 0; 
     5466        width: 24px; 
     5467} 
     5468 
     5469.post-format-selection .post-format-options a:focus span, 
     5470.post-format-selection .post-format-options a:hover span { 
     5471        opacity: 1; 
     5472} 
     5473 
    53465474/*------------------------------------------------------------------------------ 
    53475475  17.0 - Plugins 
    53485476------------------------------------------------------------------------------*/