Skip to content

Editor: Use radio buttons for Classic Editor status #12304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
poligilad-auto wants to merge 1 commit into
base: trunk
Choose a base branch
from
+165 −38
Open

Editor: Use radio buttons for Classic Editor status #12304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 92 additions & 22 deletions src/js/_enqueues/admin/post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,8 @@ window.wp = window.wp || {};
*/
jQuery( function($) {
var stamp, visibility, $submitButtons, updateVisibility, updateText,
getPostStatusValue, setPostStatusValue, getPostStatusLabel,
ensurePublishPostStatus, removePublishPostStatus,
$textarea = $('#content'),
$document = $(document),
postId = $('#post_ID').val() || 0,
Expand Down Expand Up @@ -721,6 +723,81 @@ jQuery( function($) {
stamp = $('#timestamp').html();
visibility = $('#post-visibility-display').html();

/**
* Get the selected post status value.
*
* @ignore
*
* @return {string} Selected post status value.
*/
getPostStatusValue = function() {
return $postStatusSelect.find('input[name="post_status"]:checked').val();
};

/**
* Set the selected post status value.
*
* @ignore
*
* @param {string} value Post status value.
*
* @return {void}
*/
setPostStatusValue = function( value ) {
$postStatusSelect.find('input[name="post_status"][value="' + value + '"]').prop('checked', true);
};

/**
* Get the selected post status label.
*
* @ignore
*
* @return {string} Selected post status label.
*/
getPostStatusLabel = function() {
var $checked = $postStatusSelect.find('input[name="post_status"]:checked');

if ( ! $checked.length ) {
return '';
}

return $postStatusSelect.find('label[for="' + $checked.attr('id') + '"]').text();
};

/**
* Ensure a publish status radio exists and is selected.
*
* @ignore
*
* @param {string} label Publish status label.
*
* @return {void}
*/
ensurePublishPostStatus = function( label ) {
var $publishStatus = $postStatusSelect.find('input[name="post_status"][value="publish"]');

if ( ! $publishStatus.length ) {
$postStatusSelect.find('.post-status-options').prepend(
'<span class="post-status-option post-status-option-publish"><input type="radio" name="post_status" id="post-status-radio-publish" value="publish" /> <label for="post-status-radio-publish" class="selectit"></label><br /></span>'
);
$publishStatus = $postStatusSelect.find('input[name="post_status"][value="publish"]');
}

$publishStatus.siblings('label').text( label );
setPostStatusValue('publish');
};

/**
* Remove a dynamically added publish status radio.
*
* @ignore
*
* @return {void}
*/
removePublishPostStatus = function() {
$postStatusSelect.find('input[name="post_status"][value="publish"]').closest('.post-status-option').remove();
};

/**
* When the visibility of a post changes sub-options should be shown or hidden.
*
Expand Down Expand Up @@ -757,8 +834,8 @@ jQuery( function($) {
if ( ! $timestampdiv.length )
return true;

var attemptedDate, originalDate, currentDate, publishOn, postStatus = $('#post_status'),
optPublish = $('option[value="publish"]', postStatus), aa = $('#aa').val(),
var attemptedDate, originalDate, currentDate, publishOn, postStatusValue,
aa = $('#aa').val(),
mm = $('#mm').val(), jj = $('#jj').val(), hh = $('#hh').val(), mn = $('#mn').val();

attemptedDate = new Date( aa, mm - 1, jj, hh, mn );
Expand Down Expand Up @@ -823,41 +900,34 @@ jQuery( function($) {
// Add "privately published" to post status when applies.
if ( $postVisibilitySelect.find('input:radio:checked').val() == 'private' ) {
$('#publish').val( __( 'Update' ) );
if ( 0 === optPublish.length ) {
postStatus.append('<option value="publish">' + __( 'Privately Published' ) + '</option>');
} else {
optPublish.html( __( 'Privately Published' ) );
}
$('option[value="publish"]', postStatus).prop('selected', true);
ensurePublishPostStatus( __( 'Privately Published' ) );
$('#misc-publishing-actions .edit-post-status').hide();
} else {
if ( $('#original_post_status').val() == 'future' || $('#original_post_status').val() == 'draft' ) {
if ( optPublish.length ) {
optPublish.remove();
postStatus.val($('#hidden_post_status').val());
if ( $('#original_post_status').val() == 'future' || $('#original_post_status').val() == 'draft' || $('#original_post_status').val() == 'auto-draft' ) {
if ( $postStatusSelect.find('input[name="post_status"][value="publish"]').length ) {
removePublishPostStatus();
setPostStatusValue($('#hidden_post_status').val());
}
} else {
optPublish.html( __( 'Published' ) );
$postStatusSelect.find('input[name="post_status"][value="publish"]').siblings('label').text( __( 'Published' ) );
}
if ( postStatus.is(':hidden') )
if ( $postStatusSelect.is(':hidden') )
$('#misc-publishing-actions .edit-post-status').show();
}

// Update "Status:" to currently selected status.
$('#post-status-display').text(
// Remove any potential tags from post status text.
wp.sanitize.stripTagsAndEncodeText( $('option:selected', postStatus).text() )
wp.sanitize.stripTagsAndEncodeText( getPostStatusLabel() )
);

// Show or hide the "Save Draft" button.
if (
$('option:selected', postStatus).val() == 'private' ||
$('option:selected', postStatus).val() == 'publish'
) {
postStatusValue = getPostStatusValue();
if ( postStatusValue == 'private' || postStatusValue == 'publish' ) {
$('#save-post').hide();
} else {
$('#save-post').show();
if ( $('option:selected', postStatus).val() == 'pending' ) {
if ( postStatusValue == 'pending' ) {
$('#save-post').show().val( __( 'Save as Pending' ) );
} else {
$('#save-post').show().val( __( 'Save Draft' ) );
Expand Down Expand Up @@ -973,7 +1043,7 @@ jQuery( function($) {
$postStatusSelect.siblings('a.edit-post-status').on( 'click', function( event ) {
if ( $postStatusSelect.is( ':hidden' ) ) {
$postStatusSelect.slideDown( 'fast', function() {
$postStatusSelect.find('select').trigger( 'focus' );
$postStatusSelect.find('input[type="radio"]').first().trigger( 'focus' );
} );
$(this).hide();
}
Expand All @@ -990,7 +1060,7 @@ jQuery( function($) {
// Cancel Post Status editing and hide the options.
$postStatusSelect.find('.cancel-post-status').on( 'click', function( event ) {
$postStatusSelect.slideUp( 'fast' ).siblings( 'a.edit-post-status' ).show().trigger( 'focus' );
$('#post_status').val( $('#hidden_post_status').val() );
setPostStatusValue( $('#hidden_post_status').val() );
updateText();
event.preventDefault();
});
Expand Down
7 changes: 7 additions & 0 deletions src/wp-admin/css/edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -706,12 +706,19 @@ form#tags-filter {
font-weight: 600;
}

#post-status-select,
#post-visibility-select,
#comment-status-radio {
line-height: 1.5;
margin-top: 3px;
}

#post-status-select .post-status-options {
border: 0;
margin: 0 0 0.7em;
padding: 0;
}

#linksubmitdiv .inside, /* Old Link Manager back-compat. */
#poststuff #submitdiv .inside {
margin: 0;
Expand Down
34 changes: 18 additions & 16 deletions src/wp-admin/includes/meta-boxes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,29 +141,31 @@ function post_submit_meta_box( $post, $args = array() ) {

<div id="post-status-select" class="hide-if-js">
<input type="hidden" name="hidden_post_status" id="hidden_post_status" value="<?php echo esc_attr( ( 'auto-draft' === $post->post_status ) ? 'draft' : $post->post_status ); ?>" />
<label for="post_status" class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Set status' );
?>
</label>
<select name="post_status" id="post_status">
<fieldset id="post_status" class="post-status-options">
<legend class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Set status' );
?>
</legend>
<?php if ( 'publish' === $post->post_status ) : ?>
<option<?php selected( $post->post_status, 'publish' ); ?> value='publish'><?php _e( 'Published' ); ?></option>
<span class="post-status-option"><input type="radio" name="post_status" id="post-status-radio-publish" value="publish" <?php checked( $post->post_status, 'publish' ); ?> /> <label for="post-status-radio-publish" class="selectit"><?php _e( 'Published' ); ?></label><br /></span>
<?php elseif ( 'private' === $post->post_status ) : ?>
<option<?php selected( $post->post_status, 'private' ); ?> value='publish'><?php _e( 'Privately Published' ); ?></option>
<span class="post-status-option"><input type="radio" name="post_status" id="post-status-radio-publish" value="publish" <?php checked( $post->post_status, 'private' ); ?> /> <label for="post-status-radio-publish" class="selectit"><?php _e( 'Privately Published' ); ?></label><br /></span>
<?php elseif ( 'future' === $post->post_status ) : ?>
<option<?php selected( $post->post_status, 'future' ); ?> value='future'><?php _e( 'Scheduled' ); ?></option>
<span class="post-status-option"><input type="radio" name="post_status" id="post-status-radio-future" value="future" <?php checked( $post->post_status, 'future' ); ?> /> <label for="post-status-radio-future" class="selectit"><?php _e( 'Scheduled' ); ?></label><br /></span>
<?php endif; ?>
<option<?php selected( $post->post_status, 'pending' ); ?> value='pending'><?php _e( 'Pending Review' ); ?></option>
<span class="post-status-option"><input type="radio" name="post_status" id="post-status-radio-pending" value="pending" <?php checked( $post->post_status, 'pending' ); ?> /> <label for="post-status-radio-pending" class="selectit"><?php _e( 'Pending Review' ); ?></label><br /></span>
<?php if ( 'auto-draft' === $post->post_status ) : ?>
<option<?php selected( $post->post_status, 'auto-draft' ); ?> value='draft'><?php _e( 'Draft' ); ?></option>
<span class="post-status-option"><input type="radio" name="post_status" id="post-status-radio-draft" value="draft" <?php checked( $post->post_status, 'auto-draft' ); ?> /> <label for="post-status-radio-draft" class="selectit"><?php _e( 'Draft' ); ?></label><br /></span>
<?php else : ?>
<option<?php selected( $post->post_status, 'draft' ); ?> value='draft'><?php _e( 'Draft' ); ?></option>
<span class="post-status-option"><input type="radio" name="post_status" id="post-status-radio-draft" value="draft" <?php checked( $post->post_status, 'draft' ); ?> /> <label for="post-status-radio-draft" class="selectit"><?php _e( 'Draft' ); ?></label><br /></span>
<?php endif; ?>
</select>
<a href="#post_status" class="save-post-status hide-if-no-js button"><?php _e( 'OK' ); ?></a>
<a href="#post_status" class="cancel-post-status hide-if-no-js button-cancel"><?php _e( 'Cancel' ); ?></a>
</fieldset>
<p>
<a href="#post_status" class="save-post-status hide-if-no-js button"><?php _e( 'OK' ); ?></a>
<a href="#post_status" class="cancel-post-status hide-if-no-js button-cancel"><?php _e( 'Cancel' ); ?></a>
</p>
</div>
<?php
}
Expand Down
48 changes: 48 additions & 0 deletions tests/phpunit/tests/admin/includesMetaBoxes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<?php

/**
* @group admin
*/
class Tests_Admin_IncludesMetaBoxes extends WP_UnitTestCase {
protected static $admin_id;

public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
self::$admin_id = $factory->user->create( array( 'role' => 'administrator' ) );
}

public function set_up() {
parent::set_up();

require_once ABSPATH . 'wp-admin/includes/meta-boxes.php';

wp_set_current_user( self::$admin_id );
}

public function test_post_submit_meta_box_status_controls_are_rendered_as_radios() {
$post = self::factory()->post->create_and_get( array( 'post_status' => 'draft' ) );
$output = $this->get_post_submit_meta_box_output( $post );

$this->assertStringNotContainsString( '<select name="post_status" id="post_status">', $output );
$this->assertStringContainsString( '<fieldset id="post_status" class="post-status-options">', $output );
$this->assertMatchesRegularExpression( '/<legend class="screen-reader-text">\s*Set status\s*<\/legend>/', $output );
$this->assertStringContainsString( 'type="radio" name="post_status" id="post-status-radio-pending" value="pending"', $output );
$this->assertStringContainsString( 'type="radio" name="post_status" id="post-status-radio-draft" value="draft"', $output );

$this->assertMatchesRegularExpression(
'/<fieldset id="post_status" class="post-status-options">.*post-status-radio-pending.*post-status-radio-draft.*<\/fieldset>/s',
$output
);
$this->assertMatchesRegularExpression(
'/<\/fieldset>\s*<p>\s*<a href="#post_status" class="save-post-status hide-if-no-js button">OK<\/a>\s*<a href="#post_status" class="cancel-post-status hide-if-no-js button-cancel">Cancel<\/a>\s*<\/p>/',
$output
);
}

private function get_post_submit_meta_box_output( WP_Post $post ) {
$GLOBALS['post'] = $post;

ob_start();
post_submit_meta_box( $post );
return ob_get_clean();
}
}
Loading