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.

Built from https://develop.svn.wordpress.org/trunk@34670


git-svn-id: http://core.svn.wordpress.org/trunk@34634 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2015-09-28 20:10:26 +00:00
parent f7f4fb01ab
commit e976f9b503
8 changed files with 64 additions and 63 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

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.4-alpha-34669';
$wp_version = '4.4-alpha-34670';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.