WordPress.org

Make WordPress Core

Changeset 34670


Ignore:
Timestamp:
09/28/2015 08:09:19 PM (3 years 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.