Changeset 34670

Timestamp:

09/28/2015 08:09:19 PM (9 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:

• css/edit.css (modified) (1 diff)
• includes/post.php (modified) (2 diffs)
• js/post.js (modified) (6 diffs)

trunk/src/wp-admin/css/edit.css

@@ -114 +114 @@
 
 #editable-post-name {
-    background-color: #fffbcc;
+    font-weight: bold;
 }
 
 #editable-post-name input {
     font-size: 13px;
+    font-weight: normal;
     height: 22px;
     margin: 0;

trunk/src/wp-admin/includes/post.php

@@ -1288 +1288 @@
     list($permalink, $post_name) = get_sample_permalink($post->ID, $new_title, $new_slug);
 
+    $view_link = false;
+    $preview_target = '';
+
     if ( current_user_can( 'read_post', $post->ID ) ) {
-        $ptype = get_post_type_object( $post->post_type );
-        $view_post = $ptype->labels->view_item;
-    }
-
-    if ( 'publish' == get_post_status( $post ) ) {
-        $title = __('Click to edit this part of the permalink');
-    } else {
-        $title = __('Temporary permalink. Click to edit this part.');
-    }
-
+        if ( 'draft' === $post->post_status ) {
+            $draft_link = set_url_scheme( get_permalink( $post->ID ) );
+            $view_link = get_preview_post_link( $post, array(), $draft_link );
+            $preview_target = " target='wp-preview-{$post->ID}'";
+        } else {
+            if ( 'publish' === $post->post_status ) {
+                $view_link = get_permalink( $post );
+            } else {
+                // Allow non-published (private, future) to be viewed at a pretty permalink.
+                $view_link = str_replace( array( '%pagename%', '%postname%' ), $post->post_name, urldecode( $permalink ) );
+            }
+        }
+    }
+
+    // Permalinks without a post/page name placeholder don't have anything to edit
     if ( false === strpos( $permalink, '%postname%' ) && false === strpos( $permalink, '%pagename%' ) ) {
-        $return = '<strong>' . __('Permalink:') . "</strong>\n" . '<span id="sample-permalink" tabindex="-1">' . $permalink . "</span>\n";
+        $return = '<strong>' . __( 'Permalink:' ) . "</strong>\n";
+
+        if ( false !== $view_link ) {
+            $return .= '<a id="sample-permalink" href="' . esc_url( $view_link ) . '"' . $preview_target . '>' . $permalink . "</a>\n";
+        } else {
+            $return .= '<span id="sample-permalink">' . $permalink . "</span>\n";
+        }
+
+        // Encourage a pretty permalink setting
         if ( '' == get_option( 'permalink_structure' ) && current_user_can( 'manage_options' ) && !( 'page' == get_option('show_on_front') && $id == get_option('page_on_front') ) ) {
             $return .= '<span id="change-permalinks"><a href="options-permalink.php" class="button button-small" target="_blank">' . __('Change Permalinks') . "</a></span>\n";
@@ -1319 +1335 @@
         }
 
-        $post_name_html = '<span id="editable-post-name" title="' . $title . '">' . $post_name_abridged . '</span>';
+        $post_name_html = '<span id="editable-post-name">' . $post_name_abridged . '</span>';
         $display_link = str_replace( array( '%pagename%', '%postname%' ), $post_name_html, urldecode( $permalink ) );
 
-        $return =  '<strong>' . __( 'Permalink:' ) . "</strong>\n";
-        $return .= '<span id="sample-permalink" tabindex="-1">' . $display_link . "</span>\n";
+        $return = '<strong>' . __( 'Permalink:' ) . "</strong>\n";
+        $return .= '<span id="sample-permalink"><a href="' . esc_url( $view_link ) . '"' . $preview_target . '>' . $display_link . "</a></span>\n";
         $return .= '&lrm;'; // Fix bi-directional text display defect in RTL languages.
-        $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";
+        $return .= '<span id="edit-slug-buttons"><button type="button" class="edit-slug button button-small hide-if-no-js">' . __( 'Edit' ) . "</button></span>\n";
         $return .= '<span id="editable-post-name-full">' . $post_name . "</span>\n";
-    }
-
-    if ( isset( $view_post ) ) {
-        if ( 'draft' == $post->post_status || 'pending' == $post->post_status ) {
-            $draft_link = set_url_scheme( get_permalink( $post->ID ) );
-            $preview_link = get_preview_post_link( $post, array(), $draft_link );
-            $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";
-        } else {
-            if ( 'publish' === $post->post_status ) {
-                // View Post button should always go to the saved permalink.
-                $pretty_permalink = get_permalink( $post );
-            } else {
-                // Allow non-published (private, future) to be viewed at a pretty permalink.
-                $pretty_permalink = str_replace( array( '%pagename%', '%postname%' ), $post->post_name, urldecode( $permalink ) );
-            }
-
-            $return .= "<span id='view-post-btn'><a href='" . $pretty_permalink . "' class='button button-small'>$view_post</a></span>\n";
-        }
     }
 

trunk/src/wp-admin/js/post.js

@@ -211 +211 @@
         $textarea = $('#content'),
         $document = $(document),
-        $editSlugWrap = $('#edit-slug-box'),
         postId = $('#post_ID').val() || 0,
         $submitpost = $('#submitpost'),
@@ -724 +723 @@
     function editPermalink() {
         var i, slug_value,
+            e, revert_e,
             c = 0,
-            e = $('#editable-post-name'),
-            revert_e = e.html(),
             real_slug = $('#post_name'),
             revert_slug = real_slug.val(),
-            b = $('#edit-slug-buttons'),
-            revert_b = b.html(),
+            permalink = $( '#sample-permalink' ),
+            permalinkOrig = permalink.html(),
+            permalinkInner = $( '#sample-permalink a' ).html(),
+            buttons = $('#edit-slug-buttons'),
+            buttonsOrig = buttons.html(),
             full = $('#editable-post-name-full');
 
@@ -737 +738 @@
         full = full.html();
 
-        $('#view-post-btn').hide();
-        b.html('<a href="#" class="save button button-small">'+postL10n.ok+'</a> <a class="cancel" href="#">'+postL10n.cancel+'</a>');
-        b.children('.save').click(function() {
+        permalink.html( permalinkInner );
+        e = $('#editable-post-name');
+        revert_e = e.html();
+
+        buttons.html('<button type="button" class="save button-small">'+postL10n.ok+'</button> <a class="cancel" href="#">'+postL10n.cancel+'</a>');
+        buttons.children('.save').click(function() {
             var new_slug = e.children('input').val();
             if ( new_slug == $('#editable-post-name-full').text() ) {
-                b.children('.cancel').click();
+                buttons.children('.cancel').click();
                 return false;
             }
@@ -760 +764 @@
                 }
 
-                b.html(revert_b);
+                buttons.html(buttonsOrig);
+                permalink.html(permalinkOrig);
                 real_slug.val(new_slug);
-                $('#view-post-btn').show();
+                $( '.edit-slug' ).focus();
             });
             return false;
         });
 
-        b.children('.cancel').click(function() {
+        buttons.children('.cancel').click(function() {
             $('#view-post-btn').show();
             e.html(revert_e);
-            b.html(revert_b);
+            buttons.html(buttonsOrig);
+            permalink.html(permalinkOrig);
             real_slug.val(revert_slug);
+            $( '.edit-slug' ).focus();
             return false;
         });
@@ -785 +792 @@
             // on enter, just save the new slug, don't save the post
             if ( 13 == key ) {
-                b.children('.save').click();
+                buttons.children('.save').click();
                 return false;
             }
             if ( 27 == key ) {
-                b.children('.cancel').click();
+                buttons.children('.cancel').click();
                 return false;
             }
@@ -797 +804 @@
     }
 
-    if ( $editSlugWrap.length ) {
-        $editSlugWrap.on( 'click', function( event ) {
-            var $target = $( event.target );
-
-            if ( $target.is('#editable-post-name') || $target.hasClass('edit-slug') ) {
-                editPermalink();
-            }
-        });
-    }
+    $('#edit-slug-box').on( 'click', '.edit-slug', function() {
+        editPermalink();
+    });
 
     wptitlehint = function(id) {