WordPress.org

Make WordPress Core

Changeset 34670


Ignore:
Timestamp:
09/28/15 20:09:19 (19 months ago)
Author:
helen
Message:

Edit: Remove the redundant "View Post" button-link and link the sample permalink.

Previously there were two persistent "View Post" links on an edit screen: next to the permalink and in the toolbar. This would then become three links after a post was published or updated, as a link is also included in the admin notice. This is a lot of redundancy and visual noise for a flow that is not your primary action upon starting to edit a post. The "View Post" link next to the sample permalink was particularly bad because it is styled like a button, but unlike a button, does not keep you on the current screen.

Because the permalink is now linked, there is no highlighted slug that you can click to edit, but rather just the "Edit" button.

props scribu, lessbloat, sabreuse, SergeyBiryukov, DrewAPicture, helen.
see #18306.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/edit.css

    r34637 r34670  
    114114 
    115115#editable-post-name { 
    116     background-color: #fffbcc; 
     116    font-weight: bold; 
    117117} 
    118118 
    119119#editable-post-name input { 
    120120    font-size: 13px; 
     121    font-weight: normal; 
    121122    height: 22px; 
    122123    margin: 0; 
  • trunk/src/wp-admin/includes/post.php

    r34347 r34670  
    12881288    list($permalink, $post_name) = get_sample_permalink($post->ID, $new_title, $new_slug); 
    12891289 
     1290    $view_link = false; 
     1291    $preview_target = ''; 
     1292 
    12901293    if ( current_user_can( 'read_post', $post->ID ) ) { 
    1291         $ptype = get_post_type_object( $post->post_type ); 
    1292         $view_post = $ptype->labels->view_item; 
    1293     } 
    1294  
    1295     if ( 'publish' == get_post_status( $post ) ) { 
    1296         $title = __('Click to edit this part of the permalink'); 
    1297     } else { 
    1298         $title = __('Temporary permalink. Click to edit this part.'); 
    1299     } 
    1300  
     1294        if ( 'draft' === $post->post_status ) { 
     1295            $draft_link = set_url_scheme( get_permalink( $post->ID ) ); 
     1296            $view_link = get_preview_post_link( $post, array(), $draft_link ); 
     1297            $preview_target = " target='wp-preview-{$post->ID}'"; 
     1298        } else { 
     1299            if ( 'publish' === $post->post_status ) { 
     1300                $view_link = get_permalink( $post ); 
     1301            } else { 
     1302                // Allow non-published (private, future) to be viewed at a pretty permalink. 
     1303                $view_link = str_replace( array( '%pagename%', '%postname%' ), $post->post_name, urldecode( $permalink ) ); 
     1304            } 
     1305        } 
     1306    } 
     1307 
     1308    // Permalinks without a post/page name placeholder don't have anything to edit 
    13011309    if ( false === strpos( $permalink, '%postname%' ) && false === strpos( $permalink, '%pagename%' ) ) { 
    1302         $return = '<strong>' . __('Permalink:') . "</strong>\n" . '<span id="sample-permalink" tabindex="-1">' . $permalink . "</span>\n"; 
     1310        $return = '<strong>' . __( 'Permalink:' ) . "</strong>\n"; 
     1311 
     1312        if ( false !== $view_link ) { 
     1313            $return .= '<a id="sample-permalink" href="' . esc_url( $view_link ) . '"' . $preview_target . '>' . $permalink . "</a>\n"; 
     1314        } else { 
     1315            $return .= '<span id="sample-permalink">' . $permalink . "</span>\n"; 
     1316        } 
     1317 
     1318        // Encourage a pretty permalink setting 
    13031319        if ( '' == get_option( 'permalink_structure' ) && current_user_can( 'manage_options' ) && !( 'page' == get_option('show_on_front') && $id == get_option('page_on_front') ) ) { 
    13041320            $return .= '<span id="change-permalinks"><a href="options-permalink.php" class="button button-small" target="_blank">' . __('Change Permalinks') . "</a></span>\n"; 
     
    13191335        } 
    13201336 
    1321         $post_name_html = '<span id="editable-post-name" title="' . $title . '">' . $post_name_abridged . '</span>'; 
     1337        $post_name_html = '<span id="editable-post-name">' . $post_name_abridged . '</span>'; 
    13221338        $display_link = str_replace( array( '%pagename%', '%postname%' ), $post_name_html, urldecode( $permalink ) ); 
    13231339 
    1324         $return =  '<strong>' . __( 'Permalink:' ) . "</strong>\n"; 
    1325         $return .= '<span id="sample-permalink" tabindex="-1">' . $display_link . "</span>\n"; 
     1340        $return = '<strong>' . __( 'Permalink:' ) . "</strong>\n"; 
     1341        $return .= '<span id="sample-permalink"><a href="' . esc_url( $view_link ) . '"' . $preview_target . '>' . $display_link . "</a></span>\n"; 
    13261342        $return .= '&lrm;'; // Fix bi-directional text display defect in RTL languages. 
    1327         $return .= '<span id="edit-slug-buttons"><a href="#post_name" class="edit-slug button button-small hide-if-no-js" onclick="editPermalink(' . $id . '); return false;">' . __( 'Edit' ) . "</a></span>\n"; 
     1343        $return .= '<span id="edit-slug-buttons"><button type="button" class="edit-slug button button-small hide-if-no-js">' . __( 'Edit' ) . "</button></span>\n"; 
    13281344        $return .= '<span id="editable-post-name-full">' . $post_name . "</span>\n"; 
    1329     } 
    1330  
    1331     if ( isset( $view_post ) ) { 
    1332         if ( 'draft' == $post->post_status || 'pending' == $post->post_status ) { 
    1333             $draft_link = set_url_scheme( get_permalink( $post->ID ) ); 
    1334             $preview_link = get_preview_post_link( $post, array(), $draft_link ); 
    1335             $return .= "<span id='view-post-btn'><a href='" . esc_url( $preview_link ) . "' class='button button-small' target='wp-preview-{$post->ID}'>$view_post</a></span>\n"; 
    1336         } else { 
    1337             if ( 'publish' === $post->post_status ) { 
    1338                 // View Post button should always go to the saved permalink. 
    1339                 $pretty_permalink = get_permalink( $post ); 
    1340             } else { 
    1341                 // Allow non-published (private, future) to be viewed at a pretty permalink. 
    1342                 $pretty_permalink = str_replace( array( '%pagename%', '%postname%' ), $post->post_name, urldecode( $permalink ) ); 
    1343             } 
    1344  
    1345             $return .= "<span id='view-post-btn'><a href='" . $pretty_permalink . "' class='button button-small'>$view_post</a></span>\n"; 
    1346         } 
    13471345    } 
    13481346 
  • trunk/src/wp-admin/js/post.js

    r34105 r34670  
    211211        $textarea = $('#content'), 
    212212        $document = $(document), 
    213         $editSlugWrap = $('#edit-slug-box'), 
    214213        postId = $('#post_ID').val() || 0, 
    215214        $submitpost = $('#submitpost'), 
     
    724723    function editPermalink() { 
    725724        var i, slug_value, 
     725            e, revert_e, 
    726726            c = 0, 
    727             e = $('#editable-post-name'), 
    728             revert_e = e.html(), 
    729727            real_slug = $('#post_name'), 
    730728            revert_slug = real_slug.val(), 
    731             b = $('#edit-slug-buttons'), 
    732             revert_b = b.html(), 
     729            permalink = $( '#sample-permalink' ), 
     730            permalinkOrig = permalink.html(), 
     731            permalinkInner = $( '#sample-permalink a' ).html(), 
     732            buttons = $('#edit-slug-buttons'), 
     733            buttonsOrig = buttons.html(), 
    733734            full = $('#editable-post-name-full'); 
    734735 
     
    737738        full = full.html(); 
    738739 
    739         $('#view-post-btn').hide(); 
    740         b.html('<a href="#" class="save button button-small">'+postL10n.ok+'</a> <a class="cancel" href="#">'+postL10n.cancel+'</a>'); 
    741         b.children('.save').click(function() { 
     740        permalink.html( permalinkInner ); 
     741        e = $('#editable-post-name'); 
     742        revert_e = e.html(); 
     743 
     744        buttons.html('<button type="button" class="save button-small">'+postL10n.ok+'</button> <a class="cancel" href="#">'+postL10n.cancel+'</a>'); 
     745        buttons.children('.save').click(function() { 
    742746            var new_slug = e.children('input').val(); 
    743747            if ( new_slug == $('#editable-post-name-full').text() ) { 
    744                 b.children('.cancel').click(); 
     748                buttons.children('.cancel').click(); 
    745749                return false; 
    746750            } 
     
    760764                } 
    761765 
    762                 b.html(revert_b); 
     766                buttons.html(buttonsOrig); 
     767                permalink.html(permalinkOrig); 
    763768                real_slug.val(new_slug); 
    764                 $('#view-post-btn').show(); 
     769                $( '.edit-slug' ).focus(); 
    765770            }); 
    766771            return false; 
    767772        }); 
    768773 
    769         b.children('.cancel').click(function() { 
     774        buttons.children('.cancel').click(function() { 
    770775            $('#view-post-btn').show(); 
    771776            e.html(revert_e); 
    772             b.html(revert_b); 
     777            buttons.html(buttonsOrig); 
     778            permalink.html(permalinkOrig); 
    773779            real_slug.val(revert_slug); 
     780            $( '.edit-slug' ).focus(); 
    774781            return false; 
    775782        }); 
     
    785792            // on enter, just save the new slug, don't save the post 
    786793            if ( 13 == key ) { 
    787                 b.children('.save').click(); 
     794                buttons.children('.save').click(); 
    788795                return false; 
    789796            } 
    790797            if ( 27 == key ) { 
    791                 b.children('.cancel').click(); 
     798                buttons.children('.cancel').click(); 
    792799                return false; 
    793800            } 
     
    797804    } 
    798805 
    799     if ( $editSlugWrap.length ) { 
    800         $editSlugWrap.on( 'click', function( event ) { 
    801             var $target = $( event.target ); 
    802  
    803             if ( $target.is('#editable-post-name') || $target.hasClass('edit-slug') ) { 
    804                 editPermalink(); 
    805             } 
    806         }); 
    807     } 
     806    $('#edit-slug-box').on( 'click', '.edit-slug', function() { 
     807        editPermalink(); 
     808    }); 
    808809 
    809810    wptitlehint = function(id) { 
Note: See TracChangeset for help on using the changeset viewer.