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
This commit is contained in:
Helen Hou-Sandi 2015-09-28 20:09:19 +00:00
parent f261d3ac8a
commit 106f0b7b7b
3 changed files with 56 additions and 56 deletions

View File

@ -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;

View File

@ -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 = '<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";
}
@ -1318,34 +1334,16 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) {
}
}
$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";
}
}
/**
* Filter the sample permalink HTML markup.
*

View File

@ -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('<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;
}
$.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';