From 106f0b7b7bf4b250d4cc40d0054499deea3d2179 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Mon, 28 Sep 2015 20:09:19 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@34670 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/edit.css | 3 +- src/wp-admin/includes/post.php | 60 ++++++++++++++++------------------ src/wp-admin/js/post.js | 49 +++++++++++++-------------- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 003f9274d6..7eb54439b6 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -113,11 +113,12 @@ input#link_url { } #editable-post-name { - background-color: #fffbcc; + font-weight: bold; } #editable-post-name input { font-size: 13px; + font-weight: normal; height: 22px; margin: 0; width: 16em; diff --git a/src/wp-admin/includes/post.php b/src/wp-admin/includes/post.php index ec2c3904e8..218fdc42f8 100644 --- a/src/wp-admin/includes/post.php +++ b/src/wp-admin/includes/post.php @@ -1287,19 +1287,35 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) { 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 = '' . __('Permalink:') . "\n" . '' . $permalink . "\n"; + $return = '' . __( 'Permalink:' ) . "\n"; + + if ( false !== $view_link ) { + $return .= '' . $permalink . "\n"; + } else { + $return .= '' . $permalink . "\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 .= '' . __('Change Permalinks') . "\n"; } @@ -1318,34 +1334,16 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) { } } - $post_name_html = '' . $post_name_abridged . ''; + $post_name_html = '' . $post_name_abridged . ''; $display_link = str_replace( array( '%pagename%', '%postname%' ), $post_name_html, urldecode( $permalink ) ); - $return = '' . __( 'Permalink:' ) . "\n"; - $return .= '' . $display_link . "\n"; + $return = '' . __( 'Permalink:' ) . "\n"; + $return .= '' . $display_link . "\n"; $return .= '‎'; // Fix bi-directional text display defect in RTL languages. - $return .= '' . __( 'Edit' ) . "\n"; + $return .= '\n"; $return .= '' . $post_name . "\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 .= "$view_post\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 .= "$view_post\n"; - } - } - /** * Filter the sample permalink HTML markup. * diff --git a/src/wp-admin/js/post.js b/src/wp-admin/js/post.js index d9d036f0b4..c7effe01fa 100644 --- a/src/wp-admin/js/post.js +++ b/src/wp-admin/js/post.js @@ -210,7 +210,6 @@ jQuery(document).ready( function($) { sticky = '', $textarea = $('#content'), $document = $(document), - $editSlugWrap = $('#edit-slug-box'), postId = $('#post_ID').val() || 0, $submitpost = $('#submitpost'), releaseLock = true, @@ -723,25 +722,30 @@ jQuery(document).ready( function($) { // permalink 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'); // Deal with Twemoji in the post-name full.find( 'img' ).replaceWith( function() { return this.alt; } ); full = full.html(); - $('#view-post-btn').hide(); - b.html(''+postL10n.ok+' '+postL10n.cancel+''); - b.children('.save').click(function() { + permalink.html( permalinkInner ); + e = $('#editable-post-name'); + revert_e = e.html(); + + buttons.html(' '+postL10n.cancel+''); + 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; } $.post(ajaxurl, { @@ -759,18 +763,21 @@ jQuery(document).ready( function($) { }); } - 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; }); @@ -784,11 +791,11 @@ jQuery(document).ready( function($) { var key = e.keyCode || 0; // 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; } } ).keyup( function() { @@ -796,15 +803,9 @@ jQuery(document).ready( function($) { }).focus(); } - 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) { id = id || 'title';