Better UI for doing "Page on Front".

Props SergeyBiryukov, lessbloat, nacin.

see #16379


git-svn-id: http://core.svn.wordpress.org/trunk@22127 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Ryan Boren 2012-10-06 15:19:29 +00:00
parent 1baac22e9d
commit 90288a07b7
7 changed files with 292 additions and 118 deletions

View File

@ -915,8 +915,7 @@ table.diff td, table.diff th {
border-bottom-right-radius: 3px;
}
#front-page-warning,
#front-static-pages ul,
#front-static-pages .sub-option,
ul.export-filters,
.inline-editor ul.cat-checklist ul,
.categorydiv ul.categorychecklist ul,

View File

@ -2929,6 +2929,10 @@ input#link_url {
font-size: 11px;
}
#front-static-pages #edit-slug-box {
padding: 0;
}
#editable-post-name-full {
display: none;
}
@ -3414,8 +3418,7 @@ div.tabs-panel-inactive {
margin: 0;
}
#front-page-warning,
#front-static-pages ul,
#front-static-pages .sub-option,
ul.export-filters,
.inline-editor ul.cat-checklist ul,
.categorydiv ul.categorychecklist ul,
@ -4988,6 +4991,19 @@ h2 .nav-tab {
margin: -3px 3px;
}
.js.options-reading-php .if-page-on-front,
.js.options-reading-php .if-page-for-posts,
.options-reading-php .if-new-front-page {
display: none;
}
.options-reading-php .page-on-front .if-page-on-front,
.options-reading-php .page-for-posts .if-page-for-posts {
display: block;
}
.options-reading-php .new-front-page .if-new-front-page {
display: inline;
}
/*------------------------------------------------------------------------------
21.0 - Admin Footer
------------------------------------------------------------------------------*/

View File

@ -1062,6 +1062,7 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) {
global $wpdb;
$post = get_post($id);
$context = isset( $_POST['context'] ) ? $_POST['context'] : get_current_screen()->id;
list($permalink, $post_name) = get_sample_permalink($post->ID, $new_title, $new_slug);
if ( 'publish' == get_post_status( $post ) ) {
@ -1073,6 +1074,8 @@ function get_sample_permalink_html( $id, $new_title = null, $new_slug = null ) {
}
if ( false === strpos($permalink, '%postname%') && false === strpos($permalink, '%pagename%') ) {
if ( 'options-reading' == $context )
return '';
$return = '<strong>' . __('Permalink:') . "</strong>\n" . '<span id="sample-permalink" tabindex="-1">' . $permalink . "</span>\n";
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";
@ -1101,12 +1104,12 @@ 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>';
$display_link = str_replace(array('%pagename%','%postname%'), $post_name_html, $permalink);
$view_link = str_replace(array('%pagename%','%postname%'), $post_name, $permalink);
$return = '<strong>' . __('Permalink:') . "</strong>\n";
$return = ( 'options-reading' == $context ) ? __( 'Located at' ) . "\n" : '<strong>' . __( 'Permalink:' ) . "</strong>\n";
$return .= '<span id="sample-permalink" tabindex="-1">' . $display_link . "</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="editable-post-name-full">' . $post_name . "</span>\n";
if ( isset($view_post) )
if ( isset( $view_post ) && 'options-reading' != $context )
$return .= "<span id='view-post-btn'><a href='$view_link' class='button button-small'>$view_post</a></span>\n";
$return = apply_filters('get_sample_permalink_html', $return, $id, $new_title, $new_slug);
@ -1322,3 +1325,87 @@ function post_preview() {
return $url;
}
/**
* Creates new pages to be set as a front page or a page for posts in Reading Settings.
*
* @todo Make sure we are doing adequate sanitization on success, and cleanup/reset on failure.
*
* @since 3.5.0
* @access private
*/
function _create_pages_for_reading_settings() {
// If we're saving the Reading Settings screen, intercept.
if ( ! isset( $_POST['show_on_front'] ) )
return;
// If a new front page was meant to be created, go forth and create it.
if ( isset( $_POST['page_on_front'] ) && 'new' == $_POST['page_on_front'] ) {
if ( ! current_user_can( 'create_posts', 'page' ) ) {
$_POST['page_on_front'] = 0;
$_POST['show_on_front'] = 'posts';
add_settings_error( 'page_on_front', __( 'You are not allowed to create pages on this site.' ) );
}
$existing_page = get_page_by_title( stripslashes( $_POST['page_on_front_title'] ) );
// If page already exists and it's public, there's no need to create a new page
if ( $existing_page && 'publish' == $existing_page->post_status ) {
$page_id = $existing_page->ID;
} else {
$page_id = wp_insert_post( array(
'post_title' => $_POST['page_on_front_title'],
'post_type' => 'page',
'post_status' => 'publish',
'comment_status' => 'closed',
'ping_status' => 'closed',
// @todo Create some sort of a 'context' in postmeta so we know we created a page through these means.
// Consider then showing that context in the list table as a good-first-step.
), true );
}
// Make sure page_on_front is properly saved by options.php.
if ( is_wp_error( $page_id ) )
$_POST['page_on_front'] = 0;
else
$_POST['page_on_front'] = $page_id;
}
// If a page for posts was meant to be specified, update/create it.
if ( ! isset( $_POST['page_for_posts'] ) )
return;
$page_for_posts = (int) $_POST['page_for_posts'];
if ( ! $page_for_posts || ! $page = get_post( $page_for_posts, ARRAY_A ) ) {
$_POST['page_for_posts'] = 0;
return;
}
// @todo The UI (see @todo's in options-reading) should cover the next 3 conditionals,
// which means we shouldn't need to bother with setting a settings error here.
// However, we may wish to restore settings before bailing, beyond setting
// page_for_posts to 0 (which we then expect to get cleaned up by options.php).
if ( 'page' != $page['post_type'] || ! current_user_can( 'edit_post', $page_for_posts ) ) {
$_POST['page_for_posts'] = 0;
return;
}
if ( 'publish' != $page['post_status'] && ! current_user_can( 'publish_post', $page_for_posts ) ) {
$_POST['page_for_posts'] = 0;
return;
}
$args = add_magic_quotes( $page );
$args['post_title'] = $_POST['page_for_posts_title'];
$args['post_name'] = $_POST['post_name'];
$args['post_status'] = 'publish';
if ( 'auto-draft' == $page['post_status'] ) {
$args['comment_status'] = 'closed';
$args['ping_status'] = 'closed';
}
$page_id = wp_insert_post( $args, true );
if ( is_wp_error( $page_id ) )
$_POST['page_for_posts'] = 0;
}
add_filter( 'admin_init', '_create_pages_for_reading_settings' );

View File

@ -559,71 +559,6 @@ jQuery(document).ready( function($) {
});
} // end submitdiv
// permalink
if ( $('#edit-slug-box').length ) {
editPermalink = function(post_id) {
var i, 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(), full = $('#editable-post-name-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() {
var new_slug = e.children('input').val();
if ( new_slug == $('#editable-post-name-full').text() ) {
return $('.cancel', '#edit-slug-buttons').click();
}
$.post(ajaxurl, {
action: 'sample-permalink',
post_id: post_id,
new_slug: new_slug,
new_title: $('#title').val(),
samplepermalinknonce: $('#samplepermalinknonce').val()
}, function(data) {
$('#edit-slug-box').html(data);
b.html(revert_b);
real_slug.val(new_slug);
makeSlugeditClickable();
$('#view-post-btn').show();
});
return false;
});
$('.cancel', '#edit-slug-buttons').click(function() {
$('#view-post-btn').show();
e.html(revert_e);
b.html(revert_b);
real_slug.val(revert_slug);
return false;
});
for ( i = 0; i < full.length; ++i ) {
if ( '%' == full.charAt(i) )
c++;
}
slug_value = ( c > full.length / 4 ) ? '' : full;
e.html('<input type="text" id="new-post-slug" value="'+slug_value+'" />').children('input').keypress(function(e){
var key = e.keyCode || 0;
// on enter, just save the new slug, don't save the post
if ( 13 == key ) {
b.children('.save').click();
return false;
}
if ( 27 == key ) {
b.children('.cancel').click();
return false;
}
real_slug.val(this.value);
}).focus();
}
makeSlugeditClickable = function() {
$('#editable-post-name').click(function() {
$('#edit-slug-buttons').children('.edit-slug').click();
});
}
makeSlugeditClickable();
}
// word count
if ( typeof(wpWordCount) != 'undefined' ) {
$(document).triggerHandler('wpcountwords', [ co.val() ]);

View File

@ -0,0 +1,75 @@
var editPermalink, makeSlugeditClickable;
(function($){
if ( ! $('#edit-slug-box').length )
return;
editPermalink = function(post_id) {
var i, 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(),
full = $('#editable-post-name-full').html();
$('#view-post-btn').hide();
b.html('<a href="#" class="save button button-small">'+samplePermalinkL10n.ok+'</a> <a class="cancel" href="#">'+samplePermalinkL10n.cancel+'</a>');
b.children('.save').click(function() {
var new_slug = e.children('input').val();
if ( new_slug == $('#editable-post-name-full').text() ) {
return $('.cancel', '#edit-slug-buttons').click();
}
$.post(ajaxurl, {
action: 'sample-permalink',
post_id: post_id,
new_slug: new_slug,
new_title: $('#title').val(),
context: pagenow,
samplepermalinknonce: $('#samplepermalinknonce').val()
}, function(data) {
$('#edit-slug-box').html(data);
b.html(revert_b);
real_slug.val(new_slug);
makeSlugeditClickable();
$('#view-post-btn').show();
});
return false;
});
$('.cancel', '#edit-slug-buttons').click(function() {
$('#view-post-btn').show();
e.html(revert_e);
b.html(revert_b);
real_slug.val(revert_slug);
return false;
});
for ( i = 0; i < full.length; ++i ) {
if ( '%' == full.charAt(i) )
c++;
}
slug_value = ( c > full.length / 4 ) ? '' : full;
e.html('<input type="text" id="new-post-slug" value="'+slug_value+'" />').children('input').keypress(function(e){
var key = e.keyCode || 0;
// on enter, just save the new slug, don't save the post
if ( 13 == key ) {
b.children('.save').click();
return false;
}
if ( 27 == key ) {
b.children('.cancel').click();
return false;
}
real_slug.val(this.value);
}).focus();
}
makeSlugeditClickable = function() {
$('#editable-post-name').click(function() {
$('#edit-slug-buttons').children('.edit-slug').click();
});
}
makeSlugeditClickable();
})(jQuery);

View File

@ -15,6 +15,8 @@ if ( ! current_user_can( 'manage_options' ) )
$title = __( 'Reading Settings' );
$parent_file = 'options-general.php';
wp_enqueue_script( 'sample-permalink' );
/**
* Display JavaScript on the page.
*
@ -22,23 +24,26 @@ $parent_file = 'options-general.php';
*/
function options_reading_add_js() {
?>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){
var section = $('#front-static-pages'),
staticPage = section.find('input:radio[value="page"]'),
selects = section.find('select'),
check_disabled = function(){
selects.prop( 'disabled', ! staticPage.prop('checked') );
};
check_disabled();
section.find('input:radio').change(check_disabled);
<script>
jQuery(document).ready( function($) {
var section = $('#front-static-pages');
$('#show_on_front').change( function() {
var checked = $(this).prop('checked');
section.toggleClass('page-on-front', checked);
if ( checked )
$('#page_for_posts').prop('checked', true).change();
});
//]]>
$('#page_for_posts').change( function() {
section.toggleClass('page-for-posts', $(this).prop('checked'));
});
$('#page_on_front').change( function() {
section.toggleClass('new-front-page', 'new' === $(this).val());
});
});
</script>
<?php
}
add_action('admin_head', 'options_reading_add_js');
add_action( 'admin_head', 'options_reading_add_js' );
/**
* Render the blog charset setting.
@ -82,47 +87,100 @@ include( './admin-header.php' );
<form method="post" action="options.php">
<?php
settings_fields( 'reading' );
if ( ! in_array( get_option( 'blog_charset' ), array( 'utf8', 'utf-8', 'UTF8', 'UTF-8' ) ) )
add_settings_field( 'blog_charset', __( 'Encoding for pages and feeds' ), 'options_reading_blog_charset', 'reading', 'default', array( 'label_for' => 'blog_charset' ) );
wp_nonce_field( 'samplepermalink', 'samplepermalinknonce', false );
?>
<?php if ( ! get_pages() ) : ?>
<input name="show_on_front" type="hidden" value="posts" />
<table class="form-table">
<?php
if ( 'posts' != get_option( 'show_on_front' ) ) :
update_option( 'show_on_front', 'posts' );
endif;
if ( ! in_array( get_option( 'blog_charset' ), array( 'utf8', 'utf-8', 'UTF8', 'UTF-8' ) ) )
add_settings_field( 'blog_charset', __( 'Encoding for pages and feeds' ), 'options_reading_blog_charset', 'reading', 'default', array( 'label_for' => 'blog_charset' ) );
else :
if ( 'page' == get_option( 'show_on_front' ) && ! get_option( 'page_on_front' ) && ! get_option( 'page_for_posts' ) )
$classes = '';
if ( 'page' == get_option( 'show_on_front' ) ) {
if ( ! get_pages() || ! get_option( 'page_on_front' ) && ! get_option( 'page_for_posts' ) ) {
update_option( 'show_on_front', 'posts' );
?>
<table class="form-table">
} else {
$classes = 'page-on-front';
if ( get_option( 'page_for_posts' ) )
$classes .= ' page-for-posts';
}
}
$all_pages = get_pages();
$new_front_page_only = ! get_option( 'page_on_front' ) && ( ! $all_pages || ( 1 == count( $all_pages ) && __( 'sample-page' ) == $all_pages[0]->post_name ) );
if ( current_user_can( 'create_posts', 'page' ) && ! ( get_option( 'page_for_posts' ) && $page_for_posts = get_post( get_option( 'page_for_posts' ) ) ) ) {
$title = _x( 'Blog', 'default page for posts title' );
// @todo What if the found page is post_type = attachment or post_status != publish?
// We could go ahead and create a new one, but we would not be able to take over
// the slug from another page. (We could for an attachment.)
// We must also check that the user can edit this page and publish a page.
// Otherwise, we must assume they cannot create pages (throughout), and thus
// should fall back to the dropdown.
if ( ! $page_for_posts = get_page_by_path( sanitize_title( $title ) ) ) {
$page_for_posts = get_default_post_to_edit( 'page', true );
$page_for_posts->post_title = $title;
$page_for_posts->post_name = sanitize_title( $title );
}
}
if ( ! $new_front_page_only || current_user_can( 'create_posts', 'page' ) ) : ?>
<tr valign="top">
<th scope="row"><?php _e( 'Front page displays' ); ?></th>
<td id="front-static-pages"><fieldset><legend class="screen-reader-text"><span><?php _e( 'Front page displays' ); ?></span></legend>
<p><label>
<input name="show_on_front" type="radio" value="posts" class="tog" <?php checked( 'posts', get_option( 'show_on_front' ) ); ?> />
<?php _e( 'Your latest posts' ); ?>
</label>
<th scope="row"><?php _e( 'Enable a static front page' ); ?></th>
<td id="front-static-pages" class="<?php echo $classes; ?>">
<fieldset><legend class="screen-reader-text"><span><?php _e( 'Enable a static front page' ); ?></span></legend>
<p><label for="show_on_front">
<input id="show_on_front" name="show_on_front" type="checkbox" value="page" <?php checked( 'page', get_option( 'show_on_front' ) ); ?> />
<?php printf( __( 'Show a <a href="%s">page</a> instead of your latest posts' ), 'edit.php?post_type=page' ); ?>
</label></p>
<p class="if-page-on-front sub-option">
<?php if ( $new_front_page_only ) : // If no pages, or only sample page, only allow a new page to be added ?>
<label for="page_on_front_title"><?php _e( 'Add new page titled:' ); ?>
<?php else : ?>
<label for="page_on_front">
<select name="page_on_front" id="page_on_front">
<option value="0"><?php _e( '&mdash; Select &mdash;' ); ?></option>
<?php if ( current_user_can( 'create_posts', 'page' ) ) : ?>
<option value="new" id="new-page"><?php _e( '&mdash; Add new page &mdash;' ); ?></option>
<?php endif; ?>
<?php echo walk_page_dropdown_tree( $all_pages, 0, array( 'selected' => get_option( 'page_on_front' ) ) ); ?>
</select>
</label>
<?php if ( current_user_can( 'create_posts', 'page' ) ) : ?>
<label for="page_on_front_title" class="if-new-front-page"><?php _e( 'titled:' ); ?>
<?php endif; ?>
<?php endif; ?>
<?php if ( current_user_can( 'create_posts', 'page' ) ) : ?>
<input name="page_on_front_title" type="text" id="page_on_front_title" value="<?php echo esc_attr_x( 'Home', 'default page on front title' ); ?>" />
</label>
<?php endif; ?>
</p>
<p><label>
<input name="show_on_front" type="radio" value="page" class="tog" <?php checked( 'page', get_option( 'show_on_front' ) ); ?> />
<?php printf( __( 'A <a href="%s">static page</a> (select below)' ), 'edit.php?post_type=page' ); ?>
</label>
<p class="if-page-on-front"><label for="page_for_posts">
<input id="page_for_posts" name="page_for_posts" type="checkbox" value="<?php echo $page_for_posts->ID; ?>" <?php checked( (bool) get_option( 'page_for_posts' ) ); ?> />
<?php _e( 'Show latest posts on a separate page' ); ?>
</label></p>
<?php if ( current_user_can( 'create_posts', 'page' ) ) : ?>
<p class="if-page-for-posts sub-option"><label for="page_for_posts_title"><?php _e( 'Page title:' ); ?>
<input name="page_for_posts_title" type="text" id="page_for_posts_title" value="<?php echo esc_attr( htmlspecialchars( $page_for_posts->post_title ) ); ?>" />
</label></p>
<p class="if-page-for-posts sub-option" id="edit-slug-box">
<?php echo get_sample_permalink_html( $page_for_posts->ID, $page_for_posts->post_title, $page_for_posts->post_name ); ?>
</p>
<ul>
<li><label for="page_on_front"><?php printf( __( 'Front page: %s' ), wp_dropdown_pages( array( 'name' => 'page_on_front', 'echo' => 0, 'show_option_none' => __( '&mdash; Select &mdash;' ), 'option_none_value' => '0', 'selected' => get_option( 'page_on_front' ) ) ) ); ?></label></li>
<li><label for="page_for_posts"><?php printf( __( 'Posts page: %s' ), wp_dropdown_pages( array( 'name' => 'page_for_posts', 'echo' => 0, 'show_option_none' => __( '&mdash; Select &mdash;' ), 'option_none_value' => '0', 'selected' => get_option( 'page_for_posts' ) ) ) ); ?></label></li>
</ul>
<?php if ( 'page' == get_option( 'show_on_front' ) && get_option( 'page_for_posts' ) == get_option( 'page_on_front' ) ) : ?>
<div id="front-page-warning" class="error inline"><p><?php _e( '<strong>Warning:</strong> these pages should not be the same!' ); ?></p></div>
<?php endif; ?>
</fieldset></td>
<input name="post_name" type="hidden" id="post_name" value="<?php echo esc_attr( apply_filters( 'editable_slug', $page_for_posts->post_name ) ); ?>" />
<?php if ( 'page' == get_option( 'show_on_front' ) && get_option( 'page_for_posts' ) == get_option( 'page_on_front' ) ) : ?>
<div class="error inline"><p><strong><?php _e( 'ERROR:' ); ?></strong> <?php _e( 'These pages should not be the same!' ); ?></p></div>
<?php endif; ?>
</fieldset>
<?php else : // cannot create pages, so fall back to a selector of existing pages ?>
<p class="if-page-for-posts sub-option"><label for="page_for_posts">
<?php wp_dropdown_pages( array(
'name' => 'page_for_posts', 'show_option_none' => __( '&mdash; Select &mdash;' ),
'option_none_value' => '0', 'selected' => get_option( 'page_for_posts' )
) ); ?>
<?php endif; // create pages ?>
</td>
</tr>
<?php endif; ?>
<?php endif; // if no pages to choose from and can't create pages ?>
<tr valign="top">
<th scope="row"><label for="posts_per_page"><?php _e( 'Blog pages show at most' ); ?></label></th>
<td>

View File

@ -369,10 +369,14 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), false, 1 );
$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array('suggest', 'wp-lists', 'postbox'), false, 1 );
did_action( 'init' ) && $scripts->localize( 'post', 'postL10n', array(
$scripts->add( 'sample-permalink', "/wp-admin/js/sample-permalink.js", array(), false, 1 );
did_action( 'init' ) && $scripts->localize( 'sample-permalink', 'samplePermalinkL10n', array(
'ok' => __('OK'),
'cancel' => __('Cancel'),
) );
$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array('suggest', 'wp-lists', 'postbox', 'sample-permalink' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'post', 'postL10n', array(
'publishOn' => __('Publish on:'),
'publishOnFuture' => __('Schedule for:'),
'publishOnPast' => __('Published on:'),